0

chumbyで日本語Twitterを読めるwidgetを作った

chumbyは日本語フォントが入っていないので日本語が表示できないが、Flashの中のダイナミックテキストそのものにフォントを埋め込めば日本語が出せる。

ちょうどIMのAPIが動いてなかったので、twitterのfriends timelineを表示するchumby widgetを作ってみた。ただしフォントデータそのものを埋め込んで配布するのはライセンス的にまずそうなので、flaファイルのみの公開になります。自分の環境でコンパイルしてくださいIPAフォントを埋め込んで、swfも公開しました

ダウンロード → SourceCode (Flash CS3 / AS2)

(AS2が久しぶりすぎてやばかった)

twitter on chumby

ただしこの方法だとファイルサイズが100kb(chumby widgetの容量制限)を超えるので、USBから起動するしかない。

s.h.log chumbyで自作widgetをUSBメモリから起動する

japanese twitter on chumby

profile.xml

profile.xmlのusernumの数値を、自分のtimeline用に書き換える。これはtwitter上でのID。

twitter.com/homeで、自分のRSSフィードを見ると 123456.atom みたいな感じになっているので、その数値に書き換える。

intervalの秒数だけ、次の記事を読むまでwaitがかかる。デフォルトは8秒。

■Twitter APIをAS2で読む

XPath4AS2でxml版のフィードを読んだ。

FlashでBasic認証を通る方法がわからなかったので、protectをかけているユーザのtimelineは読めないかも知れない。

前に作ったXPath4AS2テスターが役に立った。

■favorite

どうしてもふぁぼりたかったんだけど、FlashからBasic認証を通る事ができなくて無理だった。

http://user:pass@twitter.comの方法も、Base64エンコードしてLoadVarsにaddRequestHeaderするのも、getURLも駄目。

ブラウザの中で動いているわけではないのでログイン済みのcookieを共有するも出来ない。

cgiでproxyすればいいんだけど。

■thumbnail

USBから起動した場合、サムネイルが読めない。

同じ画像ファイルでwebにアップした場合は読めたので、profile.xmlの記述ミスかも。

■setIntervalがおかしい

PC上で実行している時は問題ないんだけど、ChumbyのFlashLite3上でsetIntervalを使ってタイマ処理を行っている時、4秒以上待てない。10秒などを指定すると、4秒ぐらいでタイマ処理が回ってしまう。調べても特にFlashLiteは特別という記述は見あたらなかったので、なんだかわからないけど、さすがに4秒はchumbyから目を離せなくなってしまうので今回は1秒を数えるsetIntervalを作ってさらにカウントアップする変数を用意して、時間を数えるようにした。

■プログラム

全部twitter.flaの1フレーム目に書いた

importcom.xfactorstudio.xml.xpath.*;

if(!interval)interval=10;

if(!usernum)usernum=3631571;

vartwitterXml:XML=newXML();

twitterXml.ignoreWhite=false;

varxmlUrl=”http://twitter.com/statuses/friends_timeline/”+usernum+”.xml”;

twitterXml.onLoad=twitterXml_onLoad;

twitterXml.load(xmlUrl);

varint_id;

functiontwitterXml_onLoad(success:Boolean){

if(success){

trace(“XMLloadsuccess!!”);

loading._visible=false;

preLoadIcon(twitterXml);

int_id=setInterval(count_sec,1000);

loadNextStat();

}

else{

trace(“XMLloaderror!!”);

}

}

functionpreLoadIcon(stats:XML){

//trace(stats);

varicons:Array=XPath.selectNodes(stats,”statuses/status/user/profile_image_url/text()”);

trace(icons.length);

for(vari:Number=0;i<icons.length;i++){

varloader=newmx.controls.Loader();

loader.contentPath=icons[i];

//loader.load();

//trace(loader.autoLoad);

trace(loader.contentPath);

}

}

varstat_id=0;

varfav=”false”;

