iPhone特有の技術いろいろ

2008年10月31日(金)
松本 庄司

特殊リンクとは

 今回は、iPhone向けWebサイト制作での特有の技術について紹介します。

 その前に、Apple Developer Connection(https://developer.apple.com/webapps/)(開発者登録が必要)の「Web Dev Reference Library」にiPhoneでのWeb開発に必要なリファレンスがそろっていますので、参照してください(2008年10月現在)。

 iPhoneのSafariではプラグインやFlashが使えない代わりに、のリンクからネイティブアプリケーションを呼び出せます。

 まずはメールリンクですが、hrefに「mailto:foo@example.com」のように指定すれば、「dest@mail.addr」あてのメールを書くようにメールアプリケーションが起動します。「mailto:foo@example.com?cc=bar@example.com&subject=メールの題名&body=メールの本文」のように、「CC:」や題名、本文も指定できます。

 電話番号は「tel:XXX-XXX-XXXX」のように指定し、リンクをタップすると、そのまま電話できるダイアログが表示されます。このような明示的なリンクでなくとも、通常のページで電話番号らしき文字列(数字+区切り記号)があると、自動的にリンクが作られます。この機能は「」タグを

に入れることで抑制できます。

 マップは「maps:q=」や「http://maps.google.com/maps?q=検索文字列>」や「http://maps.google.co.jp/maps?q=検索文字列>」によって起動します。

 緯度や経度は「q=,」、「ll=,」で指定できます。前者はその地点にピンが打たれますが、後者は打たれません。また「q=,+(コメント)」とすることで、コメント付きのピンを打てます(参考:GoogleMapのクエリ一覧(
http://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/AppleApplicationsURLSchemes/chapter_950_section_4.html#//apple_ref/doc/uid/TP40006513-SW5))。

 動画や音声ファイルへのリンクは、クリックするだけで自動的にiPodアプリケーションが起動されます。サムネイルを表示したい場合は、の代わりにを利用し、「」のようにします。

 YouTube動画は「youtube:」か「
http://www.youtube.com/v/動画ID>」でYouTubeアプリケーションが起動します。後者は動画への直接リンクです。ページへのリンク「http://www.youtube.com/watch?v=動画ID>」もうまくいきます。

 ただし、リンクが「jp.youtube.com」の場合は、「jp.」の代わりに「www.」にしてしまいましょう。jp.youtube.comの場合、「/v/」はうまく動きませんし、「/watch?v=」の場合はWebページのほうに飛んでしまいます。

 YouTubeのページ埋め込みオブジェクトはそのまま使え、サムネイルも表示されます。実際にはしか見ていないようですので、サムネイルの大きさはのwidth、heightで指定します。

 iTunes Music Storeへのリンクも作れます。PCのiTunesStoreのアルバム上で右クリックし「iTunes Store URLをコピー」してリンクを作成すれば、iPhone上でもiTunesアプリケーションが起動します(現状でiTunes App Storeには未対応)。

回転、タッチ、ジェスチャーの扱い

 iPhone固有の処理として、画面の回転(図1-1)、タッチ操作(図1-2)、ジェスチャー(図1-3)の検知があります。

 イベント周りの詳しい説明はSafari Web Content Guide for iPhone OS : Handling Events(
https://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/chapter_7_section_1.html#//apple_ref/doc/uid/TP40006511-SW1)にあります。

株式会社モディファイ
CTO。ProjectVine、もじら組などオープンソース系コミュニティーでの活動後、大手SIerにてJavaによるアプリケーションフレームワークの構築を手がける。ベンチャーインキュベータを経て、現在は株式会社モディファイにてJavascript/CSSと格闘する毎日。http://www.modiphi.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています