Dashcodeでウィジェットを作成する方法

Leopardにはウィジェット開発環境として「Dashcode」が準備されています。

今回は早速そのDashcodeを使って前回のエントリで公開したウィジェット「Jorudan Transfer」を開発してみます。

こんな人を対象にしています。

• JavaScriptの簡単な知識をもっている
• 簡単なHTMLを理解できる

こんな開発/実行環境です。

• Mac OSX 10.5 (Leopard)
• Safari 3.0

前回のエントリで公開した「Jorudan Transfer」というジョルダン乗換案内を利用するウィジェットです。

出発駅と到着駅を入力して希望出発/到着時刻を入力して検索できます。

詳しくは前回のエントリをご覧ください。

Safari3.0ではウェブページのあらゆる部分を切り取ってウィジェット化できる「Webクリップ」があります。

しかし、愛用しているジョルダンではWebクリップで作ったウィジェットがうまく動かなかったことと、見た目があまり好きになれなかったのでDashcodeで自分好みのウィジェットを作ることにしました。

LeopardのインストールDVDからDeveloperをインストールしてください。

特に難しいことはなく、クリックするだけでインストールできますので、ここでは割愛。

まずDashcodeを起動しテンプレートを選択します。

特にどのテンプレートにも属しそうにないので「カスタム」を選択します。

すると、このような開発環境が開きます。

ほぼ土台が完成しています。
UIの部品とその基本的な設定は「ライブラリ」「インスペクタ」をクリックして別のウィンドウを開きます。

「ライブラリ」をクリックするとUIの部品一覧が表示されます。これらをドラッグ＆ドロップでウィジェットのUIを作っていきます。

「インスペクタ」をクリックすると各UI部品の属性値を設定できます。クラスやIDなどJavaScriptから利用する際に必要となる属性値や、そのUIの大きさや位置を決める値なども設定できます。

UIの設計はこの２つだけを利用します。とても簡単です。

ドラッグして土台の大きさを変形します。

その土台を選択したまま「インスペクタ」で値を設定します。そうするとこうなります。

基本的にこの繰り返しです。もうすこし練習してみましょう。

「ライブラリ」の中に「Text（テキスト）」という部品がありますのでそれをドラッグして適当な場所に配置します。文字を入力して「インスペクタ」で大きさや色を設定します。

土台部分のデザインと全く同じ操作です。非常に簡単ですね。後一つ練習してみましょう。

出発駅の入力フィールドを設定します。「ライブラリ」の中に「テキストフィールド」という部品がありますので、ドラッグして適当な場所に配置します。

入力フィールドの値はJavaScriptで取得したいので、「インスペクタ」でIDを設定しておきます。

これの繰り返しです。最終的にはこんな感じにUIをデザイン(設計)します。

ちなみに各部分のIDとNAMEはこのように設定しました。

裏面ももちろんデザインできます。裏面にクルリと回転する部分などはテンプレートで既に実装されていますので、その複雑そうな部分は考えずにUIだけに集中してデザインしましょう。

左上のペインで「back」をクリックルだけで裏面のUIデザイン画面に切り替わりますので、先ほどと全く同じようにしてデザインします。

開発途中で気になるのは完成の姿です。Dashcodeでは簡単に実行させることができます。

クリックするとウィジェットが浮き上がりますので、いつものウィジェットと同じように操作できます。もちろん入力もできます。
そして驚きなのが、入力やクリックなどのアクションに対してJavaScriptが動くときにデバッグまでできることです。どこの関数でどういったエラーなのかが簡単に分かります。しかもブレークポイントまで張れます。これはありがたい！

JavaScriptやHTMLのソースコードを実装するペインを開きます。

するとソースコードが表示されます。編集するソースコードは以下の場所をクリックして切り替えられます。

まず、「検索ボタン」にクリックイベントを追加します。いつもの通り部品を選択して「インスペクタ」で設定します。

イベントハンドラの名前を「jumpURL」とします。

イベントハンドラを「インスペクタ」で追加すると「ソースファイル」に以下のコードが自動で追加されます。

