blog Boreal Kiss

結論：画像20枚2M程度だとあんまかわらん。

別ドメインの画像を読み込む場合のLoaderクラスについていくつかメモ。詳細はAS で別ドメインの画像を読み込むときの注意点 - てっく煮ブログが参考になる。

• クロスドメインポリシーファイル(crossdomain.xml)の設定に無関係に画像のロードは可能。(その後の画像の扱いにかかわらず必ずload()を行う)
• 画像を画像として扱う(ただ画像を表示する)場合にはcrossdomain.xmlによる許可は必要ない。つまりどこの画像であろうと表示は可能。
• 画像をデータとして扱う(サイズを変更するetc.)場合にはcrossdomain.xmlの許可が必要。
• デフォルトでcrossdomain.xmlを読まない。(URLLoaderクラスは読む)

Loaderクラスを用いて別ドメインの画像をデータとして扱う方法は以下の二種類。どちらもロード完了後、(crossdomain.xmlで許可されている場合)画像データにアクセスが可能になる。

1. Security.loadPolicyFile()関数でcrossdomain.xmlを読み込ませ、swfファイルに許可があることを知らせてからロードを始める。(実際にはcrossdomain.xmlを読み込むまでロードは自動待機)

//E.x., media.tumblr.com
Security.loadPolicyFile("http://media.tumblr.com/crossdomain.xml");
var loader:Loader = new Loader();
var req:URLRequest = new URLRequest("http://media.tumblr.com/xxx.jpg");
loader.load(req);

2. LoaderContextクラスのcheckPolicyFileプロパティを用いて、ロードごとにcrossdomain.xmlを読むよう指示する。

var context:LoaderContext = new LoaderContext(true);
var loader:Loader = new Loader();
var req:URLRequest = new URLRequest("http://media.tumblr.com/xxx.jpg");
loader.load(req, context);

上記二種の違いは、ロード前にcrossdomain.xmlを読み込ませるか、ロードごとにcrossdomain.xmlを読み込ませるかの違いでなので、画像のロード数が増えると両者の実行速度に差がでてくるのではないかと予想される(Security.loadPolicyFile()を使った方が早そう)。実際に調べてみた。以下はFirefoxのキャッシュを消去してからmedia.tumblr.comの画像20枚(1.7M)を読み込ませた結果をFirebugで表示したもの。左列に読み込んだファイル名一覧、右側にそれぞれ表示完了までにかかった時間が表示されている。

1. Security.loadPolicyFile()関数を用いた場合 (11.75s)



2. LoaderContextクラスを用いた場合 (13.21s)

Security.loadPolicyFile()関数で一回だけcrossdomain.xmlを読み込んだ場合の方が完了が早くなっているが、実験のインターネット環境がよくないのであまり信用しないでください。場合によってはLoaderContextクラスでロードごとにcrossdomain.xmlを読み込ませる場合の方が早かったりもしたのでなんともいえない。結論としては両者に大差なし。というかLoaderContextクラスを用いた場合でも二回目以降同じcrossdomain.xmlの読み込みはキャッシュ化されてるから差がでてないのかもしれない。面白いのは上記二つの方法でcrossdomain.xmlをロードするタイミングが異なること。Security.loadPolicyFile()関数を用いた場合全画像をロード後、LoaderContextクラスを用いた場合画像ロード前にcrossdomain.xmlが読み込まれていて、イメージと逆なので不思議。日本の安定している快適なインターネット環境で誰か実験するのを期待しつつ、以下実験のソースコード。

