— boreal-kiss.com

Archive
Tag "Tumblr"

元ネタはFlash Player 10 Beta: 3D(注:動画)。これ中々面白いからFlash Player 10を使わずに作って展示したいんだけど、z軸方向をどう扱うのかが問題。普通にリサイズすれば同じ動きになるんだろうか。クリックで各画像にフォーカス、ダブルクリックでその画像のPermalinkへ飛びます。

[FLASH10]Tumblr Spiral
[FLASH10]Tumblr Spiral (要Flash Plaeyer 10)

以下ソース。テキストフィールド等の装飾品は除いています。

Main.as (メインクラス)

package {
    /*
    * Requires Flex SDK 3.0.1 or later to be compiled
    */
    import caurina.transitions.Tweener;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    [SWF(width="550",height="400",backgroundColor="0x0",frameRate="24")]

    public class Main extends Sprite{
        //Setting for Tumblr API
        private const IMG_SIZE:int = 75;
        private const USERID:String = "borealkiss";
        private const QUERY_NUM:int = 30;
        
        //Canvas
        private var container:Sprite;
        
        public function Main(){         
            container = new Sprite();
            container.x = stage.stageWidth/2;
            container.y = stage.stageHeight/2;
            addChild(container);
            
            //Query string for Tumblr API
            var str:String = "http://"+USERID+".tumblr.com/api/read?num="
                                +QUERY_NUM+"&type=photo";
            var loader:URLLoader = new URLLoader();
            loader.load(new URLRequest(str));
            loader.addEventListener(Event.COMPLETE,parseXML);
        }
        
        //XML parser
        public function parseXML(e:Event):void{
            var xmlData:XML = new XML(e.target.data);
            var imgURLs:Array = new Array();
            var postURLs:Array = new Array();
            
            for each (var ch1:XML in xmlData.posts.post){
                var postURL:String = ch1.attribute("url").toString();
                postURLs.push(postURL);
                for each (var ch2:XML in ch1.child("photo-url")){
                    if (ch2.attribute("max-width") == IMG_SIZE){
                        var imgURL:String = ch2.toString();
                        imgURLs.push(imgURL);
                    }
                }
            }
            makeFaces(imgURLs,postURLs,true);
        }
        
        private function makeFaces(aryImgURLs:Array,aryPostURLs:Array,
                                    flgNavigate:Boolean):void{
            
            //Radius of a spiral
            const RAD:Number = 250;
            
            for (var i:uint=0; i<aryImgURLs.length; i++){
                var f:FaceDoubleClick = new FaceDoubleClick(
                            aryImgURLs[i],aryPostURLs[i],flgNavigate);
                
                //Set photos along the spiral
                f.x = RAD*Math.cos(i*Math.PI/6);
                f.y = RAD*Math.sin(i*Math.PI/6);
                f.z = (aryImgURLs.length-i)*200;
                f.buttonMode = true;
                f.addEventListener(MouseEvent.CLICK,onClick);
                container.addChild(f);
            } 
        }
        
        private function onClick(e:MouseEvent):void{
            //Must be tuned upon image size
            var offsetX:Number = 270;
            var offsetY:Number = 190;
            var offsetZ:Number = 0;
            
            var sp:Sprite = Sprite(e.target);
            Tweener.addTween(container,{x:-sp.x+offsetX, y:-sp.y+offsetY, 
                                        z:-sp.z+offsetZ, time:1});
        }
    }
}

FaceDoubleClick.as

