Y!APIコンテストの結果報告

http://farm1.static.flickr.com/44/112998032_9f213148f9.jpg
photo by DexterStonehouse

残念ながら自分が投稿したYWitterは受賞にはいたりませんでした。ダウンロード数も少ないのでウィジェットのユーザ層とTwittererなユーザが全然かぶっていないのかも。むしろ英語版を作ってそっちにも投稿しておいた方が反響はよかったやもしれません。反省。。

今後の参考にYahoo!Widget部門の受賞作品3つのソースを眺めて解体してみることにします。解体に使うのはウィジェットのコンバーター。

週刊アスキー賞ヤフオクモニターY!

ヤフオクモニターY!

3つの中では1番ソースファイルがたくさんありました。
ヤフオクAPIを使っているのかと思いましたが、ウォッチリストの確認はAPIでは提供されていない機能で、HTMLを直接いじっているようです。

ヤフオクの仕様が変わってしまうとこのウィジェットは動かなくなってしまいます。公式のAPIで作れないのは残念。

ソース全体はコメントが多く書かれていて、把握しやすい。
こちらの、文字コードに応じたEscapeを実装したライブラリが使われていました。
ヌルコムアーカイブス・デジタル制作室

全体のファイルサイズが1.5MBとちょっと重い。たくさんある画像が重いせいのようですが、画像自体は小さいのでもっとPNGの圧縮率を上げれば軽くなりそうです。

準グランプリ Drop weather

Drop weather

画像ファイルがたくさんありますが、ソースは2つ。drop.konとmain.js。main.jsは436kbと巨大。1287行目から5000行近くに渡って「北緯28°0′東経131°30′付近」といったデータが記述されています。メンテナンスのことを考えると、可能であればデータとプログラムのソースは分けたいところではあります。

天気予報のデータは「インターネットサイトから取得」とぼかして書いてありますが、APIで公開されているものには「Weather Hacks - livedoor 天気情報」があります。

グランプリ ToMobile

ToMobile

ファイルは3つ。ToMobile.konとuploader.js、md5.js。md5.jsはオープンソースなライブラリ。
Paj's Home: Cryptography: JavaScript MD5

uploader.jsでMobile File Viewerにドラッグ＆ドロップされたファイルをアップロードしています。MobileFileViewerはAPIを公開しているわけではないようですが、ウィジェットの作者自身のサービスなのでその辺りは柔軟に作り変えられたのかもしれません。

Mobile File Viewer　-携帯でPCのドキュメントが無料で見られるツール-

addPostFileというファイルをアップロードする関数がウィジェットに用意されているので処理は簡単。

見やすいソースコードでした。

まとめ

他人のソースを眺めるのは勉強になるし面白いものです。
ただし、他人のソースはライセンスが明記されていなくても他人のものであり、盗用するのはご法度。

それと個人的には、ウィジェットのような再配布する形式であれば特に、内部で使わせてもらったライブラリに対して配布サイトなりアプリの中なりで感謝の意を表明したいなぁ、と思います。

改めて自分の作ったYWitterのソースを見ると、コメントがほとんどゼロで200行足らずとはいえあまり感心できたものではないですね。。

Silverlightをちょっと試してみる

http://www.microsoft.com/japan/silverlight/images/logo_main_sl.gif

Microsoft Silverlight: Light Up the Web

Microsoftが最近リリースした新しいツールをいじってみました。

TechCrunch Japanese アーカイブ ? Silverlight: ウェブはさらにリッチになった
この記事では絶賛ですが、日本ではいまいち盛り上がりに欠けているような気がします。AdobeのApolloの方がリリース直後に開発者がわぁっといじっていた感があります。

Apolloが赤に対して、Silverlightは青。ロゴはマイノリティ・リポート辺りに出てきそうな近未来的なデザインでかっこいいですし、まずは試してみることに。

インストール

ブラウザのプラグイン形式。
普通にダウンロードしてインストールできました。（WinXPでやるとインストーラーが終わったのかよくわからない挙動をしますが）
http://www.microsoft.com/japan/silverlight/downloads.aspx

デモを見る

Silverlight: Showcase

いろいろあります。

RadControls For Silverlight by Telerik
これは3Dでぐりぐり。

