RIAブログ

ひさしぶりな投稿になってしまいました。
去年紹介したサイトはフラッシュなサイトが多かった気がしますが、ことしはどうなっていくのでしょうか？？

そんなことで、今回はフルフラッシュとフルジャバスクリプト（こんな言葉があるかは分りません。ググってもでできませんね）のサイトを作る上での個人的な感覚をまとめておきます。

・各ブラウザ対応

なんといってもまずはここからです。

Flash
取りあえず最新版のフラッシュプレーヤーが入っていればOK。iphone等で見れないの気にしなければ、特にブラウザによって異なることはほとんどない。WINとMacでデバイスフォントが異なるぐらいかな？
swfobject,swffitなどJavascriptと連動するライブラリを使う場合や、IE等で読み込み時にstageの幅が取れない等の問題はswfで回避しておく。
JavaScript
現段階ではブラウザによって違いがありすぎて、把握できないので取りあえずFrameworkを使う。Frameworkを使うことによってブラウザ間の違いを吸収してくれ、同じプロパティ、メソッドで操作が可能になる。
代表的なものにJquery(71kB),Ext.core(84KB),Prototype(159KB),Goole Closure Library（44.8KB）等があります。Prototypeのファイルサイズが大きいですが、Prototypeは短縮したものが配布されていないため、各種ツールを使い短縮することにより20KB程度まで圧縮できるそうです。
ネットで見てる分にはJqueryの人気が高いようです。ライブラリも多くあり、jsのサンプルのほとんどがJqueryだったりします。しかし基本的なDOM操作はどのライブラリでも使えるので、上位の使いたいライブラリにコアライブラリを合わせておくのが無難かとを思います。Ext.coreとJqueryの併用もできますが、そのぶん読み込みのロード時間がかかってしまいます。

・コンテンツの表示

Flash
左上から順番に重なっていきます。基本全てが絶対座標で表示されます。なので、フルフラッシュの場合はフラッシュ自体を画面に合わせて、縮尺を変更する場合以外は、ステージのリサイズイベントで各コンテンツの位置を調整します。
JavaScript
HTML,CSSにしたがって表示されます。ここが最大のポイントです。
各ライブラリをつかって生成すしたオブジェクト、または最初からHTMLに書いてあったものは、HTMLのタグ、cssによってレイアウトされます。webページとして考えると普通なことですが、フラッシュの感覚で作るとこの点が一番意識する点です。
なので単純にmarginをautoにするだけで常に真ん中にコンテンツを表示することが出来ます。普通ですよね。
なのであくまでもHTML,CSSでることを考えるとつくりやすい。なのでpostionを全部absoluteにして書くとフラッシュのように構成できるけど、なんかもったいない気がする。
canvas,svgはフラッシュと同じ感覚だけどここでは割愛！

・コード

文法的にはほとんど同じ。As2.0の感覚とjavascriptが似ている。
Flash
Aｓ2.0.As3.０で書く。
タイムラインスクリプトなどもかけてアニメーションにはやっぱまだフラッシュかな？
JavaScript
As2のようにObjectにどんどんプロパティを追加しても大丈夫。随時FFのFirebugや開発ツールでパラメータを確認できるのがJs開発の良いところ。フラッシュもdumpしたり出来るけど、何かとややこしい。

かといってもクロスブラウザー対応のJSのサイトってまだあまりないですね。
今年はこんな視点からもブログを更新できたらと思います。

TwitterのBACIS認証でのAPI提供がもうじき８月16日に停止されます。
みなさんの使っているアプリはもうOAuth認証に対応しているものでしょうか？

そこで新しい(といってもだいぶ前から提供されていました)OAuth認証をFlash(AS3.0)で出来るのか試してみました。

今までのBACIS認証では各TwitterクライアントにID,PASSを登録してつぶやき等を行っており第三者にID,PASSを預けていました。それではセキュリティ的に問題があると言う事で、OAuth認証が採用されたそうです。
OAuth認証とは、クライアントをTwitterのアカウントで認証する（Twitterのページで認証を行う。下図）とキーがクライアントに渡され、以後認証などをする事なぐTwitterの機能を使えるようになるものです。

しかし、このOAuth認証を知らない人は多いと思います。
一度認証を許可してしまうと、そのクライアントアプリはTwiiterの操作権を持つことになり、それいこう認証なしでつぶやき等が出来てしまいます。（認証はTwitterサイトでいつでも任意で解除することができます。なので一度アクセス権を取得したアプリは認証が解除されるまで、アクセス権を保持しています。）

