UserJSをOperaの拡張機能に変換します
エントリー
これは、 UserJSをOperaの拡張機能にすばやく変換するためのガイドです。 これは非常に簡単なプロセスですが、いくつかのトリックをご紹介します。 この記事は、変換の実際的な例です。
プロセス
まず、拡張機能のルートディレクトリとして機能する空のディレクトリを作成します。 includeサブディレクトリを作成し、UserJSを入れます-拡張機能はこのスクリプトを使用します。 拡張機能が使用するアイコンを作成し、ルートディレクトリのサブディレクトリ（たとえば、アイコン）にマークします。
config.xml構成ファイルを作成し、ルートディレクトリに配置します。
ルートディレクトリのすべてのコンテンツを選択し、zipで圧縮し、アーカイブ拡張子を.oexに変更します。
これで正しく機能する拡張機能ができましたが、Operaの拡張機能をサイトにアップロードする前に、テストとデバッグを行う必要があります。
警告
UserJSはさまざまな理由で拡張機能として機能しない場合があります。 ほとんどの場合、一部のオブジェクト（場所やオペラなど）が直接使用されるためです。 これは、windowオブジェクト（window.location、window.operaなど）を介してこれらのオブジェクトにアクセスすることで簡単に修正できます。
実際の例
UserJSをOperaの拡張機能に変換するのがいかに簡単かを示すために、数分で拡張機能の開発者に変わる例を示します。 ストップウォッチを開始します！
ステップ1：UserJSを選択する
この例では、以前のOperaインターンであるMartin Rauscherが作成した現在のHTML5ビデオUserJSを使用します 。 そのスクリプトを使用すると、HTML5ビデオを全画面モードで表示できます。 言うまでもなく、使用および再公開する予定のスクリプトのライセンスを確認する必要があります。 この場合、Martinは親切に許可を与えてくれましたが、オープンソースライセンスでリリースされたスクリプトを使用することもできます。
ステップ2：ディレクトリを作成する
まず、拡張のために家が必要です。このディレクトリをVideoFullscreenと呼びましょう。 includeサブディレクトリを作成し、UserJSファイル（VideoFullscreen.js）をそこにコピーします。
ステップ3：アイコンを作成する
もちろん、愛情を込めて独自のアイコンを作成することもできますが、この例では怠け者になり、 Open Icon Libraryに移動します。 数百のアイコンが利用可能ですが、常に最初にライセンスを確認してください。一部のアイコンには報酬が必要です。 もちろん、ソースを指定することを常にお勧めします。この場合、 フルスクリーンアクションを表すアイコンに対してTangoプロジェクトに感謝が送られます 。 Operaの拡張機能マネージャーの最大値として64x64ピクセルバージョンを使用してみましょう。
ステップ4：構成ファイルを作成する
繰り返しますが、遅延しているため、以下に示すコードをconfig.xmlファイルに安全にコピーして、拡張機能のルートディレクトリに保存できます。
自分と元のUserJSの作成者の両方に言及して、すべてのデータを変更することを忘れないでください。
ステップ5：拡張機能をビルドする
アセンブリの最後の手順は、アイコンとディレクトリ、config.xmlファイルを選択し、それらをzipアーカイブにパックすることです。 その後、拡張子を.oexに変更します（VideoFullscreen.zipはVideoFullscreen.oexになります）。 拡張機能は、Operaのウィンドウにドラッグアンドドロップすることでインストールの準備ができています。
ステップ6：バグの設定と編集
元のUserJSは正常に機能しますが、拡張機能が適切に機能しない場合があります。 まず第一に、エラーコンソールをチェックすることをお勧めしますが、ほとんどの場合、問題はOperaの拡張環境の構造、特に使用するオブジェクトにあります。 の場合
VideoFullscreen.js addEventListener（）メソッドは数回使用されますが、イベントをバインドするオブジェクトを指定しないでください。 UserJS環境は、イベントがウィンドウオブジェクトにアタッチされることを前提としていますが、これは本当ですが、Operaの拡張機能の環境はやや複雑なので、以下に示すように、ウィンドウオブジェクトを明示的に指定する必要があります：
コードを徐々に掘り下げて、改善すべきいくつかの場所を見つけることができます。 このスクリプトの場合、効率を上げるために次の変更を行うことができます。
効果的なJavaScriptの記述に関する詳細な記事があります 。これは、拡張機能だけでなくWebページやWebアプリケーションのパフォーマンスを向上させるために読むことをお勧めします。
ステップ7：無料
そのため、拡張機能を変換、テスト、改善しました。 これで、表示する準備ができました。 これを行うには、 addons.labs.opera.comにアップロードします 。 この例で説明されている拡張機能はすでにそこにありますが、このリンク（ VideoFullscreen Opera拡張機能）からダウンロードできます。 それをインストールした後、例えば、 ブルース・ローソンのこの教育ビデオで 、HTML5ビデオを含むページを見つけることによってそれを試すことができます。 再生を開始し、F11を押します。 次の記事では、ブルース・ローソンを全画面モードで表示することのトラウマに対処しますが、今のところ、拡張機能が変換され、ゼロから書き込まれるのを待っています。
これは、 UserJSをOperaの拡張機能にすばやく変換するためのガイドです。 これは非常に簡単なプロセスですが、いくつかのトリックをご紹介します。 この記事は、変換の実際的な例です。
プロセス
まず、拡張機能のルートディレクトリとして機能する空のディレクトリを作成します。 includeサブディレクトリを作成し、UserJSを入れます-拡張機能はこのスクリプトを使用します。 拡張機能が使用するアイコンを作成し、ルートディレクトリのサブディレクトリ（たとえば、アイコン）にマークします。
config.xml構成ファイルを作成し、ルートディレクトリに配置します。
ルートディレクトリのすべてのコンテンツを選択し、zipで圧縮し、アーカイブ拡張子を.oexに変更します。
これで正しく機能する拡張機能ができましたが、Operaの拡張機能をサイトにアップロードする前に、テストとデバッグを行う必要があります。
警告
UserJSはさまざまな理由で拡張機能として機能しない場合があります。 ほとんどの場合、一部のオブジェクト（場所やオペラなど）が直接使用されるためです。 これは、windowオブジェクト（window.location、window.operaなど）を介してこれらのオブジェクトにアクセスすることで簡単に修正できます。
実際の例
UserJSをOperaの拡張機能に変換するのがいかに簡単かを示すために、数分で拡張機能の開発者に変わる例を示します。 ストップウォッチを開始します！
ステップ1：UserJSを選択する
この例では、以前のOperaインターンであるMartin Rauscherが作成した現在のHTML5ビデオUserJSを使用します 。 そのスクリプトを使用すると、HTML5ビデオを全画面モードで表示できます。 言うまでもなく、使用および再公開する予定のスクリプトのライセンスを確認する必要があります。 この場合、Martinは親切に許可を与えてくれましたが、オープンソースライセンスでリリースされたスクリプトを使用することもできます。
ステップ2：ディレクトリを作成する
まず、拡張のために家が必要です。このディレクトリをVideoFullscreenと呼びましょう。 includeサブディレクトリを作成し、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>
自分と元のUserJSの作成者の両方に言及して、すべてのデータを変更することを忘れないでください。
ステップ5：拡張機能をビルドする
アセンブリの最後の手順は、アイコンとディレクトリ、config.xmlファイルを選択し、それらをzipアーカイブにパックすることです。 その後、拡張子を.oexに変更します（VideoFullscreen.zipはVideoFullscreen.oexになります）。 拡張機能は、Operaのウィンドウにドラッグアンドドロップすることでインストールの準備ができています。
ステップ6：バグの設定と編集
元のUserJSは正常に機能しますが、拡張機能が適切に機能しない場合があります。 まず第一に、エラーコンソールをチェックすることをお勧めしますが、ほとんどの場合、問題はOperaの拡張環境の構造、特に使用するオブジェクトにあります。 の場合
VideoFullscreen.js addEventListener（）メソッドは数回使用されますが、イベントをバインドするオブジェクトを指定しないでください。 UserJS環境は、イベントがウィンドウオブジェクトにアタッチされることを前提としていますが、これは本当ですが、Operaの拡張機能の環境はやや複雑なので、以下に示すように、ウィンドウオブジェクトを明示的に指定する必要があります：
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);
効果的なJavaScriptの記述に関する詳細な記事があります 。これは、拡張機能だけでなくWebページやWebアプリケーションのパフォーマンスを向上させるために読むことをお勧めします。
ステップ7：無料
そのため、拡張機能を変換、テスト、改善しました。 これで、表示する準備ができました。 これを行うには、 addons.labs.opera.comにアップロードします 。 この例で説明されている拡張機能はすでにそこにありますが、このリンク（ VideoFullscreen Opera拡張機能）からダウンロードできます。 それをインストールした後、例えば、 ブルース・ローソンのこの教育ビデオで 、HTML5ビデオを含むページを見つけることによってそれを試すことができます。 再生を開始し、F11を押します。 次の記事では、ブルース・ローソンを全画面モードで表示することのトラウマに対処しますが、今のところ、拡張機能が変換され、ゼロから書き込まれるのを待っています。
All Articles