トップ ヘルプ RSS ログイン

iPhoneWEBアプリ開発




Google
 





[iPhone]iPhoneのWEBアプリを開発するトピック

WEBアプリ開発

Web標準に対応

 iPhone版Safariは、デスクトップ版Safariと同じWeb Kitエンジンを使っており、以下のWeb標準技術およびセキュリティ機能に対応します。

  • HTML 4.01
  • XHTML 1.0
  • CSS 2.1(およびCSS3の一部)
  • ECMAScript 3(JavaScript?
  • DOM Level 2
  • AJAX(XMLHTTPRequestなど)
  • SSL 2、 SSL 3、 TLS
  • RSA(鍵長4096ビットまで)
  • HTTPS

未対応の技術

 一方、iPhone版Safariでは次の技術は使えないので注意が必要です。

  • JavaScript?の一部
    • モーダルダイアログを表示する showModalDialog?() や print() メソッド。
    • (window.open()、alert()、confirm()、prompt() メソッドは使える)
    • マウスオーバーイベント
    • Javaアプレット
    • Flash
    • SVG
    • XSLT
    • プラグインのインストール
    • カスタムX.509電子証明書
    • WML
    • ファイルアップロードおよびダウンロード

Webブラウザ判定

通常のWebブラウザと同様に、ユーザーエージェント名からiPhone版Safariを判定可能。

  • iPhone版Safariのユーザーエージェント
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

レイアウトにおけるポイント

段組みやブロックを活用する

ダブルタップズームについて

  • ダブルタップによってブロック幅に合わせてズームする
    • ダブルタップによるズームの仕様
      • 画像(img)のダブルタップ:画像の横幅いっぱいにズーム
      • 画像以外要素のダブルタップ:その要素を包含するブロック要素(div、ol、ul、table など)の横幅いっぱいにズーム

文章がページ幅いっぱいに流し込まれているようなページでは、ダブルタップしてもそれ以上拡大できないので、ユーザーはピンチ操作で任意の大きさに拡大して、それを横スクロールしながら読まなければいけなくなる

フレームは避ける

フレームにおけるデメリットは以下。

  • iPhone版Safariはフレーム内のスクロールバーは表示できない
  • フレームセットで指定した縦横サイズを無視して、各フレームが内容に応じてできるだけ広がろうとする
  • ドラッグ操作は、すべてのフレームを含んだページ全体のスクロールとなり個別のスクロール不可

※iframeについては2本指ドラッグでのスクロールが可能

リソースの制約

パソコンに比べてiPhoneは、メモリなどの内部リソースが小さいため、以下の制約がある

  • デコード後の GIF、PNG、TIFFといった画像は、2Mbytesまで
  • デコード後のJPEG画像は、32Mbytesまで
  • アニメーションGIFは、2Mbytesまで
  • HTML、CSS、JavaScript?といった各リソースファイルは、10Mbytesまで
  • JavaScript?の実行時間は、5秒まで
  • JavaScript?のアロケーションは、10Mbytesまで
  • 同時に開けるドキュメントは、8つまで

レイアウトの作成

ビューポートメタタグ

  • ビューポートの設定(ページの読み込み時にどのような拡大率でコンテンツを表示するか)は、ビューポートメタタグによって開発者が任意に指定が可能。
    • デフォルトは980px
    • iPhone 1.1.1 以降では「device-width」という値が指定可能、これを指定すれば自動的に320pxで認識(将来登場するデバイスの横幅に自動で合うと思われる)
  • 記述例
<横幅700pxのページがぴったり収まる拡大率>
<meta name = "viewport" content = "width = 700">

<横幅がデバイスの表示サイズにページぴったり収まる拡大率>
<meta name = "viewport" content = "width = device-width"> 
  • height(高さ)や initial-scale(初期表示時の拡大率)などの指定も可能
  • リキッドレイアウトとビューポート設定
    • リキッドレイアウト(コンテンツを包含するブロック要素の幅を%で指定したレイアウト)の場合、インライン要素は、ビューポートメタタグで指定した横幅内で折り返そうとします

スタイルシート

CSS3のプロパティ

  • iPhone版Safariでは、デスクトップ版のSafariと同様に、CSS3のプロパティのいくつかを先行的にサポートしてる
    • webkit-border-image(ボーダーに画像を使う)
    • webkit-border-radius(角丸)

文字サイズの自動アジャスト

  • 表示されたテキストの1行分の文字数や、ページ内での相対的な関係などに応じて、文字のサイズを自動的に調整してくれる
  • 機能のオン/オフ、文字の拡大率をスタイルシートで指定可能
  • 自動アジャスト機能をオフの例
html {-webkit-text-size-adjust:none} 
  • 通常の200%に拡大の例(ブロックごとの指定も可能)
html {-webkit-text-size-adjust:200%} 

トランジションとアニメーション

  • Safariの独自仕様として下記のトランジションに関するスタイルを使用可能
    • 「-webkit-transition-property」
    • 「-webkit-transition-duration」
    • 「-webkit-transition-timing-function」
    • 「-webkit-transition-delay」
    • 「-webkit-transition Shorthand Property」
  • onclickなどのイベントハンドラから変更するなどして、例えば「クリックするとブロックの背景が徐々に消えていく」といったイフェクトを簡単に加えることが可能
  • 同様に、以下のアニメーションに関するスタイルも使用可能
    • 「-webkit-animation-name」
    • 「-webkit-animation-duration」
    • 「-webkit-animation-timing-function」
    • 「-webkit-animation-iteration-count」
    • 「-webkit-animation-direction」
    • 「-webkit-animation-play-state」
    • 「-webkit-animation-delay」
    • 「-webkit-animation」

iPhoneボタンとiPhoneリストパターン

米アップルのWeb Apps Dev CenterにiPhone独自のUI部品を表示するサンプルあり

  • iPhoneらしい各種ボタン(iPhoneButtons?
  • リスト表示(iPhoneListPatterns?

その他

iPhone内のほかの機能を呼び出すリンク

  • WebコンテンツからiPhone内のほかの機能を呼び出しが可能
    • メールリンク
    • 電話をかけるリンク(iPod touchでは無効)
    • Google Mapsを呼び出すリンク
    • YouTube?を呼び出すリンク

入力イベント

  • ドラッグ
    • 1本指でのドラッグはページをスクロールするためのジェスチャ
    • ドラッグ中には「onscroll」イベントは発生しない
    • 指を止めてドラッグを終了した時点で「onscroll」イベントが発生
  • タッチ&ホールド
    • 指でスクリーンをタッチしたままホールドすることでインフォメーションバブルが表示される場合がある
    • マウスイベントは何も発生しない
  • ダブルタップ
    • ダブルタップは表示をズームするためのジェスチャ
    • マウスイベントは何も発生しない
  • タップ
    • シングルタップは、タップされた個所に何があるかなどによってイベントが変わる
      • クリック不可な要素をタップした場合、イベントは発生しない
      • クリック可能な要素をタップすると「mousemove」イベントが発生する
      • それによってコンテンツが変化しなかった場合は、「mousedown」「mouseup」「click」イベントが発生する
      • 「mousemove」イベントは、「mouseover」および「mouseout」イベントも発生させる
  • 2本指ドラッグ
    • 2本指ドラッグは、ドラッグされた個所によってイベントが変わる
      • スクロール可能な要素(テキストエリアやインラインフレームなど)の上で2本指ドラッグを行った場合は、「mousewheel」イベントが発生する
      • それ以外の場所で2本指ドラッグを行った場合は、1本指ドラッグと同じ

iPhoneでのAmazonサービスの管理

デバッグ

  • iPhone版Safariには簡単なデバッグモードがある
    • 本体上でスクリプトエラーなどを確認することが可能
    • デスクトップ版Safariの「開発メニュー」を使えば、より詳細な動作確認が可能
  • 米アップルのサイトから iPhone SDK をダウンロードすれば、Mac上で動く iPhone シミュレータが入っている
  • iPhone自体がカスタマイズされた Mac OS X で動いていることもあり、このシミュレータはほとんど実物と変わらない動作をするようにみえる

参考URL

兄弟サイトリンク

land.to 広告


関連情報


人気ページ

検索

キーワード
AND OR