Disqusというコメントシステムがとても良い

TechCrunch Japan の記事を読んでいたら、記事の末尾にあるコメントシステムがソーシャルメディアと連動して、とても良くできている。最後まで読んでいくと、「blog comments powered by DISQUS」という表記があった。早速このリンクを辿っていくと、DisqusというWebサービスのよう。

これは便利そうということで、さっそくyoppa.orgにも取り入れてみた。このサイトはWord Pressで作成しているのだが、DisqusのインストールはWordPressのプラグインとしても提供されているので、とてもに簡単に導入可能だ。具体的な方法は、下記の記事を参照した。

• WordPressにコメントシステムのDisqusを導入した | ueblog

基本は、Disqusでユーザ登録した後で、コメントシステムを導入したBlogを登録し、あとはWorpressのプラグインをダウンロードして、Wordpressの管理画面からインストールする。その後、Wordpressに表示される指示に従ってプラグインの設定をするだけ。実際に作業してみたところ、登録から実際に稼動するまで10分もかからなかった。

このコメントシステムを導入するだけでだけで、コメントの投稿、承認、スパム処理だけでなく、Twitter、Facebook、Friendfeed、Yahooなど様々なSNSと連携してくれる。何と便利な！ 投稿画面のデザインも良い。

より詳細なDisqusの利点については、Lifehacking.jpのエントリーがとてもわかりやすく、参考になる。

• Lifehacking.jp V2 に移行しました！ | Lifehacking.jp

最近、Googleが正式にTwitterやFacebookからのリンクを検索結果に反映していると明かしたらしい。ということは、これからはいかにソーシャルなメディアから参照されるかというのが重要な時代になっていきそうだ。しばらくはこの状態で実験していこうかと思う。

Disqusテスト

このサイトのコメント欄を、Disqusっていうなんだか高機能なものに変えてみたので、テスト投稿。

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

今日の授業では、引き続きPiacaウェブアルバムを使用したフォトギャラリーの制作について解説します。

先週の授業では、写真の表示と情報の表示までを行いましたが、今回はこの仕組みをさらに応用して、よりフォトギャラリーらしいFlashムービーになるようにデザインしていきます。

サムネイルと、拡大画面をデザインする

前回のサンプルでは、サムネイルと拡大画像はLoaderを画面に配置して、そこにPicasaからダウンロードしてきた画像を配置していただけでした。この状態ではデザインの工夫をするにも限界がありました。

このサンプルでは、サムネイルと拡大画像のためにFLAファイルのライブラリに2つのムービークリップシンボルを作成しています。

• Thumbnail – サムネイル画像を表示するためのMovieClipシンボル。書き出しクラス：Thumbnail
• PhotoZoom – 拡大写真画像を表示するためのMovieClipシンボル。書き出しクラス：PhotoZoom

この2つのムービークリップを、サムネイル、拡大画像を表示する際にまず読み込んで土台として使用します。また、それぞれのムービークリップには、タイトルの表示欄や、説明の表示欄がダイナミックテキストとして配置されているので、情報を読み込んで適切な場所に表示することが可能となっています。

[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′;
private var selectNum:int;
//Pivasa APIサービス
private var service:PicasaService;

//写真データ
private var picasaData:PicasaDataEvent;

public function Main() {
//クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
init();

//ステージ設定(ブラウザ全画面表示)
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
}

private function init():void {
//Picasa APIのサービスを新規に生成
service = 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="800";
//サムネイルのサイズ
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;
var slideRowCount:int = stage.stageWidth / (int(service.thumbsize) + 12);
for (var i:int = 0; i < picasaData.data.entries.length; i++) {
//サムネイルとコンテントのURLを引数に
showThumbail(i, (i%slideRowCount)*76 + 4, int(i/slideRowCount)*90 + 4);
}
}

private function showThumbail(num:int, posX:int, posY:int):void {
//サムネール読込のベースとなるムービーを配置
var thumbnailMc:Thumbnail = new Thumbnail();
addChild(thumbnailMc);
//ムービに情報を付加
thumbnailMc.x=posX;
thumbnailMc.y=posY;
thumbnailMc.num=num;
thumbnailMc.buttonMode=true;
thumbnailMc.media=picasaData.data.entries[num].media;
trace(thumbnailMc.media);
thumbnailMc.title=picasaData.data.entries[num].media.title;
thumbnailMc.description=picasaData.data.entries[num].media.description;
thumbnailMc.credit=picasaData.data.entries[num].media.credit;
//サムネイルにタイトル表示
thumbnailMc.titleText.text=thumbnailMc.title;

//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.loader.addChild(imageLoader);
imageLoader.load(imageURLreq);
//クリックで拡大画像表示;
imageLoader.addEventListener(MouseEvent.CLICK, clickThumbnailHandler);
}

private function clickThumbnailHandler(event:MouseEvent):void {
var thumbnailMc:Thumbnail=event.target.parent.parent;
//ズーム表示のベースとなるムービーを配置
var photoZoomMc:PhotoZoom = new PhotoZoom();
addChild(photoZoomMc);
photoZoomMc.backScreen.width=stage.stageWidth;
photoZoomMc.backScreen.height=stage.stageHeight;
photoZoomMc.x=int(stage.stageWidth/2);
photoZoomMc.y=int(stage.stageHeight/2);
photoZoomMc.buttonMode=true;

//拡大した写真をロードする
var num:int=int(thumbnailMc.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;
photoZoomMc.addChild(imageLoader);

//拡大画像のローダー配置
imageLoader.load(imageURLreq);
imageLoader.x=- thumbnailMc.media.content.width/2;
imageLoader.y=- thumbnailMc.media.content.height/2;

//場所と大きさを写真にあわせて補正
photoZoomMc.photobase.width=thumbnailMc.media.content.width+20;
photoZoomMc.photobase.height=thumbnailMc.media.content.height+60;
photoZoomMc.photobase.y=20;

//写真のタイトルと説明を表示
photoZoomMc.titleText.text=thumbnailMc.title;
photoZoomMc.descriptionText.text=thumbnailMc.description;

//クリックで消去
photoZoomMc.addEventListener(MouseEvent.CLICK, clickZoomHandler);
}

private function clickZoomHandler(event:MouseEvent):void {
removeChild(event.target.parent);
}
}
}
[/sourcecode]

動作デモ

応用1：サムネイルをランダムに配置

最初の例では、サムネイル画像をタイル状にきれいに配置していました。この例ではサムネイルの表示で少し工夫しています。

サムネイルを読み込んだら、ランダムな場所と角度で画面に撒き散らすように配置しています。さらにサムネイルにドロップシャドウのフィルターを適用することで立体的に重なっているように見せています。これらの工夫により、机の上に写真をばら撒いたような効果を演出しています。

サムネイルにマウスでロールオーバーすると、最前面に表示されるように設定しています。また、最初の例と同様にサムネイル写真をクリックすると、拡大写真が表示されます。

[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.*;
import flash.filters.*;

public class Main extends Sprite
{
//ユーザIDとアルバムIDを指定
private var userID:String = ‘tadokoro’;
private var alubumID:String = ‘5560743918853662497’;
private var selectNum:int;
//Pivasa APIサービス
private var service:PicasaService;

//写真データ
private var picasaData:PicasaDataEvent;

public function Main()
{
//クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
init();

//ステージ設定(ブラウザ全画面表示)
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}

private function init():void
{
//Picasa APIのサービスを新規に生成
service = 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.thumbsize = "120";
//拡大写真のサイズ
service.imgmax = "800";

//最大読込枚数
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;
var slideRowCount:int = stage.stageWidth / (int(service.thumbsize) + 12);
for (var i:int = 0; i < picasaData.data.entries.length; i++)
{
//ランダムな場所に配置
var randX:int = Math.random()*stage.stageWidth/1.6 + stage.stageWidth/8;
var randY:int = Math.random()*stage.stageHeight/1.6+ stage.stageHeight/8;
showThumbail(i, randX, randY);
}
}

private function showThumbail(num:int, posX:int, posY:int):void
{
//サムネール読込のベースとなるムービーを配置
var thumbnailMc:Thumbnail = new Thumbnail();
addChild(thumbnailMc);
//ムービに情報を付加
thumbnailMc.x = posX;
thumbnailMc.y = posY;
thumbnailMc.num = num;
thumbnailMc.buttonMode = true;
thumbnailMc.media = picasaData.data.entries[num].media;
trace(thumbnailMc.media);
thumbnailMc.title = picasaData.data.entries[num].media.title;
thumbnailMc.description = picasaData.data.entries[num].media.description;
thumbnailMc.credit = picasaData.data.entries[num].media.credit;
//ドロップシャドウ
thumbnailMc.filters = [new DropShadowFilter(0,0,0×000000,0.6,8,8,0.5,3)];
//サムネイルにタイトル表示
thumbnailMc.titleText.text = thumbnailMc.title;
//ランダムに傾ける
thumbnailMc.rotation = Math.random() * 60 – 30;

//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.loader.addChild(imageLoader);
imageLoader.load(imageURLreq);

//ロールオーバーで最前面に
imageLoader.addEventListener(MouseEvent.ROLL_OVER, rolloverThumbnailHandler);

//クリックで拡大画像表示;
imageLoader.addEventListener(MouseEvent.CLICK, clickThumbnailHandler);
}

private function rolloverThumbnailHandler(event:MouseEvent):void
{
addChild(event.target.parent.parent);
}

private function clickThumbnailHandler(event:MouseEvent):void
{
var thumbnailMc:Thumbnail = event.target.parent.parent;
//ズーム表示のベースとなるムービーを配置
var photoZoomMc:PhotoZoom = new PhotoZoom();
addChild(photoZoomMc);
photoZoomMc.backScreen.width = stage.stageWidth;
photoZoomMc.backScreen.height = stage.stageHeight;
photoZoomMc.x = int(stage.stageWidth / 2);
photoZoomMc.y = int(stage.stageHeight / 2);
photoZoomMc.buttonMode = true;

//拡大した写真をロードする
var num:int = int(thumbnailMc.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;
photoZoomMc.addChild(imageLoader);

//拡大画像のローダー配置;
imageLoader.load(imageURLreq);
imageLoader.x = – thumbnailMc.media.content.width / 2;
imageLoader.y = – thumbnailMc.media.content.height / 2;

//場所と大きさを写真にあわせて補正
photoZoomMc.photobase.width = thumbnailMc.media.content.width + 20;
photoZoomMc.photobase.height = thumbnailMc.media.content.height + 60;
photoZoomMc.photobase.y = 20;

//写真のタイトルと説明を表示
photoZoomMc.titleText.text = thumbnailMc.title;
photoZoomMc.descriptionText.text = thumbnailMc.description;

//クリックで消去
photoZoomMc.addEventListener(MouseEvent.CLICK, clickZoomHandler);
}

private function clickZoomHandler(event:MouseEvent):void
{
removeChild(event.target.parent);
}
}
}
[/sourcecode]

動作デモ

応用2：アニメーションで演出

さらに応用したサンプルを作成します。サムネイルが表示される際や、拡大画像を表示する際に、場所や透明度をアニメーションしながら表示するようにしています。

アニメーションの効果には、Tweenライブラリを使用しています。これは、変化させる対象と変化に要する時間を指定すると簡単にアニメーションを作成してくれるライブラリです。詳細は、「Webアニメーション」の授業の「Tweenライブラリの利用(1)」「Tweenライブラリの利用(2)」を参照してください。

[sourcecode language=”as3″]
package
{
import com.greensock.*;
import com.greensock.easing.*;
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.*;
import flash.filters.*;

public class Main extends Sprite
{
//ユーザIDとアルバムIDを指定
private var userID:String = ‘tadokoro’;
private var alubumID:String = ‘5560743918853662497’;
private var selectNum:int;
//Pivasa APIサービス
private var service:PicasaService;

//写真データ
private var picasaData:PicasaDataEvent;

public function Main()
{
//クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
init();

//ステージ設定(ブラウザ全画面表示)
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}

private function init():void
{
//Picasa APIのサービスを新規に生成
service = 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.thumbsize = "120";
//拡大写真のサイズ
service.imgmax = "800";

//最大読込枚数
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;
var slideRowCount:int = stage.stageWidth / (int(service.thumbsize) + 12);
for (var i:int = 0; i < picasaData.data.entries.length; i++)
{
//ランダムな場所に配置
var randX:int = Math.random() * stage.stageWidth / 1.2 + stage.stageWidth / 24;
var randY:int = Math.random() * stage.stageHeight / 1.2 + stage.stageHeight / 24;
showThumbail(i, randX, randY);
}
}

private function showThumbail(num:int, posX:int, posY:int):void
{
//サムネール読込のベースとなるムービーを配置
var thumbnailMc:Thumbnail = new Thumbnail();
addChild(thumbnailMc);
//ムービに情報を付加
thumbnailMc.x = stage.stageWidth / 2;
thumbnailMc.y = stage.stageHeight + 100;
thumbnailMc.num = num;
thumbnailMc.buttonMode = true;
thumbnailMc.media = picasaData.data.entries[num].media;
trace(thumbnailMc.media);
thumbnailMc.title = picasaData.data.entries[num].media.title;
thumbnailMc.description = picasaData.data.entries[num].media.description;
thumbnailMc.credit = picasaData.data.entries[num].media.credit;

//アニメーションしながら表示
TweenLite.to(thumbnailMc, 1, {delay:num*0.2, x:posX, y:posY, rotation:Math.random() * 90 – 45, ease:Expo.easeOut});
//ドロップシャドウ;
thumbnailMc.filters = [new DropShadowFilter(0,0,0×000000,0.6,8,8,0.5,3)];
//サムネイルにタイトル表示
thumbnailMc.titleText.text = thumbnailMc.title;

//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.loader.addChild(imageLoader);
imageLoader.load(imageURLreq);

//ロールオーバーで最前面に;
imageLoader.addEventListener(MouseEvent.ROLL_OVER, rolloverThumbnailHandler);

//クリックで拡大画像表示;
imageLoader.addEventListener(MouseEvent.CLICK, clickThumbnailHandler);
}

private function rolloverThumbnailHandler(event:MouseEvent):void
{
addChild(event.target.parent.parent);
}

private function clickThumbnailHandler(event:MouseEvent):void
{
var thumbnailMc:Thumbnail = event.target.parent.parent;
//ズーム表示のベースとなるムービーを配置
var photoZoomMc:PhotoZoom = new PhotoZoom();
photoZoomMc.backScreen.width = stage.stageWidth;
photoZoomMc.backScreen.height = stage.stageHeight;
photoZoomMc.backScreen.alpha = 0;
photoZoomMc.x = int(stage.stageWidth / 2);
photoZoomMc.y = int(stage.stageHeight / 2);
photoZoomMc.buttonMode = true;
photoZoomMc.alpha = 0;
addChild(photoZoomMc);

//ドロップシャドウ
photoZoomMc.filters = [new DropShadowFilter(0,0,0×000000,0.6,8,8,0.5,3)];

//アニメーションしながら拡大
TweenLite.to(photoZoomMc, 1, {alpha:1.0});
TweenLite.to(photoZoomMc.backScreen, 3, {delay:1.0, alpha:1.0});

//拡大した写真をロードする
var num:int = int(thumbnailMc.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;
photoZoomMc.addChild(imageLoader);

//拡大画像のローダー配置;
imageLoader.load(imageURLreq);
imageLoader.x = – thumbnailMc.media.content.width / 2;
imageLoader.y = – thumbnailMc.media.content.height / 2;

//場所と大きさを写真にあわせて補正
photoZoomMc.photobase.width = thumbnailMc.media.content.width + 20;
photoZoomMc.photobase.height = thumbnailMc.media.content.height + 60;
photoZoomMc.photobase.y = 20;

//写真のタイトルと説明を表示
photoZoomMc.titleText.text = thumbnailMc.title;
photoZoomMc.descriptionText.text = thumbnailMc.description;

//クリックで消去
photoZoomMc.addEventListener(MouseEvent.CLICK, clickZoomHandler);
}

private function clickZoomHandler(event:MouseEvent):void
{
removeChild(event.target.parent);
}
}
}
[/sourcecode]

動作デモ

サンプルファイルのダウンロード

今日とりあげたサンプルは下記からダウンロードすることができます。

• Web動画表現2011/1/19サンプル

2010年度 オンラインポートフォリオ

バナー一覧

名前と学籍番号

• 11046001 : 安部　裕子
• 11046003 : 石井　美千子
• 11046007 : 魚川　詩音
• 11046009 : 江川　佐和子
• 11046011 : 小川　奈津恵
• 11046013 : 片倉　麻友
• 11046015 : 金子　奈央
• 11046017 : 川口　真由
• 11046019 : 岸田　悠来
• 11046021 : 木村　紗央理
• 11046023 : 後藤　寛敬
• 11046025 : 櫻井　里美
• 11046027 : 實藤　亮介
• 11046029 : 鈴木　麻莉子
• 11046031 : 高橋　麻実
• 11046033 : 多田　蒼平
• 11046035 : 田辺　祥
• 11046037 : 玉木　洲太
• 11046039 : 戸田　叶夏
• 11046041 : 鳥井原　光二
• 11046043 : 子川　真里奈
• 11046045 : 端谷　優
• 11046047 : 橋本　今日子
• 11046049 : 半田　慎
• 11046051 : 藤川　理純
• 11046053 : 松迫　千陽
• 11046055 : 松田　靖子
• 11046057 : 光安　奈緒子
• 11046059 : 宮崎　万莉
• 11046061 : 茂木　絢子
• 11046063 : 森　勇馬
• 11046065 : 山本　野乃
• 11046067 : 吉田　裕紀
• 11046069 : 脇本　美穂
• 10946015 : 小田　伊織
• 11046002 : 池田　友里
• 11046004 : 伊藤　快
• 11046006 : 岩渕　真紀
• 11046008 : 宇佐美　結
• 11046010 : 岡本　絢子
• 11046012 : 片岡　朋子
• 11046014 : 片田　美晴
• 11046016 : 金子　友香
• 11046018 : KANG Jiyeon
• 11046020 : 木下　麦
• 11046022 : 古明地　拓郎
• 11046024 : 策　愛実
• 11046026 : 佐藤　えりか
• 11046028 : 末冨　祥予
• 11046030 : 関　知子
• 11046032 : 田島　かおり
• 11046034 : 田中　里咲
• 11046036 : 玉井　早希子
• 11046038 : 寺岡　麻李亜
• 11046040 : 冨岡　聖
• 11046042 : 中尾　祥羽子
• 11046044 : 根岸　里実
• 11046046 : 橋本　愛紀
• 11046048 : 長谷川　貴美
• 11046050 : 檜佐　佳子
• 11046052 : 堀米　茜
• 11046054 : 松下　賢太
• 11046056 : 三浦　礼
• 11046058 : 宮崎　世怜
• 11046060 : 室井　悠輔
• 11046062 : 森　亜由美
• 11046064 : 矢野　詩織
• 11046066 : 横山　香哉
• 11046068 : 盧　明徳
• 11046070 : 渡辺　実穂

Webサービスの利用 – 写真共有サービスを利用する 2

前回に引き続き、Picasa Webサービスを利用法について学びます。今回は、Picasaアルバムの写真を作成したWebページに埋め込む方法を解説します。この内容がそのまま最終課題に直結するので、きちんと理解するようにしてください。

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

今日の授業は、年末の課題として出題した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(‘メディア : ‘ + 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);
}
}
}
}
[/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]

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

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

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

[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 {
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;
}
}
}
[/sourcecode]

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

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

[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 {
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;
}
}
}
[/sourcecode]

写真の情報を表示する

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

[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′;
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;

}
}
}
[/sourcecode]