クリック1発でテトリスが遊べる「Chrome拡張機能」を、できるだけ簡単に開発してみた！

公開日：2015/08/22

ふとしたきっかけで、急に「テトリス」が遊びたくなったので、いろいろ探してみたのですが良いのが見つからず…。

普段からChromeブラウザを愛用していることから、「Chromeウェブストア」も検索したのですが、お手頃感のあるモノが見つからず…。

結局のところ、探すのが辛くなってきたので、自分好みの気軽に遊べるテトリスを、「Chrome拡張機能」として可能な限り簡単に作ってみました。

ミニマムなChrome拡張機能を作る！

そもそも「Chrome拡張機能」は、誰でも簡単に作れるように設計されています。
とりあえず、「アイコンをクリックして◯◯◯する…」みたいな拡張機能は、「HTMLファイル」「マニフェストファイル」「アイコン画像」を用意すればすぐに実現できます。

　
「HTMLファイル」は、普通にWebページを作る時に用意するモノがあればOKで、まずは以下のミニマムなHTMLを用意します。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>テトリス</p>
  </body>
</html>

　
「アイコン画像」は好きなモノを用意するか、「pixlr」とかで適当に作っても良いでしょう。

サイズは「19×19px」にしておき、「icon.png」のようなファイル名にしておきましょう。

　
「マニフェストファイル」は、自作した拡張機能をChromeで使えるようにするためのモノですが、中身はごく簡単なJSONファイルです。

manifest.json

{
    "manifest_version": 2,
    "name": "tetris",
    "version": "0.0.1",
 
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "index.html"
    }
}

「manifest_version」で、現在の最新版であるバージョン「2」を指定し、「name」＝拡張機能の名称、「version」＝拡張機能のバージョンを任意に設定すればOK！

ちなみに、この3つの項目は必須事項なので、必ず明記しておきましょう。

　
あと、「browser_action」という項目を記載することで、「アイコンをクリックして◯◯◯する…」という機能が使えるようになります。

「default_icon」で、先ほど用意した画像を設定し、「default_popup」にHTMLファイルを紐付ければ完了です！
ファイル名は、「manifest.json」にしておきましょう。

詳しいマニフェストファイルの書き方は、Googleが公式に公開しているドキュメントが分かりやすいです。

＜参考＞
「マニフェストドキュメント」公式サイト

　
ここまでで、以下のようなファイルを作成しました。

app
 ├─ index.html
 ├─ manifest.json
 ├─ icon.png

　
あとは、この「app」フォルダごとChromeの「拡張機能設定ページ」へ放り込めば完成です！

　
Chromeの上部にアイコンが表示されるので、クリックすると「テトリス」と表示されるのが分かると思います。

これは、HTMLファイルの「p」要素に記載した「テトリス」の文字が表示されていることになります。
簡単に言ってしまえば、アイコンをクリックしたら「body」要素を表示するようなイメージでしょう。

手っ取り早く「テトリス」がしたい！

とりあえず、アイコンをクリックしたら「テトリス」の文字を表示する拡張機能は完成したので、あとはココに「遊べるテトリス」が表示されれば理想的です。

ただ、テトリスをゼロから実装する気力は無かったので、何か良さそうなモノを探していたら、以前にちょっと話題になったJavaScriptライブラリ「Blockrain.js」を発見！

これは、ライブラリを読み込んで、簡単なコードを追加するだけで「テトリス」が遊べてしまうという、まさに今回の拡張機能作りにピッタリなものです！

　
そこで早速、HTMLファイルにライブラリを読み込むように修正してみます。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" src="blockrain.css">
    <script src="jquery.min.js"></script>
    <script src="blockrain.jquery.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <p>テトリス</p>
    <div class="game" style="width:250px; height:500px;"></div>
  </body>
</html>

ダウンロードしたライブラリに含まれている、「blockrain.css」「blockrain.jquery.min.js」を追加し、jQueryも一緒に読み込んでおきます。

あと、「div」要素にテトリスのゲーム画面サイズを指定しておくのを忘れないようにしましょう。

　
そして、新たにJavaScriptファイル「main.js」を追加し、以下のコードを書いておけばOK！

main.js

1
2
3

$(document).ready(function() {
  $('.game').blockrain();
});

たったこれだけで、遊べるテトリスの完成です！

注意点として、HTMLファイル内にJavaScriptコードを記載すると、Chrome拡張機能の仕様でエラーになるようです。
なので、どんなに少ないコードであっても、外部ファイルとして読み込むようにしておきましょう。

　
ここまで完成したら、先ほど読み込んだ拡張機能ページを表示し、「リロード」をクリックしてファイルを再読み込みします。

　
そして、アイコンをクリックすれば、見事にテトリスが遊べます！

これで、なんとか当初の目的であった「気軽にテトリスで遊ぶ！」というのが達成できたような気がします。

まとめ

今回は、「Chromeウェブストア」へ登録していないので、あくまで個人が楽しむための拡張機能ですが、まぁこういう使い方でも良いのかなと思ってます。

Googleが用意している「公式ドキュメント」を読む限り、まだまだ多彩な機能が用意されており、専用のAPIも豊富に揃っているようです。

これらを活用すれば、もっと面白い機能が作れそうなので、また時間が空いたら挑戦してみようと思います。

（参考）
「Chrome拡張機能ドキュメント」公式サイト

うえぶまなぶ