前回は2種類あるWeb Appsのうち、Hosted Appsについて作成方法から公開までを具体的にご紹介しました。今回はもうひとつのWeb Appsである、Packaged Appsについて作成方法をご紹介したいと思います。

Packaged Appsとは

Packaged Appsは、Webアプリを構成するHTML、CSS、JavaScriptなどのファイルをパッケージとしてひとつにまとめたものです。ユーザーのローカル環境に実行可能なファイルを持つデスクトップアプリケーションに近い形式です。オフラインのWebアプリとして提供することも可能ですが、Webサーバーとの連携も可能です。Chrome Web Storeでは、作成したパッケージをインストール可能なWebアプリとして配布することができます。Hosted Appsと同じく、HTML5やその関連技術、Chromeがサポートするウェブ標準技術などが利用可能です。Packaged Appsでは、それらに加えてExtensionsで利用されているExtensions APIも利用可能となっており、Chrome独自の機能を使ったWebアプリを作成することができます。

Packaged Appsの作成方法

Packaged Appsは、前述の通りWebアプリを構成するファイルをひとつにまとめたものです。特定のフォルダにそれらのファイルを含め、マニフェストファイルとアイコンを用意して配置します。マニフェストファイルやアイコンの内容についてはHosted Appsと同様の部分も多いため、ここではHosted Appsとは異なる部分を中心に説明します。前回の「Hosted Appsの作成方法と公開」とあわせてご参考にしていただければと思います。基本的なフォルダ構成は以下の通りです。

Webアプリの名称など任意の名前を付けたフォルダを作成し、各ファイルを配置します。アイコンファイルの名前やWebアプリのトップページとなるHTMLファイルをマニフェストファイル内で指定します。Webアプリを構成するファイルなどは、このフォルダ内であれば自由に配置して構いません。

マニフェストファイルの作成

マニフェストファイルとして、manifest.jsonというテキストファイルを文字コードUTF-8で作成します。以下にPackaged Appsの典型的なマニフェストファイルの例を示します。

{
 "name": "exampleApp",
 "description": "Packaged Apps Example",
 "version": "1",
 "app": {
   "launch": {
     "local_path": "main.html"
   }
 },
 "icons": {
   "16": "icon_16.png",
   "128": "icon_128.png"
 },
 "permissions": [
   "http://example.com/*",
   "geolocation",
   "notifications",
   "unlimitedStorage"
 ]
}

マニフェストファイル中の "name" と、"icons" の "128" で指定されたアイコンは、Webアプリがインストールされた際に新しいタブページに表示される内容です。新しいタブページでWebアプリのアイコンをクリックすると、"local_path" で記載されたURLのページが表示されます。"icons" の "16" で指定されたアイコンは、Webアプリのfaviconとしてタブなどに表示されます。

また、"permissions" でWebアプリが利用する外部リソースやアクセス許可が必要なAPIなどを記載します。Hosted Appsでは、自身のリソースとしてURLを "urls" などで指定する必要がありましたが、Packaged Appsでは自身のリソースをローカルに持つため、特に指定する必要はありません。外部へのアクセスがある場合には "permissons" にすべて記載します。

Hosted Appsと同様にマニフェストファイルに記載された内容がWebアプリの詳細画面に表示されますので、不必要なアクセスをしていないとこと明示するためにも "permissions" の内容については必要最小限のものにしておくとよいでしょう。

その他のPackaged Appsで設定するマニフェストファイルの内容については、下記表を参考にしてください。

Extensionsで利用可能な "browser_action" と "page_action" は、Web Appsでは利用できません。また、匿名モード時のプロセスの動作方法を指定できる "incognito" もWeb Appsではデフォルトが "split" となっており、Extensionsのデフォルトと異なるので注意が必要です。

利用可能なAPIの概要

Packaged Appsで利用可能なAPIについて概要を説明します。Hosted Appsでも利用可能なGeolocation APIとNotification API、Web SQL Database API、Backgroundなどは前回説明しました。このうちBackgroundについては、Hosted Appsではバックグラウンド動作する不可視のウィンドウを生成するBackground Windowという形で実現していました。Packaged Appsでは既にバックグラウンド動作が可能なBackground Pageという機能がありますので、マニフェストファイルで "permissions" に "background" を指定した場合、このBackground Pageが拡張され、Chromeの起動を跨いで動作させ続けることが可能になります。

各APIの詳細については、連載の中で個別に解説していきたいと思います。

