Canvas上のオブジェクトがクリックされたか検知する

ブラウザゲームなどを開発するとき、Canvas上に描画されたオブジェクト（図形など）をクリックしたいときがある。ただEventTarget.addEventListener('click', listener)のように簡単に処理を追加できるわけではない。

そこで当記事では、「Canvas上にある四角と丸のオブジェクトをクリックしたら色がかわる」というサンプルを元に、オブジェクトのクリック判定やクリックされたときに処理を実行する方法について解説する。

Nuxt.js＋TypeScriptでプラグインの型定義を作成する

Nuxt.jsには簡単にプラグインを追加できる仕組みがある。createdやmothodsなどを拡張するmixinタイプや、ElementUIなどコンポーネントタイプ、vueインスタンスにコンテキストを注入してthisを拡張するタイプなどがあるのだが、TypeScriptと併用するとProperty $logger does not exist on type 'Store<RootState>'のようなエラーが発生する。

今回はvueインスタンスを拡張し、vueファイル（SFC）とstore内でthis.$xxxにアクセスするための型定義の作り方について紹介する。

手を動かして学ぶ Redis 入門

会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。

Redis の特徴

Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。

Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する

国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応（多言語化対応）の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。

しかし、ローカリゼーションチーム（非エンジニア）にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。

そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。
また、当記事ではNuxt.jsをメインに紹介するが、Vue.jsでも同様のことはできるので読み替えてほしい。

環境は以下の通り。

• macOS Mojave
• Nuxt.js@2.4.5 / Vue.js@2.6.8
• vue-i18n@8.8.2
• transifex-client@0.13.6

指定範囲からランダムで重複なしのn個の値を取得する（JavaScript）

JavaScriptで指定範囲からランダムな値を任意の個数取得する方法を通常とワンライナーの2種類紹介する。たとえば、「1〜100からランダムかつ重複なく50個の値を取得する」ようなことだ。

指定範囲からランダムで一意なn個の値を取得する

const pickN = (min, max, n) => {
  const list = new Array(max-min+1).fill().map((_, i) => i + min);
  const ret = [];
  while(n--) {
    const rand = Math.floor(Math.random() * (list.length + 1)) - 1;
    ret.push(...list.splice(rand, 1))
  }
  return ret;
}

const list1 = pickN(1, 100, 30);
console.log(list1);
// [47, 69, 19, 73, 27, 35, 68, 21, 88, 41, 86, 14, 50, 42, 94, 26, 2, 43, 83, 76, 57, 31, 97, 45, 84, 99, 46, 22, 9, 81]

const list2 = pickN(500, 800, 10);
console.log(list2);
// [714, 557, 523, 760, 750, 677, 632, 566, 798, 587]

new Array(max - min + 1).fill().map((_, i) => i + min)は、min〜mixまでの値が入った配列を生成している。そして、ret.push(...list.splice(rand, 1))でさきほどの配列からランダムな位置の1つの値を取得し、結果用の配列に追加している。

Canvasで任意の色に近い色をカラーパレットから取得し画像を減色する

Canvasで表現できる色は、RGBがそれぞれ0〜255の値を取るので、256*256*256の16,777,216種類ある。（※Alphaについては考えない）
そのまま表示すれば実物に近い画像になるのだが、減色したいときもある。（レトロ感をだす画像処理フィルターとか）

そこで、任意の色に近い色をカラーパレットから取得し画像を減色する方法をまとめる。

Canvasでカメラの映像に画像処理フィルターをかけて表示する方法

カメラの映像をリアルタイムに処理しドット絵っぽくしたくて、年末から画像処理学んでいき欲が再燃した。
今回はWebカメラやラップトップパソコンのカメラを使って映像を取得し、適当な画像処理フィルターをかけ、ブラウザに表示する方法をまとめる。（筆者環境はMBP）

基本: カメラの映像をブラウザに表示する

単純に表示するだけの場合は、video要素（HTMLMediaElement）とMediaStreamを使う。

<video id="camera"></video>

async function main() {
  const video = document.querySelector("video#camera");
  // MediaStreamを取得する（Promiseが返る）
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });

  video.srcObject = stream;
  // MediaStreamが取得できたら再生する
  video.onloadedmetadata = () => video.play();
}

main();

今回は映像だけを使いたいので、mediaDevices.getUserMediaに{video: true}を指定したが、音声も使いたい場合は{video: true, audio: true}のように指定する。

詳細はMediaDevices.getUserMediaを参照してください。
※ 執筆時点では日本語ドキュメントが古いため、英語ドキュメントを読んだほうが良い。

自作フレームワークをつくって学ぶ 仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。

ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！
そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。


フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。

Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法

Vue CLIで生成したNuxt.jsのプロジェクトをnpm run devでそのまま実行するとhttp://localhost:3000でサーバーが起動する。Nuxt.js単体で開発する分にはこれで問題ないのだが、他サービスが関わってくるとできればhttpsでアクセスできるようにしたい。

ということで、Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法をまとめる。

環境は以下の通り。

• macOS High Sierra
• vue-cli@3.0.1
• nuxt.js@1.4.2

HTML5＋CSS3＋JavaScriptでアナログ時計を実装する

JavaScriptしか触れないフロントエンドエンジニアになりかけていたので、CSSの練習も兼ねて、HTML5+CSS3+JavaScriptでアナログ時計を作ろうと思う。
完成図は以下のような感じだ。

