イナヅマTVログ

2010.06.21
15:06
author: taikiken
0件のコメント

【お詫び】アクセス障害 2010-06-21

2010-06-21 10:00
サーバー移転とドメイン管理会社変更に伴い一時的にアクセスできない状態が続いています。
DNSサーバー設定が反映されたプロバイダから順次正常表示になっていっています。

DNSが反映するまでに24時間程度はかかることが考えられます。
アクセスできない方は大変申し訳なく思いますが、今しばらくお待ちいただくようお願いいたします。

て、書いても見れないよネ。
すいません。

2010.06.10
20:45
author: taikiken
0件のコメント

こりゃ便利!githubでもVersionsが使えるョ

Versions - subversion管理アプリ

Subversionよりgitが便利だと、Google codeからgithubへ移転するライブラリや初めからgithubを使ってたりするライブラリとかが増えています。

githubが素晴らしいことは使っている方のコメントから分かるのですが、ライブラリを使わせていただいてるコチラとしてはちょっとこまることがあります。
ファイル管理にVersionsが使えないことです。

VersionsはSubversionのGUIツールなので当たり前ですがgithubでは使えません。
コマンドラインから作業すれば良いだけの話なのですが、なるべく楽をしたいものぐさ人間にはつらいことです。

penner先生のSignalsやiPhoneでもFlashのgordonなんかがそうです。

しかし今や「使えなかった」と過去形で言えるようになりました。

githubチームがSubversionクライアントを使えるようにしてくれています。
Subversion Write Support
記事の日付は2010-05-04でした、もっと早く気づいていれば・・・悔やまれます。

使い方はいたって簡単。

To try it out, just use your GitHub credentials on a Subversion URL: https://svn.github.com/[user]/[repository]

penner先生のSignalsの場合は。

gitのURLを

http://github.com/robertpenner/as3-signals.git

SubversionのURLに変えて使います。

https://svn.github.com/robertpenner/as3-signals

ありがとう、github。
おかげでVersionsで管理できるようになりました。

2010.06.09
00:20
author: taikiken
2件のコメント

ActionScript3, フレームレートに関係する3つのイベント(Event)

毎フレームごとに発生するEventに関するお話。
元ネタはMy Coding Life – The MovieClip life cycle, Event.FRAME_CONSTRUCTED, and Event.EXIT_FRAME.です。

以下のコードをフレームスクリプトに書いてテストしてみました。
Flash CS4 + Flash Player 10.0 r45

function onEvent (e:Event):void {
	trace(e);
}
addEventListener(Event.ENTER_FRAME, onEvent);
addEventListener(Event.EXIT_FRAME, onEvent);
addEventListener(Event.FRAME_CONSTRUCTED, onEvent);

出力

[Event type="exitFrame" bubbles=false cancelable=false eventPhase=2]
[Event type="enterFrame" bubbles=false cancelable=false eventPhase=2]
[Event type="frameConstructed" bubbles=false cancelable=false eventPhase=2]

livedocによると…
http://help.adobe.com/ja_JP/Flash/CS5/AS3LR/flash/display/DisplayObject.html#event:enterFrame
どうでもいいけどEventの説明だと何の役にもたちません。DisplayObjectでようやく意味ありげな日本語に遭遇できます。
もっとましな日本語にならないのかなぁ。
作文のテストだったら10点以下だよね。

enterFrame
[ブロードキャストイベント] 再生ヘッドが新しいフレームに入るときに送出されます。再生ヘッドが移動しない場合、またはフレームが 1 つしか存在しない場合、このイベントはフレームレートに合わせて継続的に送出されます。 このイベントはブロードキャストイベントであるため、このイベントに登録されているリスナーを持つすべての表示イベントによって送出されます。

exitFrame
[ブロードキャストイベント] 再生ヘッドが現在のフレームを終了するときに送出されます。すべてのフレームスクリプトが実行されています。再生ヘッドが移動しない場合、またはフレームが 1 つしか存在しない場合、このイベントはフレームレートに合わせて継続的に送出されます。このイベントはブロードキャストイベントであるため、このイベントに登録されているリスナーを持つすべての表示イベントによって送出されます。

