草案
このページは完成していません。
Web アプリを設計する前に熟慮すべきことはたくさんあります。
設計に関する検討事項
端末対応と設計のエミューレション
あなたのアプリケーションが動作すべき端末の種類について知ることは最も重要です。対象端末とそれらの機能を知ることは、どの機能を頼りにできそうか、UI 部品がどのように見えるかと言ったことを把握することにつながります。多くのモバイル向け JavaScript フレームワーク、例えば Dojo Mobile などは、端末のテーマ実装を簡単にするため複数の端末用テーマを提供しています。既存の JavaScript フレームワークを使わない場合でも、端末テーマスタイルシートについて勉強し、必要に応じてスタイルを借用することは可能です。
端末の向き
端末の向き (オリエンテーション) の対応は、モバイル端末上で動作する Web アプリを作成する際に大きな検討事項となります。その中で明らかなことのひとつは、デスクトップアプリが通常水平方向を使うのに対し、大半のモバイル端末は既定の向きとして縦方向を採用しているという事実です。理想的な Web アプリケーションはどちらの向きであっても見た目が良く適切に動作します。JavaScript と CSS メディアクエリのどちらも、向きが変わったことを判別しそれに対応する機能を開発者に提供してくれます。
ジェスチャーとシンプルなタッチイベントの違い
あなたのアプリケーションに必要なナビゲーションインタラクションパスについて考えてみてください。そのアプリケーションはボタンのタッチやジェスチャーによって操作可能にしたいでしょうか？ この質問に対する答えが、あなたのアプリケーションが静的なコントロールのための場所を確保すべきか、それともジェスチャーが利用可能なことをユーザにさりげなく伝えるべきかを決めることとなります。ジェスチャーの判別に役立つ jGestures などの JavaScript ライブラリも存在します。
基本的なアプリ設計指針
対応を予定している特定の端末にかかわらず、Web アプリケーションの作成時に従うべきいくつかの基本指針があります。
- 複数の端末や向きを考慮して設計する場合は ピクセル値によるサイズ指定を避ける
- どの端末でもサイズが最適化され美しく見えるよう ベクターグラフィックスを使う
- どの端末でも 機能の存在を前提としない - 機能判別は未だに重要です
- より柔軟にアプリを設計することで、幅広い端末対応を考えたとき、より移植性が高まります
私たちのアプリの設計は非常に典型的で、2 つのペインを持ちます。1 つ目のペインは、ユーザの現在地を入力するための検索ボックスと、検索履歴の一覧を提供します。2 つ目のペインは、単純に Twitter から取得したツイートの一覧を表示します。各ペインとも標準的な見出しを使います。
私たちのアプリは動的でもあり、端末が水平方向でも縦方向でも正しくレイアウトされ、単純なスワイプジェスチャーに対応し、デスクトップでもモバイル端末でも適度に表示されます。アプリのファイル構成は以下のようになります。
- app
- app.css
- app.manifest
- app.js
- images/
- icon-16.png
- icon-48.png
- icon-128.png
- index.html
あなたのアプリの構成はこれと違うかも知れません。これは小さなサンプルアプリケーションなので、より具体的なディレクトリ構成は必要ないのです。画像は別々の端末向けにいくつかのサイズで提供されます。例えば、icon-128.png ファイルは Mac OS X のデスクトップインストールに使われます。