fotologue の RSS からサムネイル画像を読み込む

flikr から画像を読み込んでるサンプルを見かけるけど、fotologue バージョンは見かけないので、サンプルを作ってみた。

フォームにアカウント名を入力し、Connect ボタンを押すとサムネイル画像がロードされます。

処理過程

1. URLLoader で proxy 用 CGI に RSS のURI を渡す
2. proxy 用 CGI から RSS を読み込む
3. RSS を E4X で解析し、画像のURIを取得（thumbnail 要素の url 属性の値など）
4. 取得した URI から Loader で画像を読み込む
5. 位置を調整して画像を表示する

fotologue の RSS を読み込む

fotologue は flickr と違い外部ドメインから XML を読み込めないため、Ruby で proxy を書いてそこから XML を読み込むようにした。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*.fotologue.jp" />
</cross-domain-policy>

proxy 用の CGI はこんな感じ。初 Ruby。Ruby の書式を見ていると、卒論で書いてた ALGOL を思い出す。

#!/usr/local/bin/ruby

require 'open-uri'
require 'cgi'

begin
    print "Content-type: text/plane\n\n"
    input = CGI.new
    data = input['data']
    if /^https?\:\/\// =~ data
        open(data, "r") do |file|
            print file.read
        end
    else
        print "Requested URI is wrong."
    end
end

var proxy:String = "http://hogehoge.com/proxy.cgi?data=";
var url:String = "http://fotologue/[アカウント名]/rss.xml";
var urlLoader:URLLoader = new URLLoader(new URLRequest(proxy + url));
urlLoader.addEventListener(Event.COMPLETE, function(evt:Event):void {
    try {
        //RSSの解析
    } catch (error:TypeError) {
        //RSSをロードできない場合
    }
});

RSS の解析と 画像の URI の抽出

fotologue の RSS には、RSS スキーマと 2 つの名前空間が指定されている。全ての要素にアクセスするためには、3つの名前空間を宣言してやる必要がある。

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:fotologue="http//schemas.fotologue.jp/rss" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:media="http://search.yahoo.com/mrss" version="2.0">

default xml namespace = "http//schemas.fotologue.jp/rss";
namespace creativeCommons = "http://backend.userland.com/creativeCommonsRssModule";
namespace media = "http://search.yahoo.com/mrss";
use namespace creativeCommons;
use namespace media;

EventListener 内で RSS の解析を行う。

//RSSをロードする
var rss:XML = new XML(urlLoader.data);
//thumbnail要素のurl属性の値を配列に格納
var thumbnailUrls:Array = new Array();
for each (var element:XML in rss.channel.item.thumbnail) {
    thumbnailUrls.push(element.@url.toString());
}
//サムネイルの縦横の長さを取得
thumbnailWidth = rss.channel.item[0].thumbnail.@width;
thumbnailHeight = rss.channel.item[0].thumbnail.@height;

サムネイル画像のロード

サムネイル画像の URI 取得後、更に EventListener 内で各画像をロードする。

loadImage(thumbnailUrils);

ロード後に表示位置の調整も行う。

private function loadImage(list:Array):void
{
    var len:int = list.length;
    var currentLength:Number = 10;
    for (var i:int = 0; i < len; i++) {
        var loader:Loader = new Loader();
        loader.load(new URLRequest(list[i]));
        this.addChild(loader);
        //表示位置の調整
        loader.x = currentLength;
        loader.y = 10;
        currentLength += thumbnailWidth + 10;
    }			
}

感想

fotologue には他ドメインからのアクセス（as）が許可されていないため、as 単体では不可能ですが、僕みたいに proxy 経由でアクセスすれば自分専用 fotologue ブログパーツもできるはずです。ただ、アクセスが制限されているということは、そういう目的での利用は想定されていないということなので、もし利用するのであれば自分がアップロードした画像のみに留めておくべきなんでしょうね。

ソースを以下に載せておきます。proxy と RSS のアカウント名を変更してお試し下さい。

• FotologueImageLoadSample.zip