伸び縮みするWidgetを作り始めてみる。

Dashboard Flavision

伸び縮みwidget0.1

登録したFlashをテレビのように表示するWidgetを作ってみようと思い立ちました。で、大きさ固定で良いのなら以前紹介したNHK Clockの裏面に任意のURLを入れれば実はOKだったりします。試しにhttp://yawaraka.tv/yawaraka_img/7c2b96541747b374.swfを表示させてみましたが、縦横比がちょっと違うのと、クリックの反応が悪いという問題はあるけれど、ちゃんと再生されました。音も出る。
そういうわけなので、画面サイズを変えられるFlashプレイヤーWidgetを作ってみようという企画です。NHKの時計を指定すれば大きさ可変のNHK Clockになります。
というWidget。とりあえず名前はFlavisionとしておきます。ちょっと舌触り悪いけど気にしない。


さて、WidgetのリサイズについてはADCのドキュメントにそのものズバリのタイトルのものがあります。
http://developer.apple.com/jp/documentation/AppleApplications/Conceptual/Dashboard_Tutorial/Resizing/chapter_8_section_1.html
しかし、あらかじめ作ったものをコピペで上手く動作させようとするといろいろと面倒なのが判明したので、/Developer/Examples/Dashboard/Gridを改造した方が手っ取り早いと判断。GridをコピーしてWidgetの名前とかInfo.plistを編集して、そこからスタートです。


しかし、GridはWidget全体が一枚の画像を表示する構成になっています。枠のあるものを同様の手法によってリサイズしても、枠のあたりが綺麗に処理できないでしょう。そこで、とりあえず枠と中身を分離することにしました。
※20061020追記:もしかしたらWebKitのCSS3対応を使えば、こんな糞面倒なことはしなくても良いかも？あとで調べる。
widgetに3x3のテーブル(table#maintable)を用意します。それぞれのtdに以下のようにidをつける。

(lt)(ct)(rt)
(lc)(cc)(rc)
(lb)(cb)(rb)

idは(left|center|right)(top|center|bottom)の略です。
td#mc以外は枠を表示する部分になります。それぞれの枠の高さと幅を固定します。この時、ccはリサイズに応じて縦横の大きさが変わるわけですが、高さが変化すればlc,rcの高さが、幅が変化すればct,cbの幅が変化して、枠がうにょにょにょっと伸び縮みすることになります。
そういうわけで。lt,ct,rtおよびlb,cb,rbの高さと、lt,lc,lbおよびrt,rc,rbの幅をCSSで固定しておきます。
ついでにtable#maintableの大きさなんかも設定しておきます。

#maintable {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
#maintable td { /*テスト用に、各tdを表示させる。*/
	border: red dashed 1px;
}
/*枠の高さの固定 --背景画像の高さに揃える*/
#lt, #ct, #rt {
	height: 15px;
}
#lb, #cb, #rb {
	height: 24px;
}
/*枠の横幅の固定 --背景画像の幅に揃える*/
#lt, #lm, #lb {
	width: 21px;
}
#rt, #rm, #rb {
	width: 21px;
}

ここで設定する数字は、枠の画像を作ったときの大きさに揃えることになるでしょう。今は適当な数字でOK。
ついでにtd#ccの中にdiv#contentという要素を作っておきます。伸び縮みする中身はこのdiv#contentの中に入れることにします。そいでCSSも設定。

#content {
	background-color: rgba(200,255,200,0.4); /*テスト用に、色を付けておく。*/
	width: 100%;
	height: 100%;
}

と。まずはこんなところで。邪魔なのでGrid.htmlにあった<img src="Images/grid.png">は消しておきました。まだ枠に画像を設定してないけどそれはまた後で。枠画像はWidgetごとに違うものになるだろうから、ここまでを「伸び縮みWidgetテンプレ」として保存しておいても良いかも。

一応注意事項

あ、今更ですけど、これは自分用の作業日記なので、ここで書いたコードの通りにするのが正解かどうかは分かりません。っていうか後で修正することになるだろうね。
それと、こうやって動的にサイズを変更させる必要がないWidgetでは、サイズを変更させない必要がある、と考えた方が良いと思います。コードや設定ファイルが複雑になるのでバグやエラーが紛れやすくなる。その意味では、スレで要望が出ているけど、NHK Clockでリサイズの必要があるかどうかはちょっと疑問。Flavisionもライブリサイズさせる方向で作ってるけど、これが正しいのかどうか。

ライブリサイズとは、ウィジェットのサイズと内容をユーザの好みに合わせて変更できることを意味します。ライブリサイズは、絶対に必要という場合に限って使うようにしてください。ウィジェットの内容を固定の単純なユーザインタフェースに表示できるのであれば、そうしてください。
http://developer.apple.com/jp/documentation/AppleApplications/Conceptual/Dashboard_Tutorial/Resizing/chapter_8_section_3.html