自分用IITCプラグインを手っ取り早く作るための最初の一歩

ちょっと前に某SNSで、IITCでドローン操作を支援するプラグインの自作方法をレクチャーしたことがあります。これは、そのときのやり取りをもとに、IITCプラグインの自作や改造をする場合のとっかかりとして、再編成したものです。

（本文の前に）ざっくり用語解説

Ingress・・・・ナイアンテック製スマホゲーム。2陣営に分かれてやる陣取りゲームで、位置情報を使うスマホゲームの走り。ちなみに「ポケモンGo」はIngressを下敷きに作られている。

IITC・・・・・Ingressの支援ツール。ナイアンテック非公認。Ingress画面より広範囲のフィールドを見て、ポータル（Ingressのフィールドに点在する拠点）の状態や、エージェント（Ingressのプレーヤーのこと）の行動履歴を図示したりできる。

プラグイン・・・・IITCを機能拡張するためのモジュール。IITC製作者による公式プラグインの他に、自作も可能。公開されている非公式プラグインもある。javascript言語を使って作られている。

ドローン・・・・2020年に実装されたIngressの新機能。ゲームフィールドに仮想ドローンを飛ばすことができる。ドローンは任意のポータルに留まり、一定範囲の別ポータルに移動できる。

S2 Cell・・・・・地図上の位置情報を表現するための概念。地球の表面を特定の大きさで均等に分けたもの。レベルがあり、レベルが大きいほどセルが細かくなる。一つのセルはひし形。IngressやポケモンGoの内部で使われている。

（本文の前に）なぜ今回、プラグインを自作しようと考えたか

ドローンが移動可能な範囲は公開されていません。ですが、世界中のエージェントが実験や解析した結果、それは「ドローンの現在位置から500m以内に、S2 Cell(レベル16)の全てまたは一部が入る範囲にあるポータル」であろうとされています（注：未確定情報です）。

下記は、とある場所でのドローン移動可能範囲です（紫色が移動可能範囲）。

この情報にもとづいて、あらかじめS2 Cellの線をIITC画面に引いておき、ドローンのあるポータルに500mの円を描けば、ポータル飛行経路が簡単に調べられます。

S2 Cellを引くプラグインは非公式のものがあります。下記は一例です。

nikolawannabe/s2-cells

vibrunazo/l17cells

S2 Cellを引いたIITC画面はこんな感じ。

じゃあ、あとは円を描くプラグインを自作すればいいんじゃね？というのが、今回のそもそものきっかけです。

（ここから本文）必要な道具立て

パソコンでIITCプラグインを自作または改造する環境として、まず

・Chromeブラウザ
・Tampermonkey拡張機能
・IITC本体プログラム

を導入します。IITC公式ページ https://iitc.me/desktop/ を参考に、環境を用意しましょう。

既存の公式プラグインを、改造の土台に使う

IITC公式ページより、公式プラグイン「Debug: Raw portal JSON data」を導入します。Tampermonkeyのダッシュボードに表示されればOK。

該当のプラグインをクリックすれば、プログラムソースが見えます。
この画面で編集して[ファイル]-[保存]を実行し、IITCを再読み込みすれば、修正した内容が反映されます。今回はこの方法で、公式プラグインを改造して目的の機能を持たせることにします。

はじめての、改造

このプラグインを実行する入り口は、ポータルを選択したときに右端に表示される画面の「Raw Data」リンクです。クリックすると、画面中央に以下のようなポップアップが表示されますね。

プログラムで、この「Raw Data」という入り口を作っているところは、プログラムソースの45行目にあります。ここで、Raw Dataのリンクをクリックしたら実行される処理として、

onclick="window.plugin.rawdata.showPortalData( 以下省略

と書いています。

じゃあその window.plugin.rawdata.showPortalData ってどこにあるの？というと、すぐ下の行ですね。
ここから・・・

100行目のここまでが、window.plugin.rawdata.showPortalData の処理。

