doodle開発記　石丸健太郎

こんばんわ。咳がひどくて喉をやられてしまいました。（＞＜）麻生太郎のようなドスの利いた声をしているけひんです。

月曜日にgoogleのパネルディスカッションで喋るので週末での回復を期待したいところですが、朝から地区の側溝掃除に土日2日間ぶっ通しで稲刈りの予定が入っています。昨年もやりましたが、慣れていないとハーフマラソンよりも疲れます。月曜日ヘロヘロにならない程度に頑張ります。。

さて本題の延び延びになってたiPhoneサイト作成TIPSです。夏の終わりにidoodleを作っていていくつか発見がありましたので、簡単ながらここに記してみたいと思います。

※以降のiPhoneのバージョンアップで挙動が変わってる場合がありますのでその旨ご了承ください。


１：080など数字に気をつけよ

iPhoneのSafariのおせっかい機能なんですが、いくつか並んだ半角数字を勝手に電話番号と認識してリンクを張ってしまうんですね。2008/08/25のような表記でも誤認識してしまいます。2008年8月なら大丈夫です。全角にするか何か数値以外のものを含めるなりして対処するといいかもです。
追記：以下のメタタグを書くと電話番号の認識をしなくなります。
<meta name="format-detection" content="telephone=no">


２：http://maps.google.com/にリンクを張るとiPhone標準のマップアプリを呼び出せる


これ、かなり便利です。なぜなら位置情報と連動させることにより事実上ナビ機能と化してしまうからです。今までのマップサイトですと「ココにこの店がある」というところまでは表現できても、自分が今いる位置からその店にまでどう行けばいいのか自分で探すほかありませんが、iPhoneのGPS機能によりリアルタイムで位置を捕捉してくれるので、まるでカーナビのような感じで近づいているのか遠ざかっているのかが、わかってしまいます。これは実際にやってみると知らない場所に行った時にはとても便利です。

それにマップアプリを終了させてもSafari側が前回の最終ページをそのまま保持しているので戻れるんです。これもかなりのポイントの高さといえます。

iPhoneは現在地の情報を外側に取り出すことに関してはなかなか頑なにできない仕様ですが、逆に発想を変えて、プレゼンテーションの手段として内側で（サイトやアプリ側で）位置情報を活用すると、意外にもすごく便利なマッシュアップアプリができるということがわかりました。

呼び出し方ですが
http://maps.google.com/maps?q=緯度経度
でいけます。
例：
http://maps.google.com/maps?q=N36.029153E138.108036

緯経度の前には方角を表す記号が必要です。日本であれば緯度の前にN（北緯）、経度の前にE（東経）を付けてあげればOKです。

http://maps.google.co.jpへリンクするとSafariの通常のマップサイトへリンクされるようです。

ちなみに来週月曜日のイベントでお披露目予定ですがiPhone経由でhttp://gs.geo.jp/
へ行くとgogo.gsさんのAPIを使ったデモで体感できます。（まだBeta版ですが）

見知らぬ土地に行った時にはものすごく便利なツールになりそうです。そしてこのことは現在のカーナビにこの機能があるとWebの世界を飛び出してマッシュアップアプリの世界が広がりそうな可能性を感じます。

３：ケータイ動画の3gpの再生は概ね大丈夫そう


ケータイ動画の3gpの再生は概ね大丈夫そうです。auで撮ったものは問題なくiPhoneのQuickTimeで再生可能でした。一部DoCoMoの機種では独自なデータが入っているのか再生できないものもありました。むむむ。。またdocomoかよ。。。

ついでにmp3も試しましたが、標準のQuickTimeで問題なく再生できました。iTunesがもともとPodcastに対応しているわけですから、勝手サイトであってもiPhoneでも問題なく再生できるのは嬉しいことです。

ちなみにYoutube動画の貼り付けも以前はjpドメインだとうまく行かなかったのですが、今はリンクでもembedでも問題なく再生できるようです。（リンクの場合はモバイルと判断して画面遷移にワンクッションはいります）

テスト：
http://jp.youtube.com/watch?v=4hxtd6WfFNk



４：残念ながらファイルアップロードは使えない

写真などのファイルを外に出すにはメールで送るか専用アプリしかないようです。ちなみに直接ケーブルで出す以外の方法では画像は圧縮されるうえ、Exif情報はすべてはぎ取られます。（＞＜）
どなたか位置情報を引き渡すゲートウェイアプリを公開してくれるようなネ申の登場をお待ちしています。。。

５：iPhoneアプリっぽいサイトを作るならiUIがすごく便利
idoodleや上で紹介したサンプルもiUIで作成していますが、まるでiPhoneSDKで作ったかのような見栄えがこのJavaScriptライブラリで出来てしまいます。同一ドメインのコンテンツなら自動的にAjax呼び出ししてくれますし、もちろんcookieなども普通に使えますので非常に便利です。

ちなみにリンクの方法が独特なので初めは戸惑うかもしれませんが、慣れてくるとサクサクいけるようになります。自コンテンツ内の移動であれば#id名で行い、他サイトへ移動する場合は必ずtarget="_self"を付ける必要があります。

こちらのページにとても丁寧な解説がありますのでご参考まで

以上5つのTIPSでした。お役にたてば幸いです。
それではよい週末を。。。