面白programmingtwitterFacebookgoogle+はてなtfgはふとしたきっかけで、急に「テトリス」が遊びたくなったので、いろいろ探してみたのですが良いのが見つからず...。普段からChromeブラウザを愛用していることから、「Chromeウェブストア」も検索したのですが、お手頃感のあるモノが見つからず...。結局のところ、探すのが辛くなってきたので、自分好みの気軽に遊べるテトリスを、「Chrome拡張機能」として可能な限り簡単に作ってみました。ミニマムなChrome拡張機能を作る!そもそも「Chrome拡張機能」は、誰でも簡単に作れるように設計されています。「アイコンをクリックして◯◯◯する...」みたいな拡張機能は、「HTMLファイル」「マニフェストファイル」「アイコン画像」を用意すればすぐに実現できます。「HTMLファイル」は、普通にWebページを作る時に用意するモノがあればOKで、まずは以下のミニマムなHTMLを用意します。</body></html>「アイコン画像」は好きなモノを用意するか、「pixlr」とかで適当に作っても良いでしょう。サイズは「19×19px」にしておき、「icon.png」のようなファイル名にしておきましょう。「マニフェストファイル」は、自作した拡張機能をChromeで使えるようにするためのモノですが、中身はごく簡単なJSONファイルです。}}「manifest_version」で、現在の最新版であるバージョン「2」を指定し、「name」=拡張機能の名称、「version」=拡張機能のバージョンを任意に設定すればOK!ちなみに、この3つの項目は必須事項なので、必ず明記しておきましょう。あと、「browser_action」という項目を記載することで、「アイコンをクリックして◯◯◯する...」という機能が使えるようになります。「default_icon」で、先ほど用意した画像を設定し、「default_popup」にHTMLファイルを紐付ければ完了です!ファイル名は、「manifest.json」にしておきましょう。詳しいマニフェストファイルの書き方は、Googleが公式に公開しているドキュメントが分かりやすいです。<参考>「マニフェストドキュメント」公式サイトここまでで、以下のようなファイルを作成しました。icon.pngあとは、この「app」フォルダごとChromeの「拡張機能設定ページ」へ放り込めば完成です!Chromeの上部にアイコンが表示されるので、クリックすると「テトリス」と表示されるのが分かると思います。これは、HTMLファイルの「p」要素に記載した「テトリス」の文字が表示されていることになります。簡単に言ってしまえば、アイコンをクリックしたら「body」要素を表示するようなイメージでしょう。手っ取り早く「テトリス」がしたい!とりあえず、アイコンをクリックしたら「テトリス」の文字を表示する拡張機能は完成したので、あとはココに「遊べるテトリス」が表示されれば理想的です。テトリスをゼロから実装する気力は無かったので、何か良さそうなモノを探していたら、以前にちょっと話題になったJavaScriptライブラリ「Blockrain.js」を発見!これは、ライブラリを読み込んで、簡単なコードを追加するだけで「テトリス」が遊べてしまうという、まさに今回の拡張機能作りにピッタリなものです!そこで早速、HTMLファイルにライブラリを読み込むように修正してみます。</body></html>ダウンロードしたライブラリに含まれている、「blockrain.css」「blockrain.jquery.min.js」を追加し、jQueryも一緒に読み込んでおきます。あと、「div」要素にテトリスのゲーム画面サイズを指定しておくのを忘れないようにしましょう。$('.game').blockrain();});たったこれだけで、遊べるテトリスの完成です!注意点として、HTMLファイル内にJavaScriptコードを記載すると、Chrome拡張機能の仕様でエラーになるようです。どんなに少ないコードであっても、外部ファイルとして読み込むようにしておきましょう。ここまで完成したら、先ほど読み込んだ拡張機能ページを表示し、「リロード」をクリックしてファイルを再読み込みします。アイコンをクリックすれば、見事にテトリスが遊べます!これで、なんとか当初の目的であった「気軽にテトリスで遊ぶ!」というのが達成できたような気がします。まとめ今回は、「Chromeウェブストア」へ登録していないので、あくまで個人が楽しむための拡張機能ですが、まぁこういう使い方でも良いのかなと思ってます。Googleが用意している「公式ドキュメント」を読む限り、まだまだ多彩な機能が用意されており、専用のAPIも豊富に揃っているようです。これらを活用すれば、もっと面白い機能が作れそうなので、また時間が空いたら挑戦してみようと思います。