iPhone向けWebアプリを作ろう

Safari Web Content Guide for iPhoneを読み解きながら、iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します。 （編集部）

Safari Web Content Guide for iPhoneを読み解く

　ネイティブアプリケーション開発を可能にするSDKが公開され、一層注目を集めている米アップルのiPhone（Applle Developer）。3Gへの対応がうわさされ、日本市場向けの発表も待たれますが、読者の中には、早速iPhone向けのアプリケーション開発にチャレンジしている人もいるでしょう。

　しかし、ネイティブアプリケーションを作るにはそれなりにプログラミングスキルが必要ですし、完成したアプリケーションは米アップルが用意する「App Store」経由でしか配布できないといった制約もあって、二の足を踏んでいる人も多いのではないでしょうか。そうであれば、まずは、iPhone向けのWebアプリケーション作りから取り組んでみてはいかがでしょうか。

　iPhoneに搭載されたWebブラウザのSafariは、iPhone用にカスタマイズされているものの、HTML＋CSSのレンダリングやJavaScriptの動作などは基本的にデスクトップ版と同じなので、一般的なWebアプリはそのままiPhoneでも動きます。さらにそれを、iPhoneのスクリーンサイズや指でのタッチ操作に最適化すれば、すぐに強力なiPhone向けアプリケーションに変身してくれるはずです。

　この記事では、iPhone（iPod touch）向けにWebアプリケーションを最適化する方法を、米アップルが公開しているガイドラインの内容を参照しながら説明します。

iPhoneへの最適化とは、UIを最適化すること

　デスクトップ版のSafariで利用できるWebアプリケーションは、おそらくそのままiPhoneのSafariでも利用できます。サーバサイドのプログラムは当然のことながら、クライアントサイドに実装したCSSやJavaScriptもほとんど問題ないでしょう。

　ただし、スクリーンサイズが小さいことや、マウスもキーボードもなく操作は指でのタッチのみであることなど、いくつか問題が出てくると思います。ですから、iPhone向けにWebアプリケーションを最適化するということは、要するにiPhone向けにUIを最適化するということです。

　米アップルからは、iPhone向けアプリケーション開発に必要ないくつものドキュメントが公開されていますが、その中で、iPhone向けWebアプリケーションのUIをデザインするのに重要なものは次の2つです。

• 　iPhone Human Interface Guidelines
• 　Safari Web Content Guide for iPhone
  

　そのほか、iPhone向けWebアプリケーション開発に役立つさまざまなドキュメントや解説ビデオが、米アップルの「Web Apps Dev Center」から入手できます（要登録）。

　 　

画面1　Web Apps Dev Center（参照）

　この記事で紹介する各仕様の詳細については、上記サイト／ドキュメントを参照してください。

iPhone Human Interface Guidelines

　「iPhone Human Interface Guidelines」では、iPhoneプラットフォームにおけるユーザーインターフェイスの考え方やデザイン原則を解説しています。特に以下に挙げる事項については、開発者は常に意識しておくとよいでしょう。

■ インタラクションモデル

　iPhoneでは、ユーザーは次の方法で操作を行います：

• タップ（コントロールやリンクの押下または選択）
• ダブルタップ（ズームインやズームアウト）
• フリック（素早いスクロール）
• ドラッグ（スクロール）
• ピンチ（ズームイン／アウト）
• タッチ＆ホールド（インフォメーションバブルの表示および指下の内容の拡大表示）
• 2本指ドラッグ（テキストエリアやインラインフレーム内容のスクロール）
  

■ デザイン原則

　iPhone向けのデザインでは、パソコン向けのデザインと比較して、次のような考え方が必要です。

・シンプル

　 携帯デバイスを利用するユーザーは、素早く使える端的な機能を求めている。小さなスクリーンでは、重要な機能や情報だけを見せるようにし、入力項目を減らしたり、コントロールを指先で操作するのに十分な大きさにしたりする。

・フォーカス

　 最も重要な機能に絞って提供する。ユーザーの状況を考え、いま必要なものだけを提示する。

・コミュニケーション

　 ユーザーの操作に対して分かりやすいフィードバックを提示する。しかし不必要に多くのアラートを表示するといったことがないようにする。

・一貫性

　 一貫性を高めて、ユーザーが一度覚えた操作方法などを流用できるようにする。

・反応

　 ユーザーの要求やジェスチャに対して、迅速で正確な反応を示すようにする。移動中の利用時やバッテリー残量が少ないときなど、迅速さは重要。

・相互操作性

　 iPhoneにビルトインされたほかの機能をシームレスに使えるようにする。

・順応性

　 ポートレート表示（縦位置）とランドスケープ表示（横位置）、Wi-Fi通信とEDGE通信など、さまざまな利用状況に順応できるようにする。

1/4

INDEX
iPhone向けWebアプリを作ろう
	Page1 Safari Web Content Guide for iPhoneを読み解く iPhoneへの最適化とは、UIを最適化すること iPhone Human Interface Guidelines
	Page2 Safari Web Content Guide for iPhone ・ Web標準に対応 ・ 未対応の技術 ・ Webブラウザ判定 ・ フレームは避ける ・ 段組みやブロックを活用する ・ リソースの制約
	Page3 ・ ビューポートの設定 ・ メタタグ／リキッドレイアウトとビューポート設定
	Page4 ・ スタイルシート ・ iPhone内のほかの機能を呼び出すリンク デバッグ

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