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だと問題ないんですが…。

続きはまた来週。