trace

EaselJSを試してみる

USK — Fri, 20 Apr 2012 09:43:00 +0000

そろそろ、って言ってもすでに遅いですが、HTML5ってことで、
ASライクに書けると噂のEaselJSを試してみた。

お試し、ということで、よくある、ボールをつまんで投げる、というもの。

ソース

AS2で言う、onEnterFrameは、tick部分で実装されるようです。
これは固定。
後、ドラッグの部分が少しややこしいですが、これは、上条さんの記事をそのまま使わせてもらいました。
EaselJS のマウスイベント処理 – akihiro kamijo

基本はほんとAS2ライクで、スラスラ書けます。
あとは、補完してくれるエディターがあれば、、。

以下、参考サイト
EASELJS
CreateJSを試す。 EaselJS編 Shapeクラス » Every day is Carnival

Flickrの写真をダウンロードするAirアプリを作ってみた

USK — Thu, 15 Dec 2011 03:53:09 +0000

タイトルの通り、Flickrの写真をダウンロードするAirを作ってみました。
なんの面白みもないものですが。
機能としては、自分と自分のコンタクトリストのユーザーの写真のみ、閲覧、ダウンロードが可能、
という、超限定的なものです。

そもそも、このソフトを作った経緯としては、ものすごく私事なのですが、
うちの親が、Flickrにアップされている、姉の子供の写真をダウンロードして印刷しています。
で、今まではプラグインを使ったりなんだかんだとしていたのですが、
ちょくちょくFlickrの仕様が変わったり、プラグインがブラウザに非対応になったり、と、毎回実家に帰る度に質問される次第。
それならば作ってしまえ、ということで、うちの親が使うであろう機能のみ、を実装した、という流れです。
探せば他に同じ事が出来るソフトはいくらでもあるんでしょうが、高機能で使いこなせなかったりするだろうし、
まぁ、勉強がてら、って事で。

一応、処理の流れを書いておきます。

１．FlickrにOAuth認証をかける
 ２．コンタクトリストの情報を取得
３．クリックされたユーザーの写真一覧情報を取得
４．チェックされた写真のダウンロード

FlickrのAPIのドキュメントは以下です。
Flickr Services

１．OAuth認証

これは、以下のページを参考にさせていただきました。ありがとうございます！
flickrのOAuth認証について | android application

StageWebViewというクラスが見当たらなくて悩んだのですが、
AIR2.5から追加された新しいクラスだそうです。
これは、webページをwebkitを使ってそのままレンダリングしてくれるもののようです。
便利すぎる。
これはwebのFlashにも追加して欲しい…。
stageWebViewについて | android application

２．コンタクトリストの情報を取得

１．で認証が上手くいけば、FlickrのAPI操作は、as3flickrlibのライブラリで簡単に行えます。
コンタクトリストの取得は、contacts.getList()でいけます。

ただ、このAPIとの通信で一番苦労したことが、情報を取得したあと、の処理です。
取得した情報は、Objectで返って来るのですが、その中身が、何型なのかがリファレンスには載ってない。
コンタクトリストの場合は、以下の容量でArray型に変換できました。
Arrayの中身はUser型になっています。

