Operaの拡張機能：ボタン、バッジ、ポップアップ

エントリー

この記事では、ブラウザパネルのボタンとそのさまざまなコンポーネントを作成および管理するための基本的な手順について説明します。

ブラウザバーのボタン

拡張機能を使用すると、Operaブラウザパネルの検索フィールドの右側にボタンを1つ配置できます。 ボタンには、18x18ピクセルのアイコン、ツールヒント（ホバリング時に表示）、ステータスバッジ、ポップアップウィンドウを含めることができます。

ボタンの作成

ボタン作成コードは、index.htmlファイルのscript要素に追加する必要があります。 この例では、loadイベントが発生したときにコードを実行します。

最初のステップは、ボタンのプロパティを決定することです。 これは、ToolbarUIItemPropertiesオブジェクトを使用して実行できます。 例：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ToolbarUIItemPropertiesでボタンのプロパティを設定した後、createItemメソッドを使用してボタン自体を作成する必要があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

合計で、ToolbarUIItemPropertiesオブジェクトを使用して、5つのプロパティを定義できます。

障害者

ボタンがアクティブかどうかを決定します。 デフォルト値はtrue（非アクティブ）であり、ブール値を取ります。 次のようにして、ボタンを非アクティブにできます。

 theButton.disabled = true;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タイトル

titleプロパティは、ユーザーがボタンの上にカーソルを置いたときに表示されるツールチップを設定します。

 theButton.title = " ";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アイコン

iconプロパティは、ボタンで使用されるアイコンを設定します。 サイズが18x18ピクセル以外の画像を指定すると、自動的に拡大縮小されます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onclick

この関数は、ユーザーがボタンをクリックしてクリックイベントが発生したときに呼び出されます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

削除する

この関数は、ToolbarContextからボタンが削除され、removeイベントが発生したときに呼び出されます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザバーにボタンを追加する

ボタンを作成したら、Operaパネルに配置する必要があります。 addItemメソッドを使用してこれを行います。

 opera.contexts.toolbar.addItem(theButton);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例を実行してみてください。 ボタンに対するアクションをまだ定義していないため、特別なことは何もしません。

ブラウザパネルからボタンを削除する

ボタンは、removeItemメソッドを使用してブラウザパネルから削除できます。

 opera.contexts.toolbar.removeItem(theButton);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポップアップを作成する

これでボタンができたので、何かできるようになります。 ボタンをクリックすると、ポップアップウィンドウが表示される場合があります。 ポップアップは、指定された幅と高さを持つウィンドウです。 オンラインまたは拡張機能で配信されているページにロードできます。



ポップアップを作成するには、ToolbarUIItemPropertiesオブジェクトを使用してPopupオブジェクトのプロパティを定義する必要があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポップアップコンテンツ

hrefプロパティを使用して、ポップアップのコンテンツを指定します。 絶対URLを使用して、ネットワーク上の任意のページを指すことができます。

 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メソッドが呼び出されると、ポップアップウィンドウがボタンと同時に作成されます。



ポップアップボタンの例を試してください。 「 Your First Extension for Opera 」の記事の例を試してみると、非常に馴染みのあるものになります。

バッジ作成

バッジは、ボタンアイコンの上部にテキストコンテンツが表示されたオーバーレイです。 ほとんどの場合、未読の手紙やメッセージなど、何かの量を表示するために使用されます。 バッジを作成するには、ToolbarUIItemPropertiesオブジェクトを介してBadgeオブジェクトのプロパティを定義する必要があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バッジには、構成可能な4つのプロパティがあります。

展示する

表示プロパティは、バッジの表示と非表示を切り替えます。 有効な値はblockおよびnoneです。 デフォルト値はnoneです。 このようにバッジを表示できます：

 theButton.badge.display = "block";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

textContent

バッジテキストは、textContentプロパティを介して設定できます。 バッジにはテキストを表示するためのスペースが限られているため、簡潔にするようにしてください。

 theButton.badge.textContent = "12";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

色と背景色

colorおよびbackgroundColorプロパティは、バッジのテキスト色と背景色を設定します。 16進数、RGBA、および色の名前の値を取ります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バッジボタンの例を試して、Opera拡張機能のユーザーインターフェース要素を作成および管理するさまざまな方法を試すことができます 。



Operaの拡張APIを参照して、さまざまなオブジェクトとメソッドに関する完全な情報を取得できます。

APIリンク

ToolbarContextオブジェクト

ToolbarUIItemオブジェクト

ToolbarUIItemPropertiesオブジェクト

ポップアップオブジェクト

バッジオブジェクト