Web動画表現 2010

Picasa Webアルバムを表示する(1)

January 12, 2011

今日の授業は、年末の課題として出題したPicasa Webアルバムにアップロードした画像をFlashから扱う方法について学んでいきます。今回の授業内容は、最終課題に直結しますので、しっかりと理解するようにしましょう。

Picasa WebアルバムをFlashに読みこむ準備

Picasa Webアルバムは、API (Application Program Interface – 開発の際に使用できる命令や関数の集合のこと) を用いてWeb経由で情報を取得したり検索したりといった様々な操作が可能となっています。Picasaで使用できるAPIの詳細な資料は下記のページに掲載されていて、この内容を理解することで、Piacasaに掲載された写真の情報を利用して様々なアプリケーションやWebサービスの開発が可能となります。

Picasa Web Albums Data API

しかし、このAPIをそのままFlashで使用するには、ある程度のプログラムの知識が必要となり、必ずしもFlashに最適化されたAPIとはいえません。

FlashからPicasa WebアルバムAPIを操作するのに便利なように、AS3で書かれたライブラリが開発されています。このAS3のライブラリを利用することで、より簡易にPicasaの情報をFlash(AS3)から利用できるになります。今回は以下のライブラリを利用します。

picasaflashapi – Project Hosting on Google Code

このページの「Dowlnloads」から「picasaflashapi-r421.swc」をダウンロードしてファイルを保存しておきます。

Picasa WebのユーザIDとアルバムIDを調べる

これからPicasaにアップロードしたWebアルバムの情報を取得するために、PicasaのアカウントとアルバムIDが必要となります。

まず写真をアップロードしたPicasa WebアルバムをWebブラウザで開きます。アルバムの一覧から使用するアルバムを選択し、アルバムの画面を開きます。

画面の左側に「RSS」というリンクが表示されるので、そのリンクをクリックしてRSSフィードを開きます。このRSSフィードのURLから、picasaのユーザIDとアルバムIDがわかります。例えば、RSSのURLが

http://picasaweb.google.com/data/feed/base/user/tadokoro/albumid/5560743918853662497?alt=rss&kind=photo&hl=ja

の場合は、ユーザIDは「tadokoro」、アルバムIDは「5560743918853662497」になります。つまりこのURLは

http://picasaweb.google.com/data/feed/base/user/[ユーザID]/albumid/[アルバムID]?alt=rss&kind=photo&hl=ja

となっています。このユーザIDとアルバムIDを記録しておきます。

Picasa Webアルバムの情報を取得する

まずは、APIを利用してPicasa Webアルバムの情報が取得できるか試してみます。以下の手順で制作します。

Flashファイル (AS 3.0) 形式でflaファイルを新規に作成、「index.fla」で保存
FLAファイルのドキュメントクラスの設定を「Main」にする
ActionScriot (AS) ファイルを新規に作成ファイル名を「Main.as」にしてFLAファイルと同じ場所に保存
先程ダウンロードしたpicasaflashapiのライブラリ「picasaflashapi-r421.swc」を、FLAファイルと同じ場所にコピー

これらの手順を終えたら、「Main.as」に以下の記述を記入します。

package {
    import sk.prasa.webapis.picasa.PicasaResponder;
    import sk.prasa.webapis.picasa.PicasaService;
    import sk.prasa.webapis.picasa.events.PicasaDataEvent;
    import flash.system.Security;
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;

    public class Main extends Sprite {
        //ユーザIDとアルバムIDを指定
        private var userID:String='tadokoro';
        private var alubumID:String='5560743918853662497';

        public function Main() {
            //クロスドメインポリシーファイルの読み込み
            Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
            init();
        }
        private function init():void {
            //Picasa APIのサービスを新規に生成
            var service : PicasaService = new PicasaService();
            //使用可能な画像サイズ一覧 (Pixel)
            //32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 
            //640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600

            //最大の幅
            service.imgmax="912";
            //サムネイルのサイズ
            service.thumbsize="64";
            //最大読込枚数
            service.max_results=100;
            //ユーザIDとアルバムIDを指定して、情報を読み込み
            var responder:PicasaResponder=service.photos.list(userID,alubumID);
            //情報の読込みが完了した際に発生するイベントリスナーの登録
            responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
        }

        //情報を読込み
        private function onCompleteHandler(picsData:PicasaDataEvent):void {
            trace('写真データ :' + picsData.data );
            trace('エントリー :' + picsData.data.entries);
            trace('写真総数 :' + picsData.data.entries.length);

            //個別の写真のデータを取得する
            for (var i:int = 0; i < picsData.data.entries.length; i++) {
                trace('-------------------------------------------------------');
                trace('写真NO : ' + i);
                trace('写真ID : ' + picsData.data.entries[i].id);
                trace('メディア : ' + picsData.data.entries[i].media);
                trace('写真のURL : ' + picsData.data.entries[i].media.content.url);
                trace('サムネイルURL : ' + picsData.data.entries[i].media.thumbnails[0].url);
                trace('写真のURL : ' + picsData.data.entries[i].media.content.url);
                trace('写真の幅 : ' + picsData.data.entries[i].gphoto.width);
                trace('写真の高さ : ' + picsData.data.entries[i].gphoto.height);
            }
        }
    }
}

