Opera エクステンション:ボタン、バッヂ、ポップアップ
From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.
はじめに
この文書ではツールバー上のボタンの作り方やその構成について端から端まで全て解説していきます。ツールバー上のアイテムはバックグラウンドプロセスの一部として定義したり操作したりします。挿入されたスクリプトやポップアップから直接定義したり操作したりはできません。ボタンやバッヂ、ポップアップは opera.coontexts.toolbar
に制御されますがこれについての詳細は、Button & Badge 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 を参照してください。
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
Comments
The forum archive of this article is still available on My Opera.