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

第6回 Webアプリを作ろう#3──Options Page,Web Storage

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

前回は,OdometerというWebアプリへの機能追加 を通して,Background Pages,Message Passingの詳細を解説しました。今回は,Odometerにさらに機能を追加する形でOptions Page,Web Storageについて解説していきたいと思います。

追加機能の概要

多くのWebアプリでは,使いやすいようにユーザー自身が各種設定を行うことが可能になっています。Odometerでもユーザービリティ向上のためにいくつかの設定項目を用意したいと思います。

例えばOdometerが目的地までの距離を通知する間隔は,目的地から1km圏内であれば200mごとに通知するように設定されています。これらをユーザーが任意の間隔で通知を受けられるように修正します。また,通知間隔以外にもデスクトップへの通知の有効/無効の切り替えやポップアップを表示している通知時間なども同時に設定できるように修正します。

設定画面の呼び出しには,Web AppsのOptions Pageという仕組みを利用し,設定値を保存する方法としてHTML5(広義の意味でのHTML5)のAPIであるWeb Storageを利用します。

図1 Odometer

図1 Odometer

図2 Odometer設定画面

図2 Odometer設定画面

Webアプリの構成

Webアプリを構成するファイルにoptions.htmlとその関連ファイルを追加します。options.htmlは,そのまま設定画面として表示されます。

画像

manifest.json

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

"options_page"に設定画面となる任意のHTMLファイルとして,今回追加したoptions.htmlを指定しています。

著者プロフィール

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

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

コメント

コメントの記入