変更点

・記事リストの上部分に余白を多目に取った（ここにオリジナルなロゴを置いたりするといいと思うよ！）
・TOP10と全記事の切り替えをラジオボタンからタブに切り替えた（わかりやすいね！）
・デザインがちょっとiPodTouch風（COOLだね！）
・背景スキン（gjbg.gif）を透過gifにすれば角丸な形にも（可愛いね！）

うーん、これくらいかな？

gjrank2.zip

上に一式入っています。
背景画像のサイズは160*360ピクセル。
gibj.gifのファイル名でswfと同ディレクトリに置いておけば読み込んで背景に表示するので、変更もOKです。

設置方法はgjrank2_ok.htmlの記述中の

http://hoge.com/gj/gjrank2.swf

の部分は先ほどアップロードしたgjrank2.swfのURLを、

http://hoge.com/gj/log/gj.xml

の部分はあなたのGJ！のログファイル中にあるgj.xmlを指定してください。

それ以外はコピぺでOK！

んで、つけるとこんな感じになります。

当然要Flash9です。お気に召しましたらどうぞ。

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版
	アドビシステムズ 2008-03-14 売り上げランキング : 2426 Amazonで詳しく見る by G-Tools

Flashからタイムラインの概念を取っ払って、UIの構築に特化したものだという。

どうも、がりがりコードを書くことを生業とする者にとって、このFlash独自のタイムラインという概念がどうにも取っ付きづらく、プログラマーにFlashを作らせると、マウスでカチカチ、マウスでカチカチ、何フレーム目にこの画像を出してとかああ、もう面倒くせえ、コード書かせろよ！生のコードをよ！となる。

最近ではjqueryとか使ってJavascriptでもけっこうな画面効果を付けられるようになっているけど、やっぱりそういって動き的なものはFlash（Flex)に一日の長がある。

が、前述したようにFlashが他のプログラム言語と比べて特殊な位置づけにあるため、けっこう手が出せなかったりする。

そこでFlex。タイムラインなんてものはとっぱらっている漢仕様なため、プログラマに優しい。

と言うわけで、早速いじってみた。

とりあえず、AdobeさんからFlexBuilder３の体験版をダウンロード。

６０日間は無料で使えるとの事なので、ここはありがたく使わせていただく。

Flex３はまだリリースされてそれほど経っていないようで書籍も少ない。

とりあえずこれを買ってきた。

Flex3.0SDKで学ぶActionScript3.0入門―プログラミングの基礎からAIRアプリケーションの作り方まで 佐藤 信正 メディア・テック出版 2008-04 売り上げランキング : 3437 おすすめ平均 Amazonで詳しく見る by G-Tools

具体的な例は少ないが、まあ、僕みたいにfunctionの書き方も判らない（function hoge（）  の後ろに返り値の型を書くなんて？！）人間にはちょうど良いんじゃないかな。

土日を使って速攻で作ったよ！

GJ!ランキング表示パーツ

width="160" height="270" name="gjrankF" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">

GJ!のXMLを吐くAPIを叩いて、それを表示させてみてます。

初めて触った僕で大体1日ちょっとでできた。

そのほとんどの時間がFlexの書式とかお作法を調べてたものだから、そのあたりをちゃんと理解できれば多分１０分くらいでできそう。すげえ！Flexすげえ！

サーバーサイドをRailsでガリガリかいて、InterfaceをFlexでシコシコかけばあら、あっというまにリッチ感溢れるインターフェースのWebアプリケーションのできあがりじゃあないですか。

これが基本無料で作れるんだから、最高だな、現代。

ちょっと面白そうなので、FlexBuilderを購入しようかと思います。もちろん、会社で（笑）。だって、3万円もするし。

しばらくはFlexのお勉強になりそうです。やるぞー！

＊パーツのほうはそのうち公開します。（需要があればソースも）

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版

FlexでのGJ！ランキング表示をちょっと変更してみました

FlexでUIを全て構築すればJavascriptから逃れられる、これで楽ができる。そう考えていた時期が僕にもありました。

結論、両方覚えなくてはならなくて覚えることが増えてしまいましたとさ。あるえ～？

http://hmlab.info/minor/products/gj/gjrank.zip

お使いの方は上記のzipを解凍後、ご自分のサイトにgjrank.swfをアップロードしてください。

gjbg.jpgは背景になります。そのままお使いならgjrank.swfと同じ場所にアップロードしてください。

オリジナルの背景にしたい場合、同じファイル名のものをアップロードすれば、Flashの起動時にその背景を読み込みます。サイズは160＊270固定です。

あとはブログ中で表示させたい箇所にgjrank_ok.htmlの記述を追加してください。

gjrank_ok.htmlの中の

http://hoge.com/gjrank.swf

の部分は先ほどアップロードしたgjrank.swfのURLを、

http://hoge.com/gj/log/gj.xml

の部分はあなたのGJ！のログファイル中にあるgj.xmlを指定してください。

パスは全て絶対パスです。

デフォルトで拍手数のトップ１０を読み込みます。ALLのラジオボタンを押すと全ての記事を表示します。

Flex、面白いんですけど、Flex３の資料がWebにあまりない・・・Adobeの本家のドキュメントが間違ってたりするし・・・困ったものです。

Flex 3 Cookbook Code-Recipes, Tips and Tricks for RIA Developers (Adobe Developer Library) Joshua Noble Todd Anderson Abey George

FLASHって、Javascriptなんかでアプリを作るのに比べたら、FLASH自身がブラウザごとの違いを吸収してくれるから問題は起こりにくいという認識でいたのだけれど、必ずしもそうでもないのか。FLASHに対する根拠の無い信頼、揺らぐ。