Flashの「出力」画面にアルバムにアップロードした写真の情報が取得していることを確認できます。

(GET) http://photos.googleapis.com/data/feed/api/user/tadokoro/albumid/5560743918853662497
写真データ :[object AtomFeed]
エントリー :[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry],[object PhotoEntry]
写真総数 :22
-------------------------------------------------------
写真NO : 0
写真ID : http://photos.googleapis.com/data/entry/api/user/tadokoro/albumid/5560743918853662497/photoid/5560743958909231746
写真のURL : http://lh6.ggpht.com/_S9tCNvdm3tU/TSu7KyWvIoI/AAAAAAAAE3Q/6r-SUDLf76s/s912/DSC_0044.jpg
サムネイルURL : http://lh6.ggpht.com/_S9tCNvdm3tU/TSu7KyWvIoI/AAAAAAAAE3Q/6r-SUDLf76s/s64-c/DSC_0044.jpg
写真の幅 : 4928
写真の高さ : 3264
-------------------------------------------------------
写真NO : 1
写真ID : http://photos.googleapis.com/data/entry/api/user/tadokoro/albumid/5560743918853662497/photoid/5560744066139826450
写真のURL : http://lh4.ggpht.com/_S9tCNvdm3tU/TSu7RB0gKRI/AAAAAAAAE3U/WKxbZjpigdw/s912/DSC_0082.jpg
サムネイルURL : http://lh4.ggpht.com/_S9tCNvdm3tU/TSu7RB0gKRI/AAAAAAAAE3U/WKxbZjpigdw/s64-c/DSC_0082.jpg
写真の幅 : 4928
写真の高さ : 3264
-------------------------------------------------------
写真NO : 2
写真ID : http://photos.googleapis.com/data/entry/api/user/tadokoro/albumid/5560743918853662497/photoid/5560744129672119666
写真のURL : http://lh4.ggpht.com/_S9tCNvdm3tU/TSu7UufyBXI/AAAAAAAAE3Y/Vzg6F-NCPLw/s912/DSC_0087.jpg
サムネイルURL : http://lh4.ggpht.com/_S9tCNvdm3tU/TSu7UufyBXI/AAAAAAAAE3Y/Vzg6F-NCPLw/s64-c/DSC_0087.jpg
写真の幅 : 4928
写真の高さ : 3264
-------------------------------------------------------
写真NO : 3
写真ID : http://photos.googleapis.com/data/entry/api/user/tadokoro/albumid/5560743918853662497/photoid/5560744232728263106
写真のURL : http://lh3.ggpht.com/_S9tCNvdm3tU/TSu7auaR-cI/AAAAAAAAE3c/YBL6f5z83PI/s912/DSC_0132.jpg
サムネイルURL : http://lh3.ggpht.com/_S9tCNvdm3tU/TSu7auaR-cI/AAAAAAAAE3c/YBL6f5z83PI/s64-c/DSC_0132.jpg
写真の幅 : 4928
写真の高さ : 3264
...

アルバムのサムネイルを表示

では、取得した情報を活用して、画面上に写真を表示してみましょう。

まず初めに、サムネイルの画像一覧を画面に表示します。先程のサンプルで試したようにサムネイルのURLは「picsData.data.entries[i].media.thumbnails[0].url」で取得できています。このURLを前回おこなったLoaderクラスを使用して画面上に表示してみましょう。

