現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。トップ全記事一覧テクノロジー2010.04.02あたしルートラボこんにちは。LatLongLabの河合(@inuro)です。先日、ルートラボというサービスをリリースしました。routeというサービスの後継となります。今年3月末のALPSLABのクローズにともない、LatLongLabに移行しました。移行するだけでは相対的には退化なので、ルートラボでも色々と新しい試みを行っています。そもそもルートラボとはルートラボは、サイクリングコースや道案内などのルートを簡単に作成し公開できるサービスです。地図をクリックするだけのシンプル操作でルートが描ける地図と標高グラフが併せて表示される作成したルートをWebページに貼り付けたりTwitterでシェアできることが主な特徴です。実際にルートラボでルートを作成し、Webページに貼り付けるとこんな感じになります。今回、ルートラボはiPhoneからの閲覧に対応しました。クロスブラウザ対策を考えなくてはならないPC向けビューと異なり、iPhone向けビューはSafariを前提とした、より突っ込んだ実装が可能です。ルートラボで利用しているHTML5とCSS3の機能をいくつかご紹介します。オブジェクトを通じて現在位置の情報をJavascriptから利用することができます。ルートラボでは、現在地の周辺ルートの検索と、ルート閲覧中に地図上への現在位置のプロットに利用しています。navigator.geolocation.watchPositionを用いて測位を常時監視し、現在位置を更新しています。現在位置の緯度経度が世界測地系で度単位で得られます。得られた緯度経度の値は、YOLPのJavascript地図APIで、Y.LatLngコンストラクタにそのまま渡すことができます。lng);map.panTo(pos);accuracyで得られる測位精度の値は、存在可能範囲の半径(単位はメートル)になっていますので、これをparseIntし縮尺に合わせてメートル→ピクセルに変換して、現在位置を表す円の半径として使っています。CSS3で角丸グラデーションボタンiPhoneのSafariはCSS3をサポートしているので、これまでは静的な画像でなければ難しかったリッチなグラフィックスボタンもクライアント側で動的に描画することができます。この「検索」ボタンはこのようなCSSで実装されています。class="push"><span>検索</span></button>内容としては-webkit-border-radiusでボックスの角を丸める-webkit-box-shadowでボックスに影をつけるbackground-imageに-webkit-gradientで「iPhoneぽい」グラデーションを設定するtext-shadowでテキストに影をつけてエンボスぽくするという具合です。background-colorの値を変えることでボタンの色を変えることができます。「もうちょっと赤味が強い方がいい」「やっぱページ中のボタン全部青くして」といった無理難題に迅速に対応することも容易ですね。<canvas>でアイコンの動的描画また、この「>」アイコンは<canvas>で描画しています。この程度の画像であれば静的に用意してもよいのですが、<canvas>で動的に描くことでサイズや色の変更、回転といったフロントエンドの制作過程における試行錯誤が容易になります。具体的には以下のようなコードでドキュメントに動的に挿入しています。container.appendChild(canvas);}appendArrow(document.getElementById('container'));上記はだいぶ冗長なコードになっています。ラスタ画像がビューポートでクリップされ、DOMオブジェクトのサイズ一杯にストレッチされて表示されるといったあたりです。/heightが映像コンテンツのサイズです。4x3の映像を16x9のTVにそのまま映せば横長に引き伸ばされた絵になりますし、SD解像度の映像をフルHDTVに映せば拡大されてボヤけた感じになるのと同じです。上記コードの例で言えば、30x30に描画した「>」アイコンを30x30pxの範囲にストレッチしています。dotであり拡縮は発生していません。意図通りの描画になっています。'15px';このように縦に潰れて表示されます。このようにstyle.width/height共に2倍にしたらどうなるでしょうか。'60px';なんとなく綺麗に2倍に拡大された「>」アイコンを想定してしまいますが、実際にはこうなります。引き伸ばされるためこうなってしまいます。HTML5のワーキングドラフトでもこう述べられています。canvasベクタ描画には<svg>、ラスタ描画には<canvas>と使い分けましょう。Storageと呼ばれるクライアント側でデータを蓄積・永続化する仕組みがあります(Webと名が付いてますがサーバ側ではありません)。ルートラボではその1つであるlocalStorageを利用して、検索履歴の保存を行っています。Storageはシンプルなkey-valueストアです。getItem、removeItem、それとlengthおよびインデックス指定によるkeyの取得(つまりforループ用)、あとデータ全体のclear、とこれだけです。ルートラボではkeyを検索語、valueを検索回数として検索履歴を保存しています。}}実際にはremoveItemは行わなくても、setItemに既存のkeyを指定すれば上書きしてくれます。保存した検索語は、このようにして表示しています。//左のstorageは全角です、半角に直してご利用ください。}}localStorageは、COOKIEと異なり基本的には無期限に保存されます。localStorageの設定インタフェースを提供していないブラウザも多く、現にiPhoneのSafariにはありません。古いデータを削除するなどのメンテナンス機能はサイト提供者側で明示的に用意する必要があります。ルートラボでは保存された検索キーワードを一括で削除する機能を用意しています。}});なおlocalStorageはオリジン単位でユニークです。ドメインとポート番号が一致するドキュメントからは全て同じlocalStorageが参照できますし、できてしまいます。ページ間をまたいでデータを利用するのには便利ですが、同じドメインで複数のアプリケーションを運用する場合などは切り分けに注意する必要があります。Safariはアプリケーションプラットフォームとして充分な能力を備えています。iPhoneアプリが百花繚乱ですが、HTML5でiPhoneアプリケーションというのも面白いのではないでしょうか。AppStore申請もいりません。フィードバックを頂いて再リリースするサイクルが短いというのは、アプリケーションの品質を高める上でなにより強力なアドバンテージとなります。ルートラボはじめLatLongLabでもさらなるiPhoneならではの体験を引き続き提供していきたいと思います。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。