Opera エクステンション：ボタン、バッヂ、ポップアップ

はじめに

この文書ではツールバー上のボタンの作り方やその構成について端から端まで全て解説していきます。ツールバー上のアイテムはバックグラウンドプロセスの一部として定義したり操作したりします。挿入されたスクリプトやポップアップから直接定義したり操作したりはできません。ボタンやバッヂ、ポップアップは opera.coontexts.toolbar に制御されますがこれについての詳細は、Browser Toolbar API Guide を参照してください。

目次

• ツールバーのボタン
• ボタンを作る
• ボタンをツールバーに追加する
• ボタンをツールバーから削除する
• ポップアップを作る
• ポップアップの中身
• ポップアップのサイズ
• バッヂを作る
• バッヂの表示
• API リファレンス

ツールバーの検索欄の右側にエクステンション一つに付きボタンを一つ置けて、18x18 ピクセルのアイコンや、マウスを乗せた時に表示するツールチップ、ステータス表示用のバッヂ、オーバーレイ表示されるポップアップを入れられます。

ボタンを作る

ボタンは、index.html にスクリプトを書いて作成します。 この例では、ロードイベント発生時に動作させることを想定して書いていきます。

まずは、ボタンのプロパティを設定します。設定した ToolbarUIItemProperties オブジェクトを以下に示します。

var ToolbarUIItemProperties = {
  disabled: false,
  title: "Button Example",
  icon: "icons/button.png"
}

ToolbarUIItemProperties オブジェクトにボタンのプロパティを定義したら、createItem 関数を使って実際のボタンを生成します。

var theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

ToolbarUIItemProperties にはこれから挙げる 5個のプロパティを設定することが出来ます。

disabled

ボタンの有効無効状態を真偽値で設定します。デフォルトでは false （有効） になっています。 ボタンを無効にするには、以下のようにします。

theButton.disabled = true;

title

title にはマウスを乗せた時のツールチップに表示される文字列を設定します。

theButton.title = "This is a tooltip";

icon

icon にはボタンのアイコンに使われる画像を指定します。 画像のサイズが 18x18 ピクセル以外のとき、自動的にサイズが調整されます。

theButton.icon = "icons/beautiful-toobar-icon.png";

onclick

ユーザがボタンをクリックして click イベントが発生したときに実行される関数を指定します。

theButton.onclick = function(){ /* do something */ };

onremove

ToolbarContext から削除されて、remove イベントが発生したときに実行される関数を指定します。

theButton.onremove = function(){ /* do something */ };

ツールバーにボタンを追加する

ボタンを作ったならツールバーに追加してみましょう。追加するには addItem 関数を使います。

opera.contexts.toolbar.addItem(theButton);

ボタンに動作を何も設定していないので何も起きませんが、ボタンのサンプル実装を実行して試してみてください。

ツールバーからボタンを削除する

以下のように removeItem 関数を使ってボタンをツールバーから削除することも出来ます。

opera.contexts.toolbar.removeItem(theButton);

ポップアップをつくる

ボタンができたので実際に何か動作させてみましょう。 ユーザがボタンをクリックしたときに、ポップアップを指定したサイズでオーバーレイ表示させることが出来ます。 ポップアップで表示させる内容は、どこかの Web ページか、エクステンションに同梱したページかを指定します。

ポップアップを作るには、ToolbarUIItemProperties オブジェクトのプロパティに Popup オブジェクトを追加します。

var ToolbarUIItemProperties = {
  disabled: false,
  title: "Button Example",
  icon: "icons/button.png",
  popup: {
    href: "popup.html",
    width: 300,
    height: 300
  }
}

ポップアップの高さと幅はデフォルトで 300x300 になっているので、別の大きさにしたい時にはこの例のように、明示的に width と height を指定する必要があります。

ポップアップの内容

ポップアップの内容は href プロパティで表示させるページを指定します。 次のように絶対 URL を指定することで、どんな Web ページもポップアップさせることが出来ます。

theButton.popup.href = "http://www.opera.com/";

エクステンションに同梱したファイルを相対パスで指定するには次のようにします。

theButton.popup.href = "popup.html";

ポップアップに表示させるページは普通の HTML のページであれば、他に何も要りません。 ポップアップを表示させているときに href プロパティを変更すると、ポップアップは閉じられます。

ポップアップのサイズ

ポップアップのサイズは width と height プロパティにピクセル数で指定します。

幅

theButton.popup.width = 300;

高さ

theButton.popup.height = 300;

ポップアップはcreateItem 関数を呼び出したときにボタンと一緒に作られます。

ポップアップのサンプル実装を実行して試してみてください。 Opera エクステンションで Hello World!（原典:Saying hello world to Opera extensions!）を試したことがあれば、非常によく似たエクステンションだと思うことでしょう。

バッヂを作る

バッチはアイコンにオーバーレイして状態を示すものです。 例えば、未読のメールやメッセージといったアイテムの数を表示させるのによく使われます。 バッヂを作るには、ToolbarUIItemProperties オブジェクトのプロパティに Badge オブジェクトを追加します。

var ToolbarUIItemProperties = {
  disabled: false,
  title: "Button Example",
  icon: "icons/button.png",
  badge: {
    display: "block",
    textContent: "12",
    color: "white",
    backgroundColor: "rgba(211, 0, 4, 1)"
  }
}

バッヂの表示

バッヂのカスタマイズには以下の4個のプロパティを使います。

display

バッヂの表示非表示は display プロパティで切り替えます。 指定できる値は、block か none で、デフォルト値は none になっています。 バッヂを表示させるには、次のようにします。

theButton.badge.display = "block";

textContent

バッヂとして表示させる内容は textContent プロパティに指定します。 表示領域が限られているので簡潔にしましょう。

theButton.badge.textContent = "12";

color と backgroundColor

バッヂの文字（前景）色と背景色はそれぞれ color と backgroundColor プロパティで指定します。 指定方法には、16進数表記と rgba()、色名が使えます。

theButton.badge.color = "white";

theButton.badge.backgroundColor: = "rgba(211, 0, 4, 1)";

バッヂのサンプル実装を実行して試したり、エクステンションの UI のいろいろな生成方法と操作方法を試してみるといいでしょう。

数々のオブジェクトや関数の完全なドキュメントは Opera extensions API documentation を参照してください。

API リファレンス

• ToolbarContext オブジェクト
• ToolbarUIItem オブジェクト
• ToolbarUIItemProperties オブジェクト
• Popup オブジェクト
• Badge オブジェクト