エントリー
2007年、スピードダイヤルを世界に紹介しました 。 今日、ほとんどすべての主要なブラウザでこの人気のある概念の実装を見つけることができます。 しかし、私たちがどれほど誇りに思っていても、私たちの発案者が成長し、新しい能力を学ぶのを助けなければ、どんな種類の親になるでしょうか？ Opera 11.10のリリースでは 、スピードダイヤルの外観とUXを改善し、 開発者がスピードダイヤルセルでサイトの外観を制御する機能を追加しました。 Opera 11.50では、 Speed Dialの拡張機能をさらに一歩進めました。
Operaの拡張機能を使用してブラウザの機能を拡張できるように、Speed Dialの機能をカスタマイズおよび拡張してさらに便利にすることができます。 アイコンの表示やページのスクリーンショットに限定される代わりに、Speed Dialはライブコンテンツを表示できるようになりました。この記事では、その方法を説明します。
注：この例を試すには、 Opera 11.50とSpeed Dialの拡張例が必要です。SpeedDialの 時計をダウンロードしてください 。
基本
Operaの通常の拡張機能との互換性を維持するために、Speed Dialの拡張機能は同じ形式と構造を使用しますが、いくつかの追加があります。 言い換えると、 config.xmlファイルのコードに次の小さな追加を加えると、既存のOpera拡張機能がSpeed Dialの拡張機能に変わる可能性があります。
- name属性とopera：speeddial値を持つ<feature>要素で、内線番号を短縮ダイヤルの内線番号に変換します。
- 値が最小化された<widget>タグのviewmodes属性は、スピードダイヤルセルの背景ページを表示します。
現時点では、拡張機能はスピードダイヤルとブラウザツールバーを同時に使用できないことに注意してください。 言い換えれば、ブラウザパネル上のボタンを持つ拡張機能は、同時に現在の実装のスピードダイヤルの拡張機能になることはできません。
config.xmlファイルでスピードダイヤルの拡張子を説明します
理論を実践し、段階的にテスト拡張機能を作成しましょう。 次のコードスニペットを表示するには、スピードダイヤルの拡張機能-クロックをダウンロードし、パッケージ内のソースコードを確認します。 図1は、拡張機能が最終的にどのようになるかを示しています。
図1 ：Operaブラウザのスピードダイヤルにインストールされた拡張機能「時計」。
通常の短縮ダイヤルセルにはWebページのスクリーンショットが表示されますが、短縮ダイヤル拡張機能には拡張機能の開始（または背景）ページが表示されます。これはデフォルトのindex.htmlファイルです。 これを有効にするには、まず、config.xmlファイルの<widget>タグに値を最小化した viewmodes属性を追加する必要があります。
<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" viewmodes="minimized">
この属性は、最小化された方法で背景拡張ページを表示するようブラウザに指示します。 100％ズームでのスピードダイヤルセルのサイズは256x160ピクセルです。 さらに、 必要な属性とparam要素を持つ機能要素を追加する必要があります。
<feature name="opera:speeddial" required="false"> <param name="url" value="http://en.wikipedia.org/wiki/Time"/> </feature>
機能要素の必須属性は、拡張機能を実行するための短縮ダイヤルの必要性を示しています。 たとえば、Operaの拡張機能と互換性があるが、スピードダイヤルをサポートしない他のブラウザが存在する場合があります。 このような状況で拡張機能が機能する場合は、 falseを使用します 。 拡張機能がスピードダイヤルなしでは機能しない場合は、 trueを選択します 。
param要素は必須であり、スピードダイヤルのアイコンをクリックすると開くページを指します。
拡張機能の完全なconfig.xmlファイルコードを次に示します。
<?xml version="1.0" encoding="utf-8"?> <widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" defaultlocale="en" viewmodes="minimized"> <name short="Simple Clock">Clock Speed Dial Extension</name> <description>This is an example Speed Dial extension showing a simple clock.</description> <author href="http://people.opera.com/danield/">Daniel Davis</author> <icon src="images/icon_64.png"/> <!-- Icon source: http://www.openclipart.org/detail/17552 --> <feature name="opera:speeddial" required="false"> <param name="url" value="http://en.wikipedia.org/wiki/Time"/> </feature> </widget>
拡張機能にコンテンツを追加する
次のステップは、Speed Dialウィンドウに表示する興味深いものを作成することです。 これはバックグラウンド拡張ページなので、 config.xmlファイルと同じディレクトリにindex.htmlファイルを作成する必要があります。 たとえば、JavaScriptで秒までの時間を表示する簡単なデジタル時計を作成します。 最初に、空の出力要素を持つベースindex.htmlファイルを作成します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Clock Speed Dial Extension</title> </head> <body> <output></output> <script src="scripts/background.js"></script> </body> </html>
次に、 index.htmlで参照するbackground.jsファイルを使用してスクリプトディレクトリを作成します。 jsファイルは次のようになります。
window.addEventListener('load', function() { // Simple function to prefix a zero if the value passed is less than 10 function formatTime(time) { return (time < 10) ? '0' + time : time; } var output = document.querySelector('output'); var date, hours, mins, secs; // Get and display the current time every 500 milliseconds var timer = window.setInterval(function() { date = new Date(); hours = date.getHours(); mins = date.getMinutes(); secs = date.getSeconds(); output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs); }, 500); // Twice a second to allow for slight delays in JavaScript execution }, false);
プラグ可能な css（ style.css ）もシンプルですが、トリッキーなトリックが含まれています。
* { margin: 0; padding: 0; } html { height: 100%; } /* Use display:table and display:table-cell so that we can use vertical-align:middle */ body { background: #444; color: #fff; display: table; height: 100%; width: 100%; } output { display: table-cell; font-family: monospace; font-size: 10em; text-align: center; text-shadow: 0 0.1em 0.1em #000; vertical-align: middle; } /* Styles here are only applied in a "minimized" state */ @media screen and (view-mode: minimized) { output { font-size: 1.8em; } }
ご覧のとおり、CSS3リクエストはファイルの最後で使用され、 view-mode：最小化条件がview-mode Media Feature仕様に準拠しているかどうかを確認します 。 つまり、このセクションのスタイルは、スピードダイヤルセルのように、ページが最小化された状態で表示される場合にのみ適用されます。 これは、複数のデザインを使用せずに状況によってスタイルをオーバーライドする便利な方法です。
拡張の完了
通常どおり、作業を拡張機能としてパックするには、ルートディレクトリ内のすべてのファイル（ディレクトリ自体ではありません）を圧縮し 、アーカイブ拡張機能をzipからoexに変更する必要があります。 まだ行っていない場合は、 拡張機能clock_SD_extension.oexをダウンロードして試してください。
SpeedDialContext API
インストール後、拡張機能はSpeedDialContext APIを介してその短縮ダイヤルセルを動的に制御できます。 これは、 titleとurl という 2つの書き込み可能なプロパティを持つ非常にシンプルなAPIです。 これらはopera.contexts.speeddialオブジェクトを介してバックグラウンドスクリプトで使用できます。たとえば、次のようになります。
if (opera.contexts.speeddial) { var sd = opera.contexts.speeddial; sd.title = "My title"; sd.url = "mypage.html"; }
この機会を利用して、たとえば、時刻に応じてわかりやすいメッセージを表示するなど、拡張機能を改善できます。 編集する必要がある唯一のファイルはbackground.jsです：
window.addEventListener('load', function() { // Simple function to prefix a zero if the value passed is less than 10 function formatTime(time) { return (time < 10) ? '0' + time : time; } var output = document.querySelector('output'); var date, hours, mins, secs, tmp_hours, timeofday; var messages = { "morning": "Good morning!", "afternoon": "Good afternoon!", "evening": "Good evening!", "night": "Shouldn't you be in bed?" }; // Get and display the current time every 500 milliseconds var timer = window.setInterval(function() { date = new Date(); hours = date.getHours(); mins = date.getMinutes(); secs = date.getSeconds(); output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs); // Make the Speed Dial title display time-related message if (hours !== tmp_hours) { if (hours > 15) { timeofday = 'evening'; } else if (hours > 11) { timeofday = 'afternoon'; } else if (hours > 3) { timeofday = 'morning'; } else { timeofday = 'night'; } if (opera.contexts.speeddial) { opera.contexts.speeddial.title = messages[timeofday]; } tmp_hours = hours; } }, 500); // Twice a second to allow for slight delays in JavaScript execution }, false);
これは最初の例と同じファイルですが、いくつかの追加があります。 すなわち：
- messagesオブジェクトには、1日のさまざまな時間のメッセージが含まれます。
- 時間の変更時にコードを実行する繰り返しチェック。
- スピードダイヤルヘッダー内のメッセージオブジェクトからの対応するメッセージを表示する行。
拡張機能は、 friendly_clock_SD_extension.oexからダウンロードできます。 インストール後、次のようになります。
図2 ：Operaブラウザのスピードダイヤルにインストールされているフレンドリーな拡張機能「時計」。
おわりに
ご覧のとおり、開発者は拡張機能を改善する追加の方法を手に入れました。 上記の例は単純ですが、スマートアイデアとWeb開発スキルと組み合わせると、Speed Dialの拡張機能の可能性を示しています。 サイトへの美しいリンクだけでなく、より興味深い拡張機能が見られることを期待しています。Opera の拡張リポジトリでこのAPIを創造的に使用するのを待っています！
参照資料
Opera用拡張機能API：スピードダイヤルガイド