private function onGetContactList(e:FlickrResultEvent):void
{
  var list:Array = e.data.contacts as Array;
  for (var i:int = 0; i < list.length; i++) {
    var info:User = list[i] as User;
    trace(info.nsid); //ユーザーID
    trace(info.username); //ユーザーネーム
}

このobjectの中身については、以下のサイトでの要領で中身を都度、調べて対応しました。
熊の散策路 [ActionScript 3] Objectのデバックの方法②　[デバック用クラス作成]

その他の結果では以下のように処理しました。

//-------------------
//people.getInfo
var info:User = e.data.user as User;

//-------------------
//写真の検索
//photos.search
var list:PagedPhotoList = e.data.photos as PagedPhotoList;
for (var i:int = 0; i < arr.length; i++) {
  /*
  arr[i].id
  arr[i].secret
  arr[i].server
  arr[i].farm
  arr[i].title
  arr[i].description
  */
}

//-------------------
//写真のサイズ別URL一覧
//photos.getSizes
var arr:Array = e.data.photoSizes as Array;
for (var i:int = 0; i < arr.length; i++) {
  var size:PhotoSize = arr[i];
  /*
  size.source
  size.url
  */
}

４．チェックされた写真のダウンロード

データのダウンロードには、FileReferenceクラスを使う、と思っていたのですが、
このクラスを使う場合は、ひとつずつ、しかダウンロードできません。
FileReference.download(); を呼び出すたびに、保存先のフォルダを選ぶダイアログが出て、、、
と、毎回保存先を選ぶことになります。
ですが、今回は、チェックした写真を一括でダウンロードしたかったので、この方法は却下しました。
（毎回ダイアログが出ていたら、うちの親もめんどくさい、とかいいそうだし）

で、調べてみると、FileStreamクラス、というものがありました。
これは、ダウンロードしたバイナリを、ファイルに書き込む、というもの、らしい。
なので流れとしては、バイナリで画像をダウンロード後、FileStreamクラスでファイルに書き込み、となるよう。
これは、ココを参考にさせてもらいました！感謝！
画像を保存する – After Effects&Flash＋αテクニック集

——————

だいたいこんな流れです。
後は、写真をクリックした際に、新しいウインドウを表示する辺りがちょっとだけ苦労しました。
この辺りを参考にさせていただきました。
AIRアプリのウィンドウは自由自在で縦横無尽！（1/2） ─ ＠IT

ざっと思いつきで作ったものではあるので、もしご使用中に挙動がおかしくなったりしたら、そっとAlt+F4で閉じて下さい。
最後に、ご使用は自己責任でお願いします。

FlashでFacebookアプリを作ってみる第4回

USK — Tue, 07 Jun 2011 03:18:41 +0000

Flashを使ってFacebookアプリを作ってみます。

ウォールや画像の投稿です。

ウォールへの投稿

ウォールに投稿してみます。

投稿するには、publish_streamの権限が必要となります。
（「ウォールへの投稿」権限）

var opts:Object = { perms:"publish_stream" };
Facebook.login(callback, opts);

ウォールへの投稿は以下のAPIになります。

/me/feed

ここでの注意はPOST送信しないといけないところです。
なので、以下のようになります。

var params:Object = { messagej:"メッセージ" };
Facebook.api("/me/feed", callback, params, "POST");

第4引数でPOSTと指定します。（デフォルトはGET）
投稿できるものは、ドキュメントによると、以下になるようです。

message, picture, link, name, caption, description, source

その他、いいね、や、シェアなど、投稿系のAPIの解説は以下にあります。(英語）
試していませんが、同じようにすれば投稿できるかもしれません。
Graph API – Publishing

画像の投稿

画像の投稿です。
Flash内の画像をそのまま保存させたい場合、です。
例えば、お絵かきアプリなどで書いた絵をfacebookに保存したい時、などです。

上記のウォールへの投稿ではなく、アルバムに追加する方法です。
以下のAPIを使用します。

/ID/photos

画像は、画像のURLを指定するのではなく、保存したい部分のビットマップを指定します。

var photoBitmap:Bitmap; //保存したい画像のビットマップ
var opts:Object = { file:photoBitmap, message:"画像の説明とか", fileName:"画像名"};
Facebook.api("/me/photos", callback, opts);

fileにビットマップ。
messageに画像の説明。
fileNameに画像の名前、を書いておきます。
fileNameは保存される画像のファイル名そのもの、ではないようですので、同じファイル名で複数枚保存したとしても上書きされる心配はありません。

投稿した写真はそのアプリ名のアルバムに保存されます。
アルバムがない場合は作成されます。

特定のアルバム内に保存したい場合は、/me/の代わりにアルバムIDを指定します。
アルバムIDは、/me/albums で一覧を取得できるのでその中から任意のIDを抜き出して使います。

ar photoBitmap:Bitmap; //保存したい画像のビットマップ
var opts:Object = { file:photoBitmap, message:"画像の説明とか", fileName:"画像名"};
Facebook.api("/アルバムID/photos", callback, opts);

写真と投稿する際の注意点としては、
このAPIは、ユーザーがなにかアクションをした時に実行させなければならない、という点です。
例えば、ボタンをクリックした時、などです。
（自動でアップロードさせる事は出来ません。）
そうしないと以下のエラーが出てしまいます。

SecurityError: Error #2176: ポップアップウィンドウを表示するなどの特定のアクションは、
例えばマウスをクリックしたりボタンを押したりして、ユーザーによる相互作用が発生した場合にのみ呼び出されます。

参考：（英語）
Using Facebook Graph API In Flash AS3 To Upload Image And Post To Photo Album

まとめ

最後の方は駆け足で紹介してしまいましたが、以上になります。
基本的に、Graph APIのドキュメントに載っているものは、Flashでもそのまま使用できると思っていいようです。

https://graph.facebook.com/me/friends?access_token=…
↓↓
Facebook.api(“/me/friends”, callback);

その際、送信したいパラメータはオブジェクトで渡し、アクセストークンの付与は気にしなくてよい、という簡単設計です。
パラメータをどういった形式で渡せばいいかが悩むところがありますが、調べれば大抵出てくるかと思います。

なんらかの理由により、GraphAPIではなく、昔のAPIを使用したい時は、直接URLを指定すれば使用することは出来ます。
その際には、アクセストークンが必要となりますので、事前に取得する必要があります。
しかしながら、これらのAPIはいつ削除されるかわからないものですので、使用はオススメできません。
Old REST API (Legacy REST API)

Facebookは日々、アップデートが繰り返されており、ここで紹介した内容も最悪、明日には使えなくなる可能性もあります。
その点に注意していただいて、ご利用下さい。

それでは、よいFacebookライフを！

FlashでFacebookアプリを作ってみる第3回

USK — Fri, 03 Jun 2011 07:42:17 +0000

Flashを使ってFacebookアプリを作ってみます。

いよいよAPIを使って情報を取っていきます。

アイコン画像の取得

前回まででAPIを使用する準備が整いましたので、いよいよ今回から色々な情報を取得していくことにします。

まず最初は自分と友達のアイコン画像を表示してみます。

アイコン画像は以下のURLで取得できます。

https://graph.facebook.com/ユーザーID/picture

なので、自分、友達のIDを取得して、このURLから画像をロードすればいいだけ、です。

まず、自分のアイコンです。
自分のアイコンといえども、meではなく、IDを使う必要があります。
ログインした時点で自分のIDは取得できますが、今回は自分のプロフィールを取得し、その中からIDを抜き出してみます。

Facebook.api("/me/", callback);

private function callback(result:Object, fail:Object):void{
	if (result) {
		//プロフィール情報の取得成功
		/*--------------------------
		 * 取得例
		verified : true
		updated_time : 2011-05-25T03:26:51+0000
		gender : male
		username : mlb.usk
		id : 1075421191
		first_name : Yusuke
		locale : ja_JP
		timezone : 9
		favorite_teams : [object Object]
		link : http://www.facebook.com/mlb.usk
		location : [object Object]
		last_name : Kano
		name : Yusuke Kano
		------------------------------*/
	}else {
		//プロフィール情報の取得に失敗
	}
}

このように、/me/とするだけで自分の情報は取得できます。
で、取得したIDで画像をロードします。直接アドレスを叩いてもいいのですが、ライブラリに専用の関数があります。

Facebook.getImageUrl("ID", size)

IDは取得したIDです。
第二引数はオプションで、画像のサイズを指定できます。
リファレンスによりますと、square, small, large のいずれかを指定するようです。
指定がない場合はオリジナルのサイズだと思います。
Facebook.getImageUrl()は、上記のURLにIDとオプションをくっつけて返してくれるだけ、です。

というわけで、画像の取得は以下のようになります。

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, loadComplete);
loader.load(new URLRequest(Facebook.getImageUrl("ID", size)));

次に友達のアイコン画像です。

友達の一覧リストは以下で取得することが出来ます。

Facebook.api("/me/friends", callback);
private function callback(result:Object, fail:Object):void{
	if (result) {
		//リスト取得成功
		var friends:Array = result as Array;
		for (var i:uint = 0; i < friends.length; i++) {
			trace(friends[i].id);
		}
	}else {
		//失敗
	}
}

リストは配列で返ってきます。
中身は、idとnameのみになります。
もっと詳しく情報を見たければ、自分のプロフィールを見たときと同じように、Facebook.api(“/” + 友達のID + “/”, callback) として取得します。
今回はIDだけで大丈夫ですのでこれでOKです。

さて、無事IDは取得できましたので、あとは自分の画像を取得した時と同じように
友達のIDを使って画像を取得すれば今回の目的は達成です。

しかし、このままでは問題があります。
それは、セキュリティサンドボックス侵害、です。

別ドメインにある画像をロードすることになりますので、そのまま表示しようとするとエラーが出てしまいます。
しかし、facebookにはきちんとポリシーファイルが用意してありますので、そちらを一番最初にでも読むようにしておきます。
画像が置いてあるサーバのポリシーファイルは以下にあります。

https://fbcdn-profile-a.akamaihd.net/crossdomain.xml

これを読み込みます。

Security.loadPolicyFile("https://fbcdn-profile-a.akamaihd.net/crossdomain.xml");

今回の分をまとめてみます。

package
{
	import flash.system.Security;

		// 設定等、割愛-------------

		public function Index() {
			Security.loadPolicyFile("https://fbcdn-profile-a.akamaihd.net/crossdomain.xml");

			//割愛 -----------------------
		}

		//割愛 -----------------------
			getProfile();
		}
		private function getProfile():void{
			//自分のプロフィール取得
			Facebook.api("/me/", loadProfileHandler);
		}
		private function loadProfileHandler(result:Object, fail:Object):void{
			if (result) {
				//プロフィール情報の取得成功
				var myID:String = result.id;

				//画像のロード開始
				var loader:Loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.INIT, myiconLoadComplete);
				loader.load(new URLRequest(Facebook.getImageUrl(myID)));

				//位置とか調整して表示する
				this.addChild(loader);

			}else {
				//プロフィール情報の取得に失敗
			}
		}
		private function myiconLoadComplete(e:Event):void {
			_loader.contentLoaderInfo.removeEventListener(Event.INIT, myiconLoadComplete);

			//友達リストを取得する
			Facebook.api("/me/friends", loadFriendsHandler);
		}
		private function loadFriendsHandler(result:Object, fail:Object):void{
			if (result) {
				//リスト取得成功
				var friends:Array = result as Array;
				for (var i:uint = 0; i < friends.length; i++) {
					_friendIconIDs.push(friends[i].id);
				}
				startFriendIconLoad();
			}else {
				//失敗
			}
		}
		///アイコンのロード開始
		private function startFriendIconLoad():void{
			for(var i:int = 0; i < _friendIconIDs.length; i++){
				var loader:Loader = new Loader();
				loader.load(new URLRequest(Facebook.getImageUrl(_friendIconIDs[i])));

				//位置とか調整して表示する
				this.addChild(loader);
			}
		}
	}
}