http://silverlight.net/fox/
こちらは映画のプロモーションビデオ。

すごそーです。

Hello World!

SDKがちゃんと用意されています。
Microsoft Silverlight: Light Up the Web

今回は1.0betaにしました。

ダウンロードして解凍するとさらにいくつかzipファイルがありますが、QuickStartがわかりやすかったです。

Flashのswfのようなファイルをコンパイルして生成するのかと思っていましたが、XAMLとJavaScriptで構成されています。（どちらもプレインテキスト）
FirefoxのCanvasと同じ雰囲気とも言えます。（同じCanvas要素を使っています）

JavaScriptで図形を描くHTML要素「Canvas」の実例 - GIGAZINE

1.1αのPythonは試していません。参考になりそうな記事。
ふにゃるん - 初めてのSilverlight 1.1α ＋ Expression Blend β2(取っ掛かり編？)

マッシュアップコンテストのネタにならないかなぁ

JavaScript以外にPythonと今後RubyもサポートされるそうですがPHPが入っていない。。
それはいいとしてせっかくのコンテストなのでこういった新しい技術を使ってつくってみたいなぁ、とも思います。Flashと違い普及率が極端に低いですが、コンテストなら許されるでしょう。

匣の向こう側 - あまりに.NETな - はじめてのSilverlightホスティング

こんなサービスもMicrosoftがやってくれているようです。

あれこれ模索中ではありますがなかなかアイディアと時間が取れず。

YWitterのソース解剖

http://farm1.static.flickr.com/54/137059406_7f39015e9c.jpg
photo by Mika Hiironniemi

ちょっと間が開きましたが前回の続き。
Yahoo!Widgetで作ったtwitterクライアントのYWitter

YWitter.kon

