Opera Widgets の作り方 : シンプルな Widget を作ってみる
Opera9 最大のウリのひとつである Opera Widgets ですが、作り方がだいたいわかりました。というか、基本的な作成方法自体はすぐにわかったのですが、細かい挙動を確認するのに時間がかかってしまいました。実際の手順はとても簡単で、誰でも手軽に始められます。
世の中には Yahoo! Widgets や Dashboard など、いくつかの Widget Engine がありますが、Opera Widgets で Widget を作成する最大の利点はマルチプラットフォーム性でしょう。Opera Widgets で作成した Widget は、Windows, Linux, Mac OS X など、Opera がサポートしているプラットフォームならどれでも同じように動作します。これはけっこう画期的なのではないでしょうか。
なお、この記事の内容は Opera9 Technology Preview 2 を前提に書かれています。正式リリース版とは若干の相違があるかもしれませんので、ご了承ください。
とにかく作ってみる
前置きはこれくらいにして、とにかく Opera Widget を作ってみましょう。適当なディレクトリに以下の内容で "config.xml" と "index.html" の 2 つのファイルを作成してください。
config.xml
<?xml version="1.0" encoding="utf-8"?> <widget> <width>120</width> <height>50</height> </widget>
index.html
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body style="background-color: #ffff88;"> <p style="font-weight: bold;">Hello World!</p> </body> </html>
内容は説明するまでもないですよね？ "config.xml" の詳細については、後々の回で触れたいと思います。ファイルを作成したら、"config.xml" を Opera9 のウインドウにドラッグ＆ドロップしてください。下のような Widget(?) が表示されるはずです。
ドラッグで移動できますし、右クリックのコンテキストメニューもきちんと動作します。たったこれだけで基本的な Widget の挙動がすべて実装されるのです。
もうおわかりでしょうが、Opera Widgets の正体は単なる HTML ページです。ただ単に、指定された HTML ページを独立したウインドウとして表示しているだけなのです。ということは、HTML ページを作れる知識さえあれば、誰にでも Opera Widgets が作れるということです！もちろん凝ったことをするには高度な JavaScript の知識などが必要ですが、そのあたりは自分のできる範囲で考えれば良いと思います。特別なツールはなにも必要ありません。いますぐ Widget の開発を始めましょう！！（＾＾）
※上記の "config.xml" はウィジェットが動作する最低限の情報しか記述していません。実際にウィジェットを配布する際には、もっと詳細な記述が必要です。
Web ページとの違い
Opera Widgets は単なる HTML ページだと書きましたが、さすがに通常の HTML ページとまったく同じではできることに限りがあります。そこで、Widget として表示する HTML ページでは若干の挙動変更や機能拡張が行われています。主な相違点は以下のとおりです。
- リンクとフォーム以外の領域は、デフォルトでウインドウ移動のためのドラッグ領域となります。 ただし、onClick イベントを記述することで挙動を変更できます。
- テキスト入力フォーム以外での右クリックは常にデフォルトのコンテキストメニューが表示されます。現在のところ、この挙動を変更する方法は存在しないようです（たぶん）。
- Widget の背景はデフォルトで透明です。そのため、body 要素の背景に透過 PNG などを設定すれば、半透明ウインドウが簡単に実現できます。ちなみに、完全透明の部分は Click through になるようです。
- Widget は複数の HTML ファイルに分けることはできません。Widget 内に設置されたリンクをクリックすると、メインのブラウザウインドウでリンク先が開きます。ただし、画像や CSS、JavaScript を別ファイルから読むことは可能です。
- 同一ドメインにしかアクセスできないという XMLHttpRequest の制限が緩和されています。リクエストかけ放題です（＾＾；
- Cookie に似た専用の記憶領域が利用できます。期限切れがなく、容量制限も緩和されているようです。
とくに最後の 2 点は重要ですね。これにより、通常の Web ページでは実現できない機能が実現できます。あとは JavaScript の腕次第というところですか。私も勉強しなきゃ・・・（＾＾ヾ
さて、今回はまず Widget 開発の簡単さを理解していただきたかったので、最もシンプルなメッセージを表示するだけの Widget を作ってみました。明日は、もう少しまともな Widget を作って、前述の Widget 専用記憶領域の使い方もご紹介したいと思います。お楽しみに！
詳しくはこちらの記事をどうぞ！
この記事にコメントする