初めてのOpera extensions開発

2010年12月16日にリリースされたOpera 11ですが、ご存知の方も多いと思いますが、Opera 11から拡張機能をサポートします。

そこで、ものすごい簡単なOpera extensionsを開発しましたので、開発手順を記載させていただきます。

Opera extensions開発のドキュメント

Opera extensionsの開発にあたっては、下記サイトが非常に参考になります。

また、Opera extensionsの開発に必要とする技術は、基本的には下記です。

  • HTML5
  • CSS
  • JavaScript

Opera アドオン: エクステンションの開発

Opera extensionsの作成手順

開発には、下記のファイルの作成になります。

  • config.xml
  • index.html
  • icon.png

config.xml

config.xml は、extensionsの名称や説明、作成者情報などの詳細を記述します。

index.html

index.htmlには、ブラウザにツールバーにボタンなどのUIを追加するためにJavaScriptを記述します。

icon.png

extensionsで使用するアイコンです。

.oex

これらのファイルをすべて含めてzip形式に圧縮し、そのzipを拡張子を .oexに変更してドラッグ&ドロップをすればインストールされます。

開発したextensions

今回作成したextensionsというのは、私がよく使うGoogleアプリケーションのリストが表示されるようなextensionsです。下記図がそのスクリーンショットです。

ボタンをクリックすると、リストがポップアップで表示され、リンクをクリックするとそれぞれのGoogleアプリケーションに移動します。一応、下記リンクがextensionsのファイルです。

My Google Appのダウンロード

ファイル構成

ファイル構成は下記図のようになっています。

  • config.xml
  • index.html
  • popup.html
  • icons

config.xml

config.xmlは、上記でも記述したとおり、本extensionsの名称や説明、作成者情報などの詳細を記述しています。

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
	<name>My Google App</name>
	<description>The List of Google App which using the most.</description>
	<author href="自分のサイトのURL" email="Eメールアドレス">eriver</author>
	<icon src="icons/icon48.png"/>
</widget>

index.html

ブラウザにツールバーにボタンを追加し、ポップアップ表示されるようにJavaScriptを記述しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
       window.addEventListener("load", function(){
        var theButton;
        var ToolbarUIItemProperties = {
          title: "My Google App",
          icon: "icons/icon32.png",
          popup: {
            href: "popup.html",
            width: 200,
            height: 300
          }
        }
        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        opera.contexts.toolbar.addItem(theButton);
      }, false);
    </script>
  </head>
  <body>
  </body>
</html>

popup.html

popup.htmlは、ポップアップ表示されたときに、Googleアプリケーションのリストが表示されるようにHTMLを記述しています。

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Google App</title>
<style>
body{
	font: 12px helvetica, arial, sans-serif;
}

h1 {
	text-align: center;
	font-size: 12px;
 }

li{
	margin: 10px 0;
}

</style>
</head>
<body>
<h1>Google App List</h1>

<ul>
<li><a href="http://mail.google.com/mail/?hl=ja">Gmail</a></li>
<li><a href="http://www.google.com/calendar?hl=ja">Googleカレンダー</a></li>
<li><a href="http://maps.google.com/?hl=ja">Google Maps</a></li>
<li><a href="http://www.google.co.jp/reader?hl=ja">Google リーダー</a></li>
<li><a href="http:/docs.google.com/">Google Docs</a></li>
<li><a href="http://translate.google.co.jp/translate_t?hl=ja">Google翻訳</a></li>
<li><a href="http://www.youtube.com/?gl=JP&hl=ja">YouTube</a></li>
</ul>
</body>
</html>

icons

iconsフォルダには、16x16から64x64のそれぞれのサイズのアイコンを置いています。ちなみに下記図がそのアイコンです。

.oexにする

上記でも書きましたが、zip形式に圧縮して、そのzipの拡張子を.oexに変更すれば完成です。

完成したextentionは配布のために、アドオン配布サイトに申請をします。現在、申請中です。申請が通れば、配布サイトに公開されます。しかし、リジェクトされる可能性もあるようです。

作ってみての感想

これまでFirefoxのアドオンを開発したことがあるのですが、Firefoxのアドオンと比べると非常に分かりやすかったです。

開発技術がHTMLとJavaScriptなので、Web製作者にとってみれば、非常に開発しやすいです。

この機にいろいろと作ってみようと思います。

追記:12月22日

配布サイトに申請をしていましたが、本日(12月22日)に申請に通りました。配布サイトからダウンロードできます。

My Google App - Opera extensions -