frameConstructed
[ブロードキャストイベント] フレーム表示オブジェクトのコンストラクターが実行した後で、かつフレームスクリプトが実行される前に送出されます。再生ヘッドが移動しない場合、またはフレームが 1 つしか存在しない場合、このイベントはフレームレートに合わせて継続的に送出されます。 このイベントはブロードキャストイベントであるため、このイベントに登録されているリスナーを持つすべての表示イベントによって送出されます。

これだとイベントの発生順序は以下のようになる気がするんだけど・・・
1.Event.FRAME_CONSTRUCTED
2.Event.ENTER_FRAME
3.Event.EXIT_FRAME

実行結果は違ってた。
1.Event.EXIT_FRAME
2.Event.ENTER_FRAME
3.Event.FRAME_CONSTRUCTED

で、この3つのイベントを同時に使う場面ってどんな時だろ?

1つしか使わない時はEvent.EXIT_FRAME, Event.ENTER_FRAME, Event.FRAME_CONSTRUCTEDのうちどれを使うのが正解なんでしょ?

感覚的にはEvent.EXIT_FRAMEを使いたいな、元Director使いとしては。

update

2010-07-08
コメントを参考に検証した結果。

[Event type="enterFrame" bubbles=false cancelable=false eventPhase=2]
[Event type="frameConstructed" bubbles=false cancelable=false eventPhase=2]
// frame script 
[Event type="exitFrame" bubbles=false cancelable=false eventPhase=2]

1. Event.ENTER_FRAME
2. Event.FRAME_CONSTRUCTED
3. frame script
4. Event.EXIT_FRAME

1 -> 2 -> 3 -> 4 -> 1 -> 2 -> 4 -> 1 ......

Event.FRAME_CONSTRUCTED のあと、フレームスクリプトを実行して Event.EXIT_FRAME。あとはイベントがループする。

ありがたい。

2010.06.08
00:09
author: taikiken
0件のコメント

Progression4事始め、LoaderListで複数ファイルをロードしちゃいましょ

Progression4を使えば複数ファイルのロードも簡単に行えて便利さがひしひしと身にしみます。
外部ファイルをロードするライブラリは色々あったけど、これからはProgression4だけで良さそうです。

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.net.URLRequest;
 
import jp.progression.commands.lists.LoaderList;
import jp.progression.commands.net.LoadBitmapData;
 
new LoaderList(
	{
		onComplete : function ():void {
			trace("complete", this.latestData, this.data);
			var i:uint = 0;
			for each (var bd:BitmapData in this.data) {
				var display:DisplayObject = addChild(new Bitmap(bd));
				display.x = i * 100;
				display.y = i * 10;
				i++;
			}
		},
		onProgress : function ():void  {
			trace( this.percent, "%", this.loaded, "/", this.total, this.bytesLoaded, this.bytesTotal );
		},
		onStart : function ():void {
			trace("start");
		}
	},
	new LoadBitmapData(new URLRequest("images/x.png")),
	new LoadBitmapData(new URLRequest("images/a.jpg")),
	new LoadBitmapData(new URLRequest("images/b.jpg")),
	new LoadBitmapData(new URLRequest("images/c.jpg"))
).execute();

画像ファイルを読み込んで配置してるだけだけど、こんなに簡単に実装できるのは驚きです。
面倒くさいaddEventListenerをProgressionが全部変わりに行ってくれます。
実運用するときは、onErrorcatchErrorも使っておいた方が良さそうです。

LoaderListプロパティのtotalは総読込みインスタンス数、loadedは読込み完了数。percent, bytesLoaded, bytesTotalを使えば途中経過表示も自由自在だろうと思います。
読込まれたデータはlatestData, dataに配列として格納されているのを取出して使うってことかな。

2010.06.07
12:50
author: taikiken
0件のコメント

Appleの本気度!?HTML5はFlashを置換える?

Apple HTML5 Showcase

Appleが公開した、HTML5 and web standards.
Flashをどうするなんてどこにも書いてはありませんがこれって明らかにFlashへの挑戦状ですよねー。
Apple製品がサポートするのはWebスタンダードのHTML5, CSS3, JavaScriptだって言っちゃいました。あっ、前から言ってたけ。

Flashが無くてもこんなにインタラクティブなことができる見本が公開されています。
できるらしいことは分かったので、次は作らないと「どうのこうの」は言えないって気になりはじめました。
これもAppleの作戦なんだろうなー。

話は変わるけど、同じHTML5 Webkit系つながりなお話。

