Opera Widgets の作り方 : 簡易メモを作ってみる
前回の "Hello World" は Widget といってもあまりにシンプルすぎて、実用的な Widget を作る際にはあまり参考にならないものでした。そこで今回は簡単な メモ Widget を作成し、実際の Widget の動作をご紹介しようと思います。
見た目はともかくとして（＾＾；）、通常の Widget 同様に右下のリンクをクリックすると設定モードに移り、表示するメッセージを変更できます。このメッセージは専用の記憶領域に保存され、次回起動時にも再現されます。
ソースファイル
それでは前回同様に"config.xml" と "index.html" を作成しましょう。以下が全ソースです。
config.xml
<?xml version="1.0" encoding="utf-8"?> <widget> <width>320</width> <height>240</height> </widget>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tiny Memo</title>
<script type="text/javascript" language="JavaScript">
function initialize()
{
document.getElementById('normal_text').innerHTML = widget.preferenceForKey("user_text");
document.getElementById('config_text').value = widget.preferenceForKey("user_text");
}
function save()
{
widget.setPreferenceForKey(document.getElementById('config_text').value, "user_text");
}
function begin_edit()
{
initialize()
document.getElementById('normal').style.display="none";
document.getElementById('config').style.display="block";
}
function end_edit()
{
save();
initialize()
document.getElementById('normal').style.display="block";
document.getElementById('config').style.display="none";
}
</script>
</head>
<body style="background-color: #666666;" onLoad="initialize();">
<div id="title" style="color: white; margin-bottom: 4px;">Tiny Memo</div>
<div id="normal">
<pre id="normal_text" style="width: 100%; height: 180px; background-color: #cccccc; margin: 0px;"></pre>
<div style="text-align: right; margin-top: 4px;"><a href="javascript:begin_edit();">Edit</a></div>
</div>
<div id="config" style="display: none;">
<textarea id="config_text" type="text" style="width: 100%; height: 180px;"></textarea>
<div style="text-align: right; margin-top: 4px;"><a href="javascript:end_edit();">Finish</a></div>
</div>
</body>
</html>
"config.xml" は前回とほとんど変わっていません。しかし、HTML のほうは JavaScript が入ってきてだいぶ長くなってしまいました。Widget はその動作のほとんどを JavaScript で記述しますので、JavaScript の知識は必須です。
設定モードへの遷移
前回も軽く言及しましたが、Widget はページの切り替えができません。したがって、設定モードへの切り替えはすべて JavaScript で実装する必要があります。方法はいくつかあると思いますが、通常モードと設定モードの両方を HTML に記述しておき、CSS の display プロパティーで表示を切り替えることが多いようです。
簡易メモ Widget でもそのような方法をとっています。id="normal" の div 要素で囲まれた部分が通常モードの表示内容、id="config" が設定モードの表示内容となっています。設定モードの div 要素が CSS で非表示に設定されていることがわかると思います。
<div id="config" style="display: none;">
"Edit" のリンクがクリックされると、JavaScript の begin_edit 関数が呼ばれます。その中の以下の 2 行で、id="normal" の div 要素を非表示にし、逆に id="config" のほうを表示するように設定しています。
document.getElementById('normal').style.display="none";
document.getElementById('config').style.display="block";
設定モードで "Finish" のリンクがクリックされたときは、これとは逆の処理をして通常モードの表示に戻しています。
このように、すべての画面の表示を別々の div 要素で囲み、CSS の display プロパティーを変更することで画面の遷移を実現します。このあたりは通常の HTML ページとは考え方を変えなければいけない部分ですね。しかし、このやり方は Ajax を使用したページではよく使いますので、覚えておいて損はないと思います。
Widget 専用記憶領域の利用
Widget はそれぞれが専用の記憶領域を持っており、複数の文字列を保存しておくことができます。この領域は Opera を終了させても維持されるので、設定データなどを記録しておくことができます。その記憶領域へのアクセスには、Widget 内でのみ有効な widget という JavaScript オブジェクトを使用します。データを保存するメソッドは setPreferenceForKey です。書式は以下のようになります。
widget.setPreferenceForKey(value, name);
- value
- 保存する文字列。
- name
- 保存データの名前。
name を変えることで複数の文字列を保存できます。保存したデータを読み出すためには preferenceForKey メソッドを使います。書式は以下です。
widget.preferenceForKey(name);
- name
- 読み出すデータの名前。
以前に name を第 2 引数に指定して setPreferenceForKey で文字列を保存していれば、そのときに第 1 引数に指定した文字列が返ります。もし保存していなければ、空文字列が返ります。
今回は、これらの機能を使って表示する文字列を保存しています。ためしに設定モードにして文字列を入力し、右下の「Finish」のリンクをクリックして通常モードに移ってから F5 でリロードしてみてください。ページを読み替えても入力した文字列が保存されているはずです。文字列を保存しているのは save 関数、読み出しているのが initialize 関数です。単純に上記のメソッドを利用しているだけですが、ご参考までに。
画像などの利用に関して
今回の Widget は説明の都合上、画像は一切使用せず、CSS や JavaScript などもすべて HTML ファイルに含めてしまっています。しかし、必要ならそれらを別のファイルから読み込むことができます（というか、分離することが推奨されています）。そのためには、それらのファイルを同じディレクトリに配置し、相対パスで指定してやれば OK です。詳細は次回にご説明しますが、こうしておけば Widget と一緒にそれらのデータを配布することができます。
例えば、"image.jpg" という画像を表示するなら、その画像を "config.xml" や "index.html" と同じ場所に置き、以下のような HTML を記述します。
<img href="image.jpg">
とくに今回の簡易メモでは設定モードへの移行をテキストのリンクで賄っていますが、本来は Widget が共通で使っている矢印のアイコンを使用することが推奨されています。実際に配布する Widget には、私のような手抜きはしないようにしてください。（＾＾；
デバッグメッセージの出力
Opera Widget 内では、JavaScript の alert 関数を呼び出すことができません（呼び出すと Widget が終了してしまうようです）。Widget がダイアログを表示するのは好ましくない、ということかもしれません。その代わり、デバッグ表示用に opera.postError というメソッドが用意されています（今回の Widget では使っていませんが）。書式は次のとおりです。
opera.postError(<文字列>);
このメソッドが呼び出されると、引数に指定した文字列が Error console に出力されます。Error console を開くには、メインメニューの [Tools]-[Advanced]-[Error console] を選択してください。
今回は、簡易メモ Widget で Widget の動作の仕組みをご紹介しました。あとはこれの応用で、ほとんどの Widget が作れてしまうはずです。JavaScript の腕次第といったところでしょうか。また、Opera Widget の基礎技術は Ajax そのものなので、Opera Widget の作成スキルを学ぶことは、そのまま Ajax のスキルを磨くことにもなります。学習の題材としても非常に面白いと思います。
次回は、"config.xml" の詳細と、Widget をパッケージングして配布する方法をご紹介しようと思います。それでは、今回はこのへんで。
詳しくはこちらの記事をどうぞ！
この記事にコメントする