Opera エクステンションで Hello World!

はじめに

この文書では Opera エクステンション開発の初歩を手ほどきします。 ツールバーのボタンを押したら「こんにちは世界！」とポップアップが表示されるエクステンションを作っていきます。 Opera エクステンションは一般のオープンな Web 標準を使って作られているので、Opera 11 とエディタか IDE だけで開発が始められます。

エクステンションの構成

最初に、エクステンションの名前や作者、エクセテンションマネージャでのアイコンなど、メタデータを記述した構成ファイルを作ります。 Opera エクステンションは Opera Widget と同じく W3C Widgets を使って作られています。

さて、まず下記のような素の構成ファイルを作ります。

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
  <name>Hello extensions!</name>
  <description>A simple hello world example</description>
  <author href="yourURL" email="yourEmail">Enter your name here</author>
  <icon src="hello.png"/>
</widget>

出来たら開発用のディレクトリに config.xml として保存します。

エクステンションのアイコン

構成ファイルにアイコンの項目があったことに気がついてると思います。 ここで指定されたアイコンはエクステンションマネージャと Opera エクステンションのサイトで使われます。 アイコンを作るとき 64x64 ピクセルとすることをおすすめします。

アイコンファイル hello.png をダウンロードして開発用のディレクトリに保存します。

Opera のツールバーにボタンを追加

エクステンションの構成が済んだら、実際のコードの開発を始められます。 まず、ツールバーに追加するボタンを作るために、下記のコードを使います。

<!doctype html>
<html lang="en">
  <head>
    <script>
      window.addEventListener("load", function(){
        var ToolbarUIItemProperties = {
          title: "Hello World",
          icon: "hello-button.png",
          popup: {
            href: "popup.html",
            width: 130,
            height: 50
          }
        };
        var theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        opera.contexts.toolbar.addItem(theButton);
      }, false);
    </script>
  </head>
  <body>
  </body>
</html>

このコードを index.html として開発用のディレクトリに保存します。

Opera エクステンションでは index.html と言う名前のファイルが必要です。 ツールバーのボタンなど UI の要素を作るためのスクリプトが書かれた HTML の雛形で、文書の本体部は使われません。

前述のスクリプトはプロパティの値に基づいてツールバーにボタンを作ります。ボタンは 18x18 のアイコンで作成されます。 ボタンから呼び出されるポップアップも指定されたサイズで作成され、内容は別の定義を参照して作成されます。

ツールバー用のアイコンファイル hello-button.png をダウンロードして開発用のディレクトリに保存します。

ポップアップの作成

ボタンも作りポップアプのサイズも指定したので、次はポップアップの内容を作ります。 ポップアップの内容は、指定されたサイズの表示域をもつただの HTML ファイルです。 HTML や CSS, JavaScript など普段のウェブページ作成で使う技術が何でも使えます。 今回は下記のようなファイルを作ります。

<!doctype html>
<html lang="ja">
  <head>
    <title>こんにちは世界！</title>
    <style>
      h1 {
        font: 14px helvetica, arial, sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>こんにちは世界！</h1>
  </body>
</html>

popup.html として開発用のディレクトリに保存します。

エクステンションのパッケージ化とインストール

エクステンションの開発もほとんど最後になりました。 残された作業は、全部のファイルを選択して ZIP で圧縮することだけです。 圧縮ファイルが出来たら、Hello.oex と言うふうに元のファイルを拡張子 .zip の部分も含めて名前を変えます。 それでお終いです。

最終的な「こんにちは世界！」エクステンションのダウンロードはこちらから。

エクステンションをブラウザにドラッグアンドドロップすると、インストールするか尋ねてきます。 構成ファイルで指定したアイコンが表示されているでしょう。 タブを切り替えてツールバーに新しく作ったボタンをクリックしてみましょう。

プロパティの値を変えたりポップアップの内容を変えたりして、満足いくまで何度でも実験してみるといいでしょう。