以上です。
続きます。

FlashでFacebookアプリを作ってみる第2回

USK — Wed, 01 Jun 2011 10:29:12 +0000

Flashを使ってFacebookアプリを作ってみます。

今回は初期化編です。

初期化

前回まででアプリの設定は完了しました。
いよいよFlashの作業に入ります。

Flashでの開発は、AdobeがAPIのライブラリを配布しいます。
facebook-actionscript-api

※2011/05/31時点での最新版は1.6.1でした。
今回はwebで見る事を想定したアプリとなりますので、
「GraphAPI_Web_1_6_1.swc」もしくは「GraphAPI_Source_1_6_1.zip」をダウンロードします。
ドキュメント「GraphAPI_Documentation_1_6.zip」と、サンプル「GraphAPI_Examples_1_6_1.zip」もダウンロードしておくといいでしょう。

ダウンロードした、swcもしくはソースのasファイルにパスを通します。

facebookとの通信のややこしい部分はこちらのライブラリが行ってくれます。

import com.facebook.graph.Facebook;

まずは初期化、facebookとの通信を確立します。
この際、作成したfacebookアプリのアプリIDが必要となります。
こちらのマイアプリのページへ行き、IDを控えましょう。

そのIDを使い、初期化します。

Facebook.init("アプリID", callback);