つい先日から大量にやってくる、マイケルジャクソンのDMもこのOAuth認証を利用したものです。知り合いから送られてくるので、気軽にDMを見てリンク先をクリックするとTwitterの認証画面に進みます。そしてTwitter上のページだからといって安心して許可ボタンを押すと、その瞬間にこのアプリに自分のアカウントの操作権利を渡してしまい、結果、自分のフォロワーにDMを大量に送ってしまう事になってしまうのです。

こんな、ちょっとややこしいOAuth認証をFlash(ActionScript3.0)のみでできるのかが今日の本題です。

結論としてはFlashのみでWEBアプリとしてOAuth認証できませんでした。

なぜなら、twitterではクロスドメインが解放されておらず、Flashからいっさい通信することができないからです。なので、ローカルでの場合？を想定して進んで行きます。AIRだとクロスドメインも関係ないので出来るのではないでしょうか。

だいたいの流れはこうのようになります。

１、twitterでアプリを登録する（consumerKey, consumerSecretの発行）
２、ユーザーがアプリのアクセスを承認
３、PIN（7桁の数字）を取得
４、アクセストークン（Key, Secret）を取得
５、つぶやく

Flashで制作して行きますが、フルスクラッチで行うのは厳しいので、ライブラリをふんだんに使って行きます。また、Flexのライブラリも利用しましたので、FlexのSDKをダウンロードしFlashからクラスパスを通しておきます。クラスパスの設定(SDKpass)/frameworks/libsを設定すだけでflashでもmxライブラリが使えるようになります。といってもグリッドなどのコンポーネントが使える訳ではないです。

今回利用したライブラリ

• iotashan
• as3httpclientlib
• OAuth
• as3corelib
• as3crypto

１、twitterでアプリを登録する（consumerKey, consumerSecretの発行）
まず始めにTwitterのサイトに行き、設定＞関連アプリ＞開発者のかたへ＞新しいアプリケーションの追加と進み、アプリケーションを登録します。ここではアプリケーションの名称、開発者、詳細、アイコン設定等の設定をこないます。ここで、クライアントアプリケーションかブラウザアプリの選択を行います。これは上記３でPINを取得後の処理が違います。ブラウザアプリではPIN取得後、設定URLにリダイレクトされます。クライアントアプリではPINが表示されるようになります。今回はローカルでの作業ですのでクライアントアプリケーションにしました。登録が完了するとconsumerKey, consumerSecretを取得できます。このconsumerKey, consumerSecretは今回の最終的な認証の鍵の鍵の鍵の鍵のようなものだと思います。

２、ユーザーがアプリのアクセスを承認
ここからがASによる作業になります。

oauth = new OAuth(consumerKey, consumerSecret);
loader = oauth.getRequestToken("http://twitter.com/oauth/request_token");
loader.addEventListener(Event.COMPLETE, requestTokenHandler);

consumerKey, consumerSecretには１で取得した文字列を入れます。
このリクエストで、３でPINを取得する為の認証先のURLを作る為のrequestTokenを作ります。必要な値を入れるだけで殆どライブラリがやってくれます。

３、PIN（7桁の数字）を取得

requestToken = OAuthUtil.getTokenFromResponse(e.currentTarget.data as String);
var request:URLRequest = oauth.getAuthorizeRequest("http://twitter.com/oauth/authorize", requestToken.key);
navigateToURL(request, "_blank");

認証ページへのURLの生成です。といってもここもライブラリが全部やってくれています。
ここでnavigateToURLをしていますが、ここで一度Twitterのサイトに行く事でアプリの認証を行います。そしてPINをサイト上に表示させる、または１で登録したページへのリダイレクトを利用してPINを取得します。
今回はサイトに表示させ、それを手でコピペしましたが、AIR等ではWindowでブラザを開く事が出来るので、コールバックの実装も出来ると思います。今回ここは省略です。

PINを取得して表示した画面

４、アクセストークン（Key, Secret）を取得

var loader:URLLoader = oauth.getAccessToken("http://twitter.com/oauth/access_token", requestToken, {oauth_verifier:pin});
loader.addEventListener(Event.COMPLETE, accessTokenHandler);

３で取得したPINでAccessTokenを取得します。このAccessTokenはがOAuth認証の最後の鍵となります。なので一度認証を行いAccessTokenを所得したら、ユーザーがアプリの認証を解除するまで有効となります。Flashなどで利用する場合SharedObjectなどで保存してけば、次回からは認証なしでTwiiter機能が使える様になります。

