coding my life : Tags : html

Tags : html

このTagsの登録数：3件表示 : 1 - 3 / 3

2006-11-27

OSX Widget プログラミング: prototype.jsで「京都の天気」

ポスト @ 20:19:08 | OSX,widget,programming,html,javascript

前回までで普通のWebのように画面表示、制御ができることがわかりました。ここまで分かったんだから、なにかアプリをつくろうということで「京都の天気」を作ってみました。

もともと天気予報のWidgetは付属してるんで全然いらないんだけど、まあ学習の一環です。

ライブドアが提供してる天気データXMLをAjaxで定期的に読み込んで、画面更新する方式です。ajax周りのデバッグでハマりがあったんですが、それさえ解決したらいつものやり方で済むのでサクッできました。

ソースツリーはまとめてココに入れています。KyotoWeather.zip

以下ハイライトで解説します。

prototype.js で Ajax + 定期更新

メインHTML上でprototype.js の読み込み(リンク)をします。今回使ったのは prototype.js 1.5.0_rc0 です。

weather.html <script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"> </script> <script src="javascripts/weather.js" type="text/javascript" charset="utf-8"> </script>

prototype.js の後に今回のロジックのための JavaScript コードを格納した weather.js をリンクします。そこで window.onload 時にデータ取得+定期実行の登録を行います。

ajaxの処理には prototype.js の Ajax.Updater クラスを、定期実行の処理には同じく prototype.js の PeriodicalExecuter を利用します。

weather.js // 結果表示 function showResponse(res) { var xml = res.responseXML; // 結果はオレオレXML。今回はtelopノードのデータを使います。 var telop = xml.getElementsByTagName('telop')[0]; $('content').innerHTML = telop.firstChild.nodeValue; } // 定期更新処理 function update() { var now = new Date(); $('date').innerHTML = now.toDateString() + '<br />' + now.toTimeString(); // ライブドアの天気データXML var url = 'http://weather.livedoor.com/forecast/webservice/rest/v1'; var params = 'city=79&day=today'; // 京都の今日のデータ var ajax = new Ajax.Request(url, { method: 'get', parameters: params, onComplete: showResponse }); } // 初期化 function onLoad(event) { update(); var periodicalAleter = new PeriodicalExecuter(update, 60); // 60秒ごとに update を呼ぶ } window.addEventListener('load', onLoad, false);

開発上のハマり: Consoleが欲しい！

実は今回、かなーりはまりました。しかも原因は JavaScript の文法エラー。

普段の Firefox の Firebug で作ってたので、Dashboard Widget のJavaScript Console やステップ実行がない環境があまりに不便だったのです。

たとえば以下のようなコードを書いてたんですが、なんだかこのあたりでいつも動かない。どうもなんかの例外が起きてそうなんだけど、さっぱり分からないわけです。

var ajax = new Ajax.Request(url, { method: 'get', parameters: params, onComplete: showResponse, });

この問題原因は、最後の showResponse のあとにある","でした。これが余計で文法エラーとなっていたのです。いいじゃねえかよ、ああ、Ruby なら許してくれるのに...というかいろんなスクリプト触りすぎてもうわけがわからん。

こりゃやっとれん！というわけで、いつものブラウザで開発することにしたんですが、今度は Ajax(XMLHttpRequest) のクロスドメイン制限のために、ライブドアにアクセスできません。仕方なく XML をローカルに落としてきて、開発中はURLをローカルのものにして開発していました。

Dashboard の開発環境はまだまだ不便です。Web側の開発が Firefox の WebDeveloper Plugins や Firebug などで格段に便利であるため余計にそう思うのでしょう。

ブラウザでこのWidgetが動くようになれば完璧なんだけど。そりゃ HTTP で取ってきた HTML が勝手に XMLHttpRequest を変なところにできちゃうとヤバいのはわかるんだけど、ローカルファイルならOKとかできないもんかね。アクセス時にセキュリティダイアログ出すとかでもいいからさ。

