ユーザー体験のための、11個のハウツー for iPhone (意訳)
Posted: Updated:
怪しい意訳へようこそ。
iPad用のHTMLを作成中に調べ物をしたら、中々まとまっているAppleが提供しているハウツーコンテンツがあったので紹介。精度はやや怪しいので不明な点は原本をあたってください。
原本：User Experience Coding How-To's for Safari on iPhone
on iPhoneとありますがiPadでも変わらず利用できます。
1. 表示可能なスペースに対して、良い感じのサイズで表示するにはどうしたらいいの？
Ensure that my web content uses all of the available screen space on iPhone?
iPhoneのSafariは、小さいスクリーンでウェブページを表示するために、表示エリアのwidthを仮想的に広げて、コンテンツを縮小表示します。標準では980pxに指定されているところを、720pxとして指定するには、下のように書けばok
<meta name="viewport" content="width=720" />
表示に使用しているクライアントデバイスの解像度に自動で合わせるには、下のように書けばok
<meta name="viewport" content="width=device-width" />
注釈 : Viewportの概念は、iPhone向けWebアプリを作ろう（3/4） − ＠ITがとても分かりやすいの一読のほどをオススメ。
2. ホーム画面に登録したときのアイコンはどうやって設定すればいいの？
Create a Home screen icon for my website or web application?
57x57pxのpngイメージを用意して、headタグ内に下のタグを仕込めばok
<link rel="apple-touch-icon" href="/my_custom_icon.png">
注釈 : apple-touch-icon-precomposedと書いた場合、自動でかかるアイコンへのテカり処理がなくなる。 : iPadやiPHone4などの高解像度端末が増えてきたので、もっと大きめサイズで作っておくと良い。
3. iPhoneのSafariについてるUIパーツを隠してWebアプリっぽく振る舞うには？
Hide the Safari on iPhone OS UI components when my web application is running?
headタグ内に下のタグを仕込めばok
<meta name="apple-mobile-web-app-capable" content="yes" />
4. 閲覧者のズーム操作を禁止するにはどうしたらいいの？
Disable user zooming and scaling in my web application?
headタグ内に下のタグを仕込めばok
<meta name="viewport" content="width=device-width, user-scalable=no" />
5. iPhoneデバイスの回転を検知して、何かするにはどうしたら？
Detect iPhone orientation changes in my web application?
Javascript的な話。bodyでorientationchangeイベントをlistenすればok。window.orientationプロパティを参照すれば、傾き（角度）の値が入っている。下の例では、myOrientationChangeFunction内に任意の処理を書けば、デバイスの回転を検知して、処理を実行する。
<body onorientationchange="myOrientationChangeFunction()"></body>
6. 状態によって読み込むCSSを振り分けるには？
Conditionally load CSS that I have customized for iPhone?
cssファイルそのものを読み分けるには、headタグ内に、下のタグを仕込めばok
<link media="only screen and (device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">
cssファイル内で分岐させる場合は、下のように書けばok
@media screen and (device-width: 480px) {
p { color: white; background-color: black; }
}
ブロックの閉じ方が、プログラムっぽい。やってることは条件分岐だし、プログラムの基礎ですな。
注釈 : iPhoneの実装ではなく、CSS3のMedia Queriesとしての実装。前に取り上げたエントリーはこちら → iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queries
7. YouTubeやMaps、iTunesみたいなアプリを立ち上げさせて表示するには？
Launch iPhone applications, like YouTube, iTunes, or Maps, to display content?
Mapは下のように書けばok。例のcupertinoはMapの検索クエリー。地名を書けば良い。
<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
iTunesへのリンクは下のように書けばok。リンクの生成には、iTunes Link Makerを使う。
<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093464&id=156093462&s=143441">
Randy Newman - Toy Story - You've Got a Friend In Me</a>
その他、Apple URL Scheme Referenceを参照すること。
注釈 : 基本的に、YoutubeもMapsも普通にリンクしたら対応Appが立ち上がるようになっているみたい。
8. Webページから、iPhoneで電話をかけさせるには？
Dial a phone number from a webpage on iPhone?
下のようにa要素にhref属性として、電話番号を指定すればok
<a href="tel:1-408-555-5555">1-408-555-5555</a>
電話appも、他のappと同じようにURLスキーム扱いなのかしら。
9. 逆に、電話を勝手にかけさせないようにするには？
Disable automatic detection of phone numbers in webpages?
headタグ内に下のタグを仕込めばok
<meta name="format-detection" content="telephone=no" />
10. 単語の自動補完や、最初の一文字が大きくなるのを無効にするには？
Disable automatic correction and automatic capitalization in text fields or text areas?
最初の一文字を勝手に大きくするのは、下のようにautocapitalize属性でon/off
<textarea rows="2" cols="20" autocapitalize="off"></textarea>
単語の自動補完は、下のようにautocorrect属性でon/off
<input type="text" autocorrect="off" autocapitalize="off">
これのautocapitalizeのほうを求めてググったら、これの元ページにたどり着いた。
11. 入力要素がフォーカスされたときのキーボードの種類を変えるには？
Control which keyboard is displayed when a user touches a text field?
下のようにtype属性の中身や、pattern属性の中身を元に決定される。多くはHTML5の実装であり、iPhoneOS 3.1以降でサポートされる。
Text: <input type="text" /> <!-- display a standard keyboard -->
Telephone: <input type="tel" /> <!-- display a telephone keypad -->
URL: <input type="url" /> <!-- display a URL keyboard -->
Email: <input type="email" /> <!-- display an email keyboard -->
Zip Code: <input type="text" pattern="[0-9]*" /> <!-- display a numeric keyboard -->
これは知らなかった。話には聞いていたけど、pattern属性ってまんま正規表現すね。数字は、定番の\d*指定でもいいみたい。頻出パターンはコピペ用ソースがすぐに充実することでせう。
以上
iPhoneに対する最適化だけでなく、HTML5やCSS3といったモダンな実装への対応が多く含まれているので、一読して損はないと思うのです。可能ならば実践も。ではでは。