package {
    import flash.display.Sprite;
    import flash.display.Loader;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.system.LoaderContext;
    import flash.system.Security;

    public class LoadTest extends Sprite {
        public function LoadTest() {

            // 20 sexy images from media.tumblr.com
            var URLs:Array = [
            "http://media.tumblr.com/rJ6tpU7iW6y88so6TV84T1IG_500.jpg",
            "http://media.tumblr.com/z5Ki84RwK7e6bfe7zaGZCGUR_500.jpg",
            "http://media.tumblr.com/F2GLxhk3c6×444v1vma5BvIX_500.jpg",
            "http://media.tumblr.com/1gOzmif8i8oz2hz9GJ68aqBc_500.jpg",
            "http://media.tumblr.com/ky9cwXAKO8pyvjydMxesdNtr_500.jpg",
            "http://media.tumblr.com/7MmWU7n9s8l2gik4NKAlJjev_500.jpg",
            "http://media.tumblr.com/kcq2O9G2O8nggwncmiXj5Q8Z_500.jpg",
            "http://media.tumblr.com/5Vq1ESVSU8mn4n9raQLSFR6q_500.jpg",
            "http://media.tumblr.com/5Vq1ESVSU8mmwc4gekPbI9tl_500.jpg",
            "http://media.tumblr.com/0hxKQCklp2vdfmjiczTJn7v4_500.jpg",
            "http://media.tumblr.com/5Vq1ESVSU8mmtx38rZpmce95_500.jpg",
            "http://media.tumblr.com/0hxKQCklp2vdeqr003dmPyAo_500.jpg",
            "http://media.tumblr.com/0hxKQCklp4amrjwdD250Zy02_500.jpg",
            "http://media.tumblr.com/0hxKQCklp5kgx39bYjGWw6tB_500.jpg",
            "http://media.tumblr.com/0hxKQCklp6hoyaquSCmhzDXR_500.jpg",
            "http://media.tumblr.com/0hxKQCklp5xcqrjwzCIQggYR_500.jpg",
            "http://media.tumblr.com/0hxKQCklp6iz6is1QQJOQpi2_500.jpg",
            "http://media.tumblr.com/0hxKQCklp7swil3bMb5BHmae_500.jpg",
            "http://media.tumblr.com/FXGYbGlnr2pn7ftwSjgoCUtC_500.jpg",
            "http://media.tumblr.com/rJ6tpU7iW7smq0v5T9rpyo7w_500.jpg"];

            //loadModule1(URLs);
            loadModule2(URLs);

        }

        private function loadModule1(imgAry:Array):void{
            //Include crossdomain.xml from media.tumblr.com, once.
            Security.loadPolicyFile("http://media.tumblr.com/crossdomain.xml");

            var loaderAry:Array = new Array();

            for (var i:int=0; i<imgAry.length; i++){
                var loader:Loader = new Loader();
                var req:URLRequest = new URLRequest(imgAry[i]);
                loader.load(req);
                loader.contentLoaderInfo.addEventListener(Event.INIT,init);
                loaderAry.push(loader);
            }
        }

        private function loadModule2(imgAry:Array):void{
            var loaderAry:Array = new Array();

            for (var i:int=0; i<imgAry.length; i++){
                var loader:Loader = new Loader();
                var req:URLRequest = new URLRequest(imgAry[i]);

                //Include crossdomain.xml per image (i.e., 20 times)
                var context:LoaderContext = new LoaderContext(true);
                loader.load(req,context);
                loader.contentLoaderInfo.addEventListener(Event.INIT,init);
                loaderAry.push(loader);
            }
        }

        private function init(e:Event):void{
            addChild(e.target.content);
        }
    }
}

Tumblrに自分がポストした画像最新6件を表示するブログパーツ。Papervision3Dのせいなのかよくわからんけどある程度のマシンパワーが必要みたいなので実用度は高くないかも。各面をクリックでそのポストURLへとびます。

[FLASHブログパーツ]Tumblr Cube

完成品がこちら。どうだエロいだろう。PHPで作る必要があるのかと言われると、うーん。たぶんJavaScriptオンリーでTumblr情報取得->画像表示とするのがスマートなのかな。

以下ファイルを設定・実行すると画像表示に必要なhtml(下記例では”photo_table.php”)を書き出すので、それを表示したい場所にincludeすればOK。書き出しを定期的に自動で行わせたい場合はCRON等を使用。下記コードではLightbox2の利用を想定しているので、書き出したファイルのimgタグ内にrel=”lightbox”という属性が付く。不要であれば適宜除去。XML解析にはSimpleXMLというモジュールを使用しているのでPHP5以上が必要。

