アプリに関する FAQ

Open Web App とは、技術的にはどのようなものですか？

Open Web App は通常の HTML5 アプリケーションよりもはるかに多くの意味を持ちます。Open Web Apps (OWA) は、Web 標準に基づくアプリケーション、あるいは「Web ランタイム」アプリケーションであると考えてください。

Web ランタイムアプリケーションは通常のブラウザの外側で動作し、インターネットに接続された一般的なあらゆる端末のデスクトップ (あるいはその端末でそれに相当する場所) から起動できます。もちろん、Web ランタイムアプリケーションはユーザが望めばブラウザ内でも実行できます。

HTML5 は HTML 構文仕様の進化ですが、実際のところそれは新技術あるいは改良された技術の波であるとも言えます。

Open Web App では次のようなことが可能です。

HTML5: アプリケーションのユーザインタフェース構造を定義する宣言型構文。
CSS3: レイアウト、視覚的美観、そして UI の挙動の一部を定義する宣言型構文。CSS3 を使えば、構造やプログラムロジックを再実装することなく、特定の見栄えを必要とするあらゆる端末に対して視覚体験をカスタマイズできます。
JavaScript: クライアント端末上で実行されるロジックを実装する命令型構文。
HTML5 マークアップ仕様には含まれないものの、HTML5 の波の一部となっている新技術には、AppCache、WebStorage、WebSockets、WebWorkers、Server-Sent Events、Crypto API などがあります。

Web ランタイムアプリケーションは適宜、ユーザの端末がインターネットに接続されていることを前提として、サーバサイドロジックを使って機能を高めることもできます。Web ランタイムアプリケーションは接続状況にかかわらず実行させることができますが、接続時により便利な機能を提供することも可能です。アプリケーションとサーバは、HTTP/S を通じ、JSON や XML といった標準的な仕組みを使って通信を行うため、任意のサーバサイドプラットフォームと技術を選択できます。

移植性

Open Web App は、あらゆるプラットフォーム上で動作すべきであるということから「オープン」と呼ばれます。デスクトップコンピュータ、ノートパソコン、スマートフォンなどあらゆる端末上で、そして Firefox、Chrome などあらゆるブラウザ上で動作します。そのため理論的には、OWA を開発すれば、それはどこでも動くということです。実際には、標準的な方向を向いていないベンダーもあるため、すべての Web プラットフォームで OWA を動かすためには多少の対応作業が必要となる場合もあります。ただしそれは時間の経過とともに少なくなっていくはずです。

既に Web アプリケーションを持っていますが、どうすればインストール可能なアプリにできますか？

あなたが Web 開発者で、インストール可能な Open Web App へ変換したい Web サイトや Web アプリケーションを持っているなら、必要な作業は「技術的には」ごくわずかです。最小要件はこれだけです。

アプリマニフェストを作成します。
そのアプリマニフェストファイルに .webapp 拡張子を付けて公開します。Content-Type ヘッダに application/x-web-app-manifest+json を設定します。
あなたのサイトかアプリストアで (あるいはその両方で) アプリを公開します。自分のサイトで配布する場合は、ユーザのブラウザ内でアプリのインストールや更新を管理するためのコードをサイトに追加する必要があります。

実際のところ、行うべき作業は通常これよりもはるかにたくさんあります。詳しくは Web 開発者のアプリ開発を参照してください。

アプリと Web サイトの違いは何なのでしょうか？

アプリができること:

通常のブラウザの外部で動作可能
端末がインターネットへ接続されているかどうかにかかわらず動作可能
ネイティブの端末アプリケーションの起動と同じように起動可能

少なくとも、アプリはモバイル端末やコンピュータへ「インストール」可能な Web サイトであり、ユーザにはネイティブアプリケーションと同じように見えます。アプリは自分のサイトやアプリストアを通じて配布可能です。いずれも HTML5 などのオープンな Web 標準技術を使って開発できます。また、Web アプリへのアクセスは自分自身でコントロールできるため、アプリを有料化することも可能です。

アプリは、端末がインターネットへ接続されていない場合にも動作するよう、あるいは少なくともそうした場合にも不格好にならないよう設計すべきでしょう。HTML5 Web ランタイムアプリケーションの開発は (ブラウザ内で常時インターネットから訪問されるサイトの開発とは対照的に)、「常時接続されていない」といった状態を処理するため、いくつかの設計上の追加作業が必要となります。

