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

第7回 Webアプリを作ろう#4──Omnibox,Context Menus

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

gihyo.jp/dev/serial/01/chrome-web-store/0006">前回はWebアプリの設定と保存を通して,Options PageとWeb Storageについて詳細を解説しました。今回は引き続きOdometerに機能を追加する形で,Context MenusとOmniboxについて解説していきたいと思います。

検索ボックスとコンテキストメニューの拡張

これまでは,Odometerを使うためにWebアプリを起動して画面から住所を検索し,目的地を入力していました。わざわざWebアプリを起動しなくても,もっと素早く住所を検索したいとか,ほかのWebサイトにある住所を直接検索したいといった要望があるかもしれません。これらを実現するための仕組みとして,Chromeの検索ボックス(アドレスバー)を拡張するOmniboxやWebサイト内でのコンテキストメニュー(右クリックメニュー)を拡張するContext Menusがあります。今回はこの2つを使って,検索ボックスとコンテキストメニューから素早くOdometerを呼び出し,住所検索を行えるように修正します。

図1 検索ボックス

図1 検索ボックス

図2 コンテキストメニュー

図2 コンテキストメニュー

Webアプリの構成

今回は,Webアプリを構成するファイルに追加はありません。odometer.jsとbackground.js,そしてmanifest.jsonを変更して機能を追加しています。

ディレクトリ図

manifest.json

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

検索ボックスを拡張するための指定として,新たに "omnibox" という項目を追加しています。その中の "keyword" は,検索ボックスからOdometerを呼び出すためのトリガーとなる最初のキーワードを指定します。ここでは "Odometer" を指定していますが,大文字と小文字は区別しません。詳細は後述します。

コンテキストメニューを拡張するためには,"permissons"に "contextMenus" を追加します。また,検索ボックスやコンテキストメニューからOdometerを呼び出すために "tabs" も合わせて追加しています。

Omnibox

Omniboxは,Chromeの検索ボックス(アドレスバー)を拡張するための仕組みです。みなさん普段はこの検索ボックスを使ってGoogleなどで検索をしているかと思います。Omniboxでは,この検索ボックスからキーワードを検索エンジンではなくWebアプリへ渡すことができるようになります。また,キーワードを入力する際のサジェストなどもカスタマイズすることができます。

Omniboxの使い方

先に実際のOmniboxの使い方を説明しましょう。検索ボックスには,検索エンジンによる検索のほかに,お気に入りや履歴などからもサジェストが表示されます。その中でWebアプリのアイコンが付いたサジェストが,そのWebアプリを呼び出すためのものになっています。

  1. 検索ボックスにマニフェストファイルで指定したキーワードを入力する

    図3 検索ボックスにキーワードを入力

    図3 検索ボックスにキーワードを入力

  2. Webアプリのアイコンが表示されたサジェストを選択する

    図4 Webアプリのサジェストを選択

    図4 Webアプリのサジェストを選択

    図5 Webアプリに渡すキーワード

    図5 Webアプリに渡すキーワード

  3. エンターキーで入力完了とWebアプリの呼び出し

  4. 続けてWebアプリに渡すキーワードを入力

    図6 Webアプリの呼び出し

    図6 Webアプリの呼び出し

著者プロフィール

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

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

コメント

コメントの記入