連載

2011年12月21日

【第23回 HTML5とか勉強会レポート】 HTML5のデバイス＆位置情報系APIを使いこなせ！：D89クリップ（33）（2/2 ページ）

モバイルデバイス上のWebアプリの未来を担う、HTML5のデバイス系と位置情報系APIを使いこなせ！getUserMediaや、Geolocation APIとは？

[@akio0911，拡張現実ライフ] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

GEOHEX & Geolocation API

　　最後は、笹田氏（@sa2da）によるプレゼンだ。

　笹田氏は、シリコンバレーで開催された位置情報サービス関連カンファレンス「Where2.0」のショートプレゼン大会において、唯一の日本人として登壇している。

　また、第5回おばかアプリ選手権で優勝したそうだ。その時の作品については後述する。今回のプレゼンのスライドは以下のslideshareにて共有されている。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

Geolocation APIの基礎

　まずはGeolocationAPIの基礎から説明された。getCurrentPositionで現在地を取得したり、watchPositionを使うと現在地を取得し続けたりできる。

測位手段の選択は不可

　Geolocation APIでは、測位手段を選択することができないそうだ。

　下記に、スマートフォンなどで使用される主な測位手段を挙げる。

GPS：測位に時間はかかるが、精度が良い
IP：測位が早いが、精度が悪い
Wi-Fi：精度はまあまあだが、Wi-Fiをオンにしておく必要がある
基地局：キャリアによって精度がバラバラ

accuracyとspeedの精度

　position.coords.accuracyは緯度経度の精度、position.coords.speedは移動速度を表しているが、当てにならないとのこと。

　例えば、speedは高度計・加速度・電子コンパスなどを用いているわけではなく、あくまでGPSなどによる連続測位を基に算出されたデータなのが原因だそうだ。

キャッシュに注意

　Geolocation APIはキャッシュが強いので注意が必要とのこと。このためgetCurrentPositionではなく、watchPositionで数回データを取得した方が精度が高くなる。

許可フラグに注意

　位置情報の一括オン／オフ・サイトごとのパーミッション、JavaScriptのオン／オフなど許可フラグが複数存在し、すべてがクリアでないと良い精度で測位できないので注意が必要である。

サービス設計時の注意点

　位置情報を用いたサービスでは、実機検証が最も大事であることを指摘した。

　測位のズレ具合や測位に要する時間は、条件によって大きく異なる。その日の天気や時間などが作用することもあるそうだ。

　また、位置情報を使用したサービスは屋外で使用されることが多く、「まぶしくて画面が見えづらい」といったこともあり得るので、画面反射を考慮して配色する必要があるとのこと。

　さらに、チェックインサービスなどではお店の店内などに入ってからチェックインすることが多いので、屋内での不正確な測位も考慮しておく必要がある。

Geolocation APIのデモサイト

　Geolocation APIを使用したデモサイトGeo Meterが紹介された。ぜひお手持ちの端末で動作を確認してみてほしい。

関連：▼　Geo Meter

GeoHexの紹介

　Geolocation APIの測位結果は数10cmのような精度で扱いづらいので、地図を六角形で区切って「だいたいこの辺りです」という表現を可能にした仕組みがGeoHexである。

　Hex（六角形）の大きさはレベル0からレベル25まで用意されており、用途に合わせて選択することができる。

　また、通常の矩形メッシュシステムでは矩形同士の距離が等間隔ではないが、GeoHexでは六角形なので等間隔になるのが利点である。

　さらに、GeoHexのアルゴリズムとソフトウェアのライセンスにはクリエイティブ・コモンズ（帰属／継承）モデルを適用することで、オープン性を強調し、コミュニティパワーを増幅しているとのことだ。そのことにより、多くのエンジニアによる普及活動拡大が続けられている。

採用事例

　面白法人カヤックのTHE KOF ENCOUNTERでは、GeoHexを利用することで距離・領域判定をヘックスで簡略化し、サーバ負荷の大幅減に貢献したそうだ。

UNTレーダー

　第5回おばかアプリ選手権で大賞を受賞した「UNTレーダー」でもGeoHexを活用したとのこと。

Styled Map + CSS3アニメーション + GeoHex

　Google Maps APIのStyled Map、CSS3アニメーション、そしてGeoHexを組み合わせることで、クールな地図表示を実現できることを示した。

参考：
▼Google Maps API Styled Map Wizard
▼GreenMap Sample（GreenMapのみ）
▼GreenMap Sample（GreenMap + グラデーションエフェクトのみ）
▼GreenMap Sample（GreenMap + Hex）

見ていて飽きないデバイス＆位置情報系勉強会

　getUserMediaのライブコーディングや、Geolocation API＋GeoHexのデモなど、見ていて飽きない勉強会だった。

　デバイス系APIが今後さらに活用されていくことで、モバイルデバイスにおけるWebアプリケーションの利便性がさらに高まっていくと思われる。

筆者紹介

拡張現実ライフ

akio0911（ブロガー・iPhoneアプリ開発者）

AR(拡張現実)・iOSアプリ開発・書評・グルメがメインのブログ「拡張現実ライフ」の中の人。cocos2d for iPhoneレッスンノートを執筆（共著）。世田谷ものづくり学校の自由大学にてアプリクリエイター道場の講師を担当。アプリクリエイターにメイキングストーリーをインタビューしていく番組「ハイパーアプリクリエイターズ」も手掛ける

「次回」へ

「D89クリップ」バックナンバー