[JS]クリックした位置までオブジェクトを最短距離で移動させる

シミュレーションゲームやリアルタイムストラテジーゲーム（RTS）でよくある「クリックした位置までキャラクタを移動させる」動作をJavaScript+Canvas APIで実装する。

イメージは以下のような感じ。

ゲーム開発初心者が教えるブラウザゲームのつくり方（後編）

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「後編」です。

• 発表スライド（SpeakerDeck）
• 前編: ゲーム開発初心者が教えるブラウザゲームのつくり方
• 後編: この記事

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

続き）シンプルなブラウザゲームのつくり方

ゲーム開発初心者が教えるブラウザゲームのつくり方（前編）

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。

• 発表スライド（SpeakerDeck）
• 前編: この記事
• 後編: ゲーム開発初心者が教えるブラウザゲームのつくり方

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

---

ゲーム開発初心者が教えるブラウザゲームのつくり方

[JS]ゲーム内に重力を追加し自然なジャンプモーションを実装する（3パターンで実装）

アクションゲームになくてはならない要素、それはジャンプモーション！
今回はゲーム内に重力を加え、自然なジャンプモーションを実装する。

方法としては3通りあるので、それぞれ解説していく。

• 三角関数（sin）を使う
• 月面でジャンプしているようなふんわりしたモーション
• 速度に加速度を足しこむ
• 簡単で自然なジャンプモーション
• 鉛直投げ上げの公式（y = v0t - 0.5gt^2）を使う
• より自然界に近いジャンプモーション

オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する

Canvas APIを使ってブラウザゲームやアニメーションなど複雑な描画処理を行う場合、オフスクリーン（描画領域外）Canvasにプリレンダリングし、その内容を可視領域にあるCanvas要素にコピーし表示する手法がある。

利用シーン

たとえば15個の要素からなる背景があったとする。（下図参照）
可視領域内にあるCanvasにレンダリングしていると、1フレームごとに15回の描画処理が行われる。

それをあらかじめ背景用のオフスクリーンCanvasに描画しておいて、1フレームごとに可視領域内のCanvasにコピーして描画すると、背景の描画処理は1回ですむ。
負荷の高い描画処理が15→1回になることでパフォーマンス向上が見込めるという技だ。

requestAnimationFrameの処理落ちをフレームスキップで対応する

ブラウザゲームやアニメーションを作るときなど、定期的に画面を再描画するときにはrequestAnimationFrameやsetInterval、setTimeoutが使われる。

当記事ではrequestAnimationFrameにフォーカスし、ブラウザゲームを開発する際に必要なフレームスキップ処理について紹介する。

requestAnimationFrameとsetInterval, setTimeoutは何が違うのか？

requestAnimationFrameとsetIntervalsetTimeoutには明確な違いがある。

requestAnimationFrameはブラウザの状態により実行間隔を自動で調整してくれるのに対し、
setIntervalsetTimeoutは時間どおりに実行するため、処理がすべて終わる前に次の処理が実行されてしまう。

そのため、ブラウザゲーム開発ではrequestAnimationFrameを使うことが多い。


ただ、わざとブラウザに負荷をかけたりバックグラウンドで実行させたりすると、描画を遅らせることができてしまう。このような処理落ちはゲームバランスを壊す要因になりうるため、フレームスキップ処理の実装が必要になってくる。


ということで、今回は処理落ちしたときにフレームスキップする方法を紹介する。

CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する

いつの間にかVanilla CSS（ブラウザ標準のCSS）でもSassみたいにCSS変数（CSS Variales）が使えるようになっていた。

CSS変数の何が嬉しいかというと、たとえばベースカラーを定義しておいて複数のスタイルで参照しておく。後日ベースカラーを変更したくなったらCSS変数を変更するだけで他は弄らなくてよくなりメンテがしやすくなる点だ。

[Node.js]指定したパス配下（サブディレクトリ含む）のファイル一覧を取得する

Node.jsで指定したパスにどんなファイルがあるか一覧にしたいのだが、そんな都合の良いメソッドはなかった。fs.readdirSync(path, { recursive: true })なんてオプションがあったら便利なのに。

ということで、パス一覧を取得する方法を紹介する。

環境は以下のとおり。

• Node@7.6+
• fs.readdirSyncとfs.statSyncが使えるバージョンならOK

JavaScriptとTypeScriptを共存させ、段階的に移行する方法

某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。


TypeScriptに移行して、型に守られたい！



ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。
ということでJavaScriptとTypeScriptを共存させる方法をまとめる。

環境は以下のとおり。

• webpack@4.0.1
• webpack-cli@2.0.9
• webpack v3系の場合は不要
• typescript@2.7.2
• ts-loader@4.0.0

※ あとでbabel-loaderについて追記予定です！
→ 2018/03/23 追記しました

Prettierの手の届かないところはESLintでカバーして自動整形する（prettier-eslint）

コードから手書きによるぬくもりを排除して、精神的安定を手に入れたい！

唐突だが、先日行われた「メタプログラミング勉強会@さくらインターネット」に参加して以来、「コードの整形とか人間がやる仕事じゃない！」と思うようになった。
人間の手で書くコードのぬくもりは時として作業効率を下げてしまう。だから、ぬくもりを排除したほうが精神的安定を得られるのではないかと。

ということで、今回はPrettierとESLintを併用して、保存時またはコミット前に自動フォーマットする方法をまとめる。