あーそれかせめて Dashboard で JavaScript コンソールは出せないもんかいな。にんともかんとも。

2006-11-26

OSX Widget プログラミング: JavaScript + DOM

ポスト @ 20:27:01 | OSX,widget,programming,html,javascript

JavaScript であれこれをするわけですが、やっぱりDOMで操作するんでしょうか。 Apple のサイトをみたら、突然 document.getElementById とか、documetn.createElement とかばんばんでてきます。

どうやら、普通のDHTMLのように、JavaScript で DOM 操作ができるようです。 OSX に標準でついてる訳で、おそらく Safari のエンジンなんでしょう。

というわけで、ものは試しということで、前回つくった Hi.wdgt をもとに、JavaScript でできるか試してみたら、そのまま動いてしまいました。簡単！

以下どういうことをしたか解説します。

まずはメインの Hi.html <html> <head> <link rel="stylesheet" href="hi.css" type="text/css" charset="utf-8" /> <script src="hi.js" type="text/javascript" charset="utf-8"/> </head> <body> <div class="hi">Hi, My name is Coji Mizoguchi</div> <p> <input id="input" type="text" /> <button id="test">test</button> <button id="clear">clear</button> <br /> <textarea id="message">message here</textarea><br /> <ul id="list" /> </p> </body> </html>

以前からの変更点は以下です。