function jumpURL(event) {
  // ここにコードを挿入
}

この関数を実装します。内容は簡単です、UI部分から値を取得してURIを構築しSafariでopenします。

function jumpURL(event)
{
  var d = document;
  var year = d.getElementById("year").value;
  var monIndex = d.getElementById("month").options.selectedIndex;
  year += d.getElementById("month").options[monIndex].value;
 
  var dayIndex = d.getElementById("day").options.selectedIndex;
  var day = d.getElementById("day").options[dayIndex].value;
 
  var hourIndex = d.getElementById("hour").options.selectedIndex;
  var hour = d.getElementById("hour").options[hourIndex].value;
 
  var minIndex = d.getElementById("minute").options.selectedIndex;
  var min = d.getElementById("minute").options[minIndex].value;
 
  var from = d.getElementById("from").value;
  var to = d.getElementById("to").value;
 
  var radio = d.getElementsByName("leave_arrive_radio")[0].checked ? "from": "to";
 
  var uri = "http://www.jorudan.co.jp/norikae/cgi-bin/norikeyin.cgi?eki1_in=" + EscapeEUCJP(from) + "&eki2_in=" + EscapeEUCJP(to) + "&Dyyyymm=" + year + "&Ddd=" + day + "&Dhh=" + hour + "&Dmn=" + min + "&Sfromto=" + radio + "&BBsearch=%B8%A1%BA%F7&proc_mode=K&proc_dmode=A&proc_kd=1&proc_sw=5&BBjset=0&Aback=0&eki1_nm=&eki2_nm=&eki3_nm=";
 
	widget.openURL(uri);
}

URIを構築しwidgetが独自に準備している「openURL」関数の引数に渡すことでSafariを開くことができます。

おっと、uri変数を構築する部分でEscapeEUCJPという関数を使っています。これは外部ライブラリで定義されている関数です。

ウィジェットを構成するファイルは左下のアイコンをクリックすると表示されます。

私はここに「lib」というディレクトリを作成して、その中にライブラリを配置しようと思います。

このecl.jsというライブラリは文字コードのエンコード/デコードライブラリです。pure JSで実装されていますのでポータビリティに優れていて私は大好きです。

もちろんライブラリを配置するだけで利用できるわけではありません。HTMLソース内に以下のコードを書く必要があります。

<script type="text/javascript" src="lib/ecl.js" charset="utf-8" />

このようにしてウィジェットにファイルを組み込めます。

これにて主要機能の実装は終わりです。あとは使い勝手を向上させるため、ウィジェットを開いた時間を入力にしたり、以前の入力を維持したりという機能もJavaScriptで実装しています。これらはウィジェット開発の本質とは異なりますのでここでは割愛します。

ウィジェットにオリジナリティのあるアイコンを設定します。これも非常に簡単です。
左上のペインでウィジェットアイコンをクリックするとアイコンのデザイン画面が表示されます。

相変わらずやることは同じです。ウィジェットアイコンを選択して「インスペクタ」で設定します。

ここでは準備しておいたアイコン画像を設定します。

これにて基本的なウィジェット開発は終わりです。

後はウィジェットを実行できる形式で保存します。
「ファイル」から「ウィジェットを動作形式で保存…」で保存します。

保存したウィジェットをダブルクリックすることでインストールできます。

かなり駆け足でしたが、これにてDashcodeを利用したウィジェット開発の説明を終わります。まだプラグインの利用やローカルディスクへのアクセスなど、色々な機能が沢山ありますので、これをベースに色々挑戦してみて下さい。
間違いや質問など何かありましたらコメント下さい。

• Dashcodeでウィジェットを作成する方法
• ジョルダンの乗換案内ウィジェット「Jorudan Transfer」
• Jorudan Transferを書籍紹介して頂きました
• ウィジェット・プラグインを導入する方法
• WUrl - Dashboard WidgetでURL上のファイルを読み込むプラグイン -
• WFile - Dashboard Widgetでファイルアクセスするプラグイン -