通信が完了すると、callbackに指定した関数にコールバックされます。
コールバックは以下のように書いておきます。

private function callback(result:Object, fail:Object):void
{
	if (result) {
		//ログイン済み
	}else {
		//未ログイン
	}
}

Facebookのコールバック関数は全て、処理が成功したときは、第一引数に、失敗した時には第二引数に値が入って返ってきます。
この場合、ログイン、認証済みの時はresultに値が、未ログインもしくは未認証の時はfailに値が入って返ってきます。

未ログイン、未認証の時には、以下の処理でログイン、認証処理を表示させます。

var opts:Object = { perms:"" };
Facebook.login(callback, opts);

第二引数のオブジェクトはオプションです。
ここには許可させたい権限を入れておきます。作成するアプリに合った権限を指定してください。
どの処理にどの権限が必要かはこちらで確認できます。（英語ですが）
Permissions

ログイン時のコールバックは表示されたウインドウ内でユーザーがログイン／認証を終えた後、、、に返ってくれば簡単なのですが、
どうやらウインドウを表示する命令が完了した時点で返ってくるようです。（たぶん）
なので、ログインのコールバック内に次の処理を書いておくと意図しないタイミングで実行される恐れがあります。

なので、ExternalInterfaceを使い、セッションの変更を監視するようにします。
ユーザーがログイン／認証を終えるとセッションが変更されるので、ここを監視しておけばログイン／認証のタイミングを掴む事ができます。

ExternalInterface.addCallback('sessionChange', sessionChange);

private function sessionChange(session:String, extendedPermissions:Object = null):void{
	if (session){
		//ログイン・認証完了
		/* セッションの中身
		base_domain : xxx
		uid : xxx
		sig : xxx
		session_key : xxx
		secret : xxx
		expires : xxx
		access_token : xxx
		*/
	}else{
		//ログイン・認証失敗？
	}
}

コールバックの引数のsessionの中に変更されたセッション情報が入っています。
それがなければログイン・認証が失敗した、ということになります。
ログイン・認証が成功するとsessionに情報が入って返ってくるのですが、
このとき、コールバックが2回呼ばれる事があるようです。ご注意を。（自分の環境ではそうでした）

ここで少しはまってしまったことがあるのですが、
未ログイン、もしくは、未認証の状態からログイン・認証が成功すると、上記のようにセッションが変更され、
次の処理に移ることが出来るのですが、そのままですと、HTMLかJSかは不明ですが、セッションが更新されていないようです。
試しに、Facebook.api(“/me/”, callback); という自身の情報を呼び出すAPIを叩いてみると、エラーが返ってきます。
IDで指定するときちんと返って来るので、me、の部分、自分が誰なのかが更新されていないように見えました。
このときはセッション状態を参照することでエラーが出なくなりました。
たぶん、セッション状態を参照することで、セッションを明示的に更新した事になるんじゃないかと思います。たぶん。
セッション状態の参照は以下で出来ます。

var se:FacebookSession = Facebook.getSession();
trace(se.uid); //ID
trace(se.accessToken); //アクセストークン

これでフラッシュ側の初期化は完了です。
あとは、HTMLを作成する際に、JSを読み込ませておきます。
さらに、fb-rootのIDを持ったdivタグをbody直下にひとつ、入れておく必要があるそうです。



～～

初期化分をまとめておきます。

ドキュメントクラス index.as

package
{
	import com.facebook.graph.data.FacebookSession;
	import com.facebook.graph.Facebook;
	import flash.external.ExternalInterface;
	import flash.display.*;
	import flash.events.*;
	public class Index extends MovieClip
	{
		public function Index()
		{
			Facebook.init("アプリID", initCallback);
		}
		private function initCallback(result:Object, fail:Object = null):void
			if (result) {
				//ログイン・認証済み
				//次の処理へ
			}else {
				//未ログイン・未認証
				//セッション状態の管理
				ExternalInterface.addCallback('sessionChange', sessionChange);
				//ログイン・認証させる
				//権限の設定
				var opts:Object = { perms:"" };
				Facebook.login(onLogin, opts);
			}
		private function onLogin(result:Object, fail:Object):void
			//ログイン・認証ウインドウが開いた
		}
		private function sessionChange(sessionChange:String, extendedPermissions:Object = null):void
		{
			if (session)
			{
				//ログイン・認証済み
				//セッション状態を取得してセッション変更を伝える
				var se:FacebookSession = Facebook.getSession();
				//次の処理へ
			}
			else
			{
				//ログイン・認証失敗
			}
		}
	}
}

続きます。

FlashでFacebookアプリを作ってみる第1回

USK — Tue, 31 May 2011 06:13:45 +0000

Flashを使ってFacebookアプリを作ってみます。
ちょっと詳しめに書いてみます。
今回は準備編です。

準備

facebookのアカウントは持っているものとします。
まずは、Facebookアプリの登録をします。

自分のfacebookのトップページの一番下、フッタの「開発者」という項目をクリックします。
そのページのヘッダメニューの「マイアプリ」をクリック。
developersのページへ行きます。
「開発者」からアクセスの許可を求められるので、許可します。

許可すると、「ありがとうございます！」という表示が現れ、その下に、
アプリケーションがありません。作成する
と、出てきますので、「作成する」をクリックし、アプリの作成に移ります。
すると、以下のような警告を受けます。