(アプリではなく) HTML5 サイトの開発では、新しい HTML5 セマンティクスを用いたページ構造の実装に焦点が当たりがちです。

HTML5 アプリと HTML5 サイトの違いは二者択一の課題ではありません。ブラウザの内外で動作する HTML5 「アプリケーション」を開発し、ユーザの端末がインターネットへ接続されていない場合にも最適なユーザ体験を提供するようそれを設計することは可能です。

Web サイトとアプリ、どちらを作るべきですか？

もちろんそれはあなたの目的によります。どちらの場合も、標準的な Web 技術セット (HTML/CSS/JavaScript) を使って、複数の端末プラットフォームへサイトを配信できます。しかし、Web アプリのメリットは、ユーザにとってネイティブアプリのように見えるということでしょう。ホーム画面やデスクトップから起動でき、ブックマークを見つけたり URL を覚えておく必要はありません。つまり Web サイトよりも頻繁に利用される可能性が高まります。

アプリとアドオンの違いは何なのでしょうか？

アドオン (JetPack を使って作られたものなど) は Firefox ブラウザへ組み込む拡張機能です。アドオンは UI コンポーネントを少しだけしか、あるいはまったく提供せず、ブラウザの機能や挙動を特定の方法で拡張するだけです。例えばアドオンでは、UI に新しいボタンを提供したり (ロケーションバーの近くに広告をブロックするボタンを追加するなど)、内部機能を変更したり (ブラウザの送受信トラフィックの監視を通じてプライバシーを向上させるなど) することが可能です。

アプリは (理論的には) あらゆるモダンな Web ブラウザで (デスクトップとモバイルのどちらでも) どうさし、ブラウザ固有ではありません。アプリは、オフィスアプリケーション、生産性アプリケーション、画像処理アプリケーション、ゲームなど、完全なアプリケーションの形を取ります。

最後になりますが、アドオンは、特定のサイトやサービスと連携するように設計されているものを除いて、通常すべてのサイトで動作します (例えば、広告はあらゆるサイトでブロックされ、ネットワークプライバシーはどのサイトを訪問したときも高まります)。一方アプリはこのようにして他のアプリと組み合わさることはありません。通常の Web サイトと同じように単独で動作します。

比較

アドオン:

ブラウザ固有
ブラウザの基本機能を拡張
訪問されたすべてのサイトで動作
他の様々なアドオンとともにブラウザ内で共存可能

Open Web App:

Web プラットフォーム中立 (理論的には)
特定のビジネスニーズやユースケースに直結
通常のブラウザの外部で動作し、それ自体で「一種のサイト」
その時点で唯一の Web アプリ (言うまでもなく)
ホストシステムのメニューやデスクトップに起動用のリンクやアイコンを追加することも可能

Open Web Apps の作成にはどのようなツールを使うべきですか？

あなたが好きなプラットフォーム上で Web 開発に使用するツールと同じものを使用できます。Web 開発用の「最新」エディタや IDE の多くは HTML5 構文に対応しています。

アプリから端末レベルの API へアクセスできますか？

はい、一部のファクターでは可能です。詳しくはアプリの許可設定を参照してください。Mozilla の Web API プロジェクトが、Web API の種類を増やすべく取り組んでいます。。

Open Web App は様々なプラットフォームやフォームファクター上でどのように動作するのですか？

プロプライエタリな言語やランタイムと違って、HTML、CSS、JavaScript は既に、消費者がアプリケーションを使用したいと考える一般的な最新端末のすべてで実装されています。

ただし、端末ごとにフォームファクターには避けられない違いがあります。適切に設計され開発されたアプリケーションでは、HTML と JavaScript を実装した後、フォームファクター固有の CSS ファイルを用意し、レイアウトその他の美的な属性を必要に応じて適用できます。

できる限りリッチな体験を提供したい場合は、カメラのような「オプション端末」の存在を判別するコードを書き、それをアプリに適した形で活用することもできます。

Web ランタイム上にあるかどうかをアプリから判別するには？

このチェックを行うにはいくつかの方法があります。

navigator.mozApps.checkInstalled() 関数を使う。
navigator.mozApps.getSelf() 関数を使う。
window.locationbar.visible を使う。ナビゲーションを参照してください。
アプリが Firefox OS 上で動作していることを判別するには、次のようなコードを使えるでしょう。
https://github.com/mozilla/zamboni/blob/master/media/js/mkt/capabilities.js#L64