まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

2019年08月

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

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


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

2019081708


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

2019081702


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

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


とりあえず「下」を押すと動き出します(もう一度押すと止まります)。初期状態では5時の方角を向いているので右下方向に向かって移動を始めます(実際には車の位置は変わらず、地図部分がスクロールしていきます)。矢印の「左」や「右」を押して、なるべくコース上を走るようにしてみましょう:
2019081703
(↑ 1990年にセナとプロストが接触した1コーナー)


ぶっちゃけコースアウトしようが、何かと接触しようが車は動き続けます。なので「細かいことは忘れて」コースを走り続けましょう:
2019081704
(↑ 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 モナコグランプリ市街地コース上です。これから最終コーナーに向かうラスカス・コーナーのあたり:
2019081705


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


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


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


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


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

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

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

2019081601


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

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


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


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


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


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

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


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



(3)翻訳作業
翻訳する対象のプロジェクトを選ぶと、そのプロジェクトの文字リソース一覧が表示されます:
2019081601


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


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


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


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


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

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


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


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


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

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



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

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

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

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



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



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


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


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


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


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


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


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

通常の SD カードであれば、GV-HDREC から SD カードを抜いて PC 等に差し替えて・・・となりますが、FlashAir を使っている場合であれば、このまま専用スマホアプリからアクセスしたり、PC から無線 LAN で接続して内容を確認することができます。これ超便利!
2019081501
(↑ \DCIM\101HDREC\ フォルダ内に動画ファイルが格納されている)


後はこの状態のまま動画を再生することもできますし、ダウンロードして利用することも可能です:
2019081502
(↑ 懐かしの Space Cadet を Windows 10 で遊んだ様子を録画してました)


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





2019年6月24日にラズベリーパイの最新モデルである Raspberry Pi 4 Model B (以下、「ラズパイ4」)が発表されました:
5682-1


これまでラズパイ1から3までは機能面での変更(強化)が主でした(2と3はケースもほぼ同じ)。今回はインターフェース的な変更もかなりあります。まず電源が microUSB から USB Type-C になりました。HDMI も micro HDMI (しかも2つ)になっています。またこれらの変更に伴い、ケースの形状も変わることになると思います。これら3つは従来との互換性がないため、(ケースは最悪なくても動きますが)ケーブルや変換アダプタはあらかじめ用意しておく必要があります。

あと目で見えにくい点では以下のような変更があります:
・CPU は Cortex A72
・メモリは 1GB, 2GB, 4GB から選べる(個人的にこれが一番うれしい!)
・有線 LAN は Gigabit Ethernet 対応
・4つの USB ポートのうち、2つは USB 3.0 対応
・(micro HDMI ポートが2つあるので)デュアルモニター対応


また OS である Raspbian OS もラズパイ4の発表にあわせて Raspbian Buster がリリースされています:
https://www.raspberrypi.org/downloads/raspbian/


このラズパイ4、すでに販売も開始されていますが、技適の問題もあって日本での販売開始はまだ少しかかる見込みです。いわゆる日本の大手サイトではまだ取り扱いがありません。残念です。

ただ日本の大手以外のオンラインサイトを探せば入手自体は可能なようです。例えば英 PIMORONI のオンラインショップでは周辺機器もあわせて購入することができ、international shipping fee を払うことで日本への出荷もしてもらえるっぽいです:
2019080901


※ただ今日(2019年8月9日)時点ではどこも 4GB モデルが売り切れていたり、品薄状態になっているように見えます。またオフィシャルケースも売り切れ続出っぽい印象です。


自分もせっかくなので(笑)PIMORONI で 4GB モデルを1つ購入してみて、先日届きました(到着まで2週間くらいかかりました):
EBc-HPAU4AAeKjC


早速動かしてレビューを・・・としたいところですが、厄介な技適の問題があります。自宅では有線 LAN も使っているのですが、有線 LAN を使えば技適の問題はクリアされるかというと、そんな単純な問題でもないらしく、、どうやら観賞用となってしまいそうです。うーん、残念。。。




・・・とあまりに残念がっていたら、実際にラズパイ4を使う様子を夢に見てしまいました。というわけで、以下は僕が夢で見たラズパイ4を使う内容を念写した様子でご紹介します。実際の様子ではなく残念です。 (^^;

とりあえず OS イメージを準備します。公式サイトから Raspbian Buster の最新版をダウンロードしてインストールします。今回はインストールが楽そうな Raspbian Buster with Desktop を選びました。こいつをダウンロード&展開して microSD カードに焼き付けます(この辺りはラズパイ3までと同様):
2019080903


ラズパイ4にケーブルを取り付けます。HDMI は変換アダプタで micro HDMI にして接続、有線 LAN のイーサネットケーブルを接続、マウス一体型の USB キーボードを USB ポートに接続、そして USB Type-C の電源ケーブルを接続しました(夢の中で):
IMG_8321
↑念写①


ちなみに僕が使っている HDMI 変換アダプタはこれです。HDMI 変換アダプタをまとめて購入しました:



電源ケーブルにもよりますが、有線 LAN は使える環境にある場合は使った方がいいかと思います。実は初期セットアップ中に無線 LAN をサーチして設定・・・しようとすると、電源が足りないのか、初期セットアップ途中で何度もリブートが発生してしまいました(夢の中で)。有線 LAN にして無線 LAN セットアップをスキップしたら初期セットアップは無事に完了しました。ラズパイ3でも感じていたことですが、ラズパイ運用中に起こるトラブルの要因に無線 LAN が関わることはそこそこの頻度で発生している印象です。

そして SSH を有効にして一旦再起動をかけます(夢の中で)。

再起動後に "top" コマンドでメモリも 4GB あることが確認できました:
2019080905
↑念写②


次に行ったのがスワップメモリサイズの変更です。Raspbian は標準状態だとスワップメモリは 100MB しか設定されていません。まあ SD カード上に作るスワップメモリをどう考えるかだとは思いますし、今回 4GB メモリのモデルを購入しているので、スワップなしでもいいという考え方もあるとは思います。が、自分は「物理メモリと同等サイズのスワップメモリ」信仰を信じて、スワップメモリを 4GB に拡張することにしました。具体的な手順はこちらを参考にしています:
ラズパイ(Raspbian)のスワップ容量を変更する

上記手順実行後に改めてスワップ容量を調べ、ちゃんと 4GB に増えていることを確認しました(夢の中で):
2019080906
↑念写③


従来のラズパイ3と比較して CPU が強化され、メモリも 4GB モデルが選べるようになり、グラフィックも強化されたことでデスクトップとしての利用も快適になるのではないかと期待しています。今後もそのあたりを中心にいろいろ使ってみようと思っています(夢の中で)。

先日行われた「Maker Faire Tokyo 2019 」で購入した「キータッチ」というガジェットを使ってみました:
https://keytouch.org/

2019080703


キータッチは "Raspberry Pi Shop" として有名な長野県の株式会社ケイエスワイ様が製造・販売している電子ボードのガジェットです。ラズベリーパイと接続しても使えますが、Windows や macOS の PC でも利用できます:
2019080700


キータッチは「キーボードの信号をエミュレート」するガジェットです。USB キーボードのように USB ケーブルでキータッチと PC やラズパイを接続して使います(接続した PC から電気供給を受けるので、キータッチ側に電源は不要です)。そしてキータッチからの信号を受けると、PC 側でキー処理が行われます。例えば PC 側で「メモ帳」アプリが開いている状態で、キータッチから「Aキーを押した」という信号を受けると、メモ帳内に「A」という文字が入力されます。

ただキータッチは USB キーボードではなく、「キーボード信号のエミュレーター」です。実際、ボードのハードウェア的なキーボード要素はゼロで、「ある条件を満たした時に『A キーが押された』という信号を発する」ことができる電子ボードです(実際には  Aキーだけでなく、A から H までの8種類の信号を発することができます)。

そして上述の「ある条件を満たした時」の条件というのがキータッチ側に用意された2箇所の端子間が電線で接続された時になります。具体的にはキータッチ側の "A" キー端子と、"EARTH"(アース)端子とが伝導体で繋がった時に「A キーが押された」という信号が発せられます。
howto04


このような特徴を利用することで、キータッチ自体にキーボードは付属していないにも関わらず電気を通すあらゆるものをキーボード代わりにすることができる、という機能を持っていることになります。そして A キーや B キーを押して動かすことができるようなアプリケーションを開発・稼働しておくことで、キータッチに対応して動くアプリケーションとすることができる、というものです:
2019080704



試しに(先日のブログでも紹介した)このアプリをキータッチで使ってみました:
https://github.com/dotnsf/keytouch_sample


キーボードから入力した文字がそのままブラウザ画面に表示される、というシンプルなアプリケーションです:
2019080701


では実際にキータッチと一緒に使ってみます。付属のケーブルで PC にキータッチを接続します:
IMG_8279


この状態で上記のアプリケーションを起動し、ウェブブラウザで開きます:
2019080701


そして EARTH と A にクリップを繋いで、その2つのクリップをくっつけると・・・:
IMG_8280





ちゃんと "A" と表示されました。つまり期待通りに A キーの信号が PC に送られてきたことになります:
2019080702


このキータッチによって、キーボードがなくても(一部の)キーボード処理をエミュレートすることができるようになり、後は特定のキーが押されたイベントをハンドリングして動かすことのできるアプリケーションが用意されていれば、キータッチを使って動かすことができるようになります。叩いて動かすようなゲームであったり、人と人とが握手することでキー信号を送って動かすような体感型アプリケーションを作るなど、いろいろな応用が効きそうなポテンシャルの高いガジェットだと思っています。

僕自身はメーカーズフェアのイベント会場で購入しましたが、公式ページからオンライン購入が可能になっているようです。キータッチ本体のみで 3000 円ケーブル類まで付属したパッケージで 3500 円(それぞれ税別)らしいです。


このページのトップヘ