ファイルの設定箇所

1. TumblrのUSERIDを設定(http://USERID.tumblr.com)
2. 取得ポスト数を設定
3. ポストの種類を設定(フォトギャラリーを作成するなら再設定不要)
4. ギャラリーのサムネイルサイズを設定(75, 100, 250, 400, 500のみ)
5. サムネイルクリックで表示される画像サイズの設定(75, 100, 250, 400, 500のみ)
6. 書き出しファイルの名前(と必要であればファイルパス)。デフォルトでは同じディレクトリに作成。ファイル書き出しを行うので書き出し先ディレクトリに書き込み権限を与えることを忘れずに。

<?php

//(1) Set your Tumblr ID
define(‘USER_ID’, ‘borealkiss’);

//(2) Set the maximum item number
define(‘MAX_NUM’, ‘30′);

//(3) Set the post type.
//You don’t need to change as long as you are making a photo gallery.
define(‘POST_TYPE’, ‘photo’);

//(4) Choose the thumbnail size of each image (75,100,250,400, or 500)
define(‘THUMBNAIL_SIZE’, ‘75′);

//(5) Choose the image size in the gallery (75,100,250,400, or 500)
define(‘GALLERY_SIZE’, ‘400′);

//(6) Define a file name for image tabels
define(‘FILENAME’, ‘photo_table.php’);

$fp_out = fopen(FILENAME, ‘w’);
$req1 = ‘num=’.MAX_NUM;
$req2 = ‘type=’.POST_TYPE;
$req_url = ‘http://’.USER_ID.‘.tumblr.com/api/read?’.$req1.‘&’.$req2;
$xml = simplexml_load_file($req_url);

foreach ($xml->posts->post as $post){

    //get the attribute
    $permalink = $post[‘url’];

    foreach ($post->{‘photo-url’} as $url){
        foreach ($url->attributes() as $key=>$value){

            if ($key == ‘max-width’ && $value == GALLERY_SIZE){
                fwrite($fp_out, ‘<a href="’.$url.‘" rel="lightbox" title="’.$permalink.‘">’);
            }
            else if ($key == ‘max-width’ && $value == THUMBNAIL_SIZE){
                fwrite($fp_out, ‘<img src="’.$url.‘" border="0"/></a>’);
            }
        }
    }
}

fclose($fp_out);
?>

[関連リンク]
Tumblr API reference (JP)

ただ古い曲をアップしても面白くないので、酷似している二曲を聴き比べしてみよう。アメリカ(1993)とドイツ(1975)の作品。「盗作」と言うと聞こえが悪いので、「オマージュの度合いが著しい」ことにする。簡単な曲紹介文も付けてあるので是非その耳でジャッジしてみてください。

»»» Muxtape

ブログパーツでFLASHを別ドメインで表示させる時、読み込み外部ファイルがある場合はそのファイルのロケーションをURLで指定しないといけない(相対パス不可)。URLでの指定はディレクトリの変更があった場合に柔軟に対処できないので極力避けたい。じゃあSWFに埋め込んでしまおうと思い、XMLファイルの埋め込み方法で悩んだ。FlexのEmbedメタタグはデフォルトでXML形式のデータを理解しないので、形式を気にせずとりあえず読み込ませてその後XMLに強制変換してやる必要がある。

埋め込みに使用する MIME タイプは application/octet-stream として指定する必要があります。これにより、バイトデータは、解釈されずにそのまま埋め込まれます。

mx.core.ByteArrayAsset （Flex 3）- adobe

ソース内部で型を変換できるタイプのデータだったらなんでもいけるっぽい。XMLデータ埋め込みの例は以下の通り。

package {
    public class myClass{

        [Embed(source="mydata.xml", mimeType="application/octet-stream")]
        private var myData:Class;

        public function myClass(){
            var myXML:XML = new XML(new myData());
        }
    }
}