functionloadStats(stats:XML,num:Number){

varlen=XPath.selectNodes(stats,”statuses/status”).length;

if(num>len){

clearInterval(int_id);

loading._visible=true;

twitterXml.load(xmlUrl);

n=1;

return;

}

varupdate=XPath.selectNodes(stats,”statuses/status[“+num+”]/text/text()”);

fav=XPath.selectNodes(stats,”statuses/status[“+num+”]/favorited/text()”);

variconUrl=XPath.selectNodes(stats,”statuses/status[“+num+”]/user/profile_image_url/text()”);

varuserName=XPath.selectNodes(stats,”statuses/status[“+num+”]/user/name/text()”);

varscreenName=XPath.selectNodes(stats,”statuses/status[“+num+”]/user/screen_name/text()”);

vardate=XPath.selectNodes(stats,”statuses/status[“+num+”]/created_at/text()”);

stat_id=XPath.selectNodes(stats,”statuses/status[“+num+”]/id/text()”);

iconLoader.contentPath=iconUrl;

//favStar.gotoAndStop(fav);//labelで移動

labelUpdate.text=update;

labelUserName.text=userName+”(“+screenName+”)”;

labelDate.text=date;

trace(fav);

}

varsec=0;

functioncount_sec(){

sec++;

if(sec>=interval){

sec=0;

loadNextStat();

}

}

varn=1;

functionloadNextStat(){

trace(“loadNextStat”);

loadStats(twitterXml,n++);

}

0

chumbyで自作widgetをUSBメモリから起動する

MakerFaireで買ってきたchumbyにFlashLite3が入っていて、ActionScript2.0が動く。

ちょうど良い事に俺がFlasherなので、自分でwigetを作って動かしてみた。

yoggyさんに教えてもらったScott Janousekさんのスライドが凄くまとまっている。chumby独自の変数(内蔵の加速度センサー、タッチパネル等)の取得の仕方なども書いてある

Developing Flash Lite Widgets For The Chumby Platform SlideShare

あと、Scottさんの作ったFlash CS3用のデバイスプロファイルを入れると、ケータイ用Flashを試すエミュレータであるAdobe Device Centralでchumbyが動く様になる。

Scott Janousek Blog Archive Chumby Device Profile for Adobe Device Central CS3

■USBメモリで動かす

chumby.comのsubmit a widgetからprivate設定でuploadして試す方法もあるが、ローカルで開発する方法としてUSBメモリからブートする方法もある。今回はUSBメモリが余っていたのでそれでやってみた。

Chumby tricks – ChumbyWiki – Mixing local widgets into a channel

を参考に、USBメモリの中にprofile.xmlというファイルを置くと、USBメモリ内のswfを読み込まれる。

chumby usb boot

USBメモリに入れたファイル(Flash AS2 / CS3)

FlashはFlashLite3とのことだったんだけど、ChumbyWikiのwidgetサンプルを見たら、みんなパブリッシュ設定でFlashPlayer6 + AS1.0の組み合わせを指定していた。なんとなくAS1は嫌だったので俺はFlashPlayer6+AS2.0で書き出してみた。

そして、USBメモリを刺して動かしてみた結果がこれだよ!

channelのreloadをすれば読み込まれた。

あと、profile.xmlでwidget_parameterタグで値を渡す事ができる。

上のビデオではやってなかったけど、例えば適当なダイナミックテキストを置いて

labelParam1.text = param1;

などとすれば、下のprofile.xmlだったら zanmai というテキストが読み込める。この辺はFlashをActiveX Objectとして埋め込む時に使うSetVariableとかと同じ感じ。

profile.xml






Test Widget

this is test widget hellohello

1.0




















param1

zanmai





param2

kazusuke










4

GoogleEarth上でFlickrの位置情報付き写真を見れるサービスを作った

blogを書けなくて(MTが再構築できなくて)もう1ヶ月ぐらい前に作ったものになるけど、春休みにRuby on Railsのお勉強をしていて、その最終成果物としてGoogleEarth上でFlickrのGeoTag付き写真を見れるサービスを作ったのでまとめておく。

