Opera エクステンションってどんなもの?

By Makoto Mizukami

はじめに

この記事では Opera エクステンションに含まれる機能について概要をご説明し、いくつかの API を簡単にご紹介します。尚 Opera Labs に API に関するより広範囲なリファレンス文書 があります。

エクステンションのファイル

Opera エクステンションは W3C Widgets の仕様 （例えば config.xml の機能など）が基本となっています。エクステンションには以下のファイルが含まれます:

  • /config.xml
  • /index.html
  • /background.js
  • /popup.html
  • /icons/example.png
  • /locales/no/index.html
  • /locales/no/background.js
  • /locales/no/popup.html

一つずつご説明しましょう:

config.xml

これはエクステンションの重要なメタデータを記述する設定ファイルで、エクステンションが必須とする二つのファイルの内の一つです（もう一つは index.html）。とはいえ、このファイルでできることはあまりありません。 Opera エクステンションは W3C Widgets を基本としていますので、 config.xml も同じ仕様になっています（W3C Widgets spec configuration document の節をご覧ください）。記述できるメタデータは沢山ありますが、少なくとも以下のものは記述するようお勧めします:

  • エクステンションの名前
  • エクステンションのID、例えばエクステンションのURL
  • 作者の名前
  • エクステンションの説明
  • アイコン: これは Opera エクステンションのダウンロードサイトやその他色々な所で使われます。詳細は以下の アイコンの節 をご覧ください。

config.xml の例を示します:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.example.org/example">
  <name>My test extension</name>
  <description>API experiments and testing.</description>
  <author href="http://foo-bar.example.org/"
          email="foo-bar@example.org">Foo Bar Corp</author>
  <icon src="icons/example.png"/>
</widget>

index.html

これはウィジェット用語で「スタートファイル」と呼ばれるものです。スタートファイルはどのような場合でも必要で、エクステンションのバックグランドプロセスとして動作します（但し config.xml の <content> 要素を使って違うファイルをスタートファイルにすることもできます）。

このファイルには JavaScript を記述することができ、これを使って、ボタン UI やコールアウトなど、ユーザーインターフェースとなるアイテムを作成することができます。例えば:

<!doctype html>
<html>
  <head>
    <script>
      window.addEventListener("load", function(){
        var theButton;
        var UIItemProperties = {
          disabled: false,
          title: "101 - createItem w popup big",
          icon: "icon.png",
          popup: {
            href: "popup.html",
            width: 250,
            height: 500
          }
        }
        theButton = opera.contexts.toolbar.createItem( UIItemProperties );
        opera.contexts.toolbar.addItem( theButton );
      }, false);
    </script>
  </head>
  <body>
  </body>
</html>

background.js

ここには、エクステンションのバックグランドプロセスを制御する、バックグラウンドスクリプトと呼ばれるものを記述します。これは作りたいだけ作ることができますし、 background.js という名前にする必要もありません。

popup.html

このファイル（一つ又は複数）は、バックグラウンドプロセスによって立ち上げられるポップアップウィンドウの内容を含んでいます。ポップアップウィンドウの内容には、これらのファイルに記述したものの他に、外部の URL （例えば http://www.opera.com）を利用することも可能です。

icons/example.png

ここにはエクステンションで使われるアイコンが置かれます（詳細は以下のアイコンの節をご覧ください）。

includes （挿入されるスクリプト）

このフォルダに置かれた JS ファイルは全てブラウザでアクセスしたページに挿入されます。これらのファイルは特定のサイト（youtube.com など）を対象にすることもできます。挿入されるスクリプトの動作については UserJS に関する文書のページをご覧ください。

locales

locales ディレクトリには、任意でエクステンションに翻訳版を提供する際の翻訳ファイルを置きます。 locales ディレクトリの中は言語ごとにディレクトリに分けします（ディレクトリの名前はその言語や方言の言語コードにします）。例えば、前述のディレクトリツリーには no がノルウェー語の翻訳として置かれています。勿論これ以外に en-gb, pt-br, ru, cz, jp やその他のものを好きなだけ追加することができます(但しディレクトリ名は互換性問題を回避するため小文字にする必要があります - これは W3C Widgets Packaging の仕様で定められています)。これらのフォルダにある翻訳されたリソースは、デフォルトの index.html や挿入するスクリプトを置き換えます。

Opera エクステンションの UI は、挿入されるスクリプトでウェブページに追加された UI 要素や UIItems API を使って作成された Opera のツールバー上のボタン、エクステンションに含まれている HTML 文書や URL で指定された外部のウェブサイトのポップアップによって構成されます。

アーキテクチャと API の分析

Opera エクステンションのアーキテクチャは次の4つの基本的な要素同士の相互作用で成り立っています:

挿入されるスクリプト <-> バックグラウンドプロセス <-> ボタン/バッジ <-> ポップアップ
これらの要素は互いに cross-document messaging を通して交信します。それぞれの要素は以下のように動作します:

挿入されるスクリプト

この要素は、対象となるサイトに挿入されるスクリプトを提供します。

バックグラウンドプロセス

バックグラウンドプロセスはアーキテクチャを構成する主要な部分の一つです — 全てのメッセージがここを通り、またエクステンション API の殆どはここからコールされる、中心的な部分です。バックグラウンドプロセスは以下のメソッドを継続的に実行することで UI アイテムを構成します:

  • opera.contexts.toolbar.createItem( { ...properties... } )
  • opera.contexts.toolbar.addItem( uiItem )
  • opera.contexts.toolbar.removeItem( uiItem )

参考: toolbar は現在コンテキストのみ利用可能です。今後これは拡張される予定です。

