Web動画表現 2010

ActoinScript 3：画像ファイルをダウンロードして表示する

December 15, 2010

今日の授業は、年末の課題として出題した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」に以下の記述を記入します。

[sourcecode language=”as3″]
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(‘写真のURL : ‘ + picsData.data.entries[i].media.content.url);
trace(‘サムネイルURL : ‘ + picsData.data.entries[i].media.thumbnails[0].url);
trace(‘写真の幅 : ‘ + picsData.data.entries[i].gphoto.width);
trace(‘写真の高さ : ‘ + picsData.data.entries[i].gphoto.height);
}
}
}
}
[/sourcecode]

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

[sourcecode language=”as3″]
(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
…
[/sourcecode]