iphone/iPod touch向けWebサイトの作り方を調べました
iPhoneやiPod touch（私はiPod touchユーザーです）向けのWebサイトを作る仕事はまだやったことがないのですが、急にやることになっても大変な思いをしないように、どうやったら作れるのか、調べてみました。
iPhone向けホームページのHTML仕様
HTML4.01、XHTML1.0のに対応、CSSは2と3の一部に対応しているそうです。
また、画像フォーマットは、GIF、JPEG、PNGとTIFFにも対応していますが、一部サイズに制限がフォーマットもあるので、制作時には注意が必要です。
その他、UAなどの仕様を記載しておきます。
| 画面 | 3.5インチTFT液晶 |
| 表示サイズ | 320×480px |
| iPhoneのUA | Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 ※OS3.の場合 |
| iPod touchのUA | Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 ※OS3.0の場合 |
|
HTML |
HTML4.01またはXHTML1.0 |
| CSS |
CSS2.1とCSS3の一部に対応 |
| Javascropt | ECMAScript（実行時間は10秒未満） window.print()とwindow.showModalDialog()は使えません |
| DOM | DOM2、XMLHttpRequestを含むAjax |
| 画像フォーマット | JPG(32MBまで）、GIF、PNG、TIFF（2MBまで） |
| 動画 |
HTML5のcanvas要素(2MBまで） |
| coolie | 自動削除 |
| キャッシュ | 1ページあたり10MB |
iPhone対応サイトのお作法 – iPhone 3G DevWikiのページに、サポートされる動画仕様など、より詳細な情報があります。
※参考書籍：現場のプロから学ぶXHTML＋CSS
※参考記事：iPhone OS 3.0リリース記念！ iPhone/iPod touchのUserAgent一覧 – 理想未来はどうなった？iPhone用サイトの画面サイズなど
縦向き表示の場合
| メニューバーの高さ | 幅320px×60px |
| 表示エリア | 幅320px高さ356px |
| メニューバー | 幅320px×高さ44pｘ |
横向き表示の場合
| メニューバーの高さ | 幅480px×高さ60px |
| 表示エリア | 幅480px×高さ208px |
| メニューバー | 幅480p×高さ32px |
iPhone用サイトではできないこと
iPhone本体に保存されたファイルのアップロード、ファイルのダウンロードはできません。
また、FlashやJavaアプレットの表示・実行、何らかのプラグインをインストールすることも不可能です。
iuiライブラリを使う
WordPressには、サイトの表示を自動的にiPhoneに最適化するプラグインがあり、このサイトでも使っているのですが、MovableType用にもiPhone用のテンプレートが配布されています（こちらはプラグインではありません）。
”iPhoneテンプレート for MT”というのですが、このテンプレートの中で使われているのが、iuiライブラリです。
また、Yahoo!の画像検索でもこのライブラリを使っているそうで、”Yahoo!画像検索流 iPhone用ページの作成方法”という記事を見つけました。
具体的な使い方も、この記事に非常に詳細に書かれています。
簡単なページ遷移を含むサンプルのコードが掲載されているので、まずはこの通りに作ってみるとわかりやすそうです。
iPhoneシミュレーター”iPhoney”
そして、完成したWebサイトをチェックしたいけど、実機がない！ という人も少なくないかも知れません。
そんな時は、iPhoneyというシミュレーターを使って、表示が確認できます（このソフトはMac用です）。
ウインドウの向きは、縦・横、どちらにもできます。また、ブラウジング中にUAをMacまたはiPhoneのどちらか（又は任意のUA)に切り替えることも可能です。
これでフリーソフトはすごいですね。是非Windows版も出して欲しいです。
iPhone用サイトのショーケース
私がよく見ているのは、海外のサイトですが”Mobile Awesomeness”です。
主にiPhone用サイトのスクリーンショットを1サイトにつき4枚程度掲載しているので、サイトや画面遷移のイメージが掴みやすくて参考になります。
やはり、画面の小さいデバイスで見ることになるので、シンプルかつ文字などの細かい部分がはっきりと作られたサイトが多いようですね。
参考書籍
最後に、現時点でiPhone用サイト製作について、比較的詳細に書かれていると思われる書籍を記載しておきます。
iPhoneのブラウザはSafariのみなので、コーディングチェックなどはそれほど手間がかからないと聞いたことがあるのですが、製作に入る前に、やろうとしていることが技術的に可能なのか、構造に矛盾する箇所がないか、よく調べておく必要がありそうですね。
何かのお役に立てば幸いです。
Leave a Reply