この操作を実行するには、アカウントの認証を完了する必要があります。携帯電話またはcredit cardを追加してアカウント認証を行ってください。

登録するのは憚られるのですが、登録しないと次に進めませんので登録します。
今回は、「携帯電話」を登録してみました。

リンク先から、「Facebookテキストに登録」をクリックするとポップアップが表示されるのですが、
その国の中に「日本」がありません…。

よくわかりませんが、仕方ないので、その下の部分をクリックします。

Just need to verify your account? ここに電話番号を追加してください。

すると、さらにポップアップが開き、今度は携帯のメールアドレスを入力しろ、と言われます。
ドメイン部分は日本の携帯会社が選択できるようになっていますので入力し、送信します。

送信したアドレスに確認用コードが送られてきますので、そのコードを入力します。

入力し、認証が終わるとやっとアプリを作成出来るようになります。長い…。
こちらに戻り、「Set Up New App」をクリックし、アプリの作成を行います。

アプリケーション名を入力し、規約に同意し、アプリケーションを作成します。
セキュリティチェックを通過し、アプリの編集ページへ移動します。

編集ページ内でポイントとなる項目は以下になります。
・Web Site
　　Site URL →　アプリで使用するswfが読み込まれているHTMLまでのURLを入力します。
　　Site Domain　→　HTMｌが置かれているサイトのドメインを入力します。
・Facebook Integration
　　キャンバスページ　→　facebook上でのこのアプリのURLです。他人と被ってはいけません。
・詳細設定
　　サンドボックスモード　→　ここを有効にすると管理人のみが閲覧可能になります。

準備だけでやけに長くなってしまいました。
次回に続きます。

jQueryのマウスオーバーのアクションを触ってみる

USK — Fri, 20 May 2011 02:17:23 +0000

jQueryを使ったボタンのマウスオーバー時のアニメーションですが、
少し気になっていた事がありました。
それは、素早く、マウスオーバー/アウトを繰り返すと、
マウスオーバーした回数だけアニメーションが後からきっちりと実行されてしまうもの。
結構よくみかける気がします。

マウスオーバーしてアウトして再度オーバーしてってした時に
前のアニメーションをキャンセルしてないのでこうなっていると思うのですが、
動き的に気持ち悪かったのでちゃんと出来ないもんかと思って見てみました。
ググってみるともうかなり古い話題のようで書いている方がいました。

[jQuery]こんな機能があったんだ。jQuery stop()

わかりやすいです。
stop()でアニメーションをキャンセルさせる事ができるようです。
試してみました。

・マウスオーバーした回数だけイベントが発生する
デモ

$(document).ready(
	function(){
		$("#over1 li img").hover(function(){
			$(this).fadeTo("fast", 0.1);
		}, function(){
			$(this).fadeTo("fast", 1);
		});
	}
);

・stop()でキャンセルした場合
デモ

$(document).ready(
	function(){
		$("#over1 li img").hover(function(){
			$(this).stop().fadeTo("fast", 0.1);
		}, function(){
			$(this).stop().fadeTo("fast", 1);
		});
	}
);

stop()の引数は二つあり、それぞれにtrueかfalseを設定することでキャンセルして次の動作に移るかどうか、などを制御できるようです。
それを見て思い出したのがフラッシュでtrick7さんが昔書いておられた「気持ちよいアニメーションの考察」的な記事です。

trick7 – ロールオーバー効果へのこだわり2

上記のstop()を使えばこれを実現できるのでは、と思い、試してみました。

とりあえず幅を伸ばしてみる

デモ

$("#over2 li").each(function(i){
	var color = $(this).attr("rel");
	$(this).css({backgroundColor:color});
	$(this).hover(function(){
		$(this).stop(true, false).animate({
			width:300,
			easing:"easeOutCubic"
		}, 300);
	}, function(){
		$(this).animate({
			width:100
		},{
			easing:"easeOutCubic",
			duration:800
		});
	});
});

動きにイージングを使用したかったので、jQueryのイージング用のプラグインを入れました。
jQuery Easing Plugin (version 1.3)

リストタグ li の幅を広げてアニメーションさせています。
背景色はliの属性にrelを持たせて、その中で指定しています。
【HTML】


	
    	リスト1
    	リスト2
    	リスト3

確かに動きとしては出来たのですが、テキストの背景としてこの動きをさせたいです。
しかし幅を0pxから100pxとかにしてしまうと色々おかしくなってしまうためこのままでは出来ません。

背景画像のアニメーション

で、色々考えたのですが、表示はほとんどこのままで背景画像を動かせばいいのでは、と思いました。
最初はanimateの中に、backgroundPosition、を書いてみたのですが動きません。
ググってみると、それをそのまま出来る様にするプラグインがあるようです。

Background-Position Animations | jQuery Plugins

解説はこちらの記事にありました。

jQueryでテキストリンクのマウスオーバー時に動きをつける | Webクリエイターボックス

背景画像には以下のものを用意しました。

これを右にスライドさせて実現する想定です。
で、上記サイトを参考にさせてもらいつつ、出来上がったものが以下。

デモ

$("#over3 li a").each(function(i){
	$(this).hover(function(){
		$(this).stop(true, false).animate({
			backgroundPosition:"(0px 0px)"
		},{
			easing:"easeOutCubic",
			duration:100
		});
	}, function(){
		$(this).animate({
			backgroundPosition:"(-100px 0px)"
		},{
			easing:"easeInCubic",
			duration:600
		});
	});
});