５、つぶやく
いよいよつぶやきですが、ただ単にリクエストを送るだけではつぶやく事は出来ません。

var consumerToken:OAuthConsumer = new OAuthConsumer(consumerKey, consumerSecret);
var oauthReq:OAuthRequest = new OAuthRequest("POST", "http://api.twitter.com/1/statuses/update.xml", {oauth_version: "1.0", status: msgb.text}, consumerToken, accessToken);
var auth:String = oauthReq.buildRequest(new OAuthSignatureMethod_HMAC_SHA1, OAuthRequest.RESULT_TYPE_POST);
auth = auth.split("&").join("\",");
auth = auth.split("=").join("=\"");
auth = auth.replace(/,status=.*/, "");
var authHeader:URLRequestHeader = new URLRequestHeader("Authorization", "OAuth " + auth);
var req:HttpRequest = new Post();
req.addHeader("Authorization",authHeader.value);
req.setFormData([{
	name:"status",
	value:msgb.text
}]);
var client:HttpClient = new HttpClient();
client.addEventListener(HttpRequestEvent.COMPLETE, twtcomp);
client.request(new URI("http://api.twitter.com/1/statuses/update.xml"), req);

通常のURLRequest,URLLoaderではカスタムのヘッダーの利用が出来ないそうで、ここでもライブラリです。Signatureの生成等や、つぶやき本文への追加したヘッダーを作り、HttpRequestを利用してリクエストしてつぶやき完了です。これだとつぶやきっぱなしになってしますので、HttpRequestEvent.COMPLETEイベントを追加してリクエスト監視しています。これで終了です。

実際にtwitterで確認してみると、発言元のviaの箇所が登録したアプリ名になっているのが確認できます。
結論として、ローカルアプリならflashのみでOAuthできる事が分かりました。けど、セキュリティサンドボックスの壁がある以上やっぱFlashだけでは無理なので、webアプリの場合はやっぱり無理なんだろうか？８月１６日以後の動向に注目です。

今回はこの記事を書くにあたってこちらのブログを大変参考にさせて頂きました。有り難うございました。

画像検索をする時にどの検索サイトを利用していますか？？
今日は韓国のポータルサイトのNAVERを紹介します。

韓国では2003年にYahoo!Koreaを検索回数で抜き、国内シェアを60%以上持っています。世界でも5位のシェア率を持っています。サイト自体はとてもシンプルで、アイコン等も統一されて整理されたページになっています。
日本での検索回数はYahoo!とGoogleで90%以上のシャアがあると言われており、ポータルサイトとしてはやはりYahoo!が多いのではないでしょうか。

今日はそんな中でNAVERでの画像検索の紹介です。

[0075 NAVER JAPAN]
http://www.naver.jp/

とにかくこのNAVERでは、表示がキレイで気持ちがよいです。スロールに応じた自動読み込みはBingなどでも行えますが、等幅表示での自由なレイアウトであったり、見ているだけで楽しいです。

NAVERでのツールはダウンロードが必要なものも一部ありますが、WEBアプリとして使えるものもあり、どれもシンプルで使いやすい印象でした。

iphoneも発表されて、ますます盛り上がるappleですが、
appleのサイトにHTML5 and web standards.というコンテンツができました。
＊safariでしか見ることができません

[0074 apple html5]
http://www.apple.com/html5/

ShowcaseとしてHTML5でつくられた、Video,Typography,Galley,Transitions,Audio,360°,VRが紹介されています。それぞれがHTML5,css3,javascriptを利用して作られています。

HTML5と聞いて初めに思うことはやはりHTML5 vs Flash という構図です。
HTML5 vs Flash という構図は当初、開発者内の話のようでしたが、スティーブン・ジョブスさんのapple va adobeという話で大きくなり、特に話題になったように思います。このおかげでHTML5がより広まればと思います。

FlashはHTML5 vs Flash の話を見てて気になるのは、人によって Flash を何と捕らえるかが違うところ。videoタグで不要になるFlashは全体の一部だし、Flash使わなくてもできるようなところは既にHTML+JSに置き換わってる物も多い。

上記のような意見もありました。→
わざわざFlashでしかできなかったことが、プラグインを使わなくてできることが良い点であり。Flashでしかできないこと、Flashに求めることを見極めつつ、使い分けていくことが大切だと思います。

結局HTML5 vs Flash という構図で書いてしまいましたが、HTML5の普及により、また面白いサイトが増えていくと思うので楽しみです。

