このページの本文へ

クールな自作Widgetがサクッと完成!!

Dashcodeをはじめよう

2008年01月08日 19時02分更新

文● 柴田文彦

  • この記事をはてなブックマークに追加
  • 本文印刷

4. ウィジェット制作の応用例


このページでは、Dashcodeを使ったウィジェット作成の応用として、少し凝った例を示そう。どのテンプレートから始めても、スクリプトを追加して特別な動作を組み込んでバリエーションを出せばDashcodeで作るウィジェットの可能性は無限だ。ここでは、シンプルな応用を加えて、ウィジェットを高機能化していく。



ちょっと高機能なカウントダウンタイマー

 テンプレートとして用意されているカウントダウンタイマーの最も単純な例は、カウントダウンするイベントの日時と名前をウィジェット作成時に手動で設定し、そのイベント専用のタイマーを作るというもの。そのイベントが終われば役に立たなくなり、ユーザーが簡単に日時や名前を変更することもできない。これではやはり物足りない。

 ここでは、イベント情報をiCalから取得し、自動的に直近のイベントまでの時間をカウントダウンする機能と、ボタンをクリックすることでiCalを開く機能を追加してみよう。


指定した日時に処理を実行


(1) テンプレートを開く

Dashcode

まずは「カウントダウン」のテンプレートを選んで、プロジェクトを作成する。今回は表面の「イベントラベル」という文字列を変更する必要はない


(2) iCalのカレンダーを公開

Dashcode

iCalに登録したイベント情報と同期するために、まずはiCalを使ってカレンダーを.Macに公開しておく。「カレンダー」メニューから「公開」を選択。「カレンダーの公開名」は英数字のほうがいい


(3) 公開されたURLをコピー

Dashcode

カレンダー公開先のURLは、ウィジェットの属性として設定することになるので、表示された文字列を選択してクリップボードにコピーしておく


(4) 「カウントダウン」属性を指定

Dashcode

(3)でコピーしたカレンダー公開先の「webcal://」で始まるURLを、ウィジェットの属性として設定する。「プロパティ」の「ターゲットの種類」のポップアップメニューで「共有カレンダー」を選択し、下の入力欄に先ほどのURLを張り付ける


(5) iCalでイベントを追加する

Dashcode

再びiCalに戻って、何かイベントを定義してみよう。このとき必ず公開されているカレンダーのイベントとして登録すること。ここでは、イベントの開始時刻だけが重要だ。「カレンダー」メニューから「更新」を選択しておけば、作成したイベントが確実に公開され、.Macのサーバー側と同期されるので安心だ


(6) カウントダウンが始まる

Dashcode

イベントを作成したあとでウィジェットを起動すると、最初に訪れるイベントの名前と日時を公開カレンダーから読み取り、カウントダウンを始める



ボタンの動作をプログラミング


(7) ウィジェットにボタンを追加する

Dashcode

続いて、もう少し高度なボタンの動作をプログラミングに挑戦する。カウントダウンウィジェットの裏面にボタンを配置し、ユーザーがそのボタンを押すと、iCalが起動するようにする。もしすでにiCalが起動している場合には、それをアクティブなアプリケーションにするというもの。カウントダウンの対象をその場で作成、編集できるようになるので、実用性も高まるだろう。まず「部品ライブラリ」から「丸ボタン」をドラッグして配置する


(8) ラベルやサイズを指定

Dashcode

ボタンのラベル部分をダブルクリックして「iCal」と入力したあと、ボタン周囲のハンドルをドラッグしてボタンのサイズと位置を適切に調整しておく


(9) ビヘイビアを定義する

Dashcode

ボタンのインスペクターを開き、いちばん右のタブの「ビヘイビア」を選択して「onclick」のイベントに「openiCal」ハンドラを追加。すると、自動的にJava Scriptの空ファンクションが追加される


(10) 処理を記述する

Dashcode

ビヘイビアを追加すると自動的に開くソースコードエディターを使って、選択状態になっている「// ここにコードを挿入」部分にDashcodeが追加した空ファンクションの中身を記述する。必要なのはウィジェットからiCalを開く「widget.openApplication("com.apple.ical");」という1行だけだ


(11) 動作を確認して完了

Dashcode

これだけでウィジェットの裏面に配置したボタンがアクティブになる。起動して裏面を出し、「iCal」ボタンをクリックしてみよう。iCalが開くはずだ


(次ページに続く)

カテゴリートップへ

ASCII.jp RSS2.0 配信中