拍手アプリ用のFLASHで、ユーザーが設置した拍手をリスト化したXMLを取得してランキング表示をしようとしているんだけど、FLASHのブログパー
ツでそれを提供しようとした場合、当サイトのドメイン（hmlab.info）と、拍手アプリを設置しているブログ主のドメイン（hoge.comなど）
が異なるため、普通にはXMLを読みにはいけない。これがクロスドメイン。

それを超えるための手段としては以下の二つの手段がある

１　特定ドメイン（この場合hmlab.infoドメインからのアクセス）の通信を許可する記述を行ったcrossdomain.xmlを設置する
２　CGIでXMLを取得し、FLASHアプリ側へポストする。

一般的には１で問題ないのだけれど、設置するファイルが一つ増えてしまうのもなんだか美しくないし、もし万が一僕のサイトが引越しなんてことになった場合（予定は無いけど）、既に設置しているユーザーに記述変更を強いることになる。
なので今回は２を選択。ユーザーからのリクエストを受け、こちらのCGI（PHP）がユーザーのXMLを取得、FLASHに投げるという方法で実装しているんだけど、これがIEだけうまくXMLを取得できない。OperaもSafariもFFも問題ないって言うのに。

で、調査をしていくと、FLASHを設置するobjectタグの記述に問題があった。

<embed src=”http://hogehoge.swf?scrpath=****.php”>

とか書くところを

<embed src=”http://hogehoge.swf?scrpath=****.php”　l　>

「l」という、いらない一文字が加わっていたのだ。これが原因か。この「l」を削除したところIEでも問題なくリスト表示がされた。

いつもは表記ミスや文法エラーに寛容な印象のあるIE（それが元でトラぶることも多々）だが、この場合IEが厳格に表記ミスを見逃さなかったらしい。

つまり、FLASHに問題があったのではなくて、FLASH側に引数を渡すところでブラウザによる差異があったということ。ごめんよFLASH。君は悪くなかった。

いやもう完璧なケアレスミスというかタイプミス。
こんなことで１～２時間もウンウン考え込んでいた自分が情けない。

でも、普段「デキナイ子」の代表みたいに言われているIEに、こうした形でミスを指摘されると言うのはなんだかカチンとくるな。面白くない（笑）
多分IEを擬人化したらのびた君みたいな存在になるな。

「IEの癖に生意気だぞ！」
みたいな。

取り急ぎ、/com対応致しました。
人口が１０００以上でかつ街に何の問題も無い場合、家アイコンのリンク先が人口か商業の２択でランダムに選択されるように変更しています。
僕の町がまだ５００人にも満たないちょっと残念な感じの寒村なので自分の街では確認できませんでしたが、メガロポリスなビッグシティーでテストしたところ、ちゃんと/comオプションがついていたことを確認しております。

ブログパーツと言えばやはりFlash。
そう思ってここ二日ほどがんばってみた。
参考書も買ってきて、さんざGoogle先生にもお世話になったのだがどうにもこうにもしっくりこない。
参考書の通りにやっているにも関わらず望む結果が得られなかったりで、判らないというよりは腑に落ちてこないという感触だ。

作ろうとしているのはウェブＣｈｅｅｒｓから拍手ランキングをＸＭＬ化した結果を受け取り、それを表示するだけの至極単純なものなのに、二日かかってこの程度だ。PHPなら１時間でできそうなレベル。もどかしい事この上ない。

サイドバー左を参照。
なんとかリスト表示はできているものの、ひとつわからない点がある。

今回ＦＬＡＳＨで作成しているこのブログパーツの設置場所と、Cheersの拍手ログの設置場所のドメインが違う場合の処理の仕方がよくわからない。
いわゆるクロスドメイン。JavaScriptでもさんざ苦労させられている憎いあんちくしょう。

ブログパーツの設置されているドメインがAAA.com、XML側がXXX.jpの場合、crossdomain.xmlというファイルを置いて許可を与えることで、本来異なるドメイン間で通信できない仕様を持つFLASHが勘合符貿易的にその制限を越えられる。
という理解でいるのだが、これがうまくいかない。

同一ドメイン間では上の様にリストが表示されるのだが、ドメインが異なるとどうもうまくいかない。

crossdomain.xmlって、FLASH側じゃなく通信先（今回の場合XMLファイルがおいてある方、上で言うとXXX.jp）のファイルと同一ディレクトリにおいて置けばいいんだよね？それとも逆？
なにか間違ってるのかな・・・参考書通りにやっているんだけどなあ・・・やっぱり基礎からやんないと駄目かな。
ボタン作りとかアニメーションとか全部すっ飛ばして異ドメイン間のXMLのやり取りだもんなあ・・・いかんよなあ・・・

2008/01/30　追記

自己解決した！
やっぱり読み込むファイル（この場合XMLファイル）のあるほうのディレクトリに許可する記述をしたcrossdomain.xmlをおいて置けばOKだった！サンプル

FC2側にXMLファイルを置いて、同じディレクトリにcrossdomain.xmlを設置、HTMLからhmlab.info上においたFlashを呼び出し、XMLを読み込ませています。
crossdomain.xmlの中はhmlab.infoからHTTPポート（８０）のアクセスのみ許可しています。
これでこのランキングブログパーツをユーザーに提供できる可能性が出てきました。

crossdomain.xmlのサンプル

フラッシュダンス
	サントラ マイケル・センベロ アイリーン・キャラ マーキュリー・ミュージックエンタテインメント 1997-10-25 売り上げランキング : 72776 おすすめ平均 初めて観たダンス映画 映画も音楽もawesome! 20世紀の代表的映画音楽 Amazonで詳しく見る by G-Tools