iPhone向けSafari、HTML拡張属性を使いこなす
iPhone向けSafariでは、W3C標準のHTMLタグ・属性をサポートしているのはもちろんだが、iPhone固有の拡張属性・拡張CSSプロパティが使用できる。具体的には、テキストの入力方法を制御するものからタッチパネル操作専用のイベントハンドラ、バックライトの制御といった機能まである。
今回はiPhone固有のHTML拡張属性を紹介したい。
関連記事：
- 円記号をiPhoneのブラウザに表示するには？
- maxlengthで半角文字数で制限するには？
- iPhone でHTTPプロキシを使用する際の制限
- スマートフォンのラジオボタンを使いやすいサイズにするには？
- スマホ向けページャデザイン 3選
- CSS3 擬似クラス
SafariのPC版とiPhone版との違い
冒頭で少し述べたように、iPhone版のSafariはPC版Safariと比べるとiPhone向けにマークアップ言語が拡張されている。というのも、iPhoneにはタッチパネルや文字入力支援機能のようなPC版Safariにはない機能がある。これらの組み込み機能を利用できるよう、HTMLの仕様が拡張されたようだ。
iPhone向けSafariでのみ使える拡張属性
以下がiPhone向けSafari固有の属性一覧になる。このうち、最初の2つはテキスト入力に関する機能で、それ以降が追加のイベントハンドラだ。
| 属性名 | 値 | 使用可能 タグ |
説明 |
|---|---|---|---|
| autocapitalize | on / off | input textarea |
文頭文字の大文字化機能の On/Off |
| autocorrect | on / off | input textarea |
オートコレクト機能の On/Off |
| ongesturechange | [JavaScriptコード] | ほぼ全てのタグ | マルチタッチによる画面操作中に位置が移動したときに実行するスクリプト |
| ongestureend | [JavaScriptコード] | ほぼ全てのタグ | マルチタッチによる画面操作が終了したときに実行するスクリプト |
| ongesturestart | [JavaScriptコード] | ほぼ全てのタグ | マルチタッチによる画面操作が開始したときに実行するスクリプト |
| onorientationchange | [JavaScriptコード] | body | 端末の向きが変化したときに実行するスクリプト |
| ontouchcancel | [JavaScriptコード] | ほぼ全てのタグ | 画面タッチがキャンセルされたときに実行するスクリプト |
| ontouchend | [JavaScriptコード] | ほぼ全てのタグ | 画面タッチ中に指が離れたときに実行するスクリプト |
| ontouchmove | [JavaScriptコード] | ほぼ全てのタグ | 画面タッチ中に位置が移動したときに実行するスクリプト |
| ontouchstart | [JavaScriptコード] | ほぼ全てのタグ | 画面タッチが開始したときに実行するスクリプト |
※HTMLリファレンスにはonunload属性はiPhone OS 2.1以上でのみサポート、というような記述があったけど、PC版Safariでも普通に使えるから上の表からは除外した。
※iPhone OSのバージョンにより、使用可能な拡張属性も異なる。iPhone OS 2.2以上では、表内の属性全てに対応している。
autocapitalize属性
autocapitalize属性は、フォームでテキスト入力する際、文頭の文字を自動的に大文字にするかどうかを指定する。英語圏では便利な機能かもしれないけど、日本で使用する場合はあまり使わない。しかも、ログインIDを入力するようなときにも困ってしまう。自動大文字入力機能をOFFにするには、該当のinputタグもしくはtextareaタグに次のように設定する。
<input type="text" name="login_id" size="16" autocapitalize="off">
ちなみに、自動大文字入力はiPhone側の設定でもOFFにできる（[設定]→[一般]→[キーボード]→[自動大文字入力]→[オフ]）。けど製品出荷時の設定は自動大文字入力がONだから、Webサイト側で対応しておく方が便利かも。
autocorrect属性
autocorrect属性は、フォームでテキスト入力する際のオートコレクト機能を制御する。これは修正候補を入力フィールドの下部に出してくれるというもので、これをON/OFFに設定できる。
が、オートコレクト機能は英語モードのときしか機能しないようだ。autocorrectの設定に関わらず日本語の入力候補は必ず表示されることもあって、あまり使う機会はないかも。
ongesture～属性
ongestureから始まる属性は、複数の指による画面操作（ジェスチャー）を行った際に実行されるイベントハンドラ。例えばongesturestart属性には、二本指でタッチした後に下方向に動かす、といった操作を開始したときのJavaScriptコードを指定する。
<img src="images/rectangle.gif"
ongesturestart="window.alert('ジェスチャーが開始されました。');">
タッチ位置の取得とかiPhoneのJavaScriptはさらに奥が深いのでこの辺で・・・。
onorientationchange属性
iPhoneを横向きや縦向きに変更したときに実行されるイベントハンドラ。向きを変更したときの再レイアウトなどに利用できそう。
<body onorientationchange="window.alert('向きが変化しました。');">
ontouch～属性
画像やボタンなどをタッチしたときに実行されるイベントハンドラ。onmouse～のタッチ操作版と言ったところ。
<img src="images/rectangle.gif"
ontouchstart="window.alert('画像がタッチされました。');">
iPhone向けSafariでのみ使えるmetaタグ
拡張属性の次はmetaタグの属性値の拡張だ。metaタグは一般的にメタ情報を表すだけだからブラウザの動作を変えることはできないけど、拡張された属性値を使うことでiPhoneのUIを変更することができる。
| metaタグのname属性 | content属性 | 説明 |
|---|---|---|
| apple-mobile-web-app-capable | yes | フルスクリーンモードを指定する |
| apple-mobile-web-app-status-bar-style | default / black / black-translucent |
ステータスバーの表示を制御する |
| format-detection | telephone=no | キーワード認識機能を制御する |
| viewport | width=device-width など多数 | 論理ウィンドウサイズを指定する |
この中でよく使うのがviewportの設定だろう。
<meta name=”apple-mobile-web-app-capable”>
ページを全画面表示するかどうかを指定する。とは言ってもどんなページでも指定できるというわけではない。Webページをホーム画面に追加し、ホーム画面からページを表示させたときのみに機能する。しかし、ステータスバーだけは常に表示されていて、消すことはできない。全画面表示の一般的なイメージとはちょっと違うなあ。
リファレンスによると、このmetaタグは次に紹介する<meta name=”apple-mobile-web-app-status-bar-style”>を指定するときに必ず指定するものだそう。
<meta name=”apple-mobile-web-app-status-bar-style”>
ホーム画面でのステータスバー（上部の時刻表示部分）の表示方法を以下の3つの中から指定する。ステータスバーを消すことはできないようだ。
- default：不透明（デフォルト色）で表示
- black：不透明（黒）で表示
- black-translucent：半透明で表示
このmetaタグ指定は、<meta name=”apple-mobile-web-app-capable”>と合わせて指定する。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent">
<meta name=”format-detection”>
HTMLのテキスト中に含まれる電話番号を自動検出し、リンク化する機能を制御する。が、電話番号の自動検出機能はどうも挙動が怪しい。
電話番号ではないはずの小数点やIPアドレス、郵便番号までもがリンク化されている！
電話番号検出機能はデフォルトでOn。しかも、リンクをクリックすると電話がかかってしまう。ということでこの機能は即OFFにするべし。
電話番号の自動検出を無効にするには、以下のように記述する。
<meta name="format-detection" content="telephone=no" />
<meta name=”viewport”>
論理ウィンドウサイズを設定する。デフォルト状態だと文字がかなり小さく表示されるから、設定することを強く推奨する。
<meta name="viewport" content="width=device-width" />
iPhoneでも使いやすいHTMLのサンプル
今回紹介した拡張属性を利用して商品購入ページのサンプルを作ってみた。
最後に
iPhoneのブラウザはかなり高機能という印象を受けた。タッチパネルのイベントハンドラも充実しているしアニメーション機能もあるようだから、HTMLだけでもちょっとしたゲームは作れそうな気がする。
CSSプロパティとかJavaScriptクラスも研究してみようかな？
関連記事：