Ingress Damage Reports Mapのコピーサイト

先日紹介したIngress Damage Reports Map
ソースコードを取ってきて自前でコピーサイトを作りました。
“README.md”ファイルの[For Developers]節にごく簡単に書いてありますが、
これで突き放すとは開発者はドSなのかもしれません。
まあ以下も私にとっての備忘録に過ぎないので
いろいろと隠れた前提条件があったりしますが、
これ読んで分からないのなら素直に
サンプルサイトを利用することをお勧めします。
なおコピーサイトは一般公開しませんのであしからず。

最初にGoogleサービスを利用するために開発者環境での設定です。
Damage ReportsではGoogleのメールと地図サービスを
利用させてもらうので必須です。
関連していることを昔書いたことがありますが、
だいぶ時間が経っているので改めて書いておくことにします。

まずはGoogleアカウントにログインし開発者コンソールを開きます。
[プロジェクトを作成]をクリックして新規プロジェクトを作成し、
[Project]ドロップダウンリストでそのプロジェクトを選択します。
[ライブラリ]メニューから[Google Apps API]の[Gmail API]を有効にし、
また[Google Maps API]の[Google Maps JavaScript API]も有効にします。
[認証情報]メニューで[認証情報]タブを開き、
[認証情報を作成]をクリックして[API キー]を取得します。
[OAuth クライアントID]も[ウェブ アプリケーション]用で入手します。
これらは後で利用するのでメモしておきます。
そして[OAuth同意画面]タブで必須事項を入力します。

次いで[ドメインの確認]タブの[ドメインを追加]をクリックします。
コピーサイトを作るウェブサーバのホスト名(独自ドメイン)を入力すると
ドメインの所有確認をやらされます。
DNSサーバにtxtレコードを追記しての認証をしたのですが
数時間経っても認証に失敗してイライラが募ります。
結局しょうがないので放置し、3日後に試してみたらいけました。
まあDNSなんてそんなものです。
なお、セキュリティ面を考慮するともう少しやっておくべきこともありますが、
面倒なのでここでは省略します。

今度はウェブサーバ側の準備です。
Ingress Damage Reports Mapのサイトから
“ingressmap.html”、”ingressmap.js”、”ingressmap.css”の
3ファイルを取ってきてウェブサーバ上に置きます。
そして”ingressmap.html”の33行目の
key引数を先ほど取得した自分の[API キー]に置き換えます。
また”ingressmap.js”の24行目の
clientId変数を先ほど取得した自分の[OAuth クライアントID]に置き換えます。

ただこれだけでは不十分で、”ingressmap.html”の33行目の末尾あたりの

&sensor=true

は削除しないとエラーが出ます。
また40行目の”jquery.min.js”に対する記述は37行目と38行目の間に移動します。
つまり、scriptの読み込みは一番最初が”jquery.min.js”である必要があります。
さもないと

Uncaught ReferenceError: $ is not defined

なるエラーが出ます。
ちなみにエラーはChromeブラウザなら[:]メニューの
[その他のツール]-[デベロッパー ツール]メニューを開いて
[Console]タブから見られます。

さらに”ingressmap.js”の28行目の

var q = 'subject:"Ingress Damage Report: Entities attacked by" from:ingress-support@google.com';

var q = 'subject:"Ingress Damage Report: Entities attacked by" from:"ingress-support"';

に変更する必要があります。
これはNiantec社がGoogleから分社されたのを機に、
日本時間の2015年10月9日送信分ぐらいから
送り元メールアドレスが変更されたことへの対応です。

これで、ウェブブラウザから”ingressmap.html”を開けば
自前のウェブサーバでIngress Damage Reports Mapが運用できます。
もし興味あるならチャレンジしてみてはいかがでしょうか。
いろいろトラブルに見舞われるかもしれませんが。
かく言う私も途中で諦めかけました。

広告