scriptタグを追加して JavaScript を読み込むようにしました。ソースコードの編集のしやすさから、HTMLに埋め込まず、外部参照です。ついでにCSSもlinkタグで外部読み込みに変えています。
inputタグ(#input)。入力として使います。
textareaタグ(#message)。JavaScriptの実行結果をココに表示することにします。
buttonタグ(#test, #clear)。対話的なJavaScriptのイベントトリガとして使います。
ulタグ(#list)。DOM操作でココに li を追加していくのができるか実験します。

CSS はどうでもいいので省略。

キモになるJavaScriptコード hi.js。普通のWeb用JavaScriptのようにしています。
やってることは以下のとおり。

window.onload のイベントハンドラを登録。そこでボタンを押されたときのイベント関連づけを行います。(Element.addEventListener, document.getElementById)
#testボタンが押されたときに#inputに入力されたテキストを#messageに追加しつつ、#listにサブアイテムのliタグとして追加します。(Element.value, document.createElement, Element.appendChild)
#clearボタンが押されたときは#messageの内容をクリアします。

// 便利関数。getElementByIdを短く。
function $(id) {
    return document.getElementById(id);
}
// 便利関数。イベント登録。
function setEvent(id, action, listener) {
    $(id).addEventListener(action, listener, false);
}
// リストにアイテムを追加(createElement, appendChild)
function addListItem(text) {
    var list = $('list');
    var item = document.createElement('li');
    item.innerHTML = text;
    item.className = 'item';
    list.appendChild(item);
}
// メッセージをクリア
function clearMessages() {
    $('message').value = '';
}
// メッセージを追加
function addMessage(text) {
    var oldmessage = $('message').value;
    $('message').value = oldmessage + text + "\n";
}
// test ボタンクリック
function onTestClick(event) {
    var text = $('input').value;
    addMessage(text);
    addListItem(text);
}
// clear ボタンクリック
function onClearClick(event) {
    clearMessages();
}
// 初期化
function onLoad(event) {
    clearMessages();
    addMessage('onLoad');
    setEvent('test', 'click', onTestClick);
    setEvent('clear', 'click', onClearClick);
}
window.addEventListener('load', onLoad, false);

JavaScript がだいたいそのまま動いちゃうということは、prototype.js とかも使えるのかな？次はprototype.js を使って Ajax を試してみることにします。

OSX Widget プログラミング: はじめのいっぽ

ポスト @ 17:17:32 | OSX,widget,programming,html,javascript

ふと思い立って、OSXのWidgetを作ってみることにしました。
参考にしたのは以下のサイトです。

Dashboard Programming Guide - apple.co.jp (日本語)

Dashboard は普段から主に計算機として使っていますが、どういう仕組みでできているか知らなかったので、まずはお勉強からです。

Dashboard の概要

曰く:

Dashboard 機能は10.4 から追加された
F12キーででてくるアレ
HTML, CSS, JavaScriptで作る
環境設定、ローカリゼーション、システムアクセスの技術を追加してる

感想としては(Windows出身なもので)、

モジュール構造でインストールされるActiveDesktop みたいなものか
HTML,CSS,JavaScriptをパッケージにするわけね
環境設定、ローカリゼーションとかは JavaScript から操作するのかな？きっとWindowsのスクリプティングホストみたいにビルトインのObjectが用意されるんではないか。

ウィジェットの基礎

いつものようにHello, World を作ろう。ということで。サンプルは XCode Tools をインストールしたら /Developer/Examples/Bashboard/HelloWorld に入っています。

まとめ:

WigetはOSXアプリケーションのようにバンドル(ディレクトリ)構造になってる。拡張子は .wdgt。ちなみにアプリは .app ですね。
バンドルディレクトリには最小限以下のファイルがあればよし

Info.plist: アプリケーションデスクリプタ。XMLでアプリ名、メインHTMLファイルの指定や×ボタンの位置を指定する。
メインHTML (ex: HelloWorld.html): Widgetとしてこれが表示される。
Icon.png: アイコン。Dashboardの追加時などに画面下のウィジェットバーで表示されるアイコン。(ファイル名先頭は大文字必須)
Default.png: ウィジェットの読み込み時に表示される画像。ウィジェットのサイズはどうもこの画像のサイズになる模様。(ファイル名先頭は大文字必須)

メインHTMLは普通に HTML + CSS + JavaScriptで記述すればいいみたい。CSSやJavaScriptはWeb用のHTMLと同じように link タグで外部に記述できる。

おためしWidgetの作成

ここまでで、Examplesにある HelloWorld をもとに Hi というWidgetを作ってみることにしました。

Info.plist - HelloWorldのやつをコピペしてちょっとかえただけ。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>CFBundleDisplayName</key> <string>Hi my name is Coji</string> <key>CFBundleIdentifier</key> <string>com.gmail.mizoguchicoji.widget.hi</string> <key>CFBundleName</key> <string>My name is Coji</string> <key>CFBundleShortVersionString</key> <string>2.0</string> <key>CFBundleVersion</key> <string>2.0</string> <key>CloseBoxInsetX</key> <integer>16</integer> <key>CloseBoxInsetY</key> <integer>14</integer> <key>MainHTML</key> <string>hi.html</string> </dict> </plist>

Hi.html - 同じく HelloWorld.html をもとに書き換え。CSSを外部から読むようにしたくらい。 <html> <head> <style> @import "hi.css"; </style> </head> <body> <div class="hi">Hi, My name is Coji Mizoguchi</div> </body> </html>

Hi.css - スタイルシート。普通に CSS です。 body { background-color: black; } .hi { font: 24px "Lucida Grande"; font-weight: bold; color: orange; text-align: center; }

さて、ソースコードもできたので早速Widgetをインストールしてみてみます。

上記のファイルを全部まとめてひとつのディレクトリに突っ込んで、ディレクトリ名を Hi.wdgt に変更。

そのディレクトリを Finder からダブルクリックするとインストールされました。見た目はこんな感じ。

へぼいですが、ほかのWidgetと同じようにダッシュボードを移動したりできます。

Widgetの削除

インストールされたWidgetは ~/Library/Widgets に入れられます。削除はここからディレクトリごと消してもokです。
または、Dashboard 上から削除するときは標準で入ってる「ウィジェット」Widgetで消すことができます。消したいWidgetの「行き止まり標識アイコン」を押すとゴミ箱にいれるかどうかのダイアログがでます。

とりあえずこれで表示するだけのWidgetは作れるようになりました。次は JavaScript であれこれやるものを作ってみることにします。

coding my life