今日紹介するのはポカリスウェットのサイトです。

[0073 ポカリスウェット]
http://pocarisweat.jp/

マウスの動きと連動したコンテンツの動きが心地よいです。
全体を動かしたときだけではなく、上部のメニューをロールオーバーした際の動きもいいですね。

フラッシュコンテンツを見たときに、もしタッチスクリーンだったらと想像してしまいますが、先日海外の記事の中に、既存サイトをタッチスクリーンで操作した動画が公開されていました。
こちら
動画ではDELLのノートで操作しています。

思ったより、すんなり動いてますよね？？
簡単な動作なら作り変える必要なさそうですね。しかし、iphoneなどのappleのタッチスクリーンと比べられたらキツイんでしょうね。

これから先どんなハードがでてくるのか楽しみだけど、
それにあうUIをしっかりと作っていけるようにしていきたいです。

既にプレイしてみた人も多くいると思います、
グーグルのトップのロゴがパックマンになっています。
パックマン30周年を記念したものです。
今まで色々なロゴが出現して来ましたが、遊べるのは初めてではないでしょうか？？

[0072 google]

ちゃんとgoogleと読めますね。
Incert Coinボタンでゲームを開始できます。もう一度押すと対戦モードになります。

ただ単にパックマンが出来るだけなら紹介はしませんでしたが、
このパックマンはフラッシュで動いていません。Javascriptで作られています。
マウスでの操作、キーボード操作、サウンドまでしっかりできており凄いです。

256面まであるそうですので挑戦してみてはいかがでしょうか？
残念ながら期間限定です。

wonderflでよく使われているシンプルなUIコンポーネントのminimalcompsですが、
色々と配置を考える時にコードベースで行うと面倒だったりします。

そこでMinimalDesignerです。

元々シンプルなものですのでそんなにレアウトにこだわるものではありませんが、コードジェネレートもあり、さくっと試す事が出来ます。

MinimalDesigner

マウス操作のみで簡単にインターフェースを作る事が出来ます。
コードジェネレーターではハンドラーやインスタンス名の設定も出来るので組み込む手間が省けます。ただしちゃんと設定しないと全部同じ名前になったりします。

日本語のテキスト入力にはminimalcompsが対応していないので出来ませんが、こちらの記事等を参考にすると出来る様になるそうです。

皆さん140文字でつぶやいていますが、
今日紹介する手旗メールは10文字です。
10文字でなにを伝えましょうか？？

[0071 手旗メール]
http://www.tebata.jp/pc/index.html

サイトでは手旗で文字を伝えてくれる動画を作り、携帯電話向けに送ることができます。
旗を振る人、背景等が設定できます。
すごいデジタルなアナログな感じがします。

試してみたところFlaslite2以上対応らしく見れませんでした。
サイト上ではプレビューすることができます。

どこか味気なく思えてしまうのは、手旗だからでしょうか？
携帯にしか送信できないの残念でした。
UNIQLOのサイトのようにTwitterのアイコンにできる機能とかあったらいいと思いました。

フラッシュコンテンツを送信するとなると、
一度サーバー上でswfファイルをコンパイルしているのでしょうか？？
そこらへんの詳細も気になるところです。

googlemapsを使ったコンテンツの紹介です。
世界の縮尺をいろいろと手を動かしながら見れるコンテンツです。

鹿児島から北海道までの2倍とか例えられても、
よく理解できなかったりしますが、そんな時に便利そうです。

[0070 MAPfrappe]

使い方は簡単で、上のマップにかいた図形が下のマップに表示されます。
下のマップの図形は固定なので、自由にマップを移動して大きさを比較することができます。

日本をヨーロッパに持っていくと、意外と大きいことが分ります。
これで北海道4つ分と言われた時にピンとくる力が養えると思います。

このマップはjavascriptで作られており、図形の描写にはcanvasタグが使われています。
jsとflashでできることの共通点がどんどん増えてきました。それぞれの利点をいかしたコンテンツ作りに励もうと思います。このサイトのjsでのオブジェクトの座標管理などは参考になりそうです。

さくっとフラッシュを作って公開してみる。
さっくとのルールは

• 使ったことないクラス又はライブラリを使う
• 1時間以内に作る

です。wonderflで公開しようと思ったのですが、
byteArrayをmp3に自分で変換するのには、ちょっと無理があり、MP3FileReferenceLoaderというライブラリを使わせて頂いたのでwonderflでの公開が無理になりました。途中までwonderflで書いてたので、asファイルが一つにまとまってます。

