2011/06/23 (木)
Whac Dial という Opera Speed Dial Extension を作りました
Whac Dial は Speed Dial Extensions として動作する Opera の Extension です。現在(2011/06/24)はまだベータ版の Opera 11.50 以降で動作します。
--
--
ソースコードは github においています。
https://github.com/miya2000/whac-dial
https://github.com/miya2000/whac-dial/wiki
いい加減な英語なので、添削してもらえるとうれしいです...
Speed Dial Extensions って？
Speed Dial Extensions と言うのは Opera 11.50 からの新機能です。
これまでスピードダイヤルはページのスクリーンショット(静止画)を表示するだけでしたが、これを拡張することができるようになりました。
すでにOpera Speed Dial Extensions で JSNES がうごいたよーでも紹介しているように、表示をアニメーションすることが出来ます。
最近のブログパーツによくある、Twitter のタイムラインをつらつらアニメーションさせて表示したり、デジタルフォトフレームみたいな使い方が出来そうですね。
どういう風に作るかというと、実は通常の Opera Extension と全く同じで、スピードダイヤルにはバックグラウンドページをそのまま表示する形で実装されています。
Whac Dial について
インストール方法や使い方はgithub に書いた紹介ページを参照していただくことにして、Whac Dial の概要とコンセプトについてお話します。
Whac Dial はもう見たまんま、パックマンのゴーストがモグラ役のもぐら叩きです。
ただ、ゲームだけだとスピードダイヤルにする意味が薄いので、タイトルやクリックしたときのジャンプ先を自由に変えることが出来るようにしています。
さて、Whac Dial の作成において、以下のような意味付けを行いました。
スピードダイヤル拡張でインタラクティブなことが出来るかどうかの実験
スピードダイヤル画面から拡張に対してイベントを送ることは出来ませんから、これはもうはっきり言って出来ません。
クリックするとページに飛んじゃいますし、どの部分をクリックされたかもわかりませんから、マインスイーパとか無理。
で、それでも何かできないかなーということで、「スピードダイヤルで開いたページから最速でメッセージを返せば、スピードダイヤルのクリックを検知できそうだ」というのを思いつきました。
(Whac Dial v1.1 と Build 1073 では Opera の仕様変更のために検知できていません。Whac Dial v1.2 は現在申請中です。)
--
2011/06/28 v1.3 がダウンロードできるようになりました。
--
おそらくこれ以上のことは現状出来ないと思います。
スピードダイヤルをクリックする価値の創出
そもそもスピードダイヤルはリンク先のページに飛ぶためのものなので、あんな小さな窓に情報を詰め込むような拡張を作るより、クリックしたくなるような仕掛けを作りたいと思いました。
そいうわけで「特定のタイミングでクリックするといいことがある」ものとして、もぐらたたきをやってみようということになりました。
HTML5 機能を使ったリファレンス実装
僕はまだ Opera 10.10 を使っているのですが、Extension がブラウザと Cookie を共有するようになったこともあり、そろそろ移行したいなと思っています。
で、最新の Opera で出来ることををふんだんに取り入れてみました。
- CSS3
角丸・グラデーション・アニメーション・トランスフォーム・段組など。 - SVG
なめらかなアニメーションや JavaScript による制御。画面の大きさにあわせてスケーラブルになるようにしたり。 - MessageChannel による通信
SVGと通信してます。 - data-* アトリビュートや placeholder などの HTML5 新要素・新属性
特に SVG については、いい感触を持ちました。
SVG は Inkscape を使って（単純な絵とはいえ）簡単に書くことが出来ました（アニメーションの部分は Inkscape は対応していないので全て手書きですが）。
HTML5 といえば Canvas が推されているように見えますが、スケーラブルという点で非常に強力な選択肢の一つだと思います。
あと、とてもシンプルな xeyes を実装していて、拡大・縮小によって変換された座標と実際の座標(マウスの位置)との座標変換のサンプルになると思います。
extra url について
設定画面で「extra url」というのがあって、これに url を入力することで任意のページを Whac Dial の変わりにスピードダイヤルに表示することが出来ます。
これを使えば前に僕が作った Opera Image Dial Generator と同じこと（スピードダイヤルを好きな画像に差し替える）ができます。
ただ、それと違うのは最初に言ったようにアニメーションが出来ること。つまりはですね、紹介ページにも書いてますが、Whac Dial の gohst.svg をいじってここに設定すれば、自分の好きなキャラクターでもぐらたたきができちゃうんです！ (もぐらたたきじゃなくてもいいけど)
何か作ったら教えていただけるとうれしいです。
あとがき
パックマンのキャラクターにしたのは、頭の中のイメージと合致したのと、なんといっても書きやすかったから。
キャラクターの使用については許可をとっていません。仮に申請しても現状は個人に対しては許諾しないとのことです。
法律で認められている場合を除き、弊社の許可なく下記に掲げます行為をなすことはできませんのでご注意ください。
なお、弊社は現状個人様に対する許諾を行っておりません（ホームページへの転載や掲載物を利用して新たな作品を作ることなども含みます）。
http://www.bandainamcogames.co.jp/info/
そういうわけで、「HTML5 でゲームを作成するための引用」という方向で行きたいと思います。
もちろん問題があればキャラクターの差し替えをしますので、その場合はご連絡ください。
それから Speed Dial Extensions のコンテストのTeam Upコンテストの締め切りに間に合うように作ったのだけど、コメントでやり取りしたわけじゃないし、参加表明をしたわけでもないし、審査対象になるのですかね？
（実はけっこう自信があったのだけど、まだレートが1人からしかもらえてない...）