RSS

KenG Blog

WebサイトをiPhoneに最適化する方法

初出：2008年5月15日 19:13

更新：2008年6月 6日 20:07

「WebサイトをiPod touchに最適化する方法の説明会」があったので、行ってきました。iPhone用Webページを作るとっかかり的な内容で終わりましたけど、これを足がかりにし、jQueryなんかと合わせて色々作ってみようと思ってます。以下、ひたすら箇条書き。なお、Apple Developer Connection関連のコンテンツを見るにはADC登録が必要のよう。

◎iPhone上でのブラウザ設定項目

  • JavaScriptのON／OFF
  • ポップアップブロックのON／OFF
  • Cookie受け入れ

◎iPhone用ページ制作時の注意点

  • HTML / JavaScript / CSSはそれぞれ分割したファイルとする
  • CSSファイルは、PC用とiPhone用を別々に用意する

◎iPhoneのSafariは「Web標準」ベース

  • HTML4.01/XHTML1.0をサポート。WML（Wireless Markup Language）は未サポート
  • DOM Level 1/2
  • CSS 2.1 & 3.0
  • JavaScript ECMAScript 3.0
  • 上記仕様に沿うためにバリデーションツールを使おう

◎ブラウザを意識しないページ制作の心がけ

  • UserAgentを判別してコードを分けない
  • オブジェクトで判定する。if ("showModalDialog" in window) などでfalseを返されるとサポートしていない。
  • CSS 3のメディアクエリで、デバイス情報を元にした別個のCSSを使う（safariはscreenを使う）

◎iPhoneにおけるリソースの限界

  • テキストコードは10MBまで
  • TIFF / PNG / GIF は8MBまで（Height×Width×4 ≦ 8MB。×4はRGB+αチャンネル）
  • JPEGは32MBまで
  • アニメgifは2MBまで
  • JavaScript用メモリは10MB。実行時間は５秒まで（5秒で処理打ち切り）

◎新規ウィンドウ処理

  • 最大8ウィンドウまで開ける
  • target="_new" か window.open で処理する

◎モーダルダイアログの表示

  • alert(); / confirm(); / prompt(); をサポート

◎ネイティブファイル

  • OK：Excel、PDF、Word、Text、QTオーディオ&ビデオ（reference movもサポート対象内）
  • NG：Java、Flash、SVG ファイルシステム（ダウンロードコンテンツ）
  • ベクターグラフィックスはcanvasエレメントを使う　<canvas></canvas>

◎デバッグ方法

  • Safari 3との互換性をチェック（Webインスペクタを使用）
  • JavaScriptの解析は「Drosera」（WebKitに入っているFirebugみたいなもの）
  • iPhone上でのデバッグはDebug Consoleをオン

◎iPhoneへの最適化

  • コンテンツは縮小表示されることを前提とし、320×480pxでの表示を念頭におく（TIPS：980×1091pxで作ると、ぴったりフィットする）
  • ページのサイズは<meta name="viewport" content="width=320" />のようにWidth&Heightを指定
  • <body style="-webkit-text-size-adjust:auto">でテキストの自動スケーリング（none：大きくならない ／ auto：自動 ／ %指定）
  • 拡大した際に、視認性がよく、無駄な横スクロールが発生しないようにレイアウト（文字組み）に気をつける

◎入力方法は「手」

  • スクロールバーが見えていることは前提にしない
  • hoverは使わない
  • TIPS：iPhoneでは、二本指でPanするとiframe内をスクロール
  • pinchはイベントとして取得できない
  • コピー&ペースト、ドラッグ&ドロップ、文字選択はサポートしていない

◎さらなる最適化

  • iPhone用ページの機能を絞り込む
  • iPhoneアプリのようなルック&フィール／エクスペリエンス
  • ビルトインアプリとの統合。GoogleMapの場合は、Query / Location / Direction
  • Ajaxをベースにページを構築する
  • OSインターフェイスに馴染んだデザイン、アニメーション
  • Web Apps Dev CenterにサンプルCSSを参考にする
  • iUI（iPhone用ユーザインターフェイスライブラリ）を使う
  • iPhone専用ページに自動でリダイレクトさせないほうがベター（フル画面を好むユーザもいるため）

【追記】

◎2008.6.6

この記事も参考になる。

で、iPhone SDK入れた後にDashcodeを起ち上げてみたら、なんとiPhone向けWebアプリの開発環境が入っているじゃないか。RSSを表示するページなんて、2時間でデザインまでできちゃったよ。

Googleさんは、この記事をこんな風に解釈しました
Googleさんは、この記事をこんな風に解釈しました

コメント

コメントする











名前、アドレスを登録しますか?








このエントリーのトラックバックURL:

トラックバック一覧


記事の詳細ページ

記事の全文を表示します。関連するコメントやトラックバックなどもこちらからどうぞ。

本日のBGM

Ajaxで動いてます。詳しくはここ。

Now & Then

My Twitter

Copyright © 2005-2008 Wonderwall.net,co. All rights reserved. Contact Us.