”ウィジェット"はOSX10.4以降でサポートされているダッシュボード用のアプリです。
javascriptで記述されているので、ガシガシサイトを作り込みような人なら誰でも簡単に作れます。
この記事はWidgetを作ろう（その１）、（その２）の続きです。
今回は“裏返し(=Flip)”と“環境設定”を実装しましょう。
LinkXillion.wdgtに追加して、Xillion、ScriptTipsおよびそれぞれのRSSにリンクできるようにします。
どのサイトに飛ぶかは裏面での環境設定でおこないます。もちろんADCのガイドがお手本です。
出来上がりはこちら。LinkXillion.wdgt.ver1.1
ダウンロードしたらパッケージの中身を表示させてみてください。
以下説明です。
１．グラフィックを作成する
表面のDefault.pngと同じ大きさの裏面を作成します。
ブラックにグラデーションをいれてちょっとグラス調にしました。Back.pngと名付けます。
裏面から表面に戻るには普通はDoneボタンを押すことになりますが、今回はエリアが非常に小さいので、ボタンも小さくします。
アプリケーションのWindowの左上にある赤いCloseボタンみたいなものを作ります。
マウスが乗っていないときとマウスが乗って赤くなるときの画像を用意します。
kill.gifとkill_on.gifです。
表面から裏へいく場合はiボタンを押しますがこれはローカルに用意されている資源を使用しますので個別の作成は不要です。
２．HTMLを修正する
<div id="front" onmousemove='mousemove(event);' onmouseout='mouseexit(event);'>
<!-- ウィジェットの表面はこちら -->
<img src="Default.png" />
<span class="Text1" onclick="LinkXillion()">Xillion</span>
<div class='flip' id='flip' onclick='showBack(event);'
onmouseover='enterflip(event);' onmouseout='exitflip(event)';></div>
<div class='flip' id='fliprollie'></div>
</div>
<div id="back">
<!-- ウィジェットの裏面はこちら -->
<img src="Back.png" />
<select name="linkto" class="linkto" onchange="setlink(this.options[this.selectedIndex].value)">
<option value="http://www.xillion.net/" selected>Xillion
<option value="http://www.xillion.net/atom.xml" selected>XillionRSS
<option value="http://www.xillion.net/script/">Script
<option value="http://www.xillion.net/script/atom.xml">ScriptRSS
</select>
<img class="doneButton" src="kill.gif" onmouseover="this.src='kill_on.gif'"
onmouseout="this.src='kill.gif'" onclick="this.src='kill.gif';hideBack();">
</div>
</body>
Bodyタグの中身を上のように書き換えます。
"front"、"back"という２つのDIVがあります。
それぞれ表面と裏面にあたります。
ポジションはCSSに書くので、ここではオブジェクトを定義すればOKです。
”front”にある"text1"は前のバージョンと同じです。
ここを（＝表面を）クリックすればサイトへ飛んでいきます。
"flip"は裏面を表示させるためのiボタンです。
"back"にはリンク先を設定するためのselectボタンと、表面に戻るためのdoneButtonを定義します。
doneButtonまmouseover、mouseoutで画像を入れ替えていますが、onclickの際にも画像を変えています。
これはクリックして表面へ戻った後で再度裏面を表示させる時のためのものです。
３．CSSを修正する
ADCのサンプルをほぼそのまま使用しています。
前のバージョンで白かったxillionの文字をオレンジにしています。
iボタンを見やすくするためですが、実はiボタンは黒いバージョンも用意されています。
またここで"back"のdisplayをnoneに設定して見えない様にしています。
４．JSファイルの修正
{
if(window.widget)
{
widget.setPreferenceForKey(document.linkto.options(1).value,"LinkTo");
}
}
function setlink(link) {
widget.setPreferenceForKey(link,"LinkTo");
}
function LinkXillion() {
widget.openURL(widget.preferenceForKey("LinkTo"))
}
先ずはxillion固有の設定や関数です。
setup()では、setPreferenceForKeyメソッドを使用して固有の環境変数”LinkTo”にリンク先のURLをセットします。
setlink()は、ユーザーが裏面のセレクトボックスから選んだときに呼び出される関数で、固有の環境変数”LinkTo”の内容を変更します。
LinkXillion()では、上記のロジックでセットされている変数”LinkTo”の値を取得してURLにジャンプします。
環境変数の値の取得は.preferenceForKeyメソッドを使用します。
window.widgetは自身のwidgetが稼働しているときにtrue（オブジェクトあり）となるのでしょう。
あとはflip関連
{
var front = document.getElementById("front");
var back = document.getElementById("back");
if (window.widget)
widget.prepareForTransition("ToBack");
front.style.display="none";
back.style.display="block";
if (window.widget)
setTimeout ('widget.performTransition();', 0);
}
function hideBack()
{
var front = document.getElementById("front");
var back = document.getElementById("back");
if (window.widget)
widget.prepareForTransition("ToFront");
back.style.display="none";
front.style.display="block";
if (window.widget)
setTimeout ('widget.performTransition();', 0);
}
Flipの実装になります。
基本的には"front"と"back"のdisplayを変更するだけです。
ひっくり返す部分はwidgetエンジンがやってくれます。
.prepareForTransitionで準備をして（インターフェイスを凍結するそうです）、setTimeout ('widget.performTransition();', 0); でターンさせます。
オーサーがやるのはこれだけなんですね。
あとはiボタンのアニメーションの実装があります。
var animation = {duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null};
function mousemove (event)
{
if (!flipShown)
{
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}
var starttime = (new Date).getTime() - 13;
animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('flip');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 1.0;
animate();
flipShown = true;
}
}
function mouseexit (event)
{
if (flipShown)
{
// 情報ボタンをフェードイン表示する
if (animation.timer != null)
{
clearInterval (animation.timer);
animation.timer = null;
}
var starttime = (new Date).getTime() - 13;
animation.duration = 500;
animation.starttime = starttime;
animation.firstElement = document.getElementById ('flip');
animation.timer = setInterval ("animate();", 13);
animation.from = animation.now;
animation.to = 0.0;
animate();
flipShown = false;
}
}
function animate()
{
var T;
var ease;
var time = (new Date).getTime();
T = limit_3(time-animation.starttime, 0, animation.duration);
if (T >= animation.duration)
{
clearInterval (animation.timer);
animation.timer = null;
animation.now = animation.to;
}
else
{
ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
animation.now = computeNextFloat (animation.from, animation.to, ease);
}
animation.firstElement.style.opacity = animation.now;
}
function limit_3 (a, b, c)
{
return a < b ? b : (a > c ? c : a);
}
function computeNextFloat (from, to, ease)
{
return from + (to - from) * ease;
}
function enterflip(event)
{
document.getElementById('fliprollie').style.display = 'block';
}
function exitflip(event)
{
document.getElementById('fliprollie').style.display = 'none';
}
ADCのガイドのコピペです。。。
あなたのハードディスクのDeveloper:Examples:Dashboardにサンプルたくさんあるので参考にしてください。