GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る

     - FlashAir, leaflet.js

はてなブックマーク - FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る
Pocket

FlashAir

Gunma.web#23 のLTで知ってからずっと気になっていたFlashAirを買いました。

FlashAirとは

FlashAirは、東芝から発売されている「無線LAN内蔵SDカード」です。
無線LAN内蔵SDカードをデジタルカメラの保存メディアとして使用すると、カードを抜き差しせずにPCやiPhoneなどのデバイスに画像を転送することができます。

【レビュー】「FlashAir」を使ってデジカメ画像のワイヤレス転送にチャレンジしてみた – 大容量モデルや高速モデルも揃え、使いやすくなった無線LAN対応SDカード (1) 普通のデジカメがカード一枚で無線LAN接続対応になる | マイナビニュース

FlashAirは一般的な無線Lan内蔵SDカードとしての機能以外にも、様々な機能を持ったSDカードで、小型のマイコンとして使用することができます。
どんな機能が用意されているかは公式サイトに掲載されているスライドを見るのが早いでしょう。

    スライドを読むのがメンドウという人のための要約

  • WiFiのアクセスポイントになるよ!
  • Webサーバーになるよ!
  • Luaスクリプトを実行できるよ!
  • 他にも、GPIOが使えたりするよ!

Luaスクリプトは、電源投入時や画像保存時以外にもHTTPリクエストを送ることで実行できます。
つまり、このSDカード一枚で、無線Lanアクセスポイントを備えたWebサーバーとして使うことができるのです!
(GPIOについては、いずれまた)

Flashで地図配信サーバーを作る

Webサーバーが使える=地図が配信できる。
ということで、ネットに繋がっていなくてもつかえる地図サービスを作成してみます。

今回はとりあえず地図を表示するだけですが、最終的にはGPS付きのデジカメにFlashAirをさして、インターネットにつながっていなくてもその場で撮った写真を地図上で確認できるアプリを作る予定です。

FlashAir Developers – ドキュメント – ウェブブラウザ向けチュートリアル

タイル画像のダウンロード

地図を配信するというととても難しいように思えますが、自分でタイル画像を生成するのでなければ実は簡単です。既存の地図サービスからタイル画像をダウンロードしてwebサーバーに保存すればそれでほぼ完成です。

地図タイルをダウンロードする方法はいくつかありますが、今回はQGISを使いTileLayerプラグインで地理院タイルを読み込み、QMetaTilesプラグインを使用してタイル画像をダウンロードしています。
表示する範囲が広くなるほど多くのタイル画像を必要とするので、高崎エリアに絞ってダウンロードしました。

ダウンロードに関して詳しいことは下記サイトを参照してください。

TileLayerPlugin
QGISからタイル地図を作成する

・ダウンロードしたタイル
地図タイル画像

ちなみに、どんな地図タイルもダウンロードしていいというわけではないので注意。
(たとえばGoogle Mapsのタイルをダウンロードして勝手に使ったりすると、GoogleがあなたのGmailアカウントをHackして、地の底まで追ってくるかも)
ダウンロードする前に各地図サービスのライセンスを確認しましょう。

ファイル構成

ダウンロードしたタイル画像をFlashAirに保存します。
FlashAirをSDカードリーダーなどでPCに繋ぎ、適当なフォルダを作成して投げ込んで(cpoy)いるだけです。
ついでに地図を表示するためのクライアントライブラリもFlashAirに入れておきます。
今回は、leaflet.jsを使いました。

ファイル構成は以下のようになります。
FlashAir地図ファイル構成
写真に写っている「D3.js」や「webix.js」は個人的な趣味でいれているだけなのでなくても良いです。

サンプルコード

地図を表示するページ(index.html)を作成します。
l.tileLayerの設定で、ローカルの tiles ディレクトリを読みにいくように指定している以外は特に変わったことはしていません。

FlashAirの設定

FlashAir 内の /SD_WLAN/CONFIG ファイルを編集することで設定を変更することができます。

FlashAir Developers – ドキュメント – APIガイド – CONFIG

FlashAirに接続するだけであればデフォルトのままで問題無いはずですが(忘れた)、アクセスポイントに接続するためにSSID(APPSSID)とパスワード(APPNETWORKKEY)を確認しておきましょう。
CONFIGファイルが見つけられないという方は以下を。

Macの隠しファイルや隠しフォルダを表示する裏技 / Inforati
隠しファイルを表示する – Windows ヘルプ

動作を確認する

FlashAirに接続する端末(PCやiPhone)の無線Lan設定で、FlashAirのアクセスポイントを指定し接続します。
接続出来たら、ブラウザを立ち上げアドレスバーに http://flashair/ を入力して移動します。

正しくFlashAirに接続できれいれば、下記のようなファイル一覧画面が表示されます。
名前解決ができない(http://flash/が見つかりませんなどがでる)場合は、ipアドレスでアクセスしてみてください。デフォルトだと http://192.168.0.1/ になっていると思います。
FlashAir 2016-06-07 10-15-30

mapフォルダをクリックすると地図が表示されるはずです。

FlashAir Maps

・モバイルバッテリーにさして、どこにでも持ち運べるweb地図サーバーの出来上がり。
FlashAir

次回予定

「FlashAirをGPS搭載のコンパクトカメラに差し込んで、保存(撮影)された画像をExif情報をもとに地図上に表示する」というのをやります。

総括

もはや「SDカードとは?(哲学)」といったぐらいに多機能なFlashAir。SDカードに対応した様々なデバイスに差し込んでつかえるので、アイデア次第でいろんな活用法できそうですね。FlashAirと連動させて使えるセンサーモジュール「Mr.Scale」というデバイスも開発中らしいので、楽しみ!

はてなブックマーク - FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る
Pocket

 - FlashAir, leaflet.js

  関連記事

手書き風地図
Leaflet.jsとD3.jsを使って手書き風の地図を表示する

実用性はありません。あとIEで動きません。 example スライダーを右に移動 …

d3leaflet2014051
【D3.js】 LeafletにSVGをオーバーレイする。

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示す …

道路上のマーカー
「ポケモンGOみたいなゲーム作って〜」と言われたときのために、巨人(Google)の力をかりて、道路上にランダムにマーカーを設置する。

そろそろ、世間では「ポケモンGOみたいの作ってー作ってー」という無茶振りと、それ …

Antique shop
Leaflet.jsで画像を表示する

先日の「社寺参詣曼荼羅」が面白い。の記事で、曼荼羅画像をLeaflet.jsを使 …

戦後復興期/現在 比較地図
戦後・復興期と現在の空中写真を並べて比較してみた

【趣味のインターネット地図ウォッチ】 国土地理院、戦後・復興期の航空写真をウェブ …

leaflet quickstart
ぬるぬる動く!Web地図クライアント「Leaflet」を使おう!

D3.jsと組み合わせても使いやすい、Web地図クライアントライブラリの大本命… …

turf Aggregation example
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」

選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example T …

那智参詣曼荼羅図
「社寺参詣曼荼羅」が面白い。

最近、社寺参詣曼荼羅というものの存在を知りちょっとしたマイブームになっているので …

mapdorpshadow
【D3.js】地図上にオーバーレイしたSVG要素にドロップシャドウを付ける

昨日の記事でLeafletで作成した地図上にSVGをオーバーレイしましたが、地図 …

Turf buffer example
Turf.jsを使って地図上に動的にバッファを描く

バッファは対象とする点や線・面に沿って特定距離の範囲エリアを生成する機能です。 …