ITB-100HDをはじめとするiTronics iPass BLACKのドラレコの再生ソフトで地図が表示できなくなっている状況を解消する新しい方法の設定手順メモをまとめました。
手元の設定メモをコピペしながら書いていたら長文の投稿になってしまいました。といっても記事の中身は古いドラレコの話なので、、、まぁ興味がない方は適当に読み飛ばしてくださいね。
では、設定を始めまてみましょう。
もくじ
- このような形を目指します
- PC内でホームページを表示させる
- 必要なWebページのファイルを置く
- Perl実行環境を設定する
- グーグルマップの設定
- アドレス偽装の設定
- 動作チェックと完成
- 補足 Google Maps APIキーの管理
このような形を目指します
手順で迷子にならないように、目指すべき完成形のイメージを先に載せておきます。
完成するとこのような画面になります。この形を目指して設定をします。
画面右下の地図エリアには地図が表示されず、代わりにこのように文字で位置情報が表示されるようになります。
GPSの緯度経度の数字だけが表示されて、別途Webブラウザで開くべき地図のURLが表示されます。表記されているURLをブラウザで開くと動画プレーヤーと連動するGoogleマップが表示されるようになります。
全体像はこんな感じです。それではパソコンのセットアップ手順を書いていきます。
PC内でホームページを表示させる
今回はWindows 11 Home 64bitでやってみましたのでほとんどのパソコンでできると思います。以下の手順はWindows 10でも基本は同じです。
タスクバーの検索窓 に
「Windowsの」と入力します。検索結果に
「Windowsの機能の有効化または無効化」コントロールパネルが現れるので起動します。これはWindowsの追加機能を有効にするコントロールパネルです。
一覧を下スクロールして、、、
インターネットインフォメーションサービス > World Wide Webサービス のツリーを開きます。
「HTTP 共通機能」にチェックをON。一部連動してチェックが入らない子機能がありますがそのままでOKです。下図のようになります。
同様に インターネット インフォメーション サービス > Web 管理ツール > IIS 管理コンソール のチェックを入れます。
さらに、同様な手順で インターネットインフォメーションサービス > World Wide Webサービス > アプリケーション開発機能 > CGI のチェックもON
以上のチェクボックスにチェックをれたら、[OK]を押して設定を決定します。すると設定作業が始まります。
しばらくすると完了します。
ここまでの設定がちゃんとできているか動作確認をします。
http://127.0.0.1 をedgeなどウェブブラウザで開きます。
これまでと同様にアドレスの127.0.0.1とは自分自身のコンピュータという意味です。
ブラウザにはこのようなページが表示されます。
これは何が起きているのかというと、PCの起動ディスクの
C:\inetpub\wwwroot
に格納されているウェブページが上記URLで開けるようになります。余談ですがこの機能を使うとホームページを作るときに表示テストを自分のパソコン内でできるようになりますね。
なお、このホームページはPCの中で動いているだけなので家庭内からしかアクセスできません。公開はされないのでご安心を。
以前の手法では、PC内部でウェブサイトを動かすためにsHTTPdというソフトを使っていましたが、Windowsに備わっているこの機能を使った方が先の設定が簡単なのでちょっとやり方を変えました。
必要なWebページのファイルを置く
では、自前のウェブサイトがPC内部で動くようになったので、今回の環境構築に必要なWebページのファイルを置きます。ファイルはあらかじめ用意したので、このZIPファイルをダウンロードして解凍してください →
mapapi_20230914.zip
※安全にダウンロードできませんと警告が出るかもしれませんがそのままダウンロードしてください。個人で簡単に用意したファイルなので警告が出てしまいます。すみません。
zipファイルを解凍して出てきた
「_mapapi」フォルダをまるごと
C:\inetpub\wwwroot の中へ置きます（要管理者権限）
作業後はこのようなフォルダ構成になります
場所 C:\inetpub\wwwroot
ファイルを置き終わったら、Webブラウザで
http://127.0.0.1/_mapapi/blackbox/map_google_australia.html
を開きます。
下のようなページがwebブラウザに表示されていれば、ファイルの設置はOKです。
Perl実行環境を設定する
今回は動画プレーヤーとウェブブラウザを連携させるプログラムが動作するWebページ(CGI)を設置するので、プログラミング言語Perlを実行する環境を整えます。設定については、先ほどダウンロードしたファイルをそのまま動かすだけなのでプログラミングの知識は不要です。
Strawberry Perlをインストールします。
Strawberry Perlのホームページへ行き、トップページにリンクがあるstrawberry-perl-5.32.1.1-64bit.msiをダウンロード、インストールします。32bit環境の人は32bit版をダウンロードしてください。ダウンロードしたらインストーラの指示通りにそのままインストールします。
Strawberry Perlのページ
Strawberry Perlのインストールが完了したら、さらに動作環境の設定を進めます。
タスクバーの検索窓に「iis」と入力し、検索結果に出てきた「インターネット インフォメーション サービス (IIS) マネージャー」を起動します。
左のファイルツリーを開いて、
PC名 > サイト > Default Web Site > _mapapi > cgi を選択
中央のメインパネルから「ハンドラーマッピング」のアイコンをダブルクリックして開く
開くとこのような画面になります。
右パネルの「スクリプト マップの追加...」をクリック
設定ダイアログが現れるので、下図ように設定値を書き込む
- 要求パス *.cgi
- 実行可能ファイル C:\Strawberry\perl\bin\perl.exe %s %s
[...]ボタンでperl.exeの実ファイルを選択してから%s %sを手入力すると間違いがないです
- 名前 Perl CGI (名前はなんでもよいです）
[OK]を押すと、確認が出るので迷わず「はい」で。
設定が完了すると、*.cgiの設定が追加されていることがわかります。
では動作確認をしてみます。
http://127.0.0.1/_mapapi/cgi/latlon.cgi
をブラウザで開いてください。
下のようなテキスト(正確にはXML形式) 画面が出ていればOKです。
（補足）代わりにこういうエラー画面が出ちゃった場合は設定が間違っていますので再確認してください。
ここまで動作確認ができたら、さらに詳細設定を続けます。
C:\inetpub\wwwroot\_mapapi\cgi
をエクスプローラーで開いて・・・
ファイル「position.log」を右クリック > プロパティ メニューを選択。
ファイルのプロパティ編集ウインドウが出てくるので、セキュリティタブ へ表示を切り替えて、ファイルの権限を編集します。[編集(E)...]ボタンを押します。
ファイルアクセス件の詳細情報ウインドウが出てきます（この辺り、Windowsはメニュー階層が深くて分かりづらいですね）。
このファイル「position.log」にはプログラムからデータを書き込んでもよい権限を追加したいので（現在は許可がない）
「Users (PC名¥Users)」を選びフルコントロール権を与えます。
「フルコントロール」にチェックを入れると自動で他の関連する権限にもチェックが入ります。
[適用(A)]ボタンを忘れずに押して設定を確定させてから[OK]を押してウインドウを閉じます。
設定画面にたどり着くまでの道のりが長いですねー
先ほどの設定が反映されているか動作テストをします。
次のURLを開きます。
http://127.0.0.1/_mapapi/cgi/latlon.cgi?lat=30&lon=150
このような画面が出ます。
画面内にエラーメッセージ
<error>Inappropriate I/O control operation</error>
が出る場合がありますが気にしなくてもよいです。
この後、
C:\inetpub\wwwroot\_mapapi\cgi\position.log
をメモ帳で開いて先ほどの画面と同じ数字が書き込まれているか確認できればOKです。position.logの内容が
30,150
こうなっていればOK。要するに先ほどのURLに含まれるlat= , lon= の数字がこのテキストファイルに書き込まれているようであれば成功です。
なお、先ほどの画面でエラーメッセージが下図のように
<error>Bad file descriptor</error>
の場合は先ほどの権限の設定に誤りがありますので再確認してください。この時はposition.logの内容も更新できていません。
では、ここまで設定したWebページがうまく連携するか動作確認をします。
http://127.0.0.1/_mapapi/blackbox/map_google_australia.html
を開きます。
再度先ほどのページを引数をつけずに以下のURLで開きます。
http://127.0.0.1/_mapapi/cgi/latlon.cgi
一つ前のテストで30, 150だった緯度経度の数字が新しい値に更新されて表示されており、かつその数字が先に開いた位置情報の値と同じであれば成功です。
動画ビューワと外部ウェブブラウザを連携させるプログラムの仕込みはこれで完了しました。
グーグルマップの設定
地図表示の設定へ進みます。
C:\inetpub\wwwroot\_mapapi\mapkey.js
をメモ帳で編集します。
const mapkey = "xxxYYYzzzXXXyyyZZZ-xYz-xxxYYYzzzXXX-xyzxyz";
xxxYYYzzzXXXyyyZZZ-xYz-xxxYYYzzzXXX-xyzxyzの部分を
自分で取得したGoogle Maps JavaScript APIのキー情報に差し替えます。
自分専用のGoogle Maps JavaScript APIキーを入手する必要があります。取得方法については、
以前、
過去記事で紹介した設定をするためにAPIキーを入手済みの人は、そのキーを使用できます。
キー情報を持っていない人は
こちらの手順でGoogle Maps JavaScript APIのキー情報を入手してください。この手順「⑦APIキーの作成」まで進めてキー情報を取得してください。
キー取得の手続きの際にクレジットカード番号をGoogleへ登録が必要ですが、この仕掛けで地図を1ヶ月あたり14,000回表示までは無料枠で利用できるので、個人利用であれば課金されることは滅多にないです。
キー情報を先ほどのmapkey.jsファイル内の赤字部分と置き換えて書き込んでファイル保存したら、ページを開いて確認します。
先に以前動作確認した
http://127.0.0.1/_mapapi/blackbox/map_google_australia.htmlを開いてから、
次に
http://127.0.0.1/_mapapi/blackbox/map_monitor.html
を開きます。
このように東京駅の地図が表示されていればOKです。上記2つのページが同じ緯度経度を示しているはずです。
なお、画面がこうなっちゃう場合はAPIキーが正しく設定されていませんので再確認してください。
これで地図ビューワのセットアップは完了です。
アドレス偽装の設定
動画ビューワの地図パネルに今回作成したページを表示させるために、
http://www.ipassmall.co.kr を開いたときに
http://127.0.0.1 を開くようにコンピュータを騙します。なお、この設定は
以前の対策で設定した手順と同じですので、前回設定済みであればこのセクションの作業は不要です。
C:\Windows\System32\drivers\etc\hosts
を編集します。
編集時には管理者権限が必要なので、タスクバーからメモ帳を右クリック > 管理者として実行 を選び、管理者権限でメモ帳を起動してからhostsファイルの編集作業をすると良いでしょう。
以下の赤字のように１行追加します。
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 www.ipassmall.co.kr
これは
www.ipassmall.co.krにアクセするときは
127.0.0.1へ行けという設定です。過去の対策と同様に動画プレーヤーの地図パネルが表示するWeb地図画面を騙して自分のPC内のページを表示させるというわけです。
この後、PCを再起動して設定を反映させます。なお、ipconfigコマンドでリセットする方法がわかる人は再起動せずにコマンドで対処しても良いです。
また、ブロードバンドルータの設定に詳しい人であれば、このhostsファイルを編集する代わりにルータのDNS代理応答やホストファイル機能を使い対応することもできます。
動作を確認します。
http://www.ipassmall.co.kr/_mapapi/blackbox/map_google_australia.html
が表示されることを確認します。これまで
127.0.0.1と書いていたアドレスを
www.ipassmall.co.krで指定できるようになります。
動作チェックと完成
下準備はこれで全て完了です。ドラレコの動画プレーヤを開いてみてください。
ビューワのバージョンによっては、この図のようにアプリ起動時に地図コンテンツパネルがエラーで表示されていない場合があります。
そのような場合は地図パネル左上の[Google Map]ボタンを押して切り替えてください。そうすると下図のように地図を代替している緯度経度情報が表示されます。
動画を再生させて車の場所が移動すると、地図パネルに表示されている緯度経度情報の数字も更新されます。
緯度経度情報が動き出さないようであれば、地図パネルのどこでも良いので右クリックするとメニューが出てくるので「最新の情報に更新(R)」を選ぶ、または右上の動画リストから違う動画を選んで動画を読み込み直してみてください。
この状態で動画を再生しながら、別途Webブラウザで
http://www.ipassmall.co.kr/_mapapi/blackbox/map_monitor.html
を開くと動画と位置情報が連動した地図が表示されます。
これで完成です！！
なお、地図表示側はURLのアドレス部を127.0.0.1で使用しても大丈夫です。
http://127.0.0.1/_mapapi/blackbox/map_monitor.html
ついでに、これは通信で動画プレーヤーと地図が連動しているので、同じネットワーク内の異なるマシンから
http:// (動画プレーヤPCのIPアドレス) /_mapapi/blackbox/map_monitor.html
にアクセスすると写真のように遠隔で地図を表示できます。
地図表示側はブラウザで動いているのでグーグルマップの機能を色々使えます。
地図データが拡充している都市部では航空写真モードで拡大してゆくと3Dビュー表示もできます。
地図の下部にはおまけで地図のオプション操作ボタンを追加しました。
【一時停止】 ボタンを押すと、車の位置と連動して地図が自動で動く状況を一時停止できます。ちょっと地図の自動スクロールを止めてじっくり周辺の店を調べたりするときに便利です。
地図の初期表示サイズは旧来のプレーヤーの地図パネルと同じサイズにしていますが、【小さく】【大きく】【フィット】 ボタンを押して地図表示エリアの大きさを調整できます。別ウインドウで大きな地図を表示させたいときに使用してください。
いかがでしたでしょうか。長々と書きましたがこれで最新のブラウザで最新のGoogle Mapsを使えるようになったので、今後しばらくは安定して継続使用できるでしょう。これでITB-100HDはぶっ壊れるまでまだまだ使えます。
補足 Google Maps APIキーの管理
Googleのポリシー変更でGoogle Maps APIキーは利用登録制となり、かつ一定以上の利用回数を超えると課金されるようになりました。
しかし課金といっても地図画面を開く回数が月に14,000回までは無料なので、個人利用で課金されることはあり得ないです。万が一回数をオーバーしても課金はアメリカドルで1.4セント/表示回です。
地図の利用回数のカウント方法は、地図画面を新規に開くと１回です。地図の移動や拡大の操作はカウントされません。ということで、個人利用で無料枠を超えることはまずあり得ません。
しかし他人にあなたのAPIキーを使われると回数をオーバーしてしまうこともあり得るので、APIキーは他人へ漏洩しないように注意してください。万が一漏れた場合は漏れたAPIキーを無効にしてキーを再取得すれば良いです。
心配症な方は、APIが使用可能な範囲に制限をかけることで不正利用を防ぐことが可能です。
APIキーを取得するときに使用したGoogleの管理画面にて
APIとサービス > 「有効なAPIとサービス」メニュー > 画面中央「Maps JavaScript API」 > 「Google Maps Platform」画面 > 「鍵と認証情報」メニュー > 該当のAPIキーをクリックし編集に入ります
アプリケーションの制限の設定を「ウェブサイト」にして、
設定値を
*/_mapapi/blackbox/*
にします。
これでURLに_mapapi/blackboxが含まれないWebページであなたのAPIキーを無断使用されても地図がエラー表示で止まります。
それでも心配だという人は、1日に使用できるAPIの回数の上限を設定することができます。詳しくは
こちらを参考にしてください。地図を開けるのは1日200回まで、とかにしておけば無料利用枠をオーバーすることはありません。
ITB-100HDをはじめとするiTronics iPass BLACKのドラレコの再生ソフトで地図が表示できなくなっている状況を解消する新しい方法の設定手順メモをまとめました。
