アプリ開発を始めよう

Web アプリとは、Web 標準技術を使って開発されたアプリケーションです。すべてのモダンな Web ブラウザで動作し、好きなツールを使って開発できます。Web サイトと Web アプリを区別する特徴をいくつか挙げるとするなら、アプリはユーザによってインストールされ、自己完結型で、ブラウザウィンドウのクローム (ユーザインタフェース部品) を必ずしも必要とせず、オフラインでも動作するように開発できます。Gmail、Twitter、Etherpad などが Web アプリに当たります。

Mozilla の Open Web Apps プロジェクトは、既存のサイトにいくつかの小さな機能を追加することで、それらを、高度で楽しく、パワフルなコンピューティング環境で動作するアプリに変換することを提案しています。そうしたアプリはデスクトップブラウザでもモバイル端末でも動作し、ユーザにとっては Web サイトよりも発見や起動が簡単です。ユーザが持っているすべての端末で同期を可能にするなど、増え続ける様々な新機能も利用できます。

始める前に

もしあなたが初めて Web アプリを書こうとしている開発者なら、API の実装状況について確かめることをお勧めします。

アプリの公開

Web サイトから Web アプリを作成するのに必要な作業は「アプリマニフェスト」の追加だけです。これは、アプリについて説明した JSON ファイルで、その名称、アイコン、人間が読める形での説明文などが含まれます。

マニフェストは Web サイトと同じドメインに置かなければならず、application/x-web-app-manifest+json という Content-Type で配信する必要があります (注: これは今のところ Firefox では必須ではありませんが、Firefox Marketplace では必須です)。マニフェストの詳細についてはアプリマニフェストのドキュメントを参照してください。マニフェストの妥当性を検証するためのツールもあります。マニフェストの検証を参照してください。

同一生成元ポリシー

アプリはそれぞれ独自ドメインでホストしなければならない点に注意してください。別々のアプリを同じドメインに置くことはできません。無難な解決策は、例えば、各アプリを別々のサブドメインでホストすることです。生成元に関する詳しい情報はアプリマニフェストに関する FAQ を参照してください。

アプリがインストールされているかどうかの確認

Web ブラウザによってアプリのページが読み込まれたとき、そのページはユーザのブラウザにアプリがインストールされていない場合の対応を考える必要があります。アプリがインストールされているかどうかは、以下のように checkInstalled() を呼び出すことで確認できます。

var request = navigator.mozApps.checkInstalled("https://path.to/my/example.webapp");
request.onsuccess = function() {
  if (request.result) {
    // インストール済み
  } else {
    // 未インストール
  }
};
request.onerror = function() {
  alert('インストール状況の確認時にエラーが発生しました: ' + this.error.message);
};

このチェックを行う別の方法はナビゲーションを参照してください。

アプリのインストール

アプリはサイトから直接配布することができます。また、Firefox Marketplace へ登録する場合は、その前に、マニフェストに問題がないかどうか確認するためにだけ、自分のサイトからのインストールをテストした方が良いでしょう。

以下のように、JavaScript を実行するボタンかリンクを設置します。

var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
  // インストール成功、メッセージを表示するか、起動ページへリダイレクトしましょう
};
request.onerror = function() {
  // インストール失敗、詳しくは this.error.name 参照
};

navigator.mozApps.install() を実行することで、ブラウザにマニフェスト (例: example.webapp) を読み込ませて、アプリケーションをインストールするかどうかユーザに尋ねることができます。ユーザがインストールを許可すると、アプリがブラウザにインストールされます。OS X では、アプリケーションは「アプリケーション」フォルダにインストールされます。

2 番目の引数は navigator.mozApps.install() へ渡す install_data で、ユーザのインストール済みアプリケーションのデータストアにいくつかの情報を残すものです。この情報はユーザが持っている他の端末と同期することが可能で、アプリケーションからは getSelf() を呼び出すことで取得できます (アプリがインストールされているかどうかの確認参照)。例えば、

navigator.mozApps.install(
    "https://path.to/my/example.webapp",
    {
        user_id: "some_user"
    }
);

アプリの宣伝

Mozilla では、検索、レビュー、評価、課金を担当するアプリマーケットプレイスを開発しています。ここでは、サードパーティが独自のストアを立ち上げる場合にも使用できるオープンなインフラが使用されています。ただし、ストアへのアプリの登録は必須ではありません。

アプリのユーザに使用料を課金したい場合は、Marketplace での課金を参照してください。

Firefox Marketplace はまもなく公開の予定です。Apps Developer ニュースレターを購読すれば、Firefox Marketplace の進捗状況に加えて、アプリ開発のヒントやアドバイスを得ることができます。

オフラインでの実行と先進的な端末 API の使用

モダンな Web ブラウザは、アプリケーションのオフラインでの実行や端末機能へのアクセスを可能にする様々な機能を追加してきました。役に立つリンクをいくつか以下に挙げます。

オフラインでの実行: HTML5 アプリキャッシュの詳しい使い方とデモ
オフライン・オンラインイベント: 端末のオンライン状態が切り替わったタイミングを判別する方法
アプリ内での音声と動画の使用
Canvas を使ったグラフィックスの描画
WebGL を使った 3 次元グラフィックスの描画
アプリ内でフル機能の高速なリッチテキストエディタを作成できる Content Editable
HTML5 File API を使ってアプリからファイルを扱う方法
アプリ内で項目を移動できるようにするドラッグ＆ドロップの実装
端末の傾き検出

ローカルへのデータの保存

localStorage API は、ユーザが繰り返しアプリを使う場合のためにデータを保存しておけるキーバリュー型のストレージを提供します。ユーザが Firefox 4 以降や Google Chrome などのモダンブラウザを使っている場合は、構造化されたパフォーマンスの高いクライアントサイドデータストアである IndexedDB を使うこともできます。

ユーザが持っているすべての端末で共有したいデータがある場合は、上記の通り、install() 関数の install_data 引数を使いましょう。

例

オープンな Web アプリの例:

MozillaBall (グラフィックスの描画に Canvas を、アプリのインストールに JavaScript API を使っています)