iPhone 3G発表記念!
iPhoneにおける次世代モバイルブラウジングの波

この記事を読むのに必要な時間:およそ 4 分

実践:iPhone向けサイト制作

それでは,これから実際にiPhone向けのサイト作りについての具体的な説明をいたします。

表3 ユーザエージェント(UA)定義

iPhone“Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML,like Gecko) Version/3.0 Mobile/1A543a Safari/419.3”
iPod Touch“Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,like Gecko) Version/3.0 Mobile/3A100a Safari/419.3”

iPhone専用ページ作成方法

下記のいずれかの方法でiPhone専用のCSSおよびページにサイトを転送します。

①スタイルシートを分ける方法

iPhoneでアクセスしたときに専用のCSSを読み込ませる方法です(リスト1)⁠

リスト1 スタイルシートを分ける方法

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
 href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
②PHPを使い専用ページへ飛ばす方法

iPhoneを感知し適切なディレクトリへ転送する方法です(リスト2)⁠

リスト2 PHPを使い専用ページへ飛ばす方法

if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
 header( 'Location: /iphone' ) ;
}
③JavaScriptを利用し判別する方法

PHPが使えない場合はJavaScriptを使い転送する方法です(リスト3)⁠

リスト3 JavaScriptを利用し判別する方法

if (navigator.userAgent.indexOf('iPhone') != -1) {
 location.href = 'http://www.apple.com/iPhone';}

ビューポート(Viewport)に関する情報

iPhone特有のズーム機能に関する設定はビューポートと呼ばれるmetaタグで設定します。下記の表記の後にそれぞれのプロパティが入ります(表4)⁠

<meta name="viewport" xxx=””/>

表4 利用可能なプロパティ

widthページロード時の横幅,標準値は980。利用可能範囲は200~10,000
heightページロード時の縦幅,標準値は横幅の数値に対するアスペクト比によって設定される。利用可能範囲は223~10,000
initial-scaleページロード時のスケール値。標準値はスクリーンのサイズと同じ。利用可能範囲は[minimum-scale,maximum-scale]。ユーザは⁠つまむ⁠および⁠ダブルタップ⁠でズーム値を変更可能
user-scalableユーザのズーム動作の制御。⁠No⁠にするとズーム機能をoffにできる。標準値は⁠yes”
minimum-scaleズーム機能を利用する際の最小スケール倍率。標準値は0.25。利用可能範囲は0~10
maximum-scaleズーム機能を利用する際の最大スケール倍率。標準値は1.6。利用可能範囲は0~10

表4の設定はすべてを行わなくても,一部の設定値を元にSafariが自動的に他の値を判別します。たとえば,⁠scele⁠を1.0に設定した際は,画面の標準解像度である値(縦向き:320px,横向き:480px)が横幅として設定されます(リスト4)⁠

リスト4 ビューポートmetaタグ使用例

<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3,user-scalable=no" />
<meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />

その他のサンプル

電話番号にタグを付け,ワンクリックで電話ができるようにするには,リスト5のように記述します。

リスト5 電話番号にタグを付け,ワンクリックで電話ができるようにする方法

<a href="tel:4155551212">415.555.1212</a>.

上部に表示されるTooldbarを消すには,リスト6のように記述します。

リスト6 上部に表示されるTooldbarを消す方法

<script type="application/x-javascript">
 addEventListener("load",function()
 {setTimeout(hideURLbar,0); },false);
 function hideURLbar()<
 {window.scrollTo(0,1); }
</script>, 

このように記述を切り分けることで,PC向けサイト/iPhone向けサイトを展開することが可能です(図3)⁠

図3 筆者の会社のサイト(PC向け/iPhone向け)

図3 筆者の会社のサイト(PC向け)

図3 筆者の会社のサイト(iPhone向け) 図3 筆者の会社のサイト(iPhone向け)

トップ画面向けアイコン作成

続いて,ショートカットに関するTipsをご紹介します。最近のiPhoneソフトウェアアップデートによりサイトへのショートカットをトップ画面に追加できるようになりました。その際,ページの一部が自動的にアイコンとして利用されます(図4)⁠

①Photoshopなどで45px×45pxの画像(アイコン)を作る
②画像を「apple-touch-icon.png」という名前で保存する
③サイトのルートディレクトリにアップする,もしくはアップ先をページ内に指定する

例)

<link rel="apple-touch-icon" href="/Graphics/iphone-icon.png" />

図4 iPhoneのアイコンとしてサイトが登録される

図4 iPhoneのアイコンとしてサイトが登録される

iPhone対応サンプルサイト: Gmail

iPhoneが発売されてから1年近く経ちますが,アメリカ国内でもiPhone専用に対応しているサイトはいまだ多くありません。その中で,GmailのサイトはiPhone向けに特化したページを作成して,高いユーザビリティを実現しています(図5)⁠利用できる機能を制限することにより,小さな画面からでもストレスなくメールのチェックおよび検索が可能になっています。

図5 iPhoneに対応しているGmail

図5 iPhoneに対応しているGmail

今後の展望

発売開始以来iPhoneはその直感的なインターフェースによるユーザビリティの高さから,アメリカのモバイルユーザから絶大なる人気を獲得しています。指先で自由自在に画面をコントロールできるという画期的な操作方法で,今までのマウス+キーボードでは実現できなかった情報収集および表現が可能になります。

もしかしたらデスクトップコンピュータからもマウスとキーボードがなくなる日が近いうちにくるかもしれません。

著者プロフィール

Brandon Hill(ブランドン・ヒル)

btrax, Inc. 代表取締役。日本人の母,アメリカ人の父を持つバイリンガルWebコンサルタント。サンフランシスコ州立大学デザイン課卒業後,シーベルシステムズなどのWebサイトデザイン構築をはじめとして,シリコンバレーにてフリーのWebデザイナーとして活動。2004年より,外資系企業を中心にに日米両マーケット向けトータルWebサービスを提供するbtrax(ビートラックス)を立ち上げ,現在では日米マーケット市場に関するビジネスコンサルティング業務も実施。Webを介して日本企業が世界に羽ばたくのをサポートするのが目標。

URLhttp://blog.btrax.com/jp
iPhone向けサイト制作サービス:http://www.siteforiphone.com/jp

バックナンバー

モバイル

  • iPhone 3G発表記念! iPhoneにおける次世代モバイルブラウジングの波

コメント

コメントの記入