OpenStreetMap とその API を使って簡易ドライブゲームを作って公開しました。

OpenStreetMap は誰でも無料＆自由に使える地図や地理情報のオープンデータプロジェクトです。API も公開されており、位置情報アプリケーション開発時に利用することができます：



この OpenStreetMap API を使ってドライブゲームを作って公開してみました。GitHub リポジトリはこちらです：
https://github.com/dotnsf/openmap_drive/




実質的に index.html ファイル１つだけのプロジェクトなので GitHub Pages で公開もしています。実際に遊ぶには PC のブラウザでこちらを参照してください：
https://dotnsf.github.io/openmap_drive/




パラメータを付けずにアクセスすると、デフォルトで三重県鈴鹿市の鈴鹿サーキットのメインストレートの一部が OpenStreetMap でブラウザ画面いっぱいに表示され、その中心に赤い車（この車でドライブします）が表示されます。

キー操作は以下の３つのみです：
　矢印キーの「下」：　スタート／ストップ
　矢印キーの「左」：　左旋回
　矢印キーの「右」：　右旋回


とりあえず「下」を押すと動き出します（もう一度押すと止まります）。初期状態では５時の方角を向いているので右下方向に向かって移動を始めます（実際には車の位置は変わらず、地図部分がスクロールしていきます）。矢印の「左」や「右」を押して、なるべくコース上を走るようにしてみましょう：

（↑　1990年にセナとプロストが接触した１コーナー）


ぶっちゃけコースアウトしようが、何かと接触しようが車は動き続けます。なので「細かいことは忘れて」コースを走り続けましょう：

（↑　1989年にセナとプロストが接触したトライアングルシケイン、ここはこの赤い車でも難しい）


起動時に URL パラメータを与えることで初期位置と初期角度を変えることもできます：
　lat: 緯度
　lng: 経度
　anglelevel: 角度（何時の方向、という時計の短針の方角を示す。0～11 の整数）

下図は
　https://dotnsf.github.io/openmap_drive/?lat=43.733009&lng=7.4228981&anglelevel=4
にアクセスした時の様子です。画面下に有名なレストラン "La Rascasse（ラスカス）" が見えていますが、ここは F-1 モナコグランプリ市街地コース上です。これから最終コーナーに向かうラスカス・コーナーのあたり：



地図で表示するのは必ずしもサーキットである必要はありません。こちら
　https://dotnsf.github.io/openmap_drive/?lat=35.6828558&lng=139.7596134&anglelevel=1
は日本の皇居前、内堀通りを走る状態からスタートします：



実は以前に同様のゲームを Google MAPs API で作って教育目的に使っていたことがありました。他の地図 API と比較して多くの機能を持ち、今でも便利に使えると思ってはいるのですが、Google MAPs API は当時と異なり現在では API キーの取得が必要になってしまい、オープンな教材としては使いにくくなってしまったのでした。


という背景もあって、今回は Google MAPs API の API キーを使うのではなく、地図 API としてはOpenStreetMap API を、leaflet.js ライブラリを併用して使う形で作り直しました。加えて車の画像も「いらすとや」で公開されているものを直接参照し、CSS の transform で角度を変えて表示するように改良しました（この辺り、詳しくは index.html の内容を直接参照してください）。結果として（画像ファイルは不要になり）index.html ファイル１つだけで完結できるようになって、GitHub Pages で公開できる形にもなった、という副産物的なメリットも生まれました。


今回公開したファイルはあくまでテンプレートというか、「これを元に改良するための素」のつもりです。このゲームは上述のように３つのキーだけで（３種類の信号だけで）操作できるので、以前に紹介したキータッチと組み合わせて体感ゲームにしたり、IoT 的な要素を使ってデバイスからの信号を受け取れるようにしたり、身近なものをリモートコントローラー代わりにして使えたら面白いかな、と思っています。あと少し技術方向性は異なるけど、複数台の車を同時に走らせたりとかも面白そう。

タグ ：

#leaflet.js

#css

#transform

#osm

#openstreetmap

#leaflet

自分を含め、多くの人に使われているコンテンツ管理システムである WordPress の（プラグインの）日本語翻訳に参加させていただきました。

WordPress は本体だけでなく各種プラグインも含めてオンラインで翻訳に参加する仕組みが整っており、誰でも比較的容易に参加できると感じました。以下で実際の翻訳を行った様子を紹介しますが、ぜひ色んな人に参加していただきたいと思っています。

（１）準備
WordPress の翻訳に参加するために必要なものは WordPress.org アカウントです。こちらからログインして翻訳を開始します。まだアカウントを所有していない場合は新規に作成してからログインして進めてください：
https://login.wordpress.org/




（２）翻訳する対象言語と対象プロジェクトの選択
上記アカウントで WordPress.org にログイン後、以下の翻訳サイトへ移動します：
https://translate.wordpress.org/


（↑正しくログインしていると、右上に自分のプロフィールが表示されます）


まずは翻訳対象言語を選びます（今回は「日本語」として以下を紹介しますが、他の言語に翻訳する場合はその言語を選んでください）。画面を下の方にスクロールして "Japanese" の "Contribute Translation" ボタンをクリックします：



次に選択した言語（日本語）で、何の翻訳に参加するか、を選びます。最初は WordPress 本体の翻訳参加用ページが WordPress のバージョン別に表示されています。が、実際に見ていただくとわかるのですが、WordPress 本体の翻訳は Progress がほぼ 100% となっていて「既に翻訳済み」となっていると思います。なのでこちらへの参加はできません：



翻訳は WordPress 本体だけではなく、各種テーマやプラグインに対しても行うことができます。例えば "Plugins" を選択すると選択言語（日本語）で翻訳に参加できるプラグインの一覧が表示されます。こちらは Progress = 100% になっていないプラグインがほとんどで、これらのプラグインの翻訳に参加することができます：



適当に１つ選んでもよいのですが、せっかくなので普段自分が使ってお世話になっているものから選びたいと思いました。

というわけで、個人的に最近使い始めた "All in One SEO Pack" プラグインの日本語化に貢献させていただこうと思います。検索バーに "All in One SEO" などと入力して検索し、対象のプラグインを見つけたら "Translate Project" ボタンをクリックします（Progress = 91% なので、まだ未翻訳部分が全体の１割弱残っていることになります）：



選択したプラグインの翻訳プロジェクト一覧が表示されます。このプラグインでは Development（開発）版と Stable（安定）版の２つのプロジェクトに分かれて開発が進められており、かつそれぞれに本体と README の翻訳が用意されているようです。ここから自分が対象とするサブプロジェクトを選ぶのですが、今回は Untranslated （未翻訳箇所）が 69 個と最も多い Stable 版を選ぶことにしました：




（３）翻訳作業
翻訳する対象のプロジェクトを選ぶと、そのプロジェクトの文字リソース一覧が表示されます：



最初は翻訳済みのものも全て含めた文字リソース一覧が表示されています。未翻訳のものだけが表示されるよう、"Untranslated" をクリックして、未翻訳文字リソース一覧に切り替えます：



ここに表示されているものが「All in One SEO Pack プラグインの中でまだ日本語になっていない文字」の一覧です。翻訳に参加するにはどれか１つを選んで "Double click to add" と書かれている部分をダブルクリックします：



すると翻訳編集画面に切り替わります。この例では「Search results for "%s"」という文字リソースの日本語翻訳を（まだ存在していないので）指定します：



この日本語訳として「"%s" の検索結果」と入力しました。確定する場合は "Suggest" ボタンをクリックします：



すると画面内に先程選んだ「Search results for "%s"」の訳として「"%s" の検索結果」が入力されている状態になります。これで選択した文字リソースの翻訳候補を指定できました。簡単ですね。

同時に次の未翻訳リソースである「F j, Y」が選択され、翻訳の入力を待っている状態に切り替わりました：



同様にして翻訳を入力して "Suggest" を繰り返していきます。ある程度翻訳した所で、画面内上部の "Japanese" を選択します：



すると画面が切り替わり、"Waiting" の数字が変わっているはずです（もとは 0 だったのが 9 になってます）。これは自分が入力した翻訳候補が９つあり、それらが採用される前の段階として waiting（待ち）の状態になっている、ということを示しています（この画面で黄色の背景になっているものが waiting のリソースです）：



翻訳の作業はこれだけです。後は対象プロジェクトの管理者さんがこの状態から実際のプロジェクトに翻訳を入れるかどうかを判断して、採用された場合は実プロジェクトに反映される、という手続きが待っています。