やはりもっと気持ちよくするには微調整がもろもろ必要っぽいですが、
とりあえず、出来ました。

まとめ

jQueryを使えばいとも簡単に想定の動きを実現することが出来ました。
JSの書き方も、多少のクセはあれど、ASを書いている感覚とそこまでかけ離れてはおらず、すんなり入れました。

ブラウザチェックなどが大変そうなイメージはありますが、動きの実現自体は比較的簡単に出来るんだな、と感じました。楽しい。
もっとバリバリ使えるように勉強していきたいです。

とりあえず、開発環境を整えるところから始めなければ。

Instagram APIを触ってみる

USK — Fri, 25 Feb 2011 08:48:41 +0000

InstagramのAPIが公開されましたね。
今のところ、登録して空くティベーとされた人から順次公開、といったプライベートベータ版らしいです。
内容の紹介はここで書いている方がおられます。早い。

公式のデモがここで公開されています。
Instagram – Real-time updates demo
それぞれの都市でアップロードされたものがリアルタイムに反映されます。

そんなわけで、僕もアクティベートされたので軽く触ってみました。
ポピュラーになっている写真をダラダラ表示するだけのものです。

popular_photo

手順は簡単で、同じようなAPIを触ったことがある方ならすぐにわかると思います。

１．APIにリクエストを送る
２．返ってきたJSONを解析
３．画像のURLなどを抜き出して、ロード
４．表示

※以下の内容は、2011/02/25現在のものです。APIの内容が変更になっている可能性がありますのでご注意下さい。

APIにリクエストを送る

こちらのディベロッパー用のページにアクセスして、必要な手続きを行います。
メニューのManageから、適当なアプリを作成すると、
アプリのIDが取得できますので、そちらを使用します。

個人の投稿した写真を見る時や、コメントやライクを管理する際には、
Aouth認証が必要となってきますが、
ポピュラーの写真を見るだけの場合は特に認証は必要ありません。
以下のアドレスから取得できます。

https://api.instagram.com/v1/media/popular?client_id=CLIENT-ID

CLIENT-IDは、先ほど取得たIDを入れてください。

JSONを解析

Flashからアクセスする場合、そのまま取得しようとすると、セキュリティサンドボックス侵害が出てしまいます。
やはり、というべきでしょうか、Instagramにはcrossdomain.xmlは設置されていないようです。残念。
なので、PHPなどを介して接続する事になります。
結果のテキストを取得する際には、こちらの方法を使わせていただきました。
Flashでcrossdomain.xmlを使わないでクロスドメインする
※2/25 15:30現在、ページに繋がらなくなってしまっています。
この記事ではURLを送るときにURLエンコードしないといけない、と書いてありますが、エンコードしなくても大丈夫でした。
（POSTで送っているからかもしれないです。）

PHPは以下のようなものです。（POSTでの送信に変更しました）

AS内での記述は以下のような感じです。

var req:URLRequest = new URLRequest("proxy.php");
req.method = URLRequestMethod.POST;
var val:URLVariables = new URLVariables();
val.url = "https://api.instagram.com/v1/media/popular?client_id=" + "CLIENT_ID";
req.data = val;
new loader = new URLLoader();
loader.load(req);

こちらを介することで、データを取得できます。

返って来るデータはJSONになっています。AS3でJSONを扱う場合、as3corelibのライブラリを使用すると便利です。
返って来るJSONは以下のような形式になっていました。
長いです。

{
	"meta": {
		"code": 200
	},
	 "data":
	[{
		"tags": [],
		"location": null,
		"comments": {
			"count": 17, "data": [{
				"created_time": "1298443170",
				"text": "Nice",
				"from": {
					"username": "xxx",
					"profile_picture": "xxx",
					"id": "xxx",
					"full_name": "xxx"
				},
				"id": "xxx"
			},
			{  ... },
			{  ... }]
		},
		"filter": "X-Pro II",
		"created_time": "1298443449",
		"link": "http://instagr.am/p/xxx/",
		"likes": {
			"count": 53,
			"data": [ {
				"username": "xxx",
				"profile_picture": "xxx",
				"id": "xxx",
				"full_name": "xxx"
			},
			{  ... },
			{  ... }]
		},
		"images":
		{
			"low_resolution": {
				"url": "http://distillery.s3.amazonaws.com/media/xxx/xxx.jpg",
				"width": 306,
				"height": 306
			},
			"thumbnail": {
				"url": "http://distillery.s3.amazonaws.com/media/xxx/xxx.jpg",
				"width": 150,
				"height": 150
			},
			"standard_resolution":{
				"url": "http://distillery.s3.amazonaws.com/media/xxx/xxx.jpg",
				"width": 612,
				"height": 612
			}
		},
		"caption": {
			"created_time": "1298443492",
			"text": "xxx",
			"from": {
				"username": "xxx",
				"profile_picture": "xxx.jpg",
				"id": "xxx",
				"full_name": "xxx"
			},
			"id": "xxx"
		},
		"type": "image",
		"id": "xxx",
		"user": {
			"username": "xxx",
			"profile_picture": "xxx.jpg",
			"id": "xxx",
			"full_name": "xxx"
		}
	},
	{ ... },
	{ ... }]
}

コメントやライク（いいね！）の情報が多く含まれていますので長く見えます。
必要に応じて抽出してください。
今回は、画像のパスとユーザーネーム、フィルタの種類、ライクの数、日付、本サイトへのリンクを使用しました。
as3corelibを使用したパースの仕方は以下のようになります。