ついでに、緯度経度でFlickrの写真を検索できるAPIも公開してある。

screen-capture.png

■実装方法

1.Flickrのタグ検索で、geotagが付いている写真を定期的にクロールしてきて、写真のURL、緯度経度をRailsのDBに溜める(photo modelに溜める)

2.GETパラメータで緯度経度をRailsに渡して、photo modelを検索する

3.検索結果をGoogleEarthで表示できるように、kml出力のViewを作る

4.GoogleEarthで視点が変わる毎にサーバーに問い合わせて、返ってきたkmlを表示するkmlを作る

5.mongrelでRailsを動かして、apache2のmod_proxy_balancerでRailsのURLをサブディレクトリに見せかける

こんな感じで。一番時間がかかったのが1のクローラの実装で、これは俺がRuby初心者すぎて2日ぐらいかかった。あとは、デンマーク行きの飛行機と帰りの空港からのバスでやったので5時間ぐらい。この辺は、データを溜めて、クライアントからのリクエストに基づいてフォーマットを決めて吐き出す部分が最初からできてるRailsのおかげ。

■1.geotag付き写真クローラ

まずFlickrはタグ検索ができるけど、数値じゃなくて「〜〜を含む文字列」としてしか検索できないので、例えば「北緯35度東経135度周辺の写真が欲しい」という時は使えない。なので、あらかじめメタデータを集めておいて、数値として範囲を指定して検索できるようにしておく。

geotagは小数点ありの値(geo:lat=35.2341など)なんだけど、普通にgeo:latやgeo:lonを含む写真一覧をFlickr APIから検索しても小数点無しのタグしか手に入らない。

小数点ありのタグを手に入れるために、Net::FlickrでFlickrAPIからタグ検索して、

Net::Flickrで全public photoからタグ検索 – shokaiの日記

“geotagged”タグを含む写真をリストアップして、それから再度photo_idを使ってFlickrAPIのphotos.getInfoメソッドを使ってtagのraw attributeを見なければならなかった。

s.h.log RubyでFlickr APIのphotos.getInfoを呼ぶ

クローラ自体はRailsで実装されていなくて、ActiveRecordだけを使ってcronで1時間毎に実行されている。

s.h.log RailsなしでActiveRecordだけ使って、SQLiteを読み書きする

SQLiteのファイルがRailsと共有されているだけ。今回は、Rails側からの書き込みが無いので特に問題は起こらないだろうと判断した。

いまのところ10万枚の写真が集まった。SQLiteのファイルが欲しい人はあげます。

あと、クローラは連続でHTTPアクセスするとFlickrに悪い気がするので、適当にsleepを入れてみてるんだけど、そうすると実行に結構時間がかかる。これが、クローラを作って動かして直して作って…と繰り返す時に面倒だったが、和田さんに言われてscreenをデタッチ/アタッチするという技を覚えた。デタッチしておくと、sshを切断してもクローラが止まらなくて、アタッチしたら普通に続きからできる(もしくは結果が出てる)screenはクローラ作ってるときに重要。

■2.緯度経度をGETパラメータでRailsに渡して検索する

photos.kml?lat=35&lon=135&size=thumb

みたいな形式で、パラメータを渡してDBに溜めた写真を検索する。

KMLを全部出すと多すぎたので、緯度経度を指定してその周囲の写真だけ出す – shokaiの日記

paramsで受け取れる。パラメータ名はシンボルになっているので注意。

controllerで、ActiveRecord::Baseのfind_by_sqlメソッドで普通に検索。(この方法だと四角い。PostgreSQLやMySQLの空間型を使えば丸くできるらしいがとりあえずSQLiteでやる)

そしてmodelの配列をViewに渡してやる。

■3.検索結果をGoogleEarthで表示できるように、kml出力のViewを作る