実際の翻訳には単なる言語知識だけでなく、PHP の文法や日付フォーマットなどの知識が必要になることもありますが、まあわからないものは飛ばして分かるものだけ翻訳に貢献するのがいいと思います。自分の場合はお世話になっているプラグインへのお礼と、あと今後自分が使う中で自分が翻訳した文字列を目にすることがあれば、それはそれで嬉しいと思ったのでボランティアで参加させていただきました。いつかどなたかの役に立つことを願って。

タグ ：

#wordpress

#translate

東芝メモリ株式会社（2019年10月以降は「キオクシア株式会社」）から発売されている FlashAir を、HDMI キャプチャーボードで使ってみました。

FlashAir は無線 LAN 機能がついた SD カードです。無線 LAN 機能のないデジカメ等のストレージメディアとして差し込んで画像や動画を記録すると、メディアの抜き差しをしなくても PC やスマホから無線 LAN でこのメディアにアクセスし、撮影した画像や動画を確認したり、転送したりできる、というものです。個人的にはデジカメに加えてキングジムのポメラ DM100 のストレージとして使っていました。

加えてアプリケーションソフトや IoT 機器の開発エンジニア向けに情報が公開されており、Lua 言語を使って FlashAir の GPIO を直接制御する、といったカスタマイズも可能なガジェットです。

もともと第三世代のモデルを所有していたのですが、今回の検証用に改めて最新の第四世代モデルを購入して実験しました：



一方、HDMI キャプチャーボードは株式会社アイ・オー・データ機器から発売されている GV-HDREC というモデルの製品です：



HDMI キャプチャーボードは HDMI を流れる映像と音声を途中でキャプチャーして録画＆録音する製品です。例えば 下図では「ゲーム機」と「モニター（テレビ）」が HDMI ケーブルで接続され、ゲームの映像と音声がモニターから出力されて遊んでいる状態になっています：



GV-HDREC は HDMI ケーブルをもう１本使って、この HDMI ケーブルの途中に割り込む形で設置されます。するとモニターにはこれまで通りゲームの映像と画面が出力されますが、それらの様子は GV-HDREC がキャプチャーすることが可能になっていて、音声付き動画ファイルとして記録することができるようになります。また記録した映像は別売りの HDD や SD カード内にファイルとして保存することができるようになります：



記録する映像はゲームである必要はありません。HDMI として割り込むことができればよいので、例えば下図のように PC の画面を大型モニターやスクリーン表示する際にも途中で割り込んで PC 画面の様子を記録することができます：



必ずしも「割り込む」必要もありません。例えば上図の例であれば画面そのものは PC のものを使いながら HDMI ケーブルを GV-HDREC に接続すれば PC 画面を音声ごとそのまま録画する、という使い方もできます：



今回はこの方法で PC 画面を録画します。また外付けのメディアとして FlashAir を使ってみました：



準備としては PC に HDMI ケーブルを差し、もう一端を GV-HDREC の入力用端子に接続します。また GV-HDREC の SD カードスロットに FlashAir を挿入します。特別な作業は不要で、これだけです：



この状態から GV-HDREC の録画ボタンを押すと PC 画面のキャプチャーが開始されます。もう一度録画ボタンを押すと録画は終了し、録画した様子は FlashAir 内の動画ファイル（mp4）として格納されます。

通常の SD カードであれば、GV-HDREC から SD カードを抜いて PC 等に差し替えて・・・となりますが、FlashAir を使っている場合であれば、このまま専用スマホアプリからアクセスしたり、PC から無線 LAN で接続して内容を確認することができます。これ超便利！

（↑ \DCIM\101HDREC\ フォルダ内に動画ファイルが格納されている）


後はこの状態のまま動画を再生することもできますし、ダウンロードして利用することも可能です：

（↑ 懐かしの Space Cadet を Windows 10 で遊んだ様子を録画してました）


この HDMI キャプチャーボードは（マイクを併用するなどして）サービスの使い方説明動画を撮ったり、実況動画を撮ったりするのに便利だと思っていますが、ファイルメディアとして FlashAir を併用することでいちいちメディアを差し替えたり、そのためのアダプタを意識したりすることなく全てオンラインで完結できるようになるのがとても便利だと感じました：

タグ ：

#flashair

#hdmi