var obj:Object = JSON.decode(_loader.data);
var arr:Array = obj.data;
for (var i:uint = 0; i < arr.length; i++) {
	var d:Object = new Object();
	d.src = arr[i].images.standard_resolution.url; //画像のパス
	d.filter = arr[i].filter; //フィルタの種類
	d.link = arr[i].link; //インスタグラムのリンク先
	d.username = arr[i].user.username;  //ユーザーネーム
	d.likes = arr[i].likes.count; //いいねの数
	d.date = arr[i].created_time; //日付
	_data.push(d);
}

画像のロード

あとは抽出した内容を元に画像をロードするだけですが、そのまま接続しようとすると、ここでもセキュリティサンドボックス侵害になります。
ですので、テキストを取得したものとはまた別のPHPを使用してロードしました。
FlashでPerlを介した別ドメインのデータ取得方法(mimeType判別付き) +PHP版 | maxar quartz
送信方法をPOSTに変更したものが以下です。

以下のように使用します。

new loader = new Loader();
var req:URLRequest = new URLRequest("proxy.php");
req.method = URLRequestMethod.POST;
var val:URLVariables = new URLVariables();
val.file = "画像のURL";
req.data = val;
loader.load(req);

表示

あとは、ユーザーネームなどの情報をテキストと画像を表示させて終わり、です。

まとめ

もっと色々利用しよう思うとAouth認証が必要になるのですが、Flash単独での利用は不可能なので、なにかしらのプログラムが必要になります。
公式で、PYTHONとRUBYのライブラリが用意されているようですので、これを利用すれば便利かもしれません。
AIRなどで使用できれば、Instagramの管理用ソフトが作れたりできそうです。
ただし、写真投稿のAPIは公開されておらず、iPhoneの公式アプリからのみ、となるようです。
（それが出来たらアプリが作られてしまうだろうし）
まだまだ公開されたばかりですので、今後もっと面白くなりそうです。

パーティクルでトランジション

USK — Tue, 18 Jan 2011 06:14:08 +0000

なんか作りたくなったので作ってみた。

particle_transition

だいたいの流れとしては、

1) 画像の読み込み
2) ビットマップに変換
3) 色情報からドットを打つ
4) それぞれのドットを動かす
5) 1に戻る

サイズは320×320なので、102400パーティクル。
全てを一度に動かしているわけではないので、なんとか動いています。
低スペックだときついかもしれません。
最適化とかはなんもしてません。

パーティクルの動かし方は、基本なのかもしれないけれど、
bitmapDataにsetPixel()して打っています。
さくーしゃさんの雪のやつが参考になります。
Snow – wonderfl build flash online

ドットの位置情報だけ覚えておいて、一旦黒で消したあと情報を更新して、再度、ドットを打つ、という流れです。
ただし、この方法だと、全体を不透明のビットマップで覆ってしまうので、その下のレイヤーを透けさせることが出来ません。
ほんとは、トランジションの際は写真の上から覆いかぶさるようにパーティクルを降らしたかったんだけど、やり方がわかりませんでした。

flickrは以下を参考にしました。
Flickr Flash 連携 vol1 〜API Key作成〜
Flickr Flash 連携 vol2 〜APIへの接続方法〜
Flickr Flash 連携 vol3 〜Flashへ写真の読み込み〜 – SINAPlog
このまま作っていると、サーバーにアップした時点で、セキュリティサンドボックス侵害で怒られてしまいます。
一瞬、ＰＨＰなどでプロキシを作ってやらないといけないかと思ったのですが、Flickrにはcrossdomain.xmlが設置してありました。
ActionScript入門Wiki@rsakane – Flickrから画像を読み込む
 [AS2]Flickr API経由で取得した画像がFlashで表示されない | モウソウチク日記
ＵＲＬを直接叩いてみると、farmは6まであったので全部読み込ませています。

そんな感じです。

別の動きのパターンも作ってみました。
particle_transition2

Flashでブラウザにドロップされた画像を表示

USK — Sun, 16 Jan 2011 07:00:39 +0000

最近はHTML5が盛り上がってますが、なんかの記事で、
HTML5はブラウザにファイルをドロップして認識できる、みたいな事を見ました。

それを使ったら、ブラウザに画像をドロップして、それをFlashに渡して表示、とか出来るんじゃね？
と、思い、作ってみました。

まずはどうやるのかが全くわからなかったので、ググってみました。
すると、KAYACさんの記事に行き当たりました。
FlasherがHTML5で遊んだらこうなった（Flashにファイルをドロップ！） | エントリー | _level0.KAYAC | flash ActionScript blog
えー、正にそのままやられちゃってる感じですね…。
でもまぁ、勉強って事でやってみよう、と軽い気持ちで。
KAYACさんの記事のサンプルのリンクも切れてるみたいですし。

完成品

まずは完成品の紹介から。

file drag-n-drop

動作環境

Firefox3.6 以上
FlashPlayer 9 以上

画像（jpg,gif,png)をブラウザ内にドラッグ＆ドロップすると画像が表示されます。
複数毎一辺にドロップするとスライドショーになります。
その際、左下にその画像の情報が表示されます。

基本的な流れ

ブラウザにドロップされた画像のバイナリデータを取得
↓
JS経由でFlashに渡す
↓
Flash側でbase64形式にデコードする
↓
画像として再現、表示