ちょっとプログラムを改造してみましょう。といっても、いきなり大それたことはしません。window.plugin.rawdata.showPortalData の引数になっている guid の値を表示させます。

console.log("これはテストです。guid=" + guid);

という行を書き加えます。書き加えたら[ファイル]-[保存]を実行し、IITCを再読み込みします。

書き加えた情報を見るために、Chromeのコンソールログを表示させます。IITC画面で、CtrlとShiftを押しながら J キーを押すと、右側にこんな画面が出てきます。

「Raw Data」のリンクをクリックすると、コンソールに、先ほどプログラムに追加したプログラムが動いて、「これはテストです。guid=ほげほげ・・・」という表示が出てきます。

はい、これで、IITCプラグイン改造の最初の一歩は完了です。お茶かタバコで一服しましょう。

いよいよ、円を描く

今度はポータルの緯度経度を表示させてみます。

var latlng = window.portals[guid].getLatLng();
console.log("これはテストです。portal=" + latlng.toString());

という行を、さらに書き加えます。書き加えたら[ファイル]-[保存]を実行し、IITCを再読み込みします。

「Raw Data」のリンクをクリックすると、追加で緯度経度が表示されます。

緯度経度情報を使って、いよいよ円を描きます。

L.circle(latlng, 500,
  { fill: true, color: 'purple', weight: 3, fillOpacity: 0.05, clickable: false }
).addTo(map);

ちなみにこれは、「半径500mの円を描く。色は紫で線の太さは3ピクセル。中は塗りつぶす。ただし、ほとんど透けて見えるくらいにごく薄く。この円はクリックしても選択させない」という意味です。

「Raw Data」のリンクをクリックし、ポップアップ表示を閉じると、描画された円が見えます。

ポップアップはもう要らないので、ポップアップ処理を実行させないようにします。100行目付近の dialog ではじまるあたりを、6行コメント化します。先頭に // を入れれば、コメント化できます。

この状態にして実行すれば、ポップアップは出ずに円だけ描きます。

要らないプログラムはもう消してかまいません。console.logに出力するところは要らないので消します。
プラグインに元からあるプログラムも、もう不要です。円を描く処理の下から、最初にコメント化したところまでを、サクッと消します。

ここで、プラグインの使い勝手を改善する改造をします。現状は「Raw Data」のリンクをクリックしないと円を描いてくれませんが、ポータルを選択するだけで円を描くようにします。
プログラムの45行目にある入り口をコメント化して、代わりに下記のプログラムを追加します。

window.addHook('portalSelected', window.plugin.rawdata.showPortalData(window.selectedPortal));

ポータルを選択するだけで円を描くようになります。
S2 Cellを引いたIITCで使うとこんな感じです。赤矢印で示すポータルへもドローンが移動できることが分かります。

あと、何が必要？

プラグインの改造に最低限必要な作業は、一応これで終了です。

ただ今回は、既存のプラグインを乗っ取って置き換えてしまう改造だったので、元のプラグインも併用したい場合はもうひと手間要ります。具体的には、プラグインの @name、@namespace といったパラメータを、他のプラグインと重複しない名前に変更しなければいけません。まあこれは、自分専用で使うプラグインなら必須ではありません。

あとそれと、現状のプラグインは「円を消す」処理が無いので、消すにはIITC画面をリロードするしかありません。今後の課題です。

（エピローグ）真打登場！

レクチャーから3日後、すごいプラグインが公開されました。

tehstone/IngressDronePath

これは、ポータルを選択すると、500mの円と必要なS2 Cellを描き、さらにドローンが移動できるポータルを強調表示してくれます。

というわけで、レクチャーで作ったプラグインは、ほんの数日で賞味期限が切れてしまいました。なんてこったい！

とは言え、Google+の閉鎖などでIITCプラグインの情報が乏しくなりつつある現状、こうした記事を残せるきっかけになったのは良かったと思っております。本投稿が、少しでも多くのエージェントのイングレス・ライフに寄与できれば幸いです。