daemonfreaks.com

chumbyでasahi.comのニュースを表示するウィジェット

posted by jun-g at Tue, 04 Nov 2008 00:33 JST

先日chumbyを購入しまして、早速asahi.comのニュースを表示するウィジェットを作ってみました。

まだ日本語が表示できないようなので、CGI側でニューステキストから画像を生成し、Flash側でその画像を横スクロールで表示するようにしてみました。

まずはCGI側。gdを使ってテキストを画像化します。news.cgiという名前で保存して適当なサーバに置きましょう。crossdomain.xmlも忘れずに。

#!/usr/bin/env python
# coding: utf-8

from cStringIO import StringIO
import random
import sys
import urllib2
from xml.etree.ElementTree import ElementTree

import gd


FEED_URL = "http://rss.asahi.com/f/asahi_newsheadlines"
WIDTH = 320
HEIGHT = 240
FONT_SIZE = int(HEIGHT * 0.8)
FONT_NAME = "ipag.ttf"


def _get_news():
    f = urllib2.urlopen(FEED_URL)
    dom = ElementTree(file=f)
    f.close()
    news = list()
    titletag = "{http://purl.org/rss/1.0/}title"
    for item in dom.getiterator()[1:]:
        if item.tag == titletag:
            text = item.text
            if text.startswith(u"AD:"):
                continue
            news.append(item.text)
    return random.choice(news)


def main():
    news = _get_news()
    width = int(HEIGHT * len(news) * 1.07) + (WIDTH * 2)

    img = gd.image((width, HEIGHT))
    color_white = img.colorAllocate((255, 255, 255))
    color_black = img.colorAllocate((0, 0, 0))

    img.fill((0, 0), color_white)
    img.string_ttf(FONT_NAME, FONT_SIZE, 0,
        (WIDTH + 1, HEIGHT - int((HEIGHT - FONT_SIZE) / 2)),
        news.encode("euc-jp", "replace"), color_black)

    f = StringIO()
    img.writeJpeg(f, 20)
    f.seek(0)
    sys.stdout.write("Content-type: image/jpeg\n")
    sys.stdout.write("\n")
    sys.stdout.write(f.read())
    f.close()


if __name__ == '__main__':
    main()

次はActionScript。showNewsImage.asという名前で保存。適当なサンプルを見ながら勢いで書いたので変な事してるところがあるかも。ツッコミ歓迎。

class ShowNewsImage {

    private var mcName:String = "NewsImage";
    private var imageURL:String = "http://example.com/cgi-bin/news.cgi";
    private var displayWidth:Number = 320;
    private var intervalId:Number = 0;

    public function ShowNewsImage(mc:MovieClip) {
        loadImage(mc);
    }

    private function loadImage(mc:MovieClip) {
        mc.createEmptyMovieClip(mcName, mc.getNextHighestDepth());
        var mcl:MovieClipLoader = new MovieClipLoader();
        var listener:Object = new Object();
        var me:ShowNewsImage = this;
        listener.onLoadInit = function(lmc:MovieClip) {
            lmc._x = 0;
            lmc._y = 0;
            me.intervalId = setInterval(me, "onTick", 10);
        }
        mcl.addListener(listener);
        mcl.loadClip(imageURL, mc[mcName]);

    }

    private function onTick():Void {
        if (_root[mcName]._width + _root[mcName]._x - 5 < displayWidth) {
            clearInterval(intervalId);
            loadImage(_root);
            return
        }
        _root[mcName]._x += -5;

    }

    static function main() {
        var app:ShowNewsImage = new ShowNewsImage(_root);
    }

}

でもってコンパイル。MTASCを使用。

$ mtasc -swf showNewsImage.swf -main ./showNewsImage.as -header 320:240:12

swfが出来たらprofile.xmlを作って一緒にUSBメモリに入れ、chumbyに突っ込んでブート。

これですべて上手く行くと思ったんですが…以下の問題が。

  • PC上のブラウザで見るよりスクロールがかなり遅い
  • 画像が途中で切れる?

画像が切れる問題はFlashPlayerでも再現しました。swfdec-playerだと問題ないんですが…。

続きはまた来週。

Flex勉強中

posted by jun-g at Mon, 04 Feb 2008 02:14 JST

WineのおかげでWindows版Firefox2+Flash9も動くようになったので、ダラダラとFlexの勉強中。開発環境は、FreeBSD + Flex2SDK(日本語版) + FlexCompilerShell + vim。

最初のお題として、電卓を作ってみた。

肝心の計算ロジックはevalでごまかそうと思ってたのに、AS3ってevalが使えないみたいで自前でゴリゴリ書くハメになった。そして勢いで書いたらグダグダなコードになった…。うーん…、ま、いいか。

次は動きのあるUIとか、サーバと連系する何かとか作ってみよう。