package {
    import sk.prasa.webapis.picasa.PicasaResponder;
    import sk.prasa.webapis.picasa.PicasaService;
    import sk.prasa.webapis.picasa.events.PicasaDataEvent;
    import flash.system.Security;
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    
    public class Main extends Sprite {
        //ユーザIDとアルバムIDを指定
        private var userID:String='tadokoro';
        private var alubumID:String='5560743918853662497';

        public function Main() {
            //クロスドメインポリシーファイルの読み込み
            Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
            init();
        }
        private function init():void {
            //Picasa APIのサービスを新規に生成
            var service : PicasaService = new PicasaService();
            //使用可能な画像サイズ一覧 (Pixel)
            //32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 
            //640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600

            //最大の幅
            service.imgmax="912";
            //サムネイルのサイズ
            service.thumbsize="64";
            //最大読込枚数
            service.max_results=100;
            //ユーザIDとアルバムIDを指定して、情報を読み込み
            var responder:PicasaResponder=service.photos.list(userID,alubumID);
            //情報の読込みが完了した際に発生するイベントリスナーの登録
            responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
        }

        private function onCompleteHandler(picsData:PicasaDataEvent):void {
            for (var i:int = 0; i < picsData.data.entries.length; i++) {
                //サムネイルのURLをとりだし
                var thumbnailUrl:String=picsData.data.entries[i].media.thumbnails[0].url;
                //サムネイルを画面に表示する関数
                showThumbail(thumbnailUrl, (i%15)*64, int(i/15)*64);
            }
        }

        private function showThumbail(thumbnailUrl:String, posX:int, posY:int):void {
            //ローダーの画面の表示
            var imageLoader:Loader = new Loader();
            var imageURLreq:URLRequest=new URLRequest(thumbnailUrl);
            var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
            addChild(imageLoader);
            //サムネイルを画面に表示
            imageLoader.load(imageURLreq);
            //位置を補正
            imageLoader.x=posX;
            imageLoader.y=posY;
        }
    }
}

サムネイルをクリックすると拡大した写真を表示する

次にサムネイルをクリックすると、拡大した写真が表示されるようにプログラムを追加してみましょう。このプログラムでは、サムネイルのLoaderのnameプロパティに拡大画像のURLを格納しています。この工夫によってそれぞれのサムネイルから、クリックした際に拡大画像を表示するLoaderへURLが渡されるような仕組みになっています。

package {
    import sk.prasa.webapis.picasa.PicasaResponder;
    import sk.prasa.webapis.picasa.PicasaService;
    import sk.prasa.webapis.picasa.events.PicasaDataEvent;
    import flash.system.Security;
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    
    public class Main extends Sprite {
        //ユーザIDとアルバムIDを指定
        private var userID:String='tadokoro';
        private var alubumID:String='5560743918853662497';

        public function Main() {
            //クロスドメインポリシーファイルの読み込み
            Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
            init();
        }
        private function init():void {
            //Picasa APIのサービスを新規に生成
            var service : PicasaService = new PicasaService();
            //使用可能な画像サイズ一覧 (Pixel)
            //32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 
            //640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600

            //最大の幅
            service.imgmax="912";
            //サムネイルのサイズ
            service.thumbsize="64";
            //最大読込枚数
            service.max_results=100;
            //ユーザIDとアルバムIDを指定して、情報を読み込み
            var responder:PicasaResponder=service.photos.list(userID,alubumID);
            //情報の読込みが完了した際に発生するイベントリスナーの登録
            responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
        }

        private function onCompleteHandler(picsData:PicasaDataEvent):void {
            for (var i:int = 0; i < picsData.data.entries.length; i++) {
                var thumbnailUrl:String=picsData.data.entries[i].media.thumbnails[0].url;
                var contentUrl:String=picsData.data.entries[i].media.content.url;
                //サムネイルとコンテントのURLを引数に
                showThumbail(thumbnailUrl, contentUrl, (i%15)*64, int(i/15)*64);
            }
        }

        private function showThumbail(thumbnailUrl:String, contentUrl:String, posX:int, posY:int):void {
            var imageLoader:Loader = new Loader();
            var imageURLreq:URLRequest=new URLRequest(thumbnailUrl);
            var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
            addChild(imageLoader);
            imageLoader.load(imageURLreq);
            imageLoader.x=posX;
            imageLoader.y=posY;
            //nameプロパティをコンテントのURLにする
            imageLoader.name = contentUrl;
            //クリックすると拡大した写真をロードする
            imageLoader.addEventListener(MouseEvent.CLICK, clickHandler);
        }
        
        private function clickHandler(event:MouseEvent):void {
            //拡大した写真をロードする
            var imageLoader:Loader = new Loader();
            var imageURLreq:URLRequest=new URLRequest(event.target.name);
            var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
            addChild(imageLoader);
            imageLoader.load(imageURLreq);
            imageLoader.x=0;
            imageLoader.y=136;
        }
    }
}

