2010/08/21 soltiox 新規作成
2010/08/22 soltiox 実行例画像と、閉じるボタンについての注意喚起を追加
端的に言えば、javascript で動作する小さなプログラムだ。
opera 社自身の言を借りると
「小っちゃなウェブページ」とも説明される。
ウィジェットを作るのは、「プログラムを書く」というよりも、
「ウェブサイトを作る」って事に近い側面があるんだな。
見かけ上、ブラウザから独立して、実行させる事が出来る。
もちろん、見えて無くても、ブラウザの上で動作してる
ってコトには変わりは無いので、ウィジェットを走らせるなら、
opera のインストールは必須だ。
まず最初に、現在のウェブで使われる、
４つの概念を把握しなきゃいけない。
javascript は、ある意味当然だね。
いろんなサイトで、独学できるけど、
１冊ぐらいは、リファレンスとして使える本があると便利だ。
どの本がいいかは、ウェブや友達から評判を聞いたり、
自分で手に取ったりして調べて欲しい。
綺麗なキャプチャ画像やイラスト、色付ソースコードとかに
目が奪われがちだけど、案外、地味な本に良書があったりするぞ。
古本屋で調達するのも一手だけど、
あんまり古い本は、役に立たないかもしれない。
DOM とかについて、ある程度記述されている本を選んだ方が、吉。
css は、ある意味 html の一分野なんだけど、
ちょっぴり毛色が違うから、独立して捉えた方が良いと思う。
これも、ウェブに情報が満ち溢れてるけど、本が一冊欲しいところだ。
やっぱり、評判を集めて、自分の目で合いそうな本を探して欲しい。
css についての本は、次の html との併せになっててもいいと思うよ。
で、こっちは、ある程度古い本でもなんとかなる。
技術として、かなり枯れてる話だからね。
実は、新しい話題も結構あるんだけど、
そういうのはウェブで追っかけた方が良いっぽい。
本に載った頃には、もう次の話題が出てたりするし。
html は、割と基本的な事が分かってればなんとかなる。
ユーザインタフェイスを担う都合上、フォームの理解が欲しい。
ウェブや本で、学んでちょ。
xml は、ぶっちゃけ一番どうでもいい。
ていうか、後で出てくる "config.xml" が編集できればそれでいい。
それでも、「xml ってどんなモノなのか」とか「どういう風なコードか」
みたいなイメージぐらいは、持っておいても損はしない。
IBM デベロッパーズフォーラムや codezine といったサイトの、
xml に関するエントリなんかが参考になると思う。
ウィジェットを作ってみたい、ぐらいの話だったら、
本までは要らないんじゃないかな。
うれしはずかし、サンプルコード である。
お題は、キッチンタイマー的な時間計測アプリ。
ウィジェットでも他の処理系でも、プログラムを書くとなったら
「ひゃっほ〜い！」とか奇声を発しながら、
エディタに向かう早漏野郎が多いが、そんなヤツは嫌われる（誰に？）。
まずは手順を踏んで、仕様書あたりから掛かるのが、粋というものだ。
別に仕様書つぅても、きっちりかっちりとワープロで A4 三十頁の、
誰も読まない紙の束を作れ、ってな話じゃない。
自分が何を作ろうとしているのか、実現したい要件は何か、
みたいなコトの再確認をしたいワケな。
図１：ウィジェット作成に用いる仕様書の実例
この場合、ボタンを「開始」と「停止」だけに絞り、操作は単純にしたい。
時間を大きく表示し、操作時の視認性、キャプチャ時の解読性を確保したい。
みたいな「キモチ」が、読む人に伝われば良いワケだ。
（必要だったら、上のような文章も、仕様書の中に盛り込むワケ）
まずは、どっかにディレクトリを作る。
真面目にやるなら、さらにサブディレクトリを作る。
css用とか、javascript用とか、画像用とかね。
ついでに、ファイルはきっちり分割するべき。
html ファイルの中に、javascript のソースや、
スタイルシートの記述なんかを、一緒くたにしない方がいい。
何故か？
どんなしょぼいプログラムでも、後々引っ張り出して書き換えて使う
ってコトが、実際にあり得るワケ。
そんな場合に、全部入りのファイルは、読むのにも、訂正するのにも、
手間と時間が、余計にかかりがち。
「バラバラな方が分かりにくいじゃん」って思うかも、だけど、
プログラムの規模が大きくなってくると、
ファイルを小分けにする方が、絶対に分かりやすくなるから。
でも、ここでは、html と javascript は同居させちゃうし、
サブディレクトリは作らないし、と、行儀の悪い書き方をする。
だって、面倒くさいんだもん。
一等最初に、config.xml というファイルを作る。
要は、普通のテキストファイルなんだけどね。
日本語使う場合は、文字コードを UTF-8 にしなきゃダメ。
よく分かんない人は、漢字やひらがななんかを使わずに、
全部、半角英数字で記入しよう。
より実際に近い感じにしたら、こんなの。
リスト２：config.xml の実例に近いものまず、メアドがなければ、好きなメールサービスで垢とればいい。
「えぇっ、サイトなんか持ってないっすよ！！」
なヒトは、my opera のアカウント取って、
"http://my.opera.com/YOURNAME/blog/" とでもすればいいと思うよ。
「organization（所属とか会社）なんて晒せないよ」
てなヒトは、自分のハンドルでも入れとけば？
「このハンドルネームは、実は一人サークルだったんだよ！」
みたいなノリで。
「"width" と "height" が分かんないや」って場合は、
とりあえず、今使ってるディスプレイの、
解像度のタテヨコ三分の一ぐらいの数字を入れてしまえ。
どうせ、あとから調整するんだから。
当然「こんくらいのサイズで」という目算がある場合は、
その数字を入れといてね。
今度は、index.html というファイルを作る。
ま、普通の html ファイルだね。
javascript のソースコードは、独立した .js ファイルに置く方が
かなり激しく望ましいんだけれど、不精して同居させちゃう。
4 行目のキャラクタセット指定の"utf-8"に注目。
当然、このファイル自体も、utf で保存されてなきゃいけない。
「何のことやら分かんないや」なヒトは、
全部の文字を半角英数字で書くこと。
タイトルやメタ要素、ボタンの表示文字("value")なんかも、
英語かローマ字で書いてね。
54 行目のボタンは、"閉じる"ボタン。
もう、1 バイトでも小さく作りたいという欲求があったので、
画像なんか使わずに、"閉じる"ボタンも、文字で描いちゃう。
実は閉じるボタンは、作るのサボってもオペラがちゃんと表示してくれる。
図２：サンプルのウィジェットを実行した様子
図３：マウスオーバした時
でも、モバイルツールなんかで動作させた場合とか、
常に操作しやすい状態で、こういうボタンが表示できるのか、
今一つ心もとないので、閉じるボタンだけは、
自前で作りこんでおくようにしたい。
ついでに、言い訳とか、いろいろ。
f_start() と f_stop() を input 要素の中で指定していないのは、
返値を持ち帰るようにしたかったため。
でも、せっかく持ち帰った返値を、
結局大域変数 dv で dspmsg() に渡しているのは、
setInterval を介して、上手いことパラメータを渡せなかったから。
変数名を文字列から外したりしたけど、
dspmsg() には、初期値しか渡すことが出来なかったの。
最後に、timer.css というファイルを作る。
このファイル名は、html ファイルの 6 行目の
スタイルシート指定で決まる。
ファイル名を変えるなら、そこンところを同期させとくこと。
オペラに index.html を喰わせて、動作の確認をしまくる。
それは、もう、てってーてきに。
このサンプルはアレだけど、より複雑なインターフェイスを備えた
ウィジェットの場合は、かなりの気合が必要だ。
プログラムが取りうるモードと、ボタンなどのインターフェイスで、
マトリックスを作り、どんな状況で、どのボタンを操作したら、
どうなるべきか、そして、実際にはどうなるか、を逐一確認するといい。
無論、各種ソースの訂正が必要だったら、すかさず修正していく。
画面上のサイズを測るツールを使って、画面サイズを確認する。
必要なら、config.xml の width や height を修正しておく。
当然、スタイルシートや html での調整が必要かもしれない。
動作に納得が出来たら、今まで作業してきたディレクトリの
一つ上のディレクトリに上がる。
作業ディレクトリをまるごと zip に固め、拡張子を"wgt" に変更する。
図５：作業ディレクトリを圧縮する
図６：圧縮ファイルの拡張子を wgt に変える
この .wgt ファイルをダブルクリックすると、使用中のコンピュータに、
たった今作成したウィジェットが、インストールされる。
図７：インストールダイアログ
インストール直後に表示されるダイアログから、
ウィジェットを起動することが出来るので、実行させる。
図８：起動ダイアログ
表示や動作を再度確認し、必要ならソースコードを修正する。
そして「圧縮→拡張子変更→インストール」を繰り返す。
全てに納得が出来たら完成だ。ごくろうさま。
図９：インストール完了でスタートメニューに登録される（windows XP での例）
