Canvas（Pixi.js）でアニメーションを描画しているページにおいて、パフォーマンスをモニタリングしたくなったので「stats.js」を使ってみました。「stats.js」とはFPS、レンダリングにかかった時間、使用メモリをリアルタイムで表示してくれるパフォーマン…

PIXI.Container()で生成した要素の位置を動的に変えるときの方法です。API自体はこちらに用意されていて、基本はそこにアクセスして値を書き換えれば大丈夫かと思います。 位置を制御するため、x,yの値にアクセスすることができます。PixiJS API Documentati…

NuxtでPixi.jsを使った2Dアニメーションの描画をする際に、アセットの読み込みで詰まったのでメモ。PixiのPIXI.mesh.Ropeというメソッドで複数のポイントを持つテクスチャを描画したい場面があり、components内で以下のように変数stripeを定義していました。…

今月からアサインされるプロジェクトでAuth0を使った認証を使う感じになりそうだったので事前に試してみたのですが、ちょっとつまずいたところがあったのでメモ。以下の記事を参照にNuxtのSPAでAuth0を導入してみました。steady.daas.co.jp▼ 動いてるやつNux…

結構悩んだのですがどこにも解決策がなかったので書いておきます。一般的にRetina対応をする際、psdなどから画像を切り出す際、表示させるサイズの2倍で書き出し、1/2のサイズで表示させることが多いかと思います。参考： Retina対応がイマイチ分からない人…

Gtihubでの方法は簡単に見つかるのですが、Gitlabはあまり見かけなかったので書いておきます。 1. 切り替えたいリポジトリのページの左カラムの「設定」>「一般」をクリック 2. "Visibility, project features, permissions"を展開する 3. "Project visibili…

国産のヘッドレスCMS「microCMS」を使うときに、APIを叩いて取得したデータ（今回の場合個別の記事）を表示しようとすると"undefined"と怒られてしまうことがありました。そのときのコードがこちら。テンプレートで、取得した記事のタイトルを表示させようと…

developブランチとfeatureブランチのみで開発を進めていたプロジェクトで、途中ｍasterブランチを作る必要があったのですがちょっと迷ってしまったのでメモしておきます。なお、今回はSourceTreeを使います。 ローカルで「master」ブランチを作ってpushする …

今おこなっているプロジェクトでGoogle Masp APIを使ってWebサイトに地図を表示させたのですが、カンプデータとおりに地図を”正確”に表示するのにちょっとしたコツが必要だったのでメモしておきます。 cloud.google.comまず、表示自体はこのあたりの記事を参…

JavaScriptでは関数内で定義した変数は外からアクセスできないようになっている（関数スコープ）。これを利用してプライベートな空間を作れる。モジュールパターン に則ってモジュール化するメリットは以下のとおり。 機能ごとにモジュール化できるので、全…