2009年2月 の日誌

出張で高松に来てます。観光で金毘羅山に行ってきましたがあいにくの空模様でした。

さぁ、べんきょうするぞ！

Flexで開発してていくつかハマりネタがありました。Flexはコンポーネントのプロパティが変わると連動して動作する様々な視覚効果がクラス化されていて、とても便利です。
たとえば非表示にする操作

this.visible = false;

この時少し変わった消え方をさせたいなら、同オブジェクトにエフェクトを設定してあげると任意の消え方をします。テレビ応援団では発言の噴出しは一定時間経過すると20秒かけてじょじょに消えていきます。ですから、噴出しコンポーネントには次のように設定してあります。


            Fade hideEffect1 = new Fade(this);
            hideEffect1.alphaFrom = 1.0;
            hideEffect1.alphaTo = 0.0;
            hideEffect1.duration = 20000;
            hideEffect1.easingFunction = hideEasingFunc;
            hideEffect1.addEventListener(EffectEvent.EFFECT_END, onHideEnd);
            this.setStyle("hideEffect", hideEffect1);

このように設定したうえで、visibleにfalseを設定すると、ゆっくりうっすらと消えていくような表示になります。
そこで、このゆっくり消える途中にキャンセル操作を入れようとしてハマりました。エフェクトが中断すると設定してある関数onHideEnd()が呼び出されるのですが、この関数内でのvisibleの値はtrueなのです。
エフェクトはプロパティが変化した後に発生するのではなく、プロパティが変わる前に呼び出され、エフェクトが完了したらプロパティの値が書き換わるわけですね。ですがら、中断したのか、正常終了したのかはonHideEnd()中ではわからないのです。

この問題に対処するために、プロパティが書き換わった後(onHideEnd終了後)にプロパティみなければ判定できません。
Flexはシングルスレッドイベントディスパッチモデルで動作していますので、任意の処理を後でディスパッチスレッドに実行してもらうという機能があります。

Application.application.callLater(onHideCanceled);

このcallLaterに関数を指定すると、現在のコンテキストが終了した後にディスパッチスレッドによってonHideCanceled関数が呼びだれれるわけです。
もちろんonHideCanceled関数内ではvisibleの値はfalseでした。

金曜の夜ですが、相変わらず開発作業に追われています。フロント側は年末年始で満足に遊べるくらい出来上がっていましたが、裏側の作業に着手しています。

開発して疲れた時はやはりおいしいものを食べるに限ります。そこで、東京の台所とも呼ばれている築地場外市場で海鮮丼をいただいてきました。

番組毎の盛上がりを後でグラフで見たい時のために、テンションカウンターの値でグラフを作成する管理機能を作ってみました。

チャートを簡 単に書くためにはFlexのチャートコンポーネントを使うか、RubyならGruffというチャート画像を描画するためのライブラリを用います。今回は画 像を生成してブログなんかに貼りたいという意見を採用したため、Gruffでチャートを描く機能を実装しました。

Gruffのインストールはこちら
http://d.hatena.ne.jp/con_mame/20081011


そのままですと、見た目が明らかにGruffという感じでイマイチなので表現についていろいろと調べてみました。

まずコンストラクタで線グラフと画像のサイズを決定

   g = Gruff::Line.new('1024x480')

タイトルやラベルなどを設定

    g.labels = labels
    g.title = '番組名'
    g.data("テンション値", tension_data)

設定したラベルに日本語を使った場合、デフォルトフォントだと表示されないので、日本語フォントを指定

    g.font = 'XXXXXXXXXXX.ttf'

ここからはスタイルです。フォントのサイズ等の指定

    g.title_font_size  = 15
    g.legend_font_size = 12
    g.legend_box_size  = 10
    g.marker_font_size = 11

線グラフの区切り毎に丸いドットが表示されるのですが、これを非表示にしたいばあいはこのように指定

    g.hide_dots = true

あとは、背景色などすべてのチャート共通のスタイルについてはthemeというプロパティにこのように設定していきます。

    g.theme = {
     :colors => %w(orange purple green white red),
     :background_colors => %w(blue #000066),
#     :background_image =>'XXXXXXXX.jpg',
     :font_color => 'white'
     }

このようにして生成されたグラフは次のような感じです。

　　 _,,....,,_　 ＿人人人人人人人人人人人人人人人＿
-''":::::::::::::｀''＞　　　ゆっくりしていってね！！！　　　＜
ヽ:::::::::::::::::::::￣^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^￣
　|::::::;ノ´￣＼:::::::::::＼_,. -‐ｧ　　　　　＿_　　 _____　　 ＿_____
　|::::ﾉ　　　ヽ､ヽr-r'"´　　（.__　　　　,´　_,, '-´￣￣｀-ゝ 、_ イ、
_,.!イ_　　_,.ﾍｰｧ'二ﾊ二ヽ､へ,_7　　　'r ´　　　　　　　　　　ヽ、ﾝ、
::::::rｰ''7ｺ-‐'"´　 　 ;　 ',　｀ヽ/｀7　,'＝=─-　　　 　 -─=＝',　i
r-'ｧ'"´/　 /!　ﾊ 　ハ　 !　　iヾ_ﾉ　i　ｲ　iゝ、ｲ人レ／_ルヽｲ i　|
!イ´ ,' |　/__,.!/　V　､!__ﾊ　 ,'　,ゝ　ﾚﾘｲi (ﾋ_] 　　 　ﾋ_ﾝ ).| .|、i .||
`! 　!/ﾚi'　(ﾋ_] 　　 　ﾋ_ﾝ ﾚ'i　ﾉ　　　!Y!""　 ,＿__, 　 "" 「 !ﾉ i　|
,'　 ﾉ 　 !'"　 　 ,＿__,　 "' i .ﾚ'　　　　L.',.　 　ヽ _ﾝ　　　　L」 ﾉ| .|
　（　　,ﾊ　　　　ヽ _ﾝ　 　人! 　　　　 | ||ヽ、　　　　　　 ,ｲ| ||ｲ| /
,.ﾍ,）､　　）＞,､ _____,　,.イ　 ハ　　　　レ ル｀ ー--─ ´ルﾚ　ﾚ´

ASCII コード とはあまり関係ないのに、なぜか AAと呼ばれるこれらの絵文字は、こうもり傘とミシンが解剖台の上で偶然に出会って生まれたような、実に混沌として美しい日本の文化だと思います。

• おみくじメーカー

楽しいサービスっていいですね！

「 てれび応援団 」では、様々な OSS (オープンソースソフトウェア)を利用させて頂いています。
低コストで柔軟性の高い多くの OSS がなければ、本サービスの実現は間違いなく不可能だったと言えるでしょう。

OSS の開発者のみなさんに深い敬意と感謝を捧げると共に、今後なんらかの形でフィードバックを心がけていきたいと考えています。

まずは簡単にできることとして、我々が利用している OSS を紹介してきたいと思います。今回は全ての基本となる OS から。