Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

インストール型アプリの考慮点

導入

 インストール可能なOpen Web Appを設計する時、インストール後にアプリがどのような挙動をするかという事について、頭に入れておくべき考慮点が多数あります。この記事ではアプリを設計する際に注意すべき点を解説します。

ブラウザはない

 インストールされたアプリは、端末のウェブブラウザ上で実行される訳ではありません。
 つまり、アプリ開発者はブラウザの機能に頼る事無く、ユーザーがアプリを利用するために必要な機能の全てを自ら用意しなければなりません。
 また、このことがアプリのレイアウトに影響する可能性ついても考慮する必要があります。(下記「柔軟に、かつレスポンシブに」の項を参照
 一般的には、単一ページ上にすべてのアプリの機能を作成することが望ましいと考えられ、決してページ間をナビゲートするような複数ページできありません。

戻るボタンはない

 いわゆる「戻るボタン」は提供されません。
 上でも述べた通り、アプリは内容が動的に変化する単一ページ上で完結する事が望ましいです。もし構造上「戻るボタン」が必要であれば開発者自身がアプリ内に実装する必要があります。あるいは各ページをタブで切り替えたり、スワイプでページを遷移させることで対応できるかもしれません。

 マニフェストファイルで chromeオプションを設定すると基本的なページ遷移機能をアプリに自動で実装する事ができます。

履歴やブックマークはない

 「戻るボタン」同様、「履歴」や「ブックマーク」の機能も提供されないため過去の情報や状態を確認する機能が必要であれば、これも開発者が実装しなければなりません。
 

検索はない

これは今まで知らなかったことでしょう! 検索はwebアプリでユーザがよく使う機能で、詳細・関連情報や、使用方法を求めます。ユーザがブラウザアプリからあちこちに移動しなければならずにイライラするのを救うため、アプリ内のビューに最も必要となるはずのリソース(例えば用語集や、基本のユーザガイド)を提供します。とは言うものの、もしアプリがそれを使用するために巨大な使用法マニュアルを必要とするほどに複雑である場合、それは単独のアプリとして機能するかどうか疑問です。

ブラウザのズームはない

開発者はアクセシビリティ機能の可用性をも考慮する必要があります。ブラウザのズーム機能は利用できず、また拡大されたデフォルトのテキストサイズを持つようにアプリを設定することはできません。従って、開発者は自身でテキストサイズを拡大する機能をプログラムする必要があるでしょう。

柔軟に、かつレスポンシブに

インストール型Open Web Appsは様々に異なる端末で動かされるため、レイアウトとグラフィックが様々な状況(つまり広い画面や狭い画面、低い解像度や高い解像度、など)で動くような、柔軟な方法で開発される必要があります。それに加え、ブラウザのchromeは使用できず、これはいくつかの端末のUIスペースに影響するかもしれません。

いろいろなターゲット端末に幅広く応じるのに最も良い方法は、一般的にビューポート全体を消費して、パーセントを使って柔軟にサイズ指定し、メディア確認を使用して、ターゲットとする種々な画面クラスの主なもの (例えば、シネマモニタ、デスクトップ/ラップトップ、タブレット、スマートフォン、フューチャーフォン、TVなど) に最適化したレイアウトを適用します。

Open Web App のレイアウトについての詳細情報は アプリのレイアウト ページに見当たります。

ネイティブな見た目と、webの個性

インストール可能な Open Web App の設計時につきあたる問題は、端末のネイティブな見た目で行くか、個性を固持するかということです。やはり、たいていのプラットフォームには、程度のさこそあれ、端末メーカーがサードパーティアプリの支持する事を好むデザインガイドラインがあります。しかしいっぽうでwebはサイトの個性を支持して、作品が他の人の作品と全く一緒なことは望まれません(これは素早いアプリ開発向けに人気のUIフレームワークを使う時にしばしば起こる問題です)。

主に Firefox OS プラットフォームを狙ったアプリを作っている場合、 Firefox OS デザインガイドライン を利用できますが、少しの個性を固持して、できるだけこれに近づくようにします。一つの選択肢は、特定プラットフォームでインストールされる時にカスタムスタイルシートを適用し、デフォルトではもっと個性的なものを使用します。

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Uemmra3, FireRaccoonDog, Wasshy_
 最終更新者: Uemmra3,