HTML5

（詳しいソースは実際のサイトを見てください。）

まず、ブラウザにドロップされた画像の情報を取るところから始めます。
ドロップされた情報を取得するには、HTML5のFile apiを使用します。
しかしこのFile api、まともに対応しているブラウザがFire Foxの3.6以上しかありません。
このサイトで使用中のブラウザのFile API対応状況がわかります。
File API – HTML5 API チェッカー

ドロップの際の処理は以下のサイトを参考にさせて頂きました。
ファイル読み込み：ブラウザ外からドラッグアンドドロップ – jsdo.it
File APIのサンプル – 株式会社あゆた
 W3C File APIを使ってJavaScriptでファイル加工 – しばそんノート

しかし、ファイルのバイナリデータを取得する際に、file apiの、FileReaderクラスを使用したところ、
内容が文字化けした上に、フラッシュに渡した瞬間にFlashPlayerが落ちてしまいました…。

そこでさらにググってみると、さらにわかりく書かれた記事を発見。
画像アップロード jumble/ウェブリブログ
この中ではFireFoxでの方法でも３つのやり方がかかれている。
このうちの三つめが、上記の文字化けした方法。
FireFoxの設定を変えないと使えない、とかはちょっと敷居が高すぎるので却下。
そのうち二つはFireFox独自の方法らしいけれど、ファイルのドロップですでにFireFox限定となっているので、そこは問題なし。
なので、より記述が少ない、「その２」で今回は設定した。
この方法を使ってみると、一発で取得できました。

また、同時にドロップされた画像の情報も取得していますが、これは、まだまだ策定中らしく、
リファレンスにあるのに実装されてなかったり、書き方が違ったり、とまちまち。
File APIの策定
なので、とりあえず取得するようにしておいて、取得できたものだけ、表示するようにしておいた。
lastModifiedDate や creationDate は、上記リファレンスには載っていたけど、Firefoxがまだ実装してないみたい。
どれが実装されてるかは、前述のチェッカーで。

取得できたら、後はExternalInterface経由でデータをswfに渡すだけ。

Flash

Flash側はそんなに難しくないです。
HTML側から受け取った画像のバイナリデータをFlash内で扱えるようにBase64デコードします。
これは、flexのSDKに入っている、mx.utils.Base64Decode、というクラスがやってくれます。
Flashしか入れてない場合はFlexSDKをダウンロードしてやる必要があります。

Flex SDK

これを使用して、base64にデコードしたら、Loaderクラスで、loadBytes()してやれば、画像にしてくれます。
以下、その部分の抜粋コードです。

var src:String = data; //これをバイナリデータとする
var base64:Base64Decoder = new Base64Decoder();
base64.decode(src);
var byte:ByteArray = base64.toByteArray();

var _loader:Loader = new Loader();
_loader.loadBytes(byte);
_loader.contentLoaderInfo.addEventListener(Event.INIT, loadComplete);

function loadComplete(e:Event):void {
 this.addChild(_loader);
}

あとは、複数の画像を処理出来るようにしたり、情報をテキストでパラパラでるように調整したり、
という事をしています。

まとめ

HTML5とFlashはライバル視される事が多いですが、
お互いの特徴を生かして補完しあえばもっと面白いことができそうだな、と思いました。
まだまだ一部のブラウザでしか実装がされていないため、実践投入は出来ませんが、今後の展開に期待したいと思います。

trace

EaselJSを試してみる

Flickrの写真をダウンロードするAirアプリを作ってみた

１．OAuth認証

２．コンタクトリストの情報を取得

４．チェックされた写真のダウンロード

FlashでFacebookアプリを作ってみる第4回

目次

ウォールへの投稿

画像の投稿

まとめ

FlashでFacebookアプリを作ってみる第3回

目次

アイコン画像の取得

FlashでFacebookアプリを作ってみる第2回

目次

初期化

FlashでFacebookアプリを作ってみる第1回

目次

準備

jQueryのマウスオーバーのアクションを触ってみる

とりあえず幅を伸ばしてみる

背景画像のアニメーション

まとめ

Instagram APIを触ってみる

APIにリクエストを送る

JSONを解析

画像のロード

表示

まとめ

パーティクルでトランジション

Flashでブラウザにドロップされた画像を表示

完成品

基本的な流れ

HTML5

Flash

まとめ

trace

EaselJSを試してみる

Flickrの写真をダウンロードするAirアプリを作ってみた

１．OAuth認証

２．コンタクトリストの情報を取得

４．チェックされた写真のダウンロード

FlashでFacebookアプリを作ってみる 第4回

目次

ウォールへの投稿

画像の投稿

まとめ

FlashでFacebookアプリを作ってみる 第3回

目次

アイコン画像の取得

FlashでFacebookアプリを作ってみる 第2回

目次

初期化

FlashでFacebookアプリを作ってみる 第1回

目次

準備

jQueryのマウスオーバーのアクションを触ってみる

とりあえず幅を伸ばしてみる

背景画像のアニメーション

まとめ

Instagram APIを触ってみる

APIにリクエストを送る

JSONを解析

画像のロード

表示

まとめ

パーティクルでトランジション

Flashでブラウザにドロップされた画像を表示

完成品

基本的な流れ

HTML5

Flash

まとめ

FlashでFacebookアプリを作ってみる第4回

FlashでFacebookアプリを作ってみる第3回

FlashでFacebookアプリを作ってみる第2回

FlashでFacebookアプリを作ってみる第1回