RSS

KenG Blog

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

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

更新：2008年9月 3日 09:02

【追記】

◎2008.6.6

この記事も参考になる。

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

「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専用ページに自動でリダイレクトさせないほうがベター（フル画面を好むユーザもいるため）
Googleさんは、この記事をこう解釈しました

記事の詳細ページ

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

本日のBGM

★印があったら「これは聴いてみてほしい！」という推薦曲です。曲名をクリックするとiTunes Storeへジャンプします。

'; // loop through the songs in the array and get 4 fields that I want to see foreach ($songs as $song) { $output .= '
  • '; if ($song["Rating"] == 100){ $output .= ''.$song["Rating"].''; } $output .= '
    '; $output .= '
    '.$song["Name"].''; $output .= '
    '.$song["Artist"].''; $output .= ''.$song["Album"].''; if ($song["Year"]){ $output .= '('.$song["Year"].')'; } $output .= '
    • '; } // end the table $output .= ''; // show my new table print ($output); } ?>

    Now & Then

    Twitter Updates

      OAuthRequest('https://api.twitter.com/1.1/statuses/user_timeline.json','GET',array('screen_name' =>$search_word,'count' =>'3')); //Jsonデータをオブジェクトに変更 $oObj = json_decode($vRequest); //var_dump(json_decode($vRequest)); //オブジェクトを展開 for($i_tweet = 0; $i_tweet < sizeof($oObj); $i_tweet++){ $screen_name = $oObj[$i_tweet] -> {'screen_name'};//ユーザーID $profile_image_url = $oObj[$i_tweet] -> {'profile_image_url'};//プロフィール画像のURL $text = $oObj[$i_tweet] -> {'text'};//ツイート $date = $oObj[$i_tweet] -> {'created_at'};//時間 $tweet_time=strtotime($date);//Unixタイムスタンプ形式に変換 $now_time=time();//現在の時刻をUnixタイムスタンプで取得 $relative_time=$now_time-$tweet_time;//つぶやかれたのが何秒前か if($relative_time<60){//ss $displayTime = $relative_time.'秒前'; }elseif($relative_time>=60 && $relative_time<(60*60)){//mm $displayTime = floor($relative_time/60).'分前'; }elseif($relative_time>=(60*60) && $relative_time<(60*60*24)){//hh $displayTime = floor($relative_time/(60*60)).'時間前'; }elseif($relative_time>=(60*60*24)){//日付 $displayTime = date('n月j日',$tweet_time); } //表示 echo '
    • ' . $text .'' . $displayTime . '
      • '; } ?>
    follow me on Twitter

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