package{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.URLRequest;
    import flash.net.navigateToURL;
    import flash.system.LoaderContext;
    
    public class FaceDoubleClick extends Sprite{
        private var _url:String;
        private var _loader:Loader;
        private var flgNavigate:Boolean;
        
        public function FaceDoubleClick(imgURL:String,postURL:String = "null",
                                                flgNavigate:Boolean = false){
            _url = postURL;
            this.flgNavigate = flgNavigate;

            var context:LoaderContext = new LoaderContext(true);            
            _loader = new Loader();   
            _loader.load(new URLRequest(imgURL), context);
            _loader.contentLoaderInfo.addEventListener(Event.INIT,init);
            
            this.doubleClickEnabled = true;
            addEventListener(MouseEvent.DOUBLE_CLICK, doubleClick);
        }
        
        private function init(e:Event):void{
            //The image center will be placed on center
            var bmp:Bitmap = Bitmap(e.target.content);
            bmp.x = -bmp.width/2;
            bmp.y = -bmp.height/2;
            addChild(bmp);
        }
        
        private function doubleClick(e:MouseEvent):void{
            if (flgNavigate){
                navigateToURL(new URLRequest(_url));
            }
        }  
    }
}
Read More

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

Read More

完成品がこちら。どうだエロいだろう。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)

Read More

web閲覧時リアルタイムにTumblrにスクラップできる方法はないかと探していたら、Firefoxのプラグインに便利なのがあった。Tumblr限定っていうのがシンプルでいいかんじ。

  1. ここからTombloo.xpiをダウンロード
  2. Firefoxのツール > アドオン画面にTombloo.xpiをドラッグしてインストール

引用なんかもコピー&ペーストのノリで簡単にできるから、ついつい調子乗ってスクラップしてしまう。手軽になった分扱いには気をつけないとだな。Tumblrが楽しくなってきた。

こんな感じで、選択した文章で右クリックして「Share – Quote(J)」を選べばカンタンにでけた!
改行もちゃんと再現されるし、いうことないわん。

Tomblooで1ステップShare on Tumblr – Fjmo ))>D<(( omjF

[関連リンク]
borealkiss.tumblr.com

[追記(2008/04/13)]
インストールから使い方、機能一覧をまとめたwiki発見(TomblooUsage – tombloo – Google Code)。amazonアフィリエイトIDの設定、Flickrへの投稿、各種画像変換webサービスとの連携なんかもできるみたい。思っていたより高機能だな。

Read More

結論:SWFファイルで展示しとけ。

なんかはてなブックマークでイラスト作者とtumblrユーザー間の論争てのが盛り上がってるみたいだけど、話がまとまってないため全容が掴めず。関連記事のTumblr界隈におけるにゅーあきば問題についてを読む限り「何でも気軽にスクラップして皆で共有しよう」っていうtumblr独自の機能が災いしているらしく、その使用モラルに関わる部分でイラストの無断転載をした側、された側の言い分が色々書かれてる模様。

イラストサイトはほぼ100%無断転載を禁じる「牽制文」をサイトに掲げてある。でもこの牽制文が100%効果を発揮しないという事実はイラスト制作者も十分承知のはずでしょう。それにも関わらず、無断で転載される度に転載者ともめて気分を害するのは時間の無駄。しかも相手はその牽制文すら読んでいないアウトサイダーかもしれない。それならいっそ転載されにくい媒体の利用を考えて画像拡散の初動防止に努めた方がよっぽど生産的だと思うんだけど。

僕ならSWFファイル(FLASHファイル)にして展示する。FLASHが見れないユーザーなんて今じゃ皆無だし、FLASHファイルの作成は無料のソフトでできるはず。(例えば)JPGからSWFに変更するだけで無断転載は激減するはず(単純に右クリック保存ができないという意味)。さらに用心するなら、例えば表示したい画像をメインフレームの2フレーム目に描画しておいて1フレーム目に


if (_url != "http://blog.boreal-kiss.com/"){
stop();
}

とか書いとけば、http://blog.boreal-kiss.com/以外で表示できなくできる。さらに用心するならイラスト画像のはじっこにでもリンク付き署名ボタンでもつけときゃいい。直リンクされるのが嫌なら直リンクさせない設定をサーバーにすればいい(.htaccessを利用するとか)。スクリーンショットで画像化される可能性にしても、画像加工の工程が一つ増えるだけで無断転載はされにくいはずだ(まして画像を集めまくってる人がその労力を払うとは思えない)。こういう風にいくらでも無駄な争いを回避する方法があるのに、何故しない?争いを避けるのは本能だろう。

Read More