Webアプリを公開しよう! Chrome Web Store/Apps入門

第3回 Packaged Appsの作成方法

この記事を読むのに必要な時間:およそ 4 分

前回は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で設定するマニフェストファイルの内容については,下記表を参考にしてください。

表1 Packaged Appsのマニフェストファイル詳細

フィールド名 必須 説明
name Webアプリの名前
description   Webアプリの説明
version バージョン番号
ドット区切りの数字(最大4つ)
app    
  launch    
   local_path Webアプリのトップページ
   container   Webアプリが起動するコンテナの形態
"tab" もしくは "panel" を指定します。デフォルトは "tab"
   height   containerに "panel" を指定した場合,パネルの高さをピクセル単位で指定
   width   containerに "panel" を指定した場合,パネルの横幅をピクセル単位で指定
icons    
  16   タブなどに表示されるWebアプリのfavicon
  128 Chrome Web Storeおよび新しいタブページで表示されるWebアプリのアイコン
background_page   バックグラウンドで動作するページを指定
chrome_url_overrides   ブックマークページや履歴ページ,新しいタブページを指定のページで上書きする
content_scripts   任意のページでJavaScriptやCSSを挿入する
  matches   JavaScriptやCSSを挿入するURLを指定
"http://example.com/*"マッチパターン
  css   挿入するCSSファイルを指定
  js   挿入するJavaScriptファイルを指定
  run_at   挿入するタイミングを指定
"document_start", "document_idle", "document_end" の3つが指定可能です。デフォルトは "document_idle"
homepage_url   ホームページのURLを指定
incognito   匿名モードの際にWebアプリのプロセスを共有する "spanning" か,分離する "split" かのいずれかを指定
デフォルトは "split"
minimum_chrome_version   Webアプリがインストール可能なChromeブラウザの最低バージョン
omnibox   Chromeのアドレスバーを拡張する
options_page   Webアプリのオプション設定ページを指定
permissions   Webアプリが利用する外部リソースやAPI,権限などの指定。以下の指定が可能
"http://example.com/*"マッチパターン
"background"
"bookmarks"
"contextMenus"
"cookies"
"geolocation"
"history"
"idle"
"management"
"notifications"
"tabs"
"unlimitedStorage"

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

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入