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

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

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

OmniboxからのWebアプリの呼び出し

今回は,マニフェストファイルで指定した"Odometer"という文字列を検索ボックスに入力すると,その後に続くキーワードをパラメーターとしてOdometerを呼び出すことになります。パラメーターを住所としてOdometerで検索するようにしてみましょう。検索ボックスの設定は非常に簡単で,各種イベントを登録するだけです。ここでは,background.js内でchrome.omnibox.onInputEnteredイベントを登録しています。

// 検索ボックス設定
chrome.omnibox.onInputEntered.addListener(
    function(text){
        searchOnApp(text);
    }
);

onInputEnteredイベントは,検索ボックスでキーワードを入力し,エンターキーを押した際のイベントになります。このイベントには入力されたキーワードを引数に持つコールバックを指定します。入力されたキーワードをsearchOnAppメソッドで検索して表示しています。searchOnAppメソッドは今回作成したもので,Odometerが既に起動していればそのタブで検索を行い,まだ起動していなければ新たにOdometerを起動してから検索を行っています。Omniboxとは直接関係はありませんが詳しくみていきましょう。

background.js(Odometerで検索)

// アプリのメイン画面URL
var APP_URL = chrome.extension.getURL('main.html');

/*
 * アプリ上で住所検索を行います
 */
function searchOnApp(text){
    selectOrCreateTab(APP_URL, function(tab){
        
        var view = getView(APP_URL);
        if ( !view ) {
            return;
        }
        
        if ( tab.status === 'loading') {
            view.searchText = text;
        } else {
            view.searchByText(text);
        }
    });
}

/*
 * 指定されたURLのタブがあれば選択し,なければ作成します
 */
function selectOrCreateTab(url, callback){
    chrome.tabs.getAllInWindow(null, function(tabs){
        for ( var i = 0, len = tabs.length; i < len; i++ ) {
            if ( tabs[i].url == url ) {
                chrome.tabs.update(tabs[i].id, { selected: true }, callback);
                return;
            }
        }
        chrome.tabs.create({ url: url }, callback);
    });
}

/*
 * アプリ内の指定されたURLのWindowオブジェクトを取得します
 */
function getView(url){
    var views = chrome.extension.getViews();
    for ( var i = 0, len = views.length; i < len; i++ ) {
        if ( views[i].location.href === url ) {
            return views[i];
        }
    }
}

selectOrCreateTab メソッドでOdometerのタブを選択,もしくは作成をします。chrome.tabs.getAllInWindowメソッドを使って指定のURLを持つタブが存在するかチェックし,既に存在する場合chrome.tabs.updateメソッドを使ってそのタブを選択しています。chrome.tabs.updateメソッドはURLだけでなく,その他のステータスを変更する場合にも利用することができます。Odometerのタブが存在しなければchrome.tabs.createメソッドを使ってタブを作成しています。

Odometerで検索するには,chrome.extension.getViewsメソッドを使ってタブのWindowオブジェクトを取得し,グローバルに定義されているsearchByTextメソッド呼び出しています。ポイントは,新たに作成したタブのstatusをチェックし,"loading"となっていた場合はすぐには検索を実行せず,対象のWindowオブジェクトへsearchText変数を定義していることです。表示側はsearchText変数が定義されていれば準備ができ次第,検索を実行します。若干スマートではないかもしれませんが,とりあえず今回はこの方法で実装しました。

odometer.js

//初期表示
//住所検索の呼び出しがあれば検索実行
if ( searchText ) {
    searchByText(searchText);
    searchText = '';
}

~省略~

/*
 * 住所検索(テキスト指定)
 */
function searchByText(text){
    document.getElementById('address').value = text;
    search();
}

Omniboxのサジェスト

今回は利用していませんが,Omniboxのサジェストの設定方法についても説明します。デフォルトのサジェストを設定するには,chrome.omnibox.setDefaultSuggestionメソッドを使います。また.キーワード入力中のサジェストはchrome.omnibox.onInputChangedイベントのコールバックの中で設定します。サジェストは,contentとdescriptionを持つオブジェクトで構成されます。contentは実際にサジェストするキーワードで,descriptionは検索ボックスに候補として表示される内容になります。サンプルを以下に示します。

サジェストのサンプルコード

// デフォルトのサジェスト
chrome.omnibox.setDefaultSuggestion({
    content: "default",
    description: "デフォルト"
});

// 入力中のサジェスト
chrome.omnibox.onInputChanged.addListener(
    function(text, suggest){
        suggest([
            { content: 'search ' + text, description: '住所検索=> ' + text }
        ]);
    }
);

図7 検索ボックスのサジェスト

図7 検索ボックスのサジェスト

表1 chrome.omnibox

メソッド/プロパティ説明
setDefaultSuggestion(suggest)デフォルトのサジェストを設定する

表2 chrome.omnibox(イベント)

イベント説明
onInputCancelledキーワードの入力がキャンセルイベント
onInputChangedキーワードの入力変更イベント
コールバックにキーワードとサジェストを引数に持つ。function(text, suggest){…}
onInputEnteredキーワードの入力完了イベント
コールバックにキーワードを引数に持つ。function(text){…}
onInputStartedキーワードの入力開始イベント

著者プロフィール

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

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