拡張子がkonなのはもともとKonfabulatorという名前だった名残り。ウィジェットの本体となるファイルです。
テキストエディタで開けます。基本はXMLになっており、<![CDATA[で囲まれた中に　JavaScript　も含まれています。

開発中は<debug>をonにしておきます。onにしてウィジェットを開くと（YWitter.konをダブルクリックすれば開く）デバッグウィンドウが開いて、そこからウィジェットをReload（再起動）できるようになっています。ソースを書き換えて保存、Reload、動作確認、で手際良く開発できます。このデバッグウィンドウにはprint()で指定した文字列が出力されるようにもなっているので、printデバッグもしやすくなっています。offにすればprint()は無効化されるのでprint文を消す必要もなし。

38行目のinclude()で別ファイルのYWitter.jsを呼び出しています。1つのファイルにまとめてしまうこともできますが、YWitter.konはXML中心にして　JavaScript　の処理はYWitter.jsに分けることにしました。

<action trigger="onload">
<![CDATA[
include("YWitter.js");

PHPだと今までにも何度か出た、require_once()が別ファイルの呼び出しです。ソースを複数のファイルに分けるか分けないか、の境目は明確にあるわけではありません。個々人の好みにもよってくると思いますが、僕の場合、手元のソースの行数を調べてみると1ファイルで1000行以上書いているのはありませんでした。

今回の場合、
・機能的に明確に分けられる（YWitter.konは見た目を決めるXML、YWitter.jsは諸々処理するプログラム）
・<![CDATA[で囲まれているとエディタの色分けが効かなくなる
・インデントが深くなりすぎる

がファイルを分けた主な理由です。

インデントが深くなりすぎる、というのはXMLで構造をわかりやすくする為に

とインデント（左側に余白となる半角スペース）を入れているので、この中に　JavaScript　を書くとifやforを書く際にインデントがさらに深くなってどんどん書き始めが右側に寄ってしまう、結果読みづらくなる、という問題です。

個人的には見やすさに関わる問題なので結構重要ですが、好みの問題でしょう。なおインデントを僕の場合は半角スペース4文字分（エディタの機能でTabを押すとスペースが4つ入る）にしています。

ソースの細かい説明は、マニュアルの解説になってしまうので省きます。

YWitter.js

　JavaScript　のソース。PHPと割と似た構文です。変数の頭にダラーマーク$が付かないのが大きな違い。　JavaScript　と言っても、ウィジェット用にカスタマイズされているのでマニュアルを読みつつ、になります。

YWitter.konからはinit()、getFriendsTimeline()、getMyStatus()、showFriendsTimeline()の順に呼ばれ、240秒おきにgetFriendsTimeline()、showFriendsTimeline()が呼ばれています。

twitterのAPIの仕様はこの辺りを参考に。
http://watcher.moe-nifty.com/memo/docs/twitterAPI.txt

new URL()を使うと、Basic認証のかかっているtwitterのAPIの場合、パスワードを入力するダイアログが出てきてくれます。
getFriendsTimeline()をgetMyStatus()より先に呼んでいるのは、APIの
http://twitter.com/statuses/user_timeline.json?count=1
が認証下にないと404を返すだけでパスワードを聞いてくれないためです。APIの仕様にも明記されていないようなので最初はまりました。

FadeIn()とFadeOut()はウィジェット側で用意してくれているFadeAnimationなどを使うと簡単。ちょっとソースが汚いですが。

画像ファイル

ajax-loader.gifは
Ajaxload - Ajax loading gif generator
こちらのサービスで生成。ありがたい無料サービスです。

bg.pngはPhotoShopを使って自分で描きました。このぐらいなら高価なPhotoShopでなくても作れると思います。

次回

趣向を変えて見た目に楽しいPHPのプログラムを書いてみようと思います。

コメント（1）

トラックバック（1）

Yahoo!Widgetで作ったtwitterクライアントのYWitter

http://farm1.static.flickr.com/33/52445415_7eac77bfec.jpg
photo by Toni Blay

先日のYahoo!APIコンテストに出品したYWitter、　　JavaScript　　とXMLでできているので中身を解説してみようと思います。

そもそもtwitterとはなんぞや、というとこの辺を参考に。
「今、何をしているの？」でつながる『twitter』 | 100SHIKI.COM

twitterは英語圏なサイトですが日本語圏のユーザも相当数使っているようです。YouTube以来、今旬なサービスの1つでしょう。

今回YWitterを作った動機は
・コンテストに何か出したいなぁ
・ウィジェットか検索系のAPIの二択だがウィジェットは作ったことがなかった
・twitterが流行ってるけど使ったことない

といった具合。

Yahoo!ウィジェットとは

「新Mac OS X のDashboardはパクリ」：Konfabulator開発者が激怒 - CNET Japan
ITmediaニュース：Yahoo!、Konfabulatorを買収

KonfabulatorがYahoo!ウィジェットの元です。この手のウィジェットでは老舗と言えるでしょう。
開発する側としても、非常に使い勝手のいい作りになっているように感じました。

まずはマニュアルを入手

Yahoo!ウィジェット自体をインストールしてひとしきりギャラリーからウィジェットを入れて遊んだらマニュアルを読む。
Yahoo!ウィジェット - 開発ツール

ここのリファレンスガイドとチュートリアル。個人的にはHTML版のマニュアルの方が読みやすいのですがこの2つはPDF。。

リファレンスは283ページもありますが、開発中は一番見ることになります。

Hello World

チュートリアルを参考に「Hello Worldを表示するだけ」のように簡単なウィジェットを最初に作ってみることは重要だと思います。続いて他人のソースを見させてもらう。特に自分が作ろうとしているものと似たウィジェットを検索して参考にします。

Twiggee - Yahoo! Widgets 版 Twitter クライアント作ってみた (nakatani @ cybozu labs)
Twidget (Twitter) | Yahoo! Widgets

今回はこの2つを参考にさせていただきました。

ソースを見るときはYahoo!公式の
ウィジェットコンバーター
を使って.widgetファイルをソースに展開します。

YWitter.widgetの中身

ギャラリーからダウンロードできるのは古い（連休中なのでまだ最新版を反映してもらっていない）ので下記からダウンロードしてください。
http://www.zuzara.com/pub/ywitter/YWitter.widget

先のコンバーターを使って展開すると

YWitter.kon
YWitter.js
images/bg.png
images/ajax-loader.gif

の4つのファイルが出てきます。YWitter.konが主にXMLでインターフェイスの定義がなされています。YWitter.jsに内部の処理が書かれています。あと2つは画像。

JavaScript