とあるブラウザゲームを効率的にプレイしたくChrome Extensionを作りました。その過程における開発備忘録を残していきます。
作りたいもの
- マルチプレイバトルをデスクトップ通知で受け取る
- マルチプレイバトルの状態における条件分岐処理
以上2点の要件が満たせるのであれば、別にChrome Extensionでなくても良いのですが、工数の観点からChrome Extensionを選択しています。
1.マルチプレイバトル通知をデスクトップ通知で受け取る
ここで言う『マルチバトルプレイ』 とは多人数の仲間プレーヤーと一緒に単体 or 複数の敵を協力して戦うバトルのことです。
なぜ通知が必要なのかというと、敵にダメージを与えれば与えるほど貢献度というものが手に入る仕組みになっています。
バトル終了後時点の貢献度が高ければ高いほど手に入る報酬が良くなります。
極論そのバトルが開始された直後に参加するのが最も効果的です。
また、マルチバトルで手に入る報酬がこのゲーム内では非常に重要な位置づけになっており、プレーヤー間では非常に需要が高い分、競争率も高いのが現状です。
という諸事情が諸々あり是非とも効率的にゲームを進めたいという思いが、今回のChrome Extension作りのきっかけになったわけです。
開発の話に戻ります。
まず 『マルチプレイバトル通知をデスクトップ通知で受け取る』という要件を満たすための材料をリストアップしていきます。
- そもそものChrome Extensionの作り方を理解する
- DOMの定期的な検索機能の実装
- デスクトップ通知機能の実装
1-1.そもそものChrome Extensionの作り方を理解する
これが分からないと始まりませんが、最初から説明しているとキリが無いので割愛します。Chrome Extension 作り方とかで検索すれば色々出てきます。
こちらの記事も参考になるかと思います。
※時間あるときに超簡単な作り方をまとめます。
注意点としては、manifest_version : 2の記事を参考にしてください。Chrome側のmanifest_version : 1の対応は終わりました。
こちらが参考になります。
ちなみに、Chrome Extensionの作成自体は非常に簡単です。開発中はローカルにファイルを置いてテストできるので、とてもスピーディに作ることが出来ました。
1-2.DOMの定期的な検索機能の実装
さて、実際の要件設計に入ります。
『DOMの定期的な検索』の要件を満たすためには、以下の項目をクリアする必要があります。
- 任意の文字列の検索
- 定期的なリロード処理
この辺はJavaScriptを書き慣れている人にとっては、呼吸と同じくらい簡単なことかもしれません。 (注意 : 私はJS初心者です)
1-2-1.任意の文字列検索
ページ内の要素をどうやって検索するか。これはDOM構成によって処理の仕方は変わってくるため、ここではとても単純な文字列検索をします。
各々で効率のよい検索処理を書いてください。
function SearchKeyword () { var searchKeyword = '渋谷ほととぎす通信'; // body内のテキストを全て取得 var t = document.body.textContent; if (t.indexOf(searchKeyword) >= 0) { // 検索ヒット // 後述するデスクトップ通知処理をここに書く } }
DOM全文から文字列検索をしています。
2-2.定期的なリロード処理
指定したミリ秒後に任意の処理を実行するsetTimeout関数を使うのが手っ取り早いのかなと思います。
// 5秒経過するとページリロードが実行されます setTimeout(function() { location.reload(); }, 5000);
ここまでのまとめ
ここまでの処理は、Chrome Extensionの中で言うと、content-script.jsの中に記述されます。content-script.jsは、指定したページ内に埋め込まれるJavaScriptとして動きます。
content-script.js
function SearchKeyword () { var searchKeyword = '渋谷ほととぎす通信'; // body内のテキストを全て取得 var t = document.body.textContent; if (t.indexOf(searchKeyword) >= 0) { console.log ('検索ヒット'); // 後述するデスクトップ通知処理をここに書く } else { console.log ('検索に引っかかりませんでした'); } } // 5秒経過するとページリロードが実行されます setTimeout(function() { location.reload(); }, 5000); // 検索実行 SearchKeyword ();
1-3.デスクトップ通知機能の実装
Chromeデスクトップ通知とは、モニタの端に表示される通知です。使用OSによって見え方(デザイン)が変わりますが、表示する内容自体は同じです。
Chromeデスクトップ通知の実装は大きく2つやることがあります。
- メッセージの待機処理
- メッセージの送信処理
1-3-1. メッセージの待機処理
デスクトップ通知を行うときは、background.jsを使用します。background.jsは裏側で動き続き続けるJavaScriptです。content-script.jsから表示して欲しい通知内容をbackground.jsにメッセージを送ることが出来ます。
メッセージを受け取るためには、待機処理をbackground.jsに書く必要があります。
background.js
// メッセージの送信を受信するために待機する chrome.runtime.onMessage.addListener( // 受け取ったら実行する関数 // request変数にはcontent-script.jsから送られたデータが格納されている function(request, sender, sendResponse){ // chromeのAPI notifications.createを使ってデスクトップ通知を表示させます chrome.notifications.create("", { type: "basic", iconUrl: request.img, title: request.title, message: request.message, }, function () { // 音を鳴らすことも出来ます。(ここに記述。今回は割愛) }); } );
1-3-2. メッセージの送信処理
content-script.jsに送信処理を記述します。
先述したcontent-script.jsに追記する形で編集していきます。
content-script.js
function SearchKeyword () { var searchKeyword = '渋谷ほととぎす通信'; // body内のテキストを全て取得 var t = document.body.textContent; if (t.indexOf(searchKeyword) >= 0) { console.log ('検索ヒット'); // background.jsにメッセージを送信する var messageObj = { url : 'icon.png', title : '通知タイトルテスト', message : '通知メッセージテスト' }; chrome.runtime.sendMessage(messageObj); } else { console.log ('検索に引っかかりませんでした'); } } // 5秒経過するとページリロードが実行されます(5秒という数値は適当です) setTimeout(function() { location.reload(); }, 5000); // 検索実行 SearchKeyword ();
これで5秒に1回のペースで指定文字列の検索をして、ヒットするとデスクトップ通知が表示されるようになりました。
マルチプレイバトルの状態における条件分岐処理
これは何かというと、マルチバトルは複数種類があり、同時多発する可能性があります。
そして、全てのマルチプレイバトルを通知してほしくない場合が多々あります。
A, B, C, Dの4種類のバトルがあったら、AとDだけ今は重点的に戦いたい、また、敵のHPが半分以上残っている時だけなど、通知条件というものが必要になってきます。
この場合、静的なデータだけで作ることは出来ません。
何かしらのユーザー情報を保持する仕組みが必要になってきます。
そこで登場するのがオプション画面です。
設定したい項目をオプション画面に実装し、そのデータを保存して、content-script.js内で料理し通知を制御します。
記事自体が長くなってきたので、オプションに関しては、次回の記事で紹介しようと思います。