アーカイブ
chumby用ふぁぼったーwidget
ふぁぼったーのwidgetを作った。
ダウンロード → Favotter Widget (Flash AS2 / CS3)
■設定方法
今回もUSBメモリから起動するんだけど、特に設定項目も無いのでzipの中身をそのままUSBメモリに入れてchumbyに刺して、しばらくしてからchannel -> reloadで良い。
人気favと注目favをそれぞれ表示するために、swfが2つ入っている。
前のTwitter widgetと共存させるには、同梱のprofile.xmlを見れば2つのwidgetを読み込ませる設定の参考になると思う。widget_instanceのidが重複しないように注意。
■ダイナミックテキストにHTML表示とか
実装は、前のTwitter widgetの時とほぼ同じというか見た目を白黒にしただけなんだけど
ふぁぼったーのFeedにCDATAでHTMLが埋め込んであるので、せっかくなのでそれを利用する事にした所だけが違う。
FlashのダイナミックテキストのhtmlTextプロパティにHTMLを突っ込むと、そのままwebブラウザのようにレンダリングしてくれる。何のエンジンを使っているかは不明だけど、とりあえずそのまま突っ込んでみたらfont colorやimgは読み込めていた。
で、そのままだとchumbyの画面には文字が小さすぎるのでfont size=”22″ぐらいまで大きくしたいんだけどAS2に正規表現などがなかったのでsplitとstrReplaceでがんばった。
あとCDATA内のHTMLは＞が＆ｇｔ；のように実体参照になっているが、それを変換するメソッドがAS2に無かった。
無かったのだが、ダイナミックテキストのhtmlTextプロパティに代入してからtextプロパティから読み直すとなぜか変換されている事を発見、解決した。
chumbyで日本語TwitterにIPAフォントを埋め込んだ
Flashにフォントそのものを埋め込むのはライセンス的にどうなのかよくわからなかったのでchumbyで日本語twitterの時はswfの公開はしていなかったのだけど、IPAフォントならライセンス的にokだとわかったので埋め込んで再公開しました。
これでFlash CS3を持っていない人も、chumbyでTwitterを日本語で読めますね！！
ダウンロード → Chumby Twitter Widget (AS2 / Flash CS)
設定の仕方は変更無し。
s.h.log chumbyで日本語Twitterを読めるwidgetを作った
profile.xmlのusernumの数値を、自分のtimeline用に書き換える。これはtwitter上でのID。
twitter.com/homeで、自分のRSSフィードを見ると 123456.atom みたいな感じになっているので、その数値に書き換える。
intervalの秒数だけ、次の記事を読むまでwaitがかかる。デフォルトは8秒。
そしてUSBメモリから起動してください
ちなみにこないだchumby用に、PQI製の超小さいUSBメモリを買ったんだけど相性なのか、認識しなかった。MacBookでは普通に使えているので、財布にも入るサイズだし重宝してるけどどうしようかなあ…USBメモリが正直邪魔だ。
chumbyでLDR未読数を表示するwidget
LDR unread countがchumby.comのwidgetとして公開された。
Livedoor Readerのアカウント名を設定すると、未読数が表示されて焦らされるが、1万超えたあたりからどうでもよくなった。
アップロードしたwidgetは基本privateで、publicにした後審査が入ってwidgetsの検索画面から他のユーザに使ってもらえるようになる。今回はだいたい4時間ぐらいで審査が通ったみたい。
ダウンロード → SourceCode(Flash AS2 / CS3)
（うおお、前の記事書いてから1週間たってる・・・）
前のTwitter widgetより前に作って投稿してあったものなんだけど、これは数字が出るだけなので、Flash的にも手抜き。
Flashは手抜きだけど、chumby widget固有のノウハウである
１．クロスドメイン許可されていない外部のサーバーのデータを読みに行く
２．chumby.comにデータを保存できる設定画面を作る
３．chumby.comに保存したデータをwidgetから読み込む
という事をやってみたので、まとめておこう。
■１．クロスドメイン許可されていない外部のサーバーのデータを読みに行く
Livedoor Readerの未読数を取得するAPIを使う。
パラメータにuser=shokaishokaiなどすると未読数が出てくる。
特にXMLとかではないので、AS2の場合LoadVarsを使えば良い。
ローカルドメインで動かす分にはこれで構わないが、セキュリティの事もあってサーバーに置いてあるFlashは別のサーバーにあるデータを読みに行く事ができないようになっている。そのため、rpc.reader.livedoor.comを読みに行けない。前のtwitterで使ったXMLクラスなんかは例外。
そのため、大学院棟のサーバーにchumby.comからのアクセスを許可するcrossdomain.xmlを置いて、RubyでproxyするCGIを置いてそれをchumby上のFlashから読むようにした。
crossdomain.xml
*.chumby.com からのアクセスのみ許可すればよい
このサーバーにRuby適当に作ったproxyを置いて、Flashから読ませる。
これで外部ドメインのデータを読めるようになった。
■２．chumby.comにデータを保存できる設定画面を作る
widgetの管理画面で、設定値を入力するダイアログを出すようにした。
データはchumby.comに保存され、自作widgetがchumby上でロードされたしばらく後に設定値が_root直下の変数として現れるという仕様らしい。
この辺のドキュメントを参考にした。
- Developing widgets for chumby – ChumbyWiki
- Widget Parameter Example – ChumbyWiki
- Adobe – Developer Center : Developing widgets for Chumby with Flash Lite 3
サイズは320×240 pixelで、Sample Parameter Example(AS2)に同梱されてた com.Chumby.WidgetParams.as を使うのが楽らしいので作ってみた
→ configure.fla
まあ今回はユーザ名を保存するだけなのでサンプルを削っただけなんだけど、送信が終わったらgetURLでjavascriptを呼んで自分自身を閉じたりとかしていて面白い。
■３．chumby.comに保存したデータをwidgetから読み込む
chumby.comに保存されたデータは、widgetが画面に読み込まれてからしばらくたってから、_rootに現れる。
どうやら毎回読み込みに行っているらしい。
値が_rootに現れるまで待たないと、undefinedになってしまうので待つ。
this.onEnterFrame=function(){
if(username==null)return;//待ちます
ldr_loadUnread(username);
deletethis.onEnterFrame
}
こんな感じで、chumby+サーバーサイドができました。
chumbyで日本語Twitterを読めるwidgetを作った
chumbyは日本語フォントが入っていないので日本語が表示できないが、Flashの中のダイナミックテキストそのものにフォントを埋め込めば日本語が出せる。
ちょうどIMのAPIが動いてなかったので、twitterのfriends timelineを表示するchumby widgetを作ってみた。ただしフォントデータそのものを埋め込んで配布するのはライセンス的にまずそうなので、flaファイルのみの公開になります。自分の環境でコンパイルしてくださいIPAフォントを埋め込んで、swfも公開しました
ダウンロード → SourceCode (Flash CS3 / AS2)
（AS2が久しぶりすぎてやばかった）
ただしこの方法だとファイルサイズが100kb（chumby widgetの容量制限）を超えるので、USBから起動するしかない。
→ s.h.log chumbyで自作widgetをUSBメモリから起動する
■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テスターが役に立った。
- s.h.log Flash – XPath4AS2でXPathテスター
- s.h.log FlashでFlickr REST-APIを呼ぶ
- trick7.com blog: xfactorstudioの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++);
}
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を読み込まれる。
→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
最近のコメント