chromeexperiments

Chromeブラウザの実力を見せてやる(多分)なサイトです。
GoogleのChrome Experimentsを見るとHTML5で、できることいっぱいあるじゃんと思えてしまいます。
う〜、なかなか手強いWebの未来がやってきそうです。

イケテナイWeb屋がFlashでピコピコ動くださいバナーを作ってはりまくったのにも責任はあるんだよなぁ。

そうだ日本にはガラケーがあるからFlash大丈夫、なんてオチが一番イヤだな。

WWDC 2010はもうすぐ。
さて未来はどうなるんでしょう。

2010.06.06
23:26
author: taikiken
0件のコメント

iPad, WIRED Magagine イケテルとこそーでもないとこ

WIRED MagazineWIRED Magagine Wired Product Reviews

雑誌のWIREDは好きな雑誌で年間購読をかなり長い間してたこともあり、迷わずすぐに購入をしました。

iPadアプリのWIRED Magagineがメディア、特にテレビに好評みたい。
なにかとiPadだと未来的な電子書籍が体験できるとデモに使われてました。
タッチするとビデオが見れたり3D回転したり画像やテキストが切替わるのは絵的に面白いからだろうなーと想像がついてしまいます。
こんなところにもテレビの末期的症状が顔をのぞかせています。
おもしろそうなネタには飛びつくけど、なんの分析もなく派手な絵に煽動的なコメントを被せて満足しているようにしか見えなかった。

WIRED Magazineのスゴイところは今まだ誰もなし得なかった紙とデジタル・コンテンツを融合させたことです。
雑誌のWIREDがiPad WIRED Magazineの登場でどのような関係になるのか。とかぜひメディアとして放送して欲しいものです。

使ってみて、直ぐに懐かしい感じがしたのは昔々のCD-ROMと似てると思ったからでしょうねー。
iPad用コンテンツとして開発されてはいるし開発言語も違うので同じわけはないんですけど、どことなくそんな匂いを嗅ぎ取ってしまったのは年を取ってるせいです、マチガイなく。
WIREDは電子書籍ではなくオーサリングされたデジタル・コンテンツそのものです。
世間一般に動画や音声や3D表現がiPadの電子書籍だと実現できると勘違いされるとはなはだ困ったことになるのではないかと懸念します。
WIREDだからこそできたことであって電子書籍では不可能です。

洗練された動きとiPadの特性を活かした優れたコンテンツだと思います、iPadを持っているのならぜひ経験して欲しいアプリのひとつです。
本体を回転させてもデザインが崩れないのは驚異的とも言えます。
どこがどう変わったかは凝視しないと気づかないでしょう。
デザインチームは常に2種類のデザインを用意しなければいけなかったんでしょうね、ぞっとします。

ただ、インタラクティブ・マルチメディア・コンテンツの弱点がどうしても残ってしまいます。
どこをタッチするのかはかなり配慮されていますが、それでもタッチしたのに無反応だったり(タッチする場所ではなかった)タッチなのかスワイプなのか分かりづらかったりなどがありました。
マウスオーバーのないデバイスのUI開発はまだまだ正解が見えていない混沌とした状況のようです。

WIREDが今後標準として扱われると、電子書籍ってああいうことができるもんだってことになっちゃいますよね。
制作サイドはココロしてかからないとクライアントやエンドユーザーを満足させられなくなりそうです。

Web Designer Magazine Web Designer Magazineはちょっと悲しいできだったので逆に安心したりもしました。
紙媒体を電子化するのはかなり重労働だと思わされました。
覚悟なく参入するとひどい目に会いそうです。

2010.06.05
00:32
author: taikiken
0件のコメント

Processing.js, JavaScriptでProcessingとChrome ExperimentsのProcessing.jsなクールなゲーム


前川 峻志, 田中 孝太郎

グラフィカルなインタラクション作成に力を発揮するJavaで作られたProcessing
最近、書籍も出版されてますます身近な存在になってきています。


優れた作品がたくさんありますがなかでも@flight404さんの作品が好きです。
Solar, with lyrics.はいつ見てもウットリします。

vimeoで見ることができます。

Solar, with lyrics. from flight404 on Vimeo.

ProcessingをJavaScriptへコンバートするプロジェクトがありました。

Processing.js
a port of the Processing Visualization Language