kml形式のviewを作る。views/photos/index.html.erb を参考にして、index.kml.erbを作ればok

mime-typeにkmlを追加しておく必要があった。

flickrのgeotagついてる写真を収集してたので、kml出力するようにした – shokaiの日記

結果は巨大なkmlになるので、Rails標準搭載のWEBrickだときつい。でかいときはhttpサーバーをmongrelに換える。

MongrelでRailsをデプロイ – shokaiの日記

apache2のサブディレクトリをmongrelで起動してるrailsにプロキシする – shokaiの日記

■4.GoogleEarthで移動する毎に検索するkmlを作る

GoogleEarthの表示を作っているkmlは、静的な表示だけでなく、NetworkLinkタグで別のKMLの内容をURLを指定して読み込める。さらにViewRefleshModeをonStopにすると、画面の移動が止まった時に再読み込みできる。

再読込時に、視点の緯度経度を[lookatLat][lookatLon]で取得できるので、

lat=[lookatLat]&lon=[lookatLon]

としてNetworkLinkで読み込むkmlのURLの後ろにくっつけてやる事で、GETパラメータになる。

GoogleEarthで表示している場所の緯度経度から検索する – shokaiの日記

■5.mongrelでRailsを動かして、apache2のサブディレクトリに見えるようにする

デプロイ。

4まではMac OSX上でやって、ここからは大学院棟に置いたUbuntuに移し替えた。RailsをSQLite+Mongrel環境で動かして、URLをapacheで隠すようにすると、Railsプロジェクトのディレクトリをそのまま移し替えるだけでほぼ動くので超楽。

Flickrのgeotag写真を検索する – shokaiの日記

apache2のサブディレクトリをmongrelで起動してるrailsにプロキシする – shokaiの日記

MongrelでRailsをデプロイ – shokaiの日記

Mongrel入れる – shokaiの日記

———–

こんな感じで、クローラの実装と、バックエンドのサービスとしてAPIを吐くためのRails、というのを覚えた。

今まで戦略的に「長い時間をかけたインタラクション」をするモノや、「データを共有した複数のモノと人とのインタラクション」を作る事を避けていたんだけど(ややこしくてプロトタイピングできないものは作らない方針なので)

Rails使うとサクサクとこのぐらいまではいけるようになったので、自分の得意なフィジカルなデバイス作成と合体させて何か新しい物を作る予定。

0

MakerFaire BayArea 2008に出展してきた

s.h.log Maker Faire Bay Area 2008に出展しますでも書いたxtelとそれを使った作品例を展示しに、サンフランシスコ郊外のサンマテオまで行ってきた。

写真もいっぱい撮った

MakerFaierBayArea2008tour – a set on Flickr

DSCF2125

Editor’s Choiceをもらいましたよ!やりましたね!!

(何個か他のブースでも見かけたので、一等賞というわけではないみたい)

Editor's Choice

日本のMake界隈は、どちらかというとハッカー(ソフトウェアの)、スラド、ニコニコ界隈のアレゲな雰囲気が強い気がするけど、アメリカのMakeは10号の表紙の様に

Make:10 : Technology on Your Time (Make: Technology on Your Time)
Oreilly & Associates Inc

売り上げランキング: 60270

おたくっぽいオヤジと子供が一緒に何か作って展示してるイベント、という感じ。

DSCF2071



DSCF2016

とにかくデカい。色々と。

こういうのを趣味でやろうとしても、日本の庭のサイズだと無理だな。

DSCF2010

DSCF2049DSCF2047

DSCF2064

DSCF2003

DSCF2079

DSCF2108DSCF2105

あと、chumbyを買った。石澤さんと栗林さんも買った。

DSCF2115

そして、chumby下部の謎の空間に・・・

DSCF2117

xtel基盤が入ったーーーー!!

DSCF2118

なんかchumbyで作るかな

0

MakerFaireに来た

火が出るマシンがありました。まつげが焼ける。とても楽しい。