写真の情報を表示する

さらにプログラムを改造して、写真のタイトル、クレジット、説明を表示するようにしています。

package {
    import sk.prasa.webapis.picasa.PicasaResponder;
    import sk.prasa.webapis.picasa.PicasaService;
    import sk.prasa.webapis.picasa.events.PicasaDataEvent;
    import flash.system.Security;
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    
    public class Main extends Sprite {
        //ユーザIDとアルバムIDを指定
        private var userID:String='tadokoro';
        private var alubumID:String='5560743918853662497';
        private var selectNum:int;
        
        //写真データ
        private var picasaData:PicasaDataEvent;

        public function Main() {
            //クロスドメインポリシーファイルの読み込み
            Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
            init();
        }
        private function init():void {
            //Picasa APIのサービスを新規に生成
            var service : PicasaService = new PicasaService();
            //使用可能な画像サイズ一覧 (Pixel)
            //32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 
            //640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600

            //最大の幅
            service.imgmax="912";
            //サムネイルのサイズ
            service.thumbsize="64";
            //最大読込枚数
            service.max_results=100;
            //ユーザIDとアルバムIDを指定して、情報を読み込み
            var responder:PicasaResponder=service.photos.list(userID,alubumID);
            //情報の読込みが完了した際に発生するイベントリスナーの登録
            responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
        }

        private function onCompleteHandler(_picasaData:PicasaDataEvent):void {
            picasaData = _picasaData;
            for (var i:int = 0; i < picasaData.data.entries.length; i++) {
                //サムネイルとコンテントのURLを引数に
                showThumbail(i, (i%15)*64, int(i/15)*64);
            }
        }

        private function showThumbail(num:int, posX:int, posY:int):void {
            //サムネール読込のベースとなるムービーを配置
            var thumbnailMc:MovieClip = new MovieClip();
            addChild(thumbnailMc);
            //ムービに情報を付加
            thumbnailMc.x=posX;
            thumbnailMc.y=posY;
            thumbnailMc.num = num;
            thumbnailMc.buttonMode = true;
            thumbnailMc.title = picasaData.data.entries[num].media.title;
            thumbnailMc.description = picasaData.data.entries[num].media.description;
            thumbnailMc.credit = picasaData.data.entries[num].media.credit;
        
            //Loaderを配置
            var imageLoader:Loader = new Loader();
            var imageURLreq:URLRequest=new URLRequest(picasaData.data.entries[num].media.thumbnails[0].url);
            var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
            thumbnailMc.addChild(imageLoader);
            imageLoader.load(imageURLreq);
            imageLoader.addEventListener(MouseEvent.CLICK, clickHandler);
        }
        
        private function clickHandler(event:MouseEvent):void {
            //拡大した写真をロードする
            var num:int = int(event.target.parent.num);
            var contentUrl:String = picasaData.data.entries[num].media.content.url
            var imageLoader:Loader = new Loader();
            var imageURLreq:URLRequest=new URLRequest(contentUrl);
            var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
            addChild(imageLoader);
            imageLoader.load(imageURLreq);
            imageLoader.x=0;
            imageLoader.y=136;
            
            //情報を表示する
            info.text = "title: " + event.target.parent.title
            + ", description: " + event.target.parent.description
            + ", credit: " + event.target.parent.credit;
            
        }
    }
}

BestMonty — 19 April 2018 20:20: I have noticed you don't monetize your website, don't waste your traffic, you can earn additional bucks every month because you've got hi quality content. If you want to know how to make extra money, search for: Ercannou's essential adsense alternative
Tomonori Kidela — 28 June 2011 02:18: CS5でもダメみたいです。型が見つからないか、コンパイル時定数ではありません：PicasaData.Event。
TRINITY — 09 April 2011 12:58: 追伸、ダウンロードしたflaがエラーで開かないのも有りました。MacOS10.4.11です。Picasa Webアルバムを表示する(3)の3番目ランダムに写真が出てくるもの結構気に入っているのですが・・。CS3ではダメなんでしょうね・・。
TRINITY — 09 April 2011 12:53: CS3で作成してますが、うまく行きません。設定は間違っていないはずなのですが、出力されません・・。