ボタン／バッジ

これはエクステンションの UI 要素が一つにまとめられ表示されるところです。これには例えば押しボタン、情報を表示するバッジ、そして将来的なリリースではメニューなどが含まれます。

ボタン

opera.contexts.toolbar.createItem() を使ってブラウザのツールバーにボタンを作成することができます。また、 opera.contexts.toolbar.addItem() を使ってボタンを追加することも可能です。以下にボタンを追加しそのボタンがクリックされたらコールアウトを実行するだけの簡単な index.html の例を示します:

<!doctype html>
<html>
  <head>
    <script>
      window.addEventListener("load", function(){

        var theButton; // button 変数
        var toolbar = opera.contexts.toolbar; // Opera ツールバー

        var props = { // ボタンのオプション
          disabled: false,
          title: "My first extension!",
          icon: "opera.ico",
          popup: {
            href: "http://www.google.com",
            width: 300,
            height: 200
          }
        }

        theButton = toolbar.createItem( props ); // ボタンの作成

        toolbar.addItem( theButton ); // UI へのボタンの追加

      }, false);
    </script>
  </head>
  <body>
  </body>
</html>

opera.contexts.toolbar.removeItem(theButton); を使ってボタンを削除することもできます。またボタンのオプションに onclick: function(){ /* do something */ } を追加することで onclick イベントを使うこともできます。

アイコン

UI にボタンを使ったのであれば、これにアイコンをつけるべきです。ボタンのアイコンは 18 x 18 ピクセルのサイズで描画されます。同梱されたアイコンがこれ以外のサイズの場合伸縮された後描画されます。最良の結果を得るためにはぴったり 18 x 18 ピクセルのアイコンを使うようお勧めします。

さらに、 Opera エクステンションのサイトに作成したエクステンションをアップロードする際に 64 x 64 ピクセル以上のアイコンも提供するように求められます。このアイコンはオンラインカタログでタイトルと説明の隣に表示されたり、ブラウザの Opera エクステンションマネージャー内で使われたりします。タイトルと説明、そしてアイコンへのパスは、 config.xml に保存され、ここから取得されます。

ポップアップ

ポップアップはボタン作成時に popup プロパティを追加するだけで定義することができます:

var props = { // ボタンのオプション
  disabled: false,
  title: "My first extension!",
  icon: "opera.ico",
  popup: {
    href: "http://www.google.com",
    width: 300,
    height: 200
  }
}

上の例では google.com のホームページを含むポップアップを作成します。ポップアップの内容にはローカルにある HTML ファイルを使うこともできます。例えば:

popup: {
  href: "popup.html",
  width: 300,
  height: 300
}

バッジ

バッジはエクステンションのボタンの上にオーバーレイとして現れる通知です。ボタンのオプションにバッジのプロパティを追加することによって作成できます:

var props = { // ボタンのオプション
  disabled: false,
  title: "My first extension!",
  icon: "opera.ico",
  popup: {
    href: "popup.html",
    width: 300,
    height: 200
  },
  badge: {
    textContent: '123'
  }
}

スタイルプロパティを使うことでバッジの背景及び表面の色をカスタマイズすることもできます:

backgroundColor: '#ffeedd',
color: '#404040',

そして、 textContent プロパティを変更することでバッジの内容を更新することができます:

theButton.badge.textContent = "45"

様々な種類のエクステンション

エクステンションの種類は沢山あります。但しこれらを作成するのに必要な機能の内現段階ではまだ利用可能となっていないものもあります。これらは以降のリリースで段階的に更新され、チュートリアルも更に追加される予定です。基本的に、エクステンションのアーキテクチャで異なる部分は大体次のように表せます:

挿入されたスクリプト <-> バックグラウンド <-> ボタン/バッジ <-> ポップアップ

作成できるエクステンションの種類は以下のコンポーネントの組み合わせです:

  1. 挿入されるスクリプト + index.html: これは、単に挿入されるスクリプトが空の index.html や config.xml と共にエクステンションとしてパッケージングされたものです。これは確かに動作しますが、エクステンション特有の API や他の機能を全く活用していません。
  2. ボタン + ポップアップ: Opera のツールバーにボタンを作成し、これがクリックされるとサードパーティの URL を開くようなエクステンションを書くこともできます。例えば、携帯端末向けのページを含んだポップアップフレームをつくり、それらをデスクトップで利用できるようにすることができます。
  3. ブックマークレット・エクステンション: クリックされたときにバックグラウンドプロセスからブックマークレットの機能をそのタブで実行するエクステンションを書くこともできます。これを使えばアドレスバーの javascript: URL は必要ありません。
  4. 内容解析: 挿入されるスクリプトに DOM を処理させ、結果をバックグラウンドに送り、これをさらに適切なタイミングでボタンやポップアップに送るようなエクステンションも作れます。
  5. 内容に基づく動作: 挿入されるスクリプトにボタンのクリックでメッセージを送信し、これがメソッドを実行しポップアップなどで使うデータ列を返すようなエクステンションを書くこともできます。例えば、ページ上に書かれている所在地を選択し "Map" ボタンを押すと、その所在地に対応する Google Map のページがポップアップするようなものが考えられます。
  6. 自動動作: バックグランドプロセスで定期的にサービスにポーリングしその情報を元にバッジを更新することもできます。例えば、メールサービスにポーリングし、未読メールの数を UI にあるバッジに表示させることができます。

参考: バックグランドプロセスはウィジェットのようにクロスドメイン XHR を使うことができます。クロスドメイン XHR については Opera Widgets and Ajax connecting to multiple servers をお読みください。

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.