iPhone/iPod touch向けWebサイトの作り方を調べました

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まで)
サイズ指定がない場合は150×300px
coolie 自動削除
キャッシュ 1ページあたり10MB

iPhone対応サイトのお作法 – iPhone 3G DevWikiのページに、サポートされる動画仕様など、より詳細な情報があります。

※参考書籍:現場のプロから学ぶXHTML+CSS
※参考記事:iPhone OS 3.0リリース記念! iPhone/iPod touchのUserAgent一覧 – 理想未来はどうなった?iPhone用サイトの画面サイズなど

縦向き表示の場合

メニューバーの高さ 幅320px×60px
表示エリア 幅320px高さ356px
メニューバー 幅320px×高さ44px

横向き表示の場合

メニューバーの高さ 幅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用です)。

20090705_iphoney

ウインドウの向きは、縦・横、どちらにもできます。また、ブラウジング中にUAをMacまたはiPhoneのどちらか(又は任意のUA)に切り替えることも可能です。
これでフリーソフトはすごいですね。是非Windows版も出して欲しいです。

iPhone用サイトのショーケース

私がよく見ているのは、海外のサイトですが”Mobile Awesomeness”です。

20090705_mobilewebgallery

主にiPhone用サイトのスクリーンショットを1サイトにつき4枚程度掲載しているので、サイトや画面遷移のイメージが掴みやすくて参考になります。
やはり、画面の小さいデバイスで見ることになるので、シンプルかつ文字などの細かい部分がはっきりと作られたサイトが多いようですね。

参考書籍

最後に、現時点でiPhone用サイト製作について、比較的詳細に書かれていると思われる書籍を記載しておきます。

iPhoneのブラウザはSafariのみなので、コーディングチェックなどはそれほど手間がかからないと聞いたことがあるのですが、製作に入る前に、やろうとしていることが技術的に可能なのか、構造に矛盾する箇所がないか、よく調べておく必要がありそうですね。

何かのお役に立てば幸いです。

コメントを残す