Background Page

任意のページをバックグラウンドで動作させることができます。処理の重いスクリプトや外部リソースへのアクセスなどで時間が掛かるスクリプトなどを実行します。また、後述するContent Scriptsなどとの連携が可能ですので、共通処理などをBackground Pageに置いて各ページで呼び出して利用することもできます。

Content Scripts

特定のページに対して、任意のスクリプトを実行することや任意のスタイルを適用することができます。"content_scripts" の "matches" で指定されたURLにマッチするページに対して、"js"、"css" でそれぞれ指定されたJavaScriptファイルやCSSファイルが "run_at" で指定されたタイミングで挿入されます。また、chrome.extension.sendRequestなどのメソッドを通して、Background Pageと連携することも可能です。

…
"content_scripts": [
  {
    "matches": ["http://example.com/*"],
    "css": ["example.css"],
    "js": ["example.js"]
  }
],
…

Bookmarks

Chromeのブックマークを操作することができます。"permissons" に "bookmarks" を指定することで利用可能です。chrome.bookmarks以下の各メソッドでブックマークの作成や更新、削除のほか、検索や移動などの操作をすることができます。また、各操作のイベントなどを受け取ることもできます。

Context Menus

コンテキストメニューを拡張することができます。"permissons" に "contextMenus" を指定することで利用可能です。chrome.contextMenus以下の各メソッドでコンテキストメニューの作成や更新、削除などの操作をすることができます。"icons" の "16" で指定されたアイコンがコンテキストメニューに表示されます。

Cookies

クッキーの内容を操作することができます。"permissons" に "cookies" とクッキーを操作する対象のドメインを指定することで利用可能です。chrome.cookies以下の各メソッドでクッキーの取得や設定、削除などの操作をすることができます。また、クッキーの内容に変化があった場合のイベントなどを受け取ることができます。

History

Chromeの履歴を操作することができます。"permissons" に "history" を指定することで利用可能です。chrome.history以下の各メソッドで履歴の追加や削除、検索などの操作をすることができます。また、履歴の追加や削除のイベントなどを受け取ることができます。

Idle

Chromeの現在の状態を取得することができます。"permissions" に "idle" を指定することで利用可能です。chrome.idleのqueryStateメソッドで、Chromeブラウザ上で一定時間の間に操作がなかったことを通知することができます。また、Chromeの状態がアクティブに変わった場合のイベントを受け取ることができます。

Management

ChromeにインストールされているExtensionsやWeb Appsの管理を行うことができます。"permissions" に "management" を指定することで利用可能です。chrome.management以下の各メソッドでインストールされているExtensionsやWeb Appsの詳細を取得することや、有効・無効の切り替え、アンインストールなどを行うことができます。また、有効・無効の切り替えやインストール・アンインストールなどをイベントで受け取ることができます。

Tabs／Windows

Chromeのタブやウィンドウを操作することができます。"permissions" に "tabs" を指定することで利用可能です。chrome.tabsやchrome.windows以下のメソッドでタブ／ウィンドウの選択や作成、削除、移動などの操作をすることができます。その他、画面のキャプチャを取得することや任意のスクリプト実行することも可能です。また、タブ／ウィンドウの各操作のイベントなどを受け取ることができます。

Packaged Appsのサンプル

画面上に“⁠Hello World!⁠”を出力するだけのごく簡単なPackaged Appは、以下のような構成になります。実際のWebアプリでは、main.htmlをトップページとして機能を追加していくとよいでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="UTF-8">
        <title> Packaged Appのサンプル</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

{
  "name": "SamplePackagedApp",
  "description": "Packaged Appのサンプル",
  "version": "0.1",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  }
}

• Packaged Appのサンプル

Packaged Appsの公開

Packaged Appsの公開については、Hosted Appsと同様です。ただし、Packaged AppsはHosted Appsと違ってWebアプリを任意のサーバーでホスティングしているわけではないので、ドメインの存在証明については不要になります。詳細については、前回の記事を参照してください。

まとめ

今回は、Packaged Appsの作成方法を説明しました。これまでの連載でWeb Appsの概要や特徴が掴めたかと思います。次回は、いよいよ実際のWebアプリの作成を通じて、詳細を解説していきたいと思います。

Chrome Web Store／Appsは、「⁠Chrome API Developers JP」という開発者コミュニティでも活発な情報交換が行われています。興味のある方は、是非こちらも覗いてみてください。