HTML5のcanvas機能を使っているようです。


デモはかなりすごいことになってます。

おすすめはBallDroppings
かなりいけてます。

Processing.js BallDroppings

BallDroppings は Chrome Experiments にもホストされています。

http://www.chromeexperiments.com/detail/balldroppings/

2010.06.04
12:05
author: taikiken
0件のコメント

SmokescreenでiPhone & iPad でFlash(?)を動かす

Smokescreen
SmokescreeniPhone & iPad SafariでFlashを動かすJvascriptライブラリの話題が少し前からネットで話題になっています。
デモが見られるだけですが、将来はオープンソースとして公開されるようです。

今年になって登場したgordonと同じくswfを解析しHTML5のcanvas, svgで描画しています。
gordonはcanvas, Smookscreenはsvgを使っているようですが・・・

デモを見る限りかなり忠実に解析再現できているようなので公開されるのが待ち遠しいです。

ただ、なんか違うようなぁと思わずにもいられません。

FlashはFlashコンテンツとして生き残って欲しいと思います。
iPhone & iPadで見れないのは「しょうがない」とあきらめてもです。

ジョブズがなんと言おうともFlashにしか表現できないコンテンツは確実にネットに存在します。
HTML5ができることとは異質な感じがします。
swfを解析し表示できたら、それでいいのかと考えさせられます。

でもジョブズが言うようなことも事実です。

japanese.engadget.comから
速報:スティーブ・ジョブズ インタビュー@ D8

A.Flashを採用しているスマートフォンなどない。(これから出荷予定と指摘されて) 2、3年前から「これから」と言われつづけてきた。一方でHTML5は普及しようとしている。

Q.しかし消費者にとっては?と聞かれて
A.気付くとは思わないが……
Q.サイトに穴が空いてること以外は。
A.そうした穴は塞がれつつあるし、ほとんどは広告だ。

A.がジョブズが答えている部分です。

確かにピコピコ動く目障りな広告がFlashで作られてたりしてるな。

だからと言ってFlashはHTML5にとって変わられる、というのは言い過ぎかとも感じますが・・・
歴史が証明するんでしょうね。
何年後にわかるのかなー。

HTML5, canvas, svgようのGUIなエディタが登場するとまた何か変わるかもしれません。
CS5にその機能がのっかるんだったけ?

【gorodon】
Gordon, iPhoneでFlashを再生する魔法のJavascriptライブラリ
gordon, runtime written in pure JavaScript 続報

まあ、独り言ですけど。

2010.06.02
10:21
author: taikiken
0件のコメント

ActionScript, stageのリサイズを監視するクラスを作ってみた

フルFlashサイトを作成する時にstageのリサイズ・イベントを監視し、windowの幅、高さに合わせてゴニョゴニョする時はstageでEvent.RESIZEを監視しなくてはいけません。
毎回同じような関数を書いていたので後々でも使えそうなクラスを書いてみることにしました。

書いたクラスは2つ。
■Spriteを継承したResizeManager
 Singletonで作っています。

■Eventを継承したResizeEvent

ResizeEvent

package com.inazumatv.events
{
	import flash.events.Event;
 
	public class ResizeEvent extends Event
	{
		//---------------------------------------
		// CLASS CONSTANTS
		//---------------------------------------
		public static const STAGE_RESIZE:String = "stage_resize";
		//---------------------------------------
		// PRIVATE VARIABLES
		//---------------------------------------
		private var _width:Number;
		private var _height:Number;
		//---------------------------------------
		// CONSTRUCTOR
		//---------------------------------------
		public function ResizeEvent(type:String, width:Number, height:Number, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			_width = width;
			_height = height;
		}
		//---------------------------------------
		// GETTER / SETTERS
		//---------------------------------------
		public function get width():Number
		{
			return _width;
		}
 
		public function get height():Number
		{
			return _height;
		}
		//---------------------------------------
		// PUBLIC METHODS
		//---------------------------------------
		public override function clone():Event
		{
			return new ResizeEvent(type, width, height, bubbles, cancelable);
		}
 
		public override function toString():String
		{
			return "ResizeEvent{width:" + width + ", height:" + height + "}";
		}
	}
}

ResizeManager

