UserJS を Opera エクテンションに

By t.ashula

はじめに

この文書は UserJS から Opera エクステンションへの変換を駆け足で解説します。 手順はとても単純ですが、いくつか注意しておいてほしいこともあるので書いていきます。 実用的なサンプルも作ります。

変換手順

1. まず最初に、エクステンションのルートディレクトリとなる空のディレクトリを作成します。
2. 次に ルートディレクトリに includes ディレクトリを作り、UserJS スクリプトを置きます。このスクリプトが挿入されるスクリプトとして動作します。
3. ルートディレクトリ内に icons のような適当なディレクトリエクステンションのアイコンを入れます。
4. 適切な config.xml ファイルを作りルートディレクトリに置きます。
5. ルートディレクトリ内の全てのファイルとディレクトリを選択して ZIP で圧縮し、適当なファイル名をつけ拡張子 .oex を付けます。
6. これで、動作するエクステンションが出来ました。Opera エクステンションのサイトにアップロードする前にテストしたりデバッグしたりしてください。

注意事項

いくつかの理由で、エクステンションとして動作しない UserJS があります。 動かない理由の多くは、location や opera といったオブジェクトをを直接参照しているからですが、 window.location や window.opera のように window から参照するように直せば動作します。

実用的なサンプル

UserJS からエクステンションへの変換が簡単なことを示す一連として、あっという間にあなたをエクステンション開発者にしてみせましょう。 じゃあ、タイマースタート。

ステップ 1： UserJS を選ぶ

例として、Opera のインターンで働いていた Martin Rauscher 作成の、ホットな HTML5 video UserJS を取り上げます。 彼のスクリプトは HTML5 のビデオを全画面表示で見られるようにします。いい忘れてましたが、スクリプトを変換してエクステンションにするには元のスクリプトのライセンスを確認しておくべきです。Martin Kindly はエクステンションへの変換の許可をくれましたが、あなたはオープンソースライセンかその他の許可されたライセンスでリリースされたスクリプトを使いましょう。

ステップ 2： ディレクトリを掘る

まずは、起点となるディレクトリが必要ですので、ルートディレクトリとして VideoFullscreen を作ります。 ルートディレクトリにサブディレクトリ includes を作り、その中にUserJS ファイル（VideoFullscreen.js）をコピーします。

ステップ 3： アイコンを作る

自分で好きなデザインのアイコンを作ることもできますが、このサンプルでは手抜きして、Open Icon Library から選んできます。 数百者アイコンが使えますがまずはライセンスで必要事項を確認しましょう。 なんであれ、原著に言及しておくのは良いことです。今回は、全画面表示を表すアイコンを使ったので Tango プロジェクトのクレジットを入れておきます。 Opera エクステンションマネージャでの最大解像度は 64x64 なのでそれを使います。

ステップ 4： 設定ファイルを作る

手を抜くところは抜くということにしているので、下の config.xml をコピペして、ルートディレクトリに保存します。

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
  <name>VideoFullscreen</name>
  <description>Adds fullscreen capability to every HTML5 video element. Just play the video and then hit SHIFT-ENTER or F11.</description>
  <author href="http://rauscheronline.de/">Martin Rauscher (ported by Daniel Davis)</author>
  <icon src="VideoFullscreen.png"/>
</widget>

あなたのエクステンションに合うように詳細を変えて、作者としてあなた自身のクレジットを入れるのを忘れないでください。

ステップ 5： まとめる

最後のステップはパッケージ化です。 icons ディレクトリと、includes ディレクトリ、それと config.xml を選択して ZIP で圧縮して、できたファイルの拡張子を .oex に変えます。我々のサンプルでは VideoFullscreen.zip を VideoFullscreen.oex とします。 これでお終いです。 ファイルを Opera にドラッグすればエクステンションをインストール出来ます。

ステップ 6： 微調整とバグ修正

元々の UserJS はうまく動いたのに、新しく作ったエクステンションはうまく動かないとこもあるでしょう。 エラーコンソールを先ず見てみるというのはいいアイデアですが、大抵の場合 Opera エクステンションの環境に起因する問題がほとんです。 つまり、UserJS 内で参照しているオブジェクトをより厳密にする必要があるということです。 今回の VideoFullscreen.js の場合、addEventListener() を何度か使っていますが、イベントを設定すべきオブジェクトを厳密に指定していませんでした。 UserJS では暗黙のうちに window を環境としていましたが、Opera エクステンションはもう少し複雑なので window を指定する必要があります。 つまり、次のようなコードにします。

window.addEventListener('DOMContentLoaded',init,false);
window.addEventListener('DOMContentLoaded',function(){
  document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false);
},false);
window.addEventListener('DOMNodeInserted',init,false);  

ここで、コードを深く掘り下げて改善していきます。今回のスクリプトではコードを下記のように書き換えてより効率的にしました。

// このコードを
document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false);
// このように変更
document.body.addEventListener('keydown',keyDownHandler,false); 

エクステンションだけでなく Web ページやアプリの高速化のために別稿 効率的なJavaScript（原著 writing efficient JavaScript）を読んでおくことをおすすめします。

ステップ 7： 野に放つ

さて、変換も済みテストと調整も済んだので公開するとしましょう。 addons.labs.opera.com にアップロードし、みんなに告知します。 このチュートリアルで作ったエクステンションもこのサイトにアップロードしてありますし、このページの VideoFullscreen Opera extension からダウンロードすることも出来ます。 インストールしたら、HTML5 の VIDEO を使ったページ、例えば、 Bruce Lawson による HTML5 VIDEO のページなどで、再生ボタンを押してから F11 を押して試してみるといいでしょう。 次回の記事では Bruce Lawson を全画面で拝んでトラウマになったことを考える事になるかもしれませんが、そうなるまえにあなたが変換したか新しく作ったエクステンションが来ることを待っています。

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