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

第3回 Packaged Appsの作成方法

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

利用可能な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と連携することも可能です。

Conten Scriptsのマニフェストファイルサンプル


"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をトップページとして機能を追加していくとよいでしょう。

画像

main.html

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

manifest.json

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

Packaged Appsの公開

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

まとめ

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

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

著者プロフィール

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

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