package com.inazumatv.events
{
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ResizeManager extends Sprite
	{
		private static var _instance:ResizeManager;
		private static var allowInstantiation:Boolean;
		private static var _container:DisplayObjectContainer;
		//---------------------------------------
		// CONSTRUCTOR
		//---------------------------------------
		public function ResizeManager()
		{
			if (!allowInstantiation)
			{
				throw new Error("Error: new演算子では無くResizeManager.getManager(container:DisplayObjectContainer) を使ってインスタンスを取得して下さい.");
			}
		}
		//---------------------------------------
		// PUBLIC METHODS
		//---------------------------------------
		public static function getManager(container:DisplayObjectContainer=null):ResizeManager {
			if (_instance == null && container == null) {
				throw new Error("Error: 引数にDisplayObjectContainerが必要です.");
			}
			else if (container is DisplayObjectContainer && container.stage == null)
			{
				throw new Error("Error: 引数に有効なDisplayObjectContainerが必要です.");
			}
			else if (_instance == null)
			{
				allowInstantiation = true;
				_instance = new ResizeManager();
				_container = container;
				container.stage.addEventListener(Event.RESIZE, onEventCall);
			}
			return _instance;
		}
		public static function stop():void
		{
			if (allowInstantiation)
				_container.stage.removeEventListener(Event.RESIZE, onEventCall);
		}
		public static function resume():void {
			if (allowInstantiation)
				_container.stage.addEventListener(Event.RESIZE, onEventCall);
		}
		//---------------------------------------
		// PRIVATE METHODS
		//---------------------------------------
		private static function onEventCall(event:Event):void {
			var w:Number = _container.stage.stageWidth;
			var h:Number = _container.stage.stageHeight;
			_instance.dispatchEvent(new ResizeEvent(ResizeEvent.STAGE_RESIZE, w, h));
		}
	}
}

使い方はこんな感じ。
フレームスクリプトです。

import com.inazumatv.events.ResizeManager;
import com.inazumatv.events.ResizeEvent;
 
var manager:ResizeManager = ResizeManager.getManager(this);
manager.addEventListener(ResizeEvent.STAGE_RESIZE, resizeHandler);
 
function resizeHandler (e:ResizeEvent) {
	trace("resizeHandler", e.width, e.height);
}

1回ResizeManager.getManagerする時DisplayObjectContainerが引数として渡されれば2回目のインスタンスを作る時からは必要なくなります。

var manager2:ResizeManager = ResizeManager.getManager();
manager2.addEventListener(ResizeEvent.STAGE_RESIZE, resizeHandler2);
 
function resizeHandler2 (e:ResizeEvent) {
	trace("resizeHandler2", e.width, e.height);
}

ResizeManager.getManagerの引数DisplayObjectContainerは表示オブジェクトとしてaddChildされている必要があります。
初めてインスタンスを作る時に以下のようにするとエラーになります。

var manager:ResizeManager = ResizeManager.getManager(new Sprite());

Event.RESIZE通知を一時的に無効にすることも可能です。

// 無効
ResizeManager.stop();
// 再開
ResizeManager.resume();

Singletonクラス作成はgskinner先生のgBlog: AS3: Singletonsを参考にさせていただきました。

update 2010-06-17
public static function stop, public static function resumeif を追加しました。

2010.06.01
20:47
author: taikiken
0件のコメント

ActionScript, addChildAtで指定できるインデックス

表示オブジェクト(SpriteやMovieClipなどなど)をDisplayObjectContainerへインデックスを指定して追加する関数addChildAtのメモ。

DisplayObjectContainer上に存在するインデックスかインデックス+1を指定しないと、エラーになります。

RangeError: Error #2006: 指定したインデックスが境界外です。

リファレンスを見てもこのことは明確に書かれていません。(見つけられなかったかも)
http://help.adobe.com/ja_JP/Flash/CS5/AS3LR/flash/display/DisplayObjectContainer.html?allClasses=1#addChildAt()

絶対上書きされないようにと、インデックスを9999などにすることはでき無いことになります。
表示オブジェクトの追加はaddChildで行い、重なり順をコントロールする時はaddChildAtを使うような自分ルールがいるのかもしれません。

DisplayObjectContainerは表示オブジェクト(Child)をVectorのように飛びインデックスを許さないように管理してるのでしょう。
その方がメモリにも優しいし。
理由は理解できます。

Google先生に聞いたらたくさんヒットしそうなお話でした。