Home

スーパー肩パッドの大開発者養成ブログ

更新できるスクリーンセーバーを作ろう(1):最近の動向と消費者とのかかわりや基礎知識

  • 2009-05-31 (日)
  • ̃Gg[͂ĂȃubN}[Nɒlj

昨年の末から「クライアントが更新可能なスクリーンセーバーを作る」というお題で5,6個作りました。そこで得た作り方やつまづきポイントなどをまとめてみます。ちょっと長くなるので数回に分けて連載してみます。

今回は基礎知識とスクリーンセーバー作成ツールの比較です。「作る前」の段階ですね。

スクリーンセーバーを配布する戦略と消費者意識

スクリーンセーバーはCRTモニタの焼きつき防止のためにあったそうです。しかし、最近の主流である液晶モニタでは焼きつきが起きにくいそうです。そんな進化の流れに逆行するように、スクリーンセーバーは流行しつつあります。

一般の方もPCの操作にもだいぶ慣れたのでしょう。壁紙を変えるように、あるいは昨日とは違うシャツを着るような感覚でスクリーンセーバーも簡単に変更できるような時代になりました。

また、我々の作るコンテンツは、ブラウザ上(Webサイトであり、ブログパーツである)から切り離され、スクリーンセーバーへと変化したときに、消費者の意識に変化を与えられると考えられます。ブラウザではユーザが主体となって操作をし何らかの体験を獲得しますが、スクリーンセーバーはまったく逆です。勝手に立ち上がり、映像や画像、つまりユーザの好きなものを流してくれるのです。

自分からアプローチしなければ振り向いてくれなかった人が、進んでこちらにアプローチしてくれる、といったことかもしれません。

あるいは、かっこいいサイトをクリップして自分のそばにおいておきたい、という所有欲求であるかもしれません。youtubeやDailyMotionから動画や音楽をぶっこ抜いて、iPodにぶち込むことと似ているとは思いませんか?

一見するとWebサイト化しているように見えるスクリーンセーバーではありますが、Webサイトとは別の道から消費者を刺激しています。

更新することで飽きさせないスクリーンセーバーに

天下のUNIQLOCKや、オサレなHONDA INTERNAVIも、更新されるコンテンツが楽しみの一つとなっています。

UNIQLOCK
http://www.uniqlo.com/show/
HONDA INTERNAVI REALIZATION
http://www.honda.co.jp/internavi/realization/#/downloads
Play MUJI
http://www.muji.com/playmuji/

スクリーンセーバーの変更を簡単にできるようになった今、簡単に変更させずに「チャンネルはそのままで」とさせるスクリーンセーバーが求められています。せっかく好意を持ってインストールまでしてもらった優良顧客の心を、いかに引き止め、惹き付け続けるのか。ちょっとした更新性を付加することで、そういったブランドイメージを構築するに十分な媒体になりえます。

でもね、僕は頭がパッパラパーだからこれより難しいお話は頭の上に放り投げて、次の話題へ移ろうと思うんだ!アヘアヘアヘ!!

スクリーンセーバーの基礎知識

さて、一通りアヘアヘしたので、簡単にスクリーンセーバーで気をつけることをリストしましょう。

  • いったん配布してしまうと、自動アップデートが難しいのでミスすると大変な目にあうかも
  • だいたいのスクリーンセーバ作成ソフトがwinとmac用に分かれていて、別々に購入する必要がある
  • スクリーンセーバー作成ツールはどれも一長一短ある

そんなたいしたことはありませんね。さて、次へいきましょう。

更新可能なスクリーンセーバーにするための3つの手段

更新可能にするには以下の3つの手段があります。しかし、ツールによってはできないことや苦手なこともあります。ひとまずこの3つの手段を押さえておきましょう。

1.サーバに設定xmlを置き、更新する

サーバにあるxmlを読みに行かせ、xmlで画像を変更したり、レイアウトを変更したり、などといったことをします。

2.スクリーンセーバーの本体となるswf自体をサーバに置いて更新する

サーバに本体のswfを置きます。読み込みに時間がかかるときもありますが、不具合があってもすぐに差し替えられる安全性があります。

3.ローカルファイルを置き換えて更新する

作成ツールによってはローカルファイルを書き換えてくれるものもあります。

ローカルファイルを置き換え、中身をごっそり入れ替えることが一番いいのですが、なかなか簡単ではありません。


さてさて、その辺も踏まえて次回は作成ツールの比較をしましょう。

See you next AHEAHE!!

スクリーンセーバーのことシリーズ

SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した!

  • 2009-05-19 (火)
  • ̃Gg[͂ĂȃubN}[Nɒlj

IEとかでstage基準の中央寄せができなくなることがある

特定の状況で一定時間、swfの「stageのwidthとheightがゼロ」になり、stageの中心にモノを置いたはずなのに、変な位置にきてしまうことがあります。今回はその問題を肩パッド探検隊が追います。

基本的な対処法は以下のblogにおまかせ!

崖っぷちWEBデザイナーブログ | stage幅取得のタイミングをテストしてみた

二番煎じですが、ちょこっと書いていきます。対処するクラスが見たい方はページ内リンクで!

SWFObject1.5、SWFObject2.1のDynamic PublishingでWinIEがダメで、MacのFirefoxも怪しいらしい。あとMacのFla:verで作ったスクリーンセーバーもダメ

SWFObjectのDynamic Publishingの場合

SWFObjectで空divを起点に動的にObjectタグを埋め込むやつをすると

  • IE全般
  • MacのFireFox

で、一瞬だけstage.stageWidthとstage.stageHeightが0になります。

Dynamic Publishingってのは以下のjsコードで空divに埋め込むやつです

//SWFObject1.5
var so = new SWFObject("hoge.swf", "topFlash", "100%", "100%", "8", "#FFFFFF");
so.write("flashcontent");

//SWFObject2.xならDynamic Publishingと呼ばれるタイプ
swfobject.embedSWF("hoge.swf", "flashcontent", "100%", "100%", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
			

widthとheightがゼロになるサンプル

サンプルでテストしてみてください。
サンプルのasはこちら

  • wmodeはtransparent
  • 最初にstageの中心に文字を書こうとしますが、ダメブラウザだと文字が(0,0)にきます
  • swfの中心に「うんこ」と書かれたらOKブラウザ!
  • 崩れてたらStageの初期サイズが0のダメブラウザ。IEかMacのFirefoxです
  • traceされているテキストは以下です
    • 一発目にStageのwidthとheightをチェック
    • ENTER_FRAMEイベントと何回ENTER_FRAMEが回ったか
    • ENTER_FRAMEでStageのwidthとheightをチェック
    • stageのResizeイベント
    • stageWidthがゼロだったらADDED_TO_STAGEイベントを取得
    • それぞれのgetTimer

サンプルの結果

win
IE6~8 Firefox3 Opera9.6 Safari3 Safari4 chrome
×
キャプチャ
win_capture
mac os10.5
Firefox3 Opera9.6 Safari3 Safari4
(崖っぷちさんとこではMacのFirefoxでもアウトでしたが私の環境ではOKでした)

ENTER_FRAMEの方がRESIZEイベントよりも速くStageのwidthが変わったことを知る

このサンプルを作っていてわかったのですが、ENTER_FRAMEでwidthとheightを監視して、ゼロじゃなくなったあと(ENTER_FRAMEのイベントハンドリングが終わったあと)にRESIZEイベントが飛んできます。なので、無意味なタイムラグが生じます。

SWFObjectでの原因

SWFObjectの原因は以前のエントリで妄想を膨らませましたが、これは間違っていると思います。詳細ご存知のかた、おしえてください!

fla:verで作ったスクリーンセーバーをMacで再生するとき

fla:ver(http://flaver.jp/)というスクリーンセーバー作成ソフトで作ったスクリーンセーバーでも起こります。
ref) Mac OS X 10.5で MovieClip が表示されないことがあります

対処するクラスを作りました

大変つまらないクラスですがどうかご査収くださいませ
stagesize問題を対処したサンプルの実行結果

対処法について

  • Event.RESIZEよりEvent.ENTER_FRAMEの方がstageの幅高の取得が早いので、ENTER_FRAME監視がベター
  • dispatchEventしてるのは入口と出口を分けないため。
    (newする前にif(stage.stageWidth * stage.stageHeight != 0)を挟めばOKブラウザをスルーできますが、OKブラウザとNGブラウザで出口がバラバラになるとややこしいのでこうしました。)

クラスとサンプル

サンプルとソースzip

StageSizeChecker.as
package com.katapad.utils 
{
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.utils.getTimer;
	
	/**
	 * WinIEやMacFFでSWFObjectのDynamic Publishingをしたときにおこる
	 * Stage.stageWidthとstageHeightが0になる問題を
	 * EnterFrameで監視してチェックするクラス<br />
	 * Event.RESIZEが飛んでくるタイミングがEvent.ENTER_FRAMEより遅いので、
	 * EVENT.COMPLETEのついでにstageからEVENT.RESIZEも飛ばします(オプション)。
	 * 
	 * @author katapad.com
	 * @version 0.1
	 * @since 2009/03/17 3:40
	 * @usage
	 * <p>MainクラスやPreloaderクラスの最初に</p>
	 * <pre>
	 * var StageSizeChecker:StageSizeChecker = new StageSizeChecker(stage);
	 * StageSizeChecker.addEventListener(Event.COMPLETE, delayInit);
	 * StageSizeChecker.start();
	 * </pre>
	 * <p>を書いて、あとはEvent.COMPLETEの受取先で</p>
	 * <pre>event.target.removeEventListener(Event.COMPLETE, delayInit);</pre>
	 * <p>すればOK</p>

	 */
	public class StageSizeChecker extends EventDispatcher 
	{
		/**
		 * stage.stageWidthとstage.stageHeightが0以外になったら配信します。
		 * @eventType flash.events.Event.COMPLETE
		 */
		[Event(name = "complete", type = "flash.events.Event")]
		
		//----------------------------------
		//  static var/const
		//----------------------------------
		
		//----------------------------------
		//  instance var 
		//----------------------------------
		private var _stage:Stage;
		private var _isResizeEvent:Boolean;
		
		/**
		 * ステージサイズを見張り、ゼロ以外ならEvent.COMPLETEを配信します。
		 * @param	stage
		 * @param	isResizeEvent	_stage.dispatchEvent(new Event(Event.RESIZE))も同時に発動させるかどうか
		 */
		public function StageSizeChecker(stage:Stage, isResizeEvent:Boolean = true) 
		{
			init(stage, isResizeEvent);
		}
		
		private function init(stage:Stage, isResizeEvent):void 
		{
			_stage = stage;
			_isResizeEvent = isResizeEvent;
		}
		
		//--------------------------------------------------------------------------
		//
		//  PUBLIC
		//
		//--------------------------------------------------------------------------
		public function start():void
		{
			if (isValidSize())
			{
				complete();
				return;
			}
			_stage.addEventListener(Event.ENTER_FRAME, check);
		}
		//--------------------------------------------------------------------------
		//
		//  PROTECTED
		//
		//--------------------------------------------------------------------------
		
		//--------------------------------------------------------------------------
		//
		//  EVENT HANDLER
		//
		//--------------------------------------------------------------------------
		private function check(event:Event):void 
		{
			if (isValidSize())
				complete();
		}
		
		//--------------------------------------------------------------------------
		//
		//  PRIVATE
		//
		//--------------------------------------------------------------------------
		private function isValidSize():Boolean
		{
			//trace( getTimer(), "_stage.stageWidth : " + _stage.stageWidth );
			return _stage.stageWidth * _stage.stageHeight != 0;
		}
		
		private function complete():void
		{
			_stage.removeEventListener(Event.ENTER_FRAME, check);
			if (_isResizeEvent)
				_stage.dispatchEvent(new Event(Event.RESIZE));
			dispatchEvent(new Event(Event.COMPLETE));
			_stage = null;
		}
		
		//--------------------------------------------------------------------------
		//
		//  GETTER/SETTER
		//
		//--------------------------------------------------------------------------
	
	}
	
}

flash lite1.1やdocomo端末でswfにGETパラメータを保持させることが、こんなにも難しいと知ってたらFlasherにはなりませんでした。あっ、すこし言い過ぎました

  • 2009-04-20 (月)
  • ̃Gg[͂ĂȃubN}[Nɒlj

モバイルサイト向けのアクセス解析ツールでセッションを保持させるために、swfにGETパラメータを仕込まないといけない状況になりました。

このアクセス解析ツールでは、

  • html→htmlへの遷移ではセッションがうまくとれる
  • html→swfへの遷移ではGETパラメータを渡して強引にセッションを取得
  • swf→htmlへの遷移もGETパラメータを渡してセッションを継続させる

という課題がありました。swfが間に入るとひと手間かかってしまいます。詳しい流れは下図を参照してください。

とても簡単そうに見えますね。しかし!作業は難航しました。

Flash lite1.xでは普通にやってるとGETパラメータを処理できない

まずはFlash lite1.1の予習から

  • docomoの904iまではFlash Lite1.1。かなり多くの端末に1.1が搭載されている。docomoの資料
  • flashvarsが使えない
  • GETパラメータも受け取れない
  • _urlプロパティがないので、無理やり取得もできない
    • 取得したとしてもindexOf()がないので解析しようがない

というわけで、通常GETパラメータをFlash lite1.x上では扱うことができません。

じゃあ、swf→php→htmlとして、swfのGETパラメータをリファで取ってphpで処理すればいいんじゃね?と思ったらdocomoはリファを渡さない

swf→htmlの遷移の間にphpを挟み、環境変数のHTTP_REFFER(リファのURLを取得)を使って、GETパラメータを抜き取ろうと思いました。しかし!

  • docomoはHTTP_REFFERを渡さない

どうしようもありません。ググっているとHTTP_REFFERなどの環境変数に頼ったコーディングはよくないともありました。

結局swfを動的にGETパラメータの変数をswfに埋め込んで…という手法で

どうしようもなかったので、ついに避けていた手法をとることにしました。swfmillという選択肢もありましたが、とりあえず簡単っぽく実現しやすいものを選びました。

FACEs: 携帯Flash (FLASH Lite 1.1) へ普通にパラメータを渡す

このソースを少しいじくって今回の要望に沿う形にしてみました。「?」以下のGETパラメータをそっくりそのままFlashの中に変数として持たせます。

swfをゴニョゴニョして表示するphp (swf.php)
<?php
	require_once "wrap.php";
	$params = strstr($_SERVER["REQUEST_URI"], "?");
	echo swf_param_insert('hoge.swf', "trackParams", $params);
?>
wrap.phpで追加した関数
function swf_param_insert($file, $varsName, $item){
	header("Content-Type: application/x-shockwave-flash");
	
	$tags	= build_string($varsName, $item);
	$src	= file_get_contents($file);
	$i	= (ord($src[8])>>1)+5;
	$length	= ceil((((8-($i&7))&7)+$i)/8)+17;
	$head	= substr($src,0,$length);
	return(
		substr($head,0,4).
		pack("V",strlen($src)+strlen($tags)).
		substr($head,8).
		$tags.
		substr($src,$length)
	);
}

function build_string($varsName, $item) {
	
	$s = sprintf(
		"x96%sx00%sx00x96%sx00%sx00x1d",
		pack("v",strlen($varsName)+2),	$varsName,
		pack("v",strlen($item)+2),	$item
	);
	return(sprintf(
		"x3fx03%s%sx00",
		pack("V",strlen($s)+1),
		$s
	));
}

バイナリに分解してゴニョゴニョしてますが、わけわかんないです。わかんないのでfunction名も適当です。ヘッダのファイルサイズを増やして、tag(変数)を埋め込んでいるということがなんとなくわかる程度です。

SWFのバイナリに詳しく知りたいかたは以下のリンクを辿るかググってみてください。そのあと僕に手取り足取り教えるか、けしからん動画をください。

今回説明したサンプル

で、この技術、ほかに使えんの?

ご存知のとおりバスキュールさんのGyorol2009年の年賀サイトでこれが使われてると思われます。最近はバスキュールさん以外のとこでもケータイ連動やってましたね。だいぶ浸透してきてるのかな?

超便利なローダーBulkLoaderの落とし穴にハマってきました

  • 2009-04-17 (金)
  • ̃Gg[͂ĂȃubN}[Nɒlj

便利なAS3用ローダー:BulkLoaderの解説は他のサイトにおまかせ!

BulkLoaderは複数の素材をまとめて読み込める万能ローダーです。解説はほかのサイトにおまかせ!ぜひ読んでください。読んだら僕のサイトに帰ってこなくても大丈夫です!

BulkLoaderの便利ポイントをまとめると

  • まとめてロードできる
  • String形式のurlをadd()するだけでロードの準備はOK。さらにvideoなのかxmlなのかjpgなのかなどを自動判別してロードしてくれる(きちんとtype指定もできるのでやったほうがいいです)
  • ロードが終わったら、あらかじめBulkLoaderに渡しておいたIDやurlのstringで取得できる
  • getXML()とかgetBitmapdata()などで好みのインスタンスで取得できる
  • 複数ロードのパーセントや何個中何個がロードできたかを取得できる。
  • ロードしたものを取得後、メモリに残したり、取得したらメモリから消したりと、メモリ管理が簡単

といったところです。ものすごく便利です。

今回ハマったローディングパーセント処理

今回、外部素材を10個ほど読み込んでいました。しかし、パーセント表示がおかしな挙動になってしまいました。

  1. 最初の1秒間くらいでパーセントが100%近くに達し
  2. その後の1秒で10%ちかくまで減り、
  3. その後は正常に100%まで達しました。

原因は2つあって、

  1. ロードするときにproressイベントが発動するまで、bytesTotalが見えない問題
  2. BulkLoaderのパーセント表示には2つ種類があり、そのうち強引な作りのほうを選んでしまった

1.ロードするときにproressイベントが発動するまで、bytesTotalが見えない問題

外部素材との接続を確立してproressイベントが発動するまではbytesTotalが見えません。下のスクリプトで確認してみましょう。

このように、progressEventが発生するまでbytesLoadedやbytesTotalはわかりません。複数ロード時にはこのへんの問題があります。

BulkLoaderのパーセント表示には2つ種類があり、そのうち強引な作りのほうを選んでしまった

次にBulkLoaderが持っている2種類のパーセント表示を見てみましょう。

  1. 読み込みが完了したアイテム数 / トータルのアイテム数(BulkProgressEvent.ratioLoaded)
  2. 今までに読み込んだアイテムの総bytesLoaded / トータルのアイテムの総bytesTotal(BulkProgressEvent.percentLoaded

「1.完了数/総数」は複数ロードするときによく使われる手法ですが、2つしかロードがないときは50%ずつ増えることになるので、使いどころが難しいときもあります。
正確なパーセントを知りたいときは後者の「bytesLoadedとbytsTotalの比率」を使います。

しかし、ここが大きな落とし穴となっていました。

BulkLoaderはこのパーセント表示を強引な手法で実装しています。前述のとおり、flash.event.ProgressEventが飛んでこない限り、bytesTotalを知る術はありません。BulkLoaderでは、

  1. bytesTotalを取得できたitemだけを加算し、
  2. すべてのitemのbytesLoadedと上記のbytesTotalの比率からパーセントを表示します

つまり、すべてのitemのbytesTotalがわかるのは最後のitemのprogressが始まったときになのに、分母(bytesTotal)が変動する状態でパーセント表示を開始してしまうのです。

ロード直後では
800/1000(80%)
だったものが、その次のフレームで
1000/10000(10%)
となる可能性があるのです。

じゃあどうする?

2009-10-06追記 : weightPercentを使う

以下のやりかたよりもスマートな解法がありました。BulkProgressEvent.weightPercentを使うともっとまともなパーセントを取得できます。
こちらの記事に書きました。「BulkLoaderで「もう悩まない!」ための6つのtipsをまずは14日間で売上No.1!!

1.読み込みが完了したアイテム数 / トータルのアイテム数をとる

これが一番安全ですね。パーセント表示は正確なものが期待できませんし、トータルのアイテム数が2つ3つのときはおおざっぱになるので、ごまかしの効くviewにしましょう

2.読み込み順序に優先順位をつけ、重たいものから先に読み込む

先に軽いファイルを大量に読み込むと、重たいファイルを読み込み始めた瞬間にグッと分母が上昇してしまいます。重たいファイルから読めば分母の変動が少ないので、ある程度ゴマカシが効くようになります。

//優先順位はこんな感じで設定
//addの引数でpriorityを設定。priorityが高いやつが優先的に読み込まれる。重たいファイルを優先的に指定しとく。
var bulkLoader:BulkLoader = new BulkLoader("main loading");
bulkLoader.add("めっさ重たい.flv", { priority : 1000 });
bulkLoader.add("コニシキ.flv", { priority : 1000 });
bulkLoader.add("ダイエットコーラ.xml", { priority : 0 });
bulkLoader.add("糖分ゼロ.xml", { priority : 0 });
bulkLoader.add("ふわっふわ.xml", { priority : 0 });
bulkLoader.add("納品前日に仕様変更.swf", { priority : 500000 });
bulkLoader.addEventListener(~~~);
bulkLoader.start();

addメソッドの引数はasdocで

重たいファイルは後回しにした方がいいときの方が多いので、そのへんはトレードオフとかを考えてベターな手法を選びましょう。

  • Comments (Close): 0
  • Trackbacks (Close): 0

TextFieldから文字列が溢れたときに「…」ってするやつのasを少し高速化

  • 2009-01-06 (火)
  • ̃Gg[͂ĂȃubN}[Nɒlj

TextFieldから文字列がはみ出した時の処理 – blog.nium.jpを読んでいて、高速化できそうだと思ったのでほんの少しいじくりました。

ソースだけ必要な人もいると思うのでいきなりソース!適当なクラスのstaticにでも置いてください。

public static function trimmingText(textField:TextField, endText:String = "...", defaultFontSize:Number = 12):void
{
	textField.wordWrap = false;
	if (textField.maxScrollH <= 0) 
		return;
	textField.appendText(endText);
	var text:String = textField.text;
	
	//ループの回数を減らす
	if (textField.maxScrollH > defaultFontSize * 1.5);
		textField.text = text.slice(0, text.length - endText.length - 1 - Math.ceil(textField.maxScrollH / defaultFontSize)) + endText;
	while (textField.maxScrollH > 0) 
	{
		text = textField.text;
		textField.text = text.slice(0, text.length - endText.length - 1) + endText;
	}
}
//こうやって使う
var unko_txt:TextField = addChild(new TextField()) as TextField;
unko_txt.width = 100;
unko_txt.autoSize = TextFieldAutoSize.LEFT;
unko_txt.text = "君、ウンコくさいね。すごく臭うからしたよね?ね?ね?君が好き。"
Hogehoge.trimmingText(unko_txt);

本家でのソースの流れ

本題に入る前に、本家ではどういう処理をしてるかを少し説明します。

  1. 水平スクロールがあれば
  2. テキストフィールドの最後に”…”をつける
  3. 水平スクロールがなくなるまで↓をループする
  4. 1文字ずつ削除していく

以下高速化をした点

テキストをトリミングする方法を配列じゃなくて、Stringをいじくる方法に変えた

配列はnewして、中身を入れるときがずいぶん重いらしいので、普通のStringをいじくる方法にしてみた。5~10%高速化。

//配列を作ってspliceして、joinするという、配列生成+操作が重そうだったので
//var words:Array = textField.text.split( "" );
//words.splice( words.length - 4, 1);
//textField.text = words.join( "" );
 textField.text = text.slice(0, text.length - endText.length - 1) + endText;

whileループの回数を減らすために、if分をひとつ挟んで、がっつり削除する

1文字ずつ削除するのがもったいない気がするので、ある程度がっつり削除する方向にしてみた。文字数にもよるけれど、80%高速化

 if (textField.maxScrollH > defaultFontSize * 1.5);
 	textField.text = text.slice(0, text.length - endText.length - 1 - Math.ceil(textField.maxScrollH / defaultFontSize)) + endText;

whileループ前に一枚かませます。あふれた文字数をフォントサイズから割り出してがっつり削除します。半角文字などが大量にあると一発では消えませんが、それでもかなりの量の文字を一気に消せます。

図にするとこんな感じです。

(textField.getTextFormat().sizeからフォントサイズを取得できますが、ここでいちいち取得してると重くなるので引数にしています)

結果 45ms → 5ms

計測方法は

  • 以下の文章が入ったTextFieldを5つ用意してまわしました。
    □□□□■□□□□1□□□□■□□□□2□□□□■□□□□3□□□□■□□□□4□□□□■□□□□5□□□□■□□□□6□□□□■□□□□7□□□□■□□□□8□□□□■□□□□9□□□□■□□□□10
  • TextFieldのwidthは200にしました。

for文で10万回まわしたとかじゃないですよ。日常的に使う場面っぽくしてみました。

ちっさいところとは言えど、ループ回数が多いのと、描画に関わるところなので若干の高速化ができました。

  • Comments (Close): 0
  • Trackbacks (Close): 0

デザイナー上がりのFlasher1年生が読んだ19冊の本を、これほどかというほどに感想を書きます。だいたい3行だけど。

  • 2008-12-31 (水)
  • ̃Gg[͂ĂȃubN}[Nɒlj

Flasherになって1年が経ちました。この1年いろいろと勉強さしてもらいました。

大掃除で本の片付けついでに、今年買ったFlash技術周辺本のレビューでもしましょう。

途中までしか読んでない本が大半ですが、まったく読まなかった本もあります。
ここでは最低でも50ページは読んだ本19冊を選抜しました。Flash本9冊、それ以外10冊です。

ずらずらと並べた19冊の感想を読むのはつらいと思うので、1冊だけ「ムツゴロウさんの動物王国のナレーション」のモノマネをしながら書いています。

2008-01月~03月に読んだ本

01.ActionScript 3.0 アニメーション

★★★★★。オススメ。3か月で全ページ読破しようと思ってた。

結局、最後の100ページは流し読みをしたけれど、初心者にはかなりいい内容。とりあえず大量のモノを動かして、ある程度の高速化を意識して…という基本がわかればええと思う。

02.UMLモデリングレッスン-21の基本パターンでわかる要求モデルの作り方

★★★☆☆。例がFlashと無縁なので忍耐が必要。

UMLでも勉強しようと思って買った。この手の本に共通して言えるのが、例がよくわからんのだ。会員が何かを購買した情報を分類したり、従業員の種類を気にしたり、顧客の種類を気にしたり、といった「Flashではない向こう側のプログラミング」の例だらけだ。このような例に耐えられる、もしくはそんなん気にせず本質を読み取れるならいい本じゃないかと思う。UML、つまりオブジェクト指向の表現の幅が広がるはず。

03.リファクタリング―プログラムの体質改善テクニック

★★★★★。オススメ。ビューティフルなコードを書くための本。

第3章まで読めとamazonに書いてあったけど、そこまで読めたら全部読める。コードの不吉な匂いがわかればよし。優秀な人のソースも読めるようになる。
ただ、このままFlashに適応させると大変な目にあうので注意!律儀に書くとコードの実行が遅くなるので、この辺のバランス感覚は経験が必要になってくる。

04.モーション・タイポグラフィ

★★★☆☆。古い。中古で買ったら間の4ページくらいが破られてた。

モーション・タイポグラフィの歴史とか見方とかその辺を意識できるようになった気がする。とりあえず、映画のオープニングはしっかり見ようと思った。

05.ActionScript3.0 ビジュアル・リファレンス

辞書は1冊あればいいだろう。Flashのヘルプで事足りるので不要かもしれない。1か月に1度開くと知らん機能を発見できたりする。

06.Advanced ActionScript 3 with Design Patterns

★☆☆☆☆。Flashでのデザインパターンはどのようにして行われるのか、そういった疑問を持ち、英語の本に手をだした。

しかし、単に他言語の教育用デザインパターンをActionScriptで書きました的内容なのがとても気になってしまった。AbstractGameのサブクラスにFootBallGameやで。どこで使うねん。Flashのために書かれたとは思えない内容で残念。

2008-04~06月に読んだ本

07.Webデザインの「プロだから考えること」

★★★☆☆。一流の人たちの作り方がほんの少しわかる

個人的には電通の中村洋基氏とimaginativeの水藤祐之氏・深澤 洋介氏の話が印象に残ってる。みんなクオリティを高めるために死に物狂いなんやなー。そらぁ、僕みたいな底辺が太刀打ちできるはずもない。そういうことを実感できただけでもありがたや。

08.FLASH OOP (AS2のやつ)

★★★★☆。オススメ。のちにAS3版がでるけど、こっちのがいい。

なにがいいかというと、Flash以外のことが書いてある。すなわち、Flash以外の本を読め!と書いてあるのと同義だ(と思う)。これを見てプログラミングの世界の広さを垣間見れたし、興味の対象も広がった。

09.Learning Actionscript 3.0

★★★☆☆。のちに和訳が出たのでこいつ(原著)は買う必要がない。和訳はこっち初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド

内容は実にわかりやすい。わかりやすすぎる。コードもわかりやすいし、サンプルも興味をそそるものが多い。あと、AS3でつまづきやすいところと基礎的なところに絞られていて、無理なく読めた。デザイナ上がりで大重さんの本を読んだら次はこれか。

10.Production Studio マスター After Effects

★★★☆☆。高い。高いけど、サンプル素材がすごいらしい。

内容は初心者向け。エフェクトの一覧があるので、やさしい。Flashばかりに頼ってたら死ぬ状況もあるので、AfterEffectsは絶対覚えとかないといけないし、表現の幅も広がる。

11.Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック

★★★☆☆。初心者向けだけど、むらけん氏とTeamLabがずば抜けてる。

むらけん氏とTeamLabの2つはつくりがきれいだし、解説も豊富。Flashの実践的な作り方をきちんと書いてある本はほとんどないので、それだけで買う価値はある。

12.FLASH OOP for ActionScript 3.0

★★★☆☆。OOPとは少し違う。

AS版と比べて、OOPに比重が置かれていない。初心者には難しいだろうし、上級者ならすぐわかるだろうし…といった中途半端感が目立つ。もうすこしページがあってもいいのではないか。値段も高いんだから。

2008-07~09月に読んだ本

13.Adobe Flash CS3 詳細! ActionScript3.0入門ノート2

★★☆☆☆。入門ノート1の続編。

入門ノート1がかなりわかりやすかったので買ってみた。内容はそれほど高度なことや必要性のあることでもない(FLVのキャプションはそんなに必要ないだろう)。こちらは立ち読みをして購買の検討をすればいいと思う。

14.ゲーム開発のための数学・物理学入門

★★★☆☆。最近はAS3の数学・物理学本も出たみたいなので、そっち読めばいいのではないか。僕も今買った。

この本は説明をかなりはしょるけれど、公式は暗記すればいいのでそんなのでもいいかもしれない。高校数学どまりでも読めるけど、わけわからないぜ!これを乗り切らないと野たれ死ぬだけなので頑張ろう。

15.実例で学ぶゲームAIプログラミング

★★★★☆。ゲームの世界に衝撃を受けた。

ゲーム業界のノウハウはすごい。こんな膨大な知識が埋まっているとは。

内容は単純なステートパターンから探索行動まで、きっちり書かれてる。もうここまでくるとデザイナ上がりのFlasherは太刀打ちできないレベル。しかし、ここを理解できないとそのうち野たれ死ぬだろう。ノード探索とかはしっかり覚えたいところ。

16.増補改訂版Java言語で学ぶデザインパターン入門

★★★★★。オススメ。日本人のデザパタ本。読みやすくわかりやすい。

デザパタ本はずーっとGoF本と周辺本を読んでたけど、ぜんぜんわからん。ごめん言い過ぎた、なんとなくはわかる。でも「えっ?デザインパターン?ああ、となりのクラスの?」という顔見知りレベルを脱却できない。つまりなんにも使えないのだ。

しかし、この本は相当わかりやすい。わかりやすすぎて、Decoratorパターンはそんなに使う必要がないこともなんとなくわかる。抽象化して思考することを嫌というほど叩き込んでくれるので、パターンやOOPの本質を理解できるし、どのように応用すべきかもなんとなくわかる。デザパタ本ってそういうところが重要なんだわ。

2008-10~12月に読んだ本

17.達人プログラマー―システム開発の職人から名匠への道

★★★★★。オススメ。達人がなんたるかをなんとなく理解できる。

Web業界の歴史は浅いので、なかなか達人や師匠に巡り合えない。また、Flashなんて大抵1人で開発が終了するから、技を盗むことも至難だ。Web業界における「達人から盗む」という作業は、「他の業界の達人」から盗んだ方が効率がいい。この本は徹底した達人の姿勢を教えてくれる。個人的には「割れ窓理論」がマジウケるんだけど~!

18.ゲームプログラマになる前に覚えておきたい技術

★★★★★★★★★★。超オススメ。通称セガ本。セガの偉い人が新人教育用に書いた本。

これはすごい。どうしてこういう作りの戦略をとるか、最適化を行うかなどなどありったけのノウハウを詰め込んでる。まったくノウハウがない新人に教える感覚なので、Flasherみたいな独学大王たちはこの本からものすごくたくさんのことを学べるはずだ。まじで(僕のamazonリンクから)買えばいいと思う。

19.詳説 ActionScript 3.0

★★★★☆。せめて半年前に読みたかった。もうFlash10が来てるんだぜ!

広大なアメリカ大陸から西へ西へと遥々やってきたコリンムックさんの本。さあ、ここにはいったいどんな動物がムツゴロウさんを待ち構えているんでしょうか?

ムツゴロウ「いや~かわいいですね~、これを見てください。表紙をみてください。アメリカサンゴヘビですね~。アメリカサンゴヘビは毒を持っていて、この毒が獲物の体に回るまで噛みついたまま離さないんですね~」

まとめると…「Flasher1年生は2学期からFlashの本を読むな」

みなさんお気づきの通り、ムツゴロウさんのナレーションは間違いなく不要でしたね。高枝切りバサミに付いてくる普通のハサミと同じくらい不要ですね。

それはさておき、これらを一言でまとめると

「Flasher1年生は2学期からFlashの本を読むな」

ということです。いまのところFlash本でかっちりとした構築ノウハウを提供してくれる本はあまり見かけません。それならいっそのこと他の分野からノウハウを移植したほうが効率的です。

最初の4~6ヵ月でASの基礎を固めておいて、あとはデザインパターンや数学など、他分野から吸収したほうがよさげです。

特にゲームはFlashと近いところにいます。uiがあって、ローディングがあって、動的に画面が遷移して…と、かなり似ています。衝突判定やAI、画像処理など山のようにノウハウが蓄積されています。僕は今後がっつりこっちの本を読もうと思っています。

それと、あと1冊で20冊というキリのいい数字なのにどうして19冊なのか?そう思いますよね。いや、読んでるんです。50ページ以上ね。読んでるんです。なんだったら2周読んでます。でもね、その1冊が通学路で拾ったエロ本だったんです。

よいお年を~!!

  • Comments (Close): 0
  • Trackbacks (Close): 0

まさか!「小林章の欧文タイプ・セミナー 2008」に小林章が出てた!という感想を書くよ!

  • 2008-11-07 (金)
  • ̃Gg[͂ĂȃubN}[Nɒlj

2008-10-25に「小林章の欧文タイプ・セミナー 2008」に行ってきました。

欧文書体」「欧文書体2」の著者であり、ヒラギノの欧文やAXISフォントの欧文の作者である小林章氏のセミナーが大阪でありました。

畑違いではありますが、非常に有意義なセミナーでした。

以下、印象深かったところをメモ代わりに残しておきます。

文字の「M」は横幅が広く、「E」「S」は狭い。これが古典的なローマ字。

  • 古典的ということはそれだけで格調ある雰囲気を出せる
  • Trajan」がローマの碑文を元に作ってある。ローマの碑文が源流みたいな感じ。
  • そのあとに「Garamondがそれを受け継いだ感じ
  • Times New Roman」や「Century OldStyle」までくるとインダストリアルな感覚がする

ローマ碑文が源流の書体たちの変遷

タイプデザイナーは単語デザイナーである

  • よみやすく、雰囲気のある文章・単語にするために調整を行っている

白と黒のバランスを意識することが上達の近道

黒い部分で形を視認するのだが、逆に白の部分で認識させることも重要。橘流の寄席文字はほぼ真っ黒。白い部分で形が見えてくる。

欧文フォントのバランスはカーニングだけじゃなくって、「O」や「n」の真ん中の空き具合(懐?)による

  • 和文書体だと正方形なのでギッチギチにカーニングしたりするけれど、そういうことはしない

これから残るフォントは「Meta」と「The Sans」

以下の2つ。「欧文書体2」にも載っけてる。

Meta
http://www.myfonts.com/fonts/fontfont/ff-meta/
The Sans
http://www.fonts.com/findfonts/detail.htm?pid=413684

和欧混殖の場合は欧文フォントを使う

  • 和文にも従属欧文が入っているが、欧文には欧文フォントを使ったほうがきれい
    • 従属欧文は「x軸」「y座標」など記号として用いるのが望ましい。

サイン(標識)なんかは字間が広いくらいがちょうどいい

  • 飛行場や駅の案内なんかは、どの角度からも読みやすくするために字間をとるようにする
  • 長体かけて、ギチギチにカーニングなんかはもってのほか

和文フォントと欧文フォントの違いは、字間

  • 和文は正方形なので、それと釣り合うように字間をあけている
  • 欧文はプロポーショナルなので、和文よりかは詰まる

これだけはやめて!

  • ピリオドのあとの全角スペース
  • 「fi」「fl」などは合字を使おう
  • リバー(リザード)にならないように気をつける
    • 単語と単語の間が河のようにつながらないように。
  • Comments (Close): 0
  • Trackbacks (Close): 0

ですから奥さん、FlashDevelopにちょっとうれしいプラグイン3つなんです

  • 2008-07-27 (日)
  • ̃Gg[͂ĂȃubN}[Nɒlj

2008-09-14追記 すみません!「trace文をショートカットキーで書いてくれる便利なヤツ」のurl間違えてました!

PCの操作で不便に感じることがあれば真っ先に思うのが、「誰かが作ってくれてるやろ」ですね。だからwindowsはやめられない。そんなことで、FlashDevelop回りで調べたら見つかったプラグイン3つです。

以下、すべてFlashDevelop3.0.0 beta7での設定です。

1. as3・as2でASDocを吐き出してくれるやつ

5分もかけずにas3のASDocを吐き出すらしい

厳密にはプラグインではありませんが、コマンドラインを勝手に叩いてくれます。

http://www.flashdevelop.org/community/viewtopic.php?t=918

  1. FlashDevelopを起動。
  2. 「tools」→「Custom Arguments」でkeyとvalue を設定します
    • name → "ASDoc",
    • value → flexのpath\bin\asdoc.exe,
  3. ツールバーに「ASDocを作成」するボタンを追加します。ソースは上記リンク先で。

FlashCS3用のプロジェクトだと、結構失敗します。コンポーネントとかはうまいこと指定しないとできないかもしれません。

2分くらいでas2でのASDoc(as2api)

デフォルトで入っていました。しかもGUIで。

  1. 「tools」→「Flash Tolls」→「AS2API GUI」
  2. 必要項目を入力
    • pagetitleはhtmlのタイトルとか
    • packageはASDoc化したいパッケージ。「com.katapad.*」みたいに書く。
    • Outputとclasspathはそのまんまなので適当に入力
  3. 「Generato Documentation」ボタンを押してできあがり!…って文字化けしてるじゃねーか!
    • 文字コードがiso-8859-1で書き出されるので文字化けします。ちょこっといじくる必要ありです。
      1. 「tools」→「Application Files」でエクスプローラが開くので「Tools/as2api」 を開く
      2. as2apigui.bat をテキストエディタで開きます。iso-8859-1と書かれてるとこをutf-8に変更して保存
      3. as2apigui.batを実行すると、ようやく文字化けが直ります。

文字化けがうざいですが、それでもかなりの時間短縮になりますね。

2. trace文をショートカットキーで書いてくれる便利なヤツ

andrewlucking.com � fdtracer
FlashDevelop Trace Plugin
http://www.andrewlucking.com/archives/category/fdtracer/
http://www.double-quotes.com/flashdevelop/trace-plugin/
  1. ダウンロードしたら「tools」→「Application Files」→pluginディレクトリにぶち込む
  2. FlashDevelop再起動

変数とかを選択して「ctrl + 0」もしくは「ctrl + shift + 0」でtraceがきれいな形で!スニペットのtracethisと組み合わせたら、かなりの量のtraceを自分で書かずにすみます。

2-1 trace文をのぞき見するplugin

間違えて上のtraceのプラグインとこに書いてたurlのプラグインです。

こいつはブラウザで見たswfのtrace文を拾ったりしてくれます。要debug playerです。

andrewlucking.com � fdtracer
http://www.andrewlucking.com/archives/category/fdtracer/
  1. ダウンロードしたらpluginディレクトリにぶち込みます
  2. F10押して設定を開きます。
  3. FDTracerの項目でflashplayerのlogファイルへのパスを設定({user}と書いてあるところをpcのユーザ名に)します
    • mm.cfgというテキストファイルを新規作成して、Cドライブ直下に置きます。中身は以下
      TraceOutputFileEnable=1
      ErrorReportingEnable=1
      TraceOutputFileName=C:Documents and Settingsユーザ名Application DataMacromediaFlash PlayerLogsflashlog.txt
  4. debugplayerを使ってその辺のサイトを見る。FlashDevelopのFDTracerパネルにたくさんtraceされてるはずです。マァ、いやらしい。

3. addEventListenerのrollOverHandlerとかをrollOutHandlerに勝手に書き換えてくれたりする、今回紹介する最強のplugin

以下にムービー付きで紹介されてます。今日は徹夜なのにブログを書く気にさせてくれるほど、ものすごい便利です。

FlashDevelop Duplicate Plugin
http://jde.name/duplicate/
mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

と書いた文を複製すると

mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

Eventのtypeとハンドラまで「out」に書き換えて複製してくれます。まだ続けて複製するとclick、doubleClickまで書いてくれます。ヤッベー。ヤッベヤッベ。

mc.addEventListener(MouseEvent.CLICK, clickHandler);
mc.addEventListener(MouseEvent.DOUBLE_CLICK, doubleclickHandler);

他にもtrue→falseを切り替えたり、連番を自動で振ったりとかなり便利です。ありがとう、神様。

  • Comments (Close): 0
  • Trackbacks (Close): 0

us-katapadという名のhtml・cssフレームワーク?を公開した愛されゆる巻き系の俺

  • 2008-06-06 (金)
  • ̃Gg[͂ĂȃubN}[Nɒlj

「とりあえず」とか「それなりに」とか「そのうち」クオリティのus-katapadフレームワークを公開しました

ながらくタンスのこやしにしてたので、とりあえずsvnに突っ込みました。

http://us-katapad.googlecode.com/svn/trunk/

どうやったらtag打ったりリリースしたりするのかわからんかったので、とりあえずtrunkを公開しておきます。tortoiseSVNかそこらでダウンロードしてみてください。TortoiseSVNのインストールと設定

中身

  • html
  • dwt
  • cssセット
    • リセットはまだ現役で使えるかな?全称セレクタ使ってるけど。safariとIEでline-heightより小さいimgを使うときは個別対処ですが、それ以外はピッタリしてくれるはず。
  • js

ドキュメント類はそのうち…

同梱してある_guideline/index.htmlあたりにちらっと書いてありますが、まだ準備してません。

以前、pukiwiki形式で20ページくらいしたためておいたのですが、googleのwikiの使い方がよくわからんのでしばらく放置状態になります。

ドキュメントがあったらかなりおもしろいと思うんやけどねー。とりあえずdwtはそれなりにいじっているので、それなりに使えると思います。bodyclassとかpagetitleとか。

  • Comments (Close): 0
  • Trackbacks (Close): 0

AS2で遅くなる書き方を研究しようか

  • 2008-05-28 (水)
  • ̃Gg[͂ĂȃubN}[Nɒlj

上条さんとこで、AS2でOOPをやると遅くなる可能性があると書いてあって泣いた。

AS3 で動的言語のススメ

AS2 における型の使用は、オーサリング時の ”生産性向上のベストプラクティス” としての位置づけ以上ではないわけです。実際 OOP をまじめに追求するほど AS2 のアプリケーションは遅くなる傾向を持っています。

気になったので、単純なカウントアップでベンチマークをとった。

試したところは以下

  • タイムラインに書くかクラスに書くか
  • 型宣言の有無
  • 処理をfunctionにくるむかどうか

AS2でタイムラインに書く。型宣言はなし

//型宣言なし
var startTime = getTimer();
var trialNum = 100000;
var cnt = 0;

for (var i:Number = 0; i < trialNum; i++) {
	cnt++;
}
benchmark();

function benchmark()
{
	var endTime = getTimer();
	trace("time: " + (endTime - startTime)); 
}
//だいたい228

AS2でタイムラインに書く。型宣言あり・カウントアップは生で書く

//型宣言あり
var startTime:Number = getTimer();
var trialNum:Number = 100000;
var cnt:Number = 0;

for (var i:Number = 0; i < trialNum; i++) {
	cnt++
}

benchmark();

function benchmark()
{
	var endTime:Number = getTimer();
	trace("time: " + (endTime - startTime));
}

//だいたい230

AS2でタイムラインに書く。型宣言あり・カウントアップはfunctionにくるむ

リファクタリングの本やOOPの本を読んでいると、できるだけ細かいfunctionに分けるべきだ、と書いてある。確かにそのほうがやりやすいが、やればやるほど遅くなる気はしていた。

//型宣言あり,function
var startTime:Number = getTimer();
var trialNum:Number = 100000;
var cnt:Number = 0;

for (var i:Number = 0; i < trialNum; i++) {
	countUp();
}

benchmark();

function countUp():Void
{
	cnt++;
}

function benchmark():Void
{
	var endTime:Number = getTimer();
	trace("time: " + (endTime - startTime));
}

//だいたい709

クラスに書く

クラスに書いてみた。やってる中身は上とほとんど一緒。試したのは以下。

  • 型あり
  • 型あり・function
  • 型あり・別クラスstatic function
  • 型あり・別クラスを参照static function 「型あり・別クラスstatic function」は
    for (var i:Number = 0; i < trialNum; i++) {
    	cnt = sandbox.BenchTest.countUp(cnt);
    }

「型あり・別クラスstatic function」は

var test:BenchTest = BenchTest;
for (var i:Number = 0; i < trialNum; i++) {
	cnt = test.countUp(cnt);
}

AS2速度まとめ

型なし型あり型あり・function型あり・別クラスstatic function型あり・別クラスを参照static function
タイムライン228230708455
クラス102101245313227

ループ処理だけでの単純な比較なので、あまりあてにならない。

実際のところどっちが速いのかよくわからん、という結果になった。とりあえず、タイムラインでのfunctionがやたら遅いということがわかった。アクティベーションオブジェクトのせいだろうか。

でも、OOPにのっとってめちゃくちゃ細かく分割すると、遅くなることは事実だろう。わりと、お茶濁しな結果に!

AS3とAS2での差はクラスのメンバにあるかどうかでかなり変わる

AS3では

var point:Point = new Point(x,y)
point.x++;

と書くとめちゃくちゃ早い。メンバ変数であるかどうかがかなりの違いの模様。

これを単なるオブジェクトとして扱うとめちゃんこ遅くなる。ハッシュがどうのこうのらしい。配列はそこそこ早い。 PointとArrayで速度比較

var obj:Object = new Object();
obj.x = 1;
obj.x++;

AS2ではどれをやってもほとんど同じ速度だった。

さっさとAS3に全部移りたいぜ!

//var point:Point = new Point(1, 1);
//var obj:Object = new Object();
//obj.x = 1;
var array:Array = [1];
for (var i:Number = 0; i < trialNum; i++) {
	//point.x++;
	//obj.x++;
	array[0]++;
}
AS2でメンバとかの速度
point.x++;obj.x++;array[0]++;
9493106

Home


Search
Feeds
Meta

Return to page top