今回やりたかったことは

• ローカルファイルを直接読み込む
• byteArray→MP3に変換する
• SoundMixer.computeSpectrumを使ってみる
• ビットマップを使って表現する

出来上がりが↓になります。
ローカルのmp3を読み込んでみてください。

ソースコード
他にも色々想定してたので無駄なところもありますが…

package
{
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		public static const CHANGEMP3:String = "changemp3";

		public function Main()
		{
			var model:Model = new Model();
			var view:View = new View(model);
			var control:Controller = new Controller(model);

			addChild(view);
			addChild(control);
		}
	}
}

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.filters.BlurFilter;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundMixer;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.utils.ByteArray;
import org.audiofx.mp3.MP3FileReferenceLoader;
import org.audiofx.mp3.MP3SoundEvent;

class Model extends EventDispatcher
{
	private var _fr:FileReference;
	private var _loader:MP3FileReferenceLoader;
	private var _soundData:Sound;
	private var _channel:SoundChannel;

	public function get mp3():Sound
	{
		return _soundData;
	}

	public function Model()
	{
		_fr = new FileReference();
		_loader = new MP3FileReferenceLoader();
	}

	public function loadHandler():void
	{
		_fr.addEventListener(Event.SELECT, secectHandler);
		var imagesFilter:FileFilter = new FileFilter("MP3ファイル", "*.mp3");
		_fr.browse([imagesFilter]);
	}

	private function secectHandler(e:Event):void
	{
		_fr.removeEventListener(Event.SELECT, arguments.callee);
		_loader.addEventListener(MP3SoundEvent.COMPLETE, loaderCompleteHandler);
		_loader.getSound(_fr);
	}

	private function loaderCompleteHandler(e:MP3SoundEvent):void
	{
		_loader.removeEventListener(MP3SoundEvent.COMPLETE, loaderCompleteHandler);
		if (_channel) {
			_channel.stop();
			_soundData = null;
		}
		_soundData = e.sound;
		_channel = _soundData.play();
		dispatchEvent(new Event(Main.CHANGEMP3));
	}
}

import flash.display.Bitmap;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.geom.Point;

class View extends Sprite
{
	private var _byteArray:ByteArray = new ByteArray();

	private var blur:BlurFilter;
	private var container:Sprite;
	private var src:Sprite;
	private var bmd:BitmapData;
	private var _model:Model

	public function View(m:Model)
	{
		_model = m;
		_model.addEventListener(Main.CHANGEMP3, chagemp3);

		blur = new BlurFilter(5, 10);
		bmd = new BitmapData(500, 500, true, 0x00000000);

		container = new Sprite();
		src = new Sprite();

		addChild(new Bitmap(bmd));
		container.addChild(src);
	}

	private function chagemp3(e:Event):void
	{
		removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

		addEventListener(Event.ENTER_FRAME, enterFrameHandler);
	}

	private function enterFrameHandler(e:Event):void
	{
		SoundMixer.computeSpectrum(_byteArray, false, 0);
		var g:Graphics = src.graphics;
		g.clear();

		g.lineStyle( 0, 0xFFFFFF );
		var colNum:Number = Math.floor(Math.random() * 0xFFFFFF);
		g.beginFill (colNum, 0.2);

		var n:Number = 0;
		n = ( _byteArray.readFloat() * 100 );
		g.drawCircle(250,250,(100 - n));

		bmd.lock();
		bmd.draw(container)//,null,null,BlendMode.ADD);
		bmd.applyFilter(bmd,bmd.rect,new Point(), blur);
		bmd.unlock();
	}
}

import fl.controls.Button;
import flash.events.MouseEvent;

class Controller extends Sprite
{
	private var _model:Model;
	private var loadBtn:Button;

	public function Controller(m:Model)
	{
		_model = m;
		loadBtn = new Button();
		loadBtn.label = "load mp3"
		addChild(loadBtn);

		loadBtn.addEventListener(MouseEvent.CLICK, clickHandler);
	}

	private function clickHandler(e:MouseEvent):void
	{
		_model.loadHandler();
	}
}

さくっとなので、エラー処理なども一切ないです。
たまに変換できないmp3もあるみたいです。
ByteArrayからｊｐｇやpngへの変換はas3corelibを利用するとできます。
SoundMixer.computeSpectrumはどうやら挙動が怪しいそうなので、そのうち検証してみたいです。

次はなににしようかな