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

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

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

Context Menus

Context Menusは,Chromeのコンテキストメニュー(右クリックメニュー)を拡張するための仕組みです。通常であれば,コンテキストメニューにはフォーカスした対象に合わせたメニューが表示されています。例えばテキストを選択している場合であれば,⁠コピー」「Googleで検索⁠⁠,⁠要素を検証」などのメニューが表示されています。Context Menusでは,これらのメニューに加えてWebアプリ独自のメニューを追加します。

メニューの作成

今回は,選択したテキストを「住所検索」するメニューを追加します。メニューを作成するには,chrome.contextMenus.createメソッドを利用します。引数にとるオブジェクトでメニューの内容を細かく指定していきます。メニューがクリックされた場合のコールバックもこのオブジェクトのonclickプロパティに登録します。

background.js

// コンテキストメニュー作成
chrome.contextMenus.create({
    title: '住所検索',
    contexts: ['selection'],
    onclick: function(info, tab){
        var text = info.selectionText;
        searchOnApp(text);
    }
});

titleでメニューの表示名を設定し,contextsでフォーカスした対象がどういったものの場合にメニューを表示するかどうかを設定します。ここでは,テキストを選択している場合に表示される"selection"を指定しています。contextsにはそのほかにもリンク要素に対して表示される"link"や画像に対して表示される"image"などがあります。contextsの設定によってonclick時のコールバックに返されるオブジェクトの内容が変わります。contextsが"selection"の場合,selectionTextプロパティから選択したテキストを取得することができます。

さまざまなメニューと階層化

単なるラベルのメニュー以外にも,チェックボックスやラジオボタン,セパレーターなどを作成することができます。また,chrome.contextMenus.createメソッドの戻り値であるメニューIDを使って階層化することもできます。以下にサンプルコードを示します。

各種メニューのサンプルコード

var parentId = chrome.contextMenus.create({
    title: 'サンプルメニュー'
});

// チェックボックス
chrome.contextMenus.create({
    type: 'checkbox',
    title: 'チェックボックス',
    parentId: parentId
});

// セパレーター
chrome.contextMenus.create({
    type: 'separator',
    parentId: parentId
});

// ラジオボタン
chrome.contextMenus.create({
    type: 'radio',
    title: 'ラジオボタン',
    parentId: parentId
});

図8 さまざまなメニュー

図8 さまざまなメニュー

表3 chrome.contextMenus

メソッド/プロパティ説明
create(createProperties, callback)メニューを作成する
remove(menuItemId, callback)メニューを削除する
removeAll(callback)メニューをすべて削除する
update(id, updateProperties, callback)メニューを更新する

表4 createProperties/updateProperties

メソッド/プロパティ説明
typeメニューのタイプ
normal: ラベル(デフォルト)
checkbox: チェックボックス
radio: ラジオボタン
separator: セパレーター
titleメニューの表示名
checkedtypeがcheckboxまたはradioの場合のチェック状態
contextsメニューを表示するフォーカスの対象を配列で指定する
all: すべて
page: ページ(デフォルト)
frame: iframe内
selection: テキスト選択
link: リンク
editable: 入力可能フォーム
image: 画像
video: 動画
audio: 音声
onclickクリック時のコールバック
function(info, tab){…}
infoは,下記のOnClickDataを参照
documentUrlPatternsメニューを表示するURLパターン
targetUrlPatternscontextsがimage,video,audioの場合にメニューを表示する対象のURLパターン

表5 OnClickData

メソッド/プロパティ説明
menuItemIdメニューID
parentMenuItemId親メニューID
mediaTypeメディアタイプ
contexts: image/video/audio
linkUrlリンクURL
contexts: link
srcUrlソースURL
contexts: image/video/audio
pageUrlページURL
contexts: page
frameUrlフレームURL
contexts: frame
selectionText選択テキスト
contexts: selection
editable編集可能かどうか
contexts: editable

※:contextsは同時に複数マッチする場合があります。

まとめ

これで,Odometerを検索ボックスやコンテキストメニューから呼び出すことができるようになりました。検索ボックスやコンテキストメニューは,単にWebアプリを呼び出す導線というだけでなく,インターフェースとしてさまざまなことに応用できるので,是非とも何か面白い使い方を考えてみてください。

今回は,OmniboxとContext Menusの詳細を解説しました。次回も引き続きさまざまなAPIを解説していきたいと思います。

crxファイルはzipファイルですので,右クリックからのダウンロード後に拡張子をzipに変えていただければ中身を参照できます。

著者プロフィール

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

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