Flash で Flickr に写真をアップロードするサンプル(FlashCS3 + Action Script3)

| | コメント(0) | トラックバック(1)

ActionScriptFlickrUploadTest

FlashでFlickrの写真を表示させたり、スライドショーを作ったりするサンプルはたくさんあるのだけれども、Flickrに写真をアップロードしたかったのでas3flickrlib を使ってアップロードを試してみた。

サンプルswfのダウンロード
(FlickrUploadTest.zip)

※残念ながらwww.flickr.comのサーバーに"crossdomain.xml"がないので(api.flickr.comにはある。)swfをwebにアップした状態からはアップロードの処理がうまく動きませんでした。ローカルで実行してください。

1.as3flickrlibとas3corelibを用意

as3flickrlib as3flickrlib - Google Code
as3corelib as3corelib - Google Code

をそれぞれ用意する。

2007年12月3日現在は写真アップロードをするための”com.adobe.webapis.flickr.methodgroups.Upload.upload();"
が今のダウンロードできるバージョンではメソッド自体がないことが判明。しかたないので、as3flickrlibに関しては、SVNから最新版を取得した。

取得したas3flickrlibとas3corelibはソースディレクトリにcomディレクトリ以下を配置するか、Flash CS3のコンパイラにパスを通しておく。

これで下準備は完了。

2.Flickrの認証の仕方
My first Apollo App – Flickr Sets viewer « The FlexWinds blogの認証部分のコードを参考にFlickrの認証の手順の流れのコードを書いた。 Thanks Pavan Podila. :-)

a.b.c.で手順を説明

a.Flickrの認証はapi keyとsecretを送信してfrobを取得。

private static  var API_KEY:";
private static var SECRET:";

_service=new FlickrService(API_KEY);
_service.secret=SECRET;
_service.addEventListener(FlickrResultEvent.AUTH_GET_FROB,onAuthGetFrobHandler);
private function onAuthGetFrobHandler(event:FlickrResultEvent):void {
if (event.success) {
//forbの処理が成功したら
myTrace("AuthGetFrobに成功");
//forbを保存
_frob=event.data.frob;
} else {
myTrace("AuthGetFrobに失敗");
myTrace("APIKEYとSECRETを確認してください");
trace(event);
}
}
public function startAuth():void {
_service.auth.getFrob();
}
startAuth();


b.ユーザーがブラウザでAPIKEYを認証する。
public function getLoginUrl(frob:String,permission:String):String {
return _service.getLoginURL(frob,permission);
}

//Tokenの認証はブラウザで行うのでブラウザを開く
myTrace("ブラウザでFlickrの認証開始");
var authUrl:String=this.getLoginUrl(_frob,AuthPerm.WRITE);
navigateToURL(new URLRequest(authUrl),"_blank");


c.frobを送ってtokenを入手
public function getAuthToken(frob:String):void {
_service.auth.getToken(frob);
}
private function updateServiceCredentials(authResult:AuthResult):void {
myTrace("トークンとパーミッションのアップデート");
_service.token=authResult.token;
_service.permission=authResult.perms;
}
_service.addEventListener(FlickrResultEvent.AUTH_GET_TOKEN,onGetAuthTokenHandler);

private function onGetAuthTokenHandler(event:FlickrResultEvent):void {
if (event.success) {
//成功したら
myTrace("GetAuthTokenに成功");
//この後はトークンとパーミッションを_serviceに反映させる
var authResult:AuthResult=event.data.auth;
this.updateServiceCredentials(authResult);
} else {
myTrace("GetAuthTokenに失敗");
myTrace("ブラウザで認証を完了してください");
trace(event);
}
}
getAuthToken(_frob);


3.写真のアップロード
写真のアップロードは簡単で、Uploadオブジェクトを認証済みのFlickrServiceオブジェクトを引数に生成してuploadメソッドにファイルリファレンスオブジェクトを渡してあげればOK。

uploadメソッドのドキュメントはないが、as3flickrlibのソースコードから、


upload(
fileReference:FileReference,//UPする写真
title:String = "",//タイトル
description:String = "",//ディスクリプション
tags:String = "",//タグ
is_public:Boolean = false,//全体に公開するかどうか?
is_friend:Boolean = false,//友人までの公開にするかどうか?
is_family:Boolean = false //家族までの公開にするかどうか?
)

であることがわかるのでいろいろなオプションも指定できることがわかる。

ここではファイルの名前も渡してタイトルも指定している。

upload= new Upload(_service);
upload.upload(pFile,pFile.name);

以下ソースコード


package {
import fl.controls.Button;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.net.*;
import flash.events.*;
import flash.events.Event;
import flash.events.MouseEvent;
/**
* as3flickrlib(http://code.google.com/p/as3flickrlib/)のインポート
*(2007/12/03現在は as3flickrlibはSVNのバージョンを使用しないとUpload.upload()メソッドが使えない。
* as3flickrlibの使用にはas3corelib(http://code.google.com/p/as3corelib/)も必要。
*/
import com.adobe.webapis.flickr.FlickrService;
import com.adobe.webapis.flickr.events.FlickrResultEvent;
import com.adobe.webapis.flickr.AuthResult;
import com.adobe.webapis.flickr.AuthPerm;
import com.adobe.webapis.flickr.methodgroups.*;

public class main extends Sprite {
public var _service:FlickrService;
//Flickrのページから自分のAPIKEYとSECRETを入手してここに変数として定義する
private static var API_KEY:";
private static var SECRET:";
private var _frob:String;
public var upload:Upload;
private var pFile:FileReference;
public function main() {
//FlickerServiceオブジェクトの生成
_service=new FlickrService(API_KEY);
_service.secret=SECRET;
//ファイルリファレンスオブジェクトの生成
pFile = new FileReference();
//Event listeners
_service.addEventListener(FlickrResultEvent.AUTH_GET_FROB,onAuthGetFrobHandler);
_service.addEventListener(FlickrResultEvent.AUTH_GET_TOKEN,onGetAuthTokenHandler);
//
bt1.addEventListener(MouseEvent.CLICK,function(e:MouseEvent){startAuth()});
bt2.addEventListener(MouseEvent.CLICK,function(e:MouseEvent){getAuthToken(_frob);});
bt3.addEventListener(MouseEvent.CLICK,function (e:MouseEvent){fileSelect();});
bt4.addEventListener(MouseEvent.CLICK,function (e:MouseEvent){startUpload();});
//ステージに置いたボタンの初期化に自分の初期化イベントを追加する。
bt2.addEventListener (Event.ADDED,function(e:Event){bt2.enabled=false;bt2.removeEventListener(Event.ADDED,arguments.callee);});
bt3.addEventListener (Event.ADDED,function(e:Event){bt3.enabled=false;bt3.removeEventListener(Event.ADDED,arguments.callee);});
bt4.addEventListener (Event.ADDED,function(e:Event){bt4.enabled=false;bt4.removeEventListener(Event.ADDED,arguments.callee);});
//ファイルリファレンスにイベントリスナー追加
pFile.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadCompleteHandler);
pFile.addEventListener(ProgressEvent.PROGRESS, progressHandler);
pFile.addEventListener(Event.CANCEL,function(e:Event){bt4.enabled=false});
pFile.addEventListener(Event.SELECT,fileSelectHandler);
//
}
/**
* 認証用のログインページのURLを取得
*/
public function getLoginUrl(frob:String,permission:String):String {
return _service.getLoginURL(frob,permission);
}
/**
* 認証を開始
*/
public function startAuth():void {
_service.auth.getFrob();
}
/**
* getTokenを開始
*/
public function getAuthToken(frob:String):void {
_service.auth.getToken(frob);
}
/**
* トークンとパーミッションのアップデート
*/
private function updateServiceCredentials(authResult:AuthResult):void {
myTrace("トークンとパーミッションのアップデート");
_service.token=authResult.token;
_service.permission=authResult.perms;
}
/**
* AuthGetFrobの結果を処理するハンドラ
*/
private function onAuthGetFrobHandler(event:FlickrResultEvent):void {
if (event.success) {
//forbの処理が成功したら
myTrace("AuthGetFrobに成功");
//forbを保存
_frob=event.data.frob;
//Tokenの認証はブラウザで行うのでブラウザを開く
myTrace("ブラウザでFlickrの認証開始");
var authUrl:String=this.getLoginUrl(_frob,AuthPerm.WRITE);
navigateToURL(new URLRequest(authUrl),"_blank");
//ブラウザの認証後にOKボタン(getAuthToken)の実行をユーザーにさせる。
myTrace("ブラウザで認証した後にOKをクリックしてください");
bt2.enabled=true;
bt1.enabled=false;
} else {
myTrace("AuthGetFrobに失敗");
myTrace("APIKEYとSECRETを確認してください");
trace(event);
}
}
/**
* GetAuthTokenの結果を処理するハンドラ
*/
private function onGetAuthTokenHandler(event:FlickrResultEvent):void {
if (event.success) {
//成功したら
myTrace("GetAuthTokenに成功");
//この後はトークンとパーミッションを_serviceに反映させる
var authResult:AuthResult=event.data.auth;
this.updateServiceCredentials(authResult);
bt2.enabled=false;
bt1.enabled=false;
bt3.enabled=true;
} else {
myTrace("GetAuthTokenに失敗");
myTrace("ブラウザで認証を完了してください");
trace(event);
}
}
/**
* アップロードを開始
*/
public function startUpload() {
upload= new Upload(_service);
upload.upload(pFile,pFile.name);
bt3.enabled=false;
bt4.enabled=false;
myTrace("UP中");
}
/**
* アップロードが完了したときに実行されるハンドラ
*/
function uploadCompleteHandler(e:DataEvent) {
var resultXML:XML= new XML(e.data);
myTrace("up完了 写真のIDは"+resultXML.photoid);
progress.text="";
bt3.enabled=true;
bt4.enabled=true;
}
/**
* アップロード中に実行されるハンドラ
*/
private function progressHandler(event:ProgressEvent):void {
var pfile:FileReference = FileReference(event.target);
if (event.bytesLoaded!= event.bytesTotal) {
progress.text=("ファイルの名前:" + pfile.name + "\nアップしたサイズ:" + event.bytesLoaded + "\n写真のサイズ:" + event.bytesTotal);
} else {
progress.text=("ファイルの名前:" + pfile.name + "\nアップロードしたファイルの検証中");
}
}

/**
* ファイルを選択するダイアログを実行
*/
public function fileSelect() {
pFile.browse(getTypes());
}

/**
* セレクトできるファイルの種類を指定
*/
private function getTypes():Array {
var allTypes:Array=new Array(getImageTypeFilter());
return allTypes;
}
private function fileSelectHandler(e:Event) {
myTrace("選択したファイル:"+pFile.name);
if (_service.token!="") {
bt4.enabled=true;
}
}
/**
* セレクトできるファイルの種類のオブジェクトを生成
*/
private function getImageTypeFilter():FileFilter {
return new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)","*.jpg;*.jpeg;*.gif;*.png");
}

/**
* UIに値を表示
*/
public function myTrace(param:String) {
textArea.text=param + "\n" + textArea.text;
}
}
}

ソースコード一式(ZIP)

トラックバック(1)

このブログ記事を参照しているブログ一覧: Flash で Flickr に写真をアップロードするサンプル(FlashCS3 + Action Script3)

このブログ記事に対するトラックバックURL: http://www.hatayan.org/mt/mt-tb.cgi/562

» アクションスクリプトお姉さんの家でAS3勉強会をしてきたよ(ゆーすけべー日記)~のトラックバック

Flashを操作できるプログラミング言語、アクションスクリプト。 昔5年くらい前にVersion1.5を結構いじっていたことがあったんだけど、 AS3(... 続きを読む

コメントする

このブログ記事について

このページは、hatayanが2007年12月 3日 04:58に書いたブログ記事です。

ひとつ前のブログ記事は「WINDOWS XPでアクティブウィンドウのスクリーンショット SysRq」です。

次のブログ記事は「1981 忘年会OFF@shibuyaにいってきました」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.01