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

第5回 Webアプリを作ろう#2──Background Pages,Message Passing

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

前回は,OdometerというWebアプリの作成 を通して,Geolocation API,Notification APIの詳細を解説しました。今回は,Odometerに機能を追加する形でさらにいくつかのAPIの詳細を解説していきたいと思います。また,先日サンフランシスコで行われたGoogle I/Oで発表されたChrome Web Store関連のトピックも合わせて紹介したいと思います。

Google I/OのChrome Web Store関連トピック

アプリ内課金
Google I/Oにて,Chrome Web Storeでのアプリ内課金について発表されました。アプリ内課金の手数料は5%とのことで,ほかのプラットフォームと比べて非常に低価格になっています。これによって,Webアプリの中から電子書籍や音楽などのコンテンツを購入することができるようになります。
日本語化と各国言語へのローカライズ
Chrome Web Storeの日本語化がおこなわれ,日本語を含む41の言語にローカライズされました。これによって,Chromeの全ユーザーである1億6000万人がChrome Web Storeへアクセス可能になったとのことです。
Chromebook
Chrome OS搭載のノートブックであるChromebookが米国で6月に販売開始となるとのことです。Chrome OS上で動作するアプリは,基本的にはChrome Web StoreからWebアプリとしてダウンロードされるものになります。

Chrome Web Storeとそれを取り巻く環境はますます大きく広がっています。日本では,まだ課金の仕組みなどが提供されていないため正式なオープンはまだですが,今回の日本語化に合わせて既に日本向けのWebアプリが12個公開されています。興味のある方は是非チェックしてみてください。また,今後の日本での正式オープンに合わせて何かWebアプリを作ってみるのも面白いかもしれません。

図1 Chrome Web Store(日本語)

図1 Chrome Web Store(日本語)

追加機能の概要

ここからは,前回作成したWebアプリの追加機能について考えていきます。Odometerは,地図上で目的地を設定し,目的地までの距離が近づくとデスクトップにポップアップを表示して残りの距離を通知するというものでした。しかしながら,このままではOdometerのタブを閉じるか,ブラウザを終了した場合には残りの距離が通知されなくなってしまいます。そのため,Webアプリの任意のページをバックグラウンドで動作させるBackground Pagesの仕組みを使って,いつでも通知がおこなわれるように変更してみます。

Webアプリの構成

Webアプリを構成するファイルにbackground.htmlとbackground.jsを追加します。これらのファイルには,Webアプリのうちバックグラウンドで動作させる処理を記述します。

画像

manifest.json

{
  "name": "Odometer",
  "description": "距離計",
  "version": "0.2",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "background_page": "background.html",
  "permissions": [
    "geolocation",
    "notifications",
    “background”
  ]
}

“background_page⁠にバックグラウンドで動作させるHTMLファイルを指定します。Webアプリをバックグラウンドで動作させるBackground Pagesの詳細については後述します。また,⁠permissions⁠⁠background⁠を指定しています。これによって,ブラウザを閉じてもChromeを明示的に終了させなければ,バックグラウンドページが動作し続けることができます。

図2 バックグラウンド動作しているOdometer

図2 バックグラウンド動作しているOdometer

著者プロフィール

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

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

コメント

コメントの記入