非常にゆったりとした環境で、様々な事を学ぶ事ができました。
育てて頂いた恩を返せず心残りとなっていますが、偉大な先輩方に追いつくべく、自分をもっと向上させるべく、今回の決断に至りました。

7月1日からは、メタルレッドにてお世話になります。
これからもよろしくお願いします。

和泉俊樹

当日の動画はUstreamで録画されていますので、御覧下さい。
ルーレットの魔力で大トリになってしまったので、最後から10分くらいで発表しております。

また、gihyo.jpにてレポートがアップされています。

当日の資料はこちらになります。

スライド
動画

コミットしました。

MultiTouchSpriteはSparkProjectにコミットしました。
Demoもコミットしてあります。

http://www.libspark.org/svn/as3/MultiTouchSprite/trunk/
DemoはFlashDevelopのプロジェクトとして読み込めます。

また、一つ前のエントリにて、少し解説をしています。
http://blog.alterna.in/2010/04/18-230815.php

いまのところ、touchPointIDをいい感じに取得することができないので、それも早いこと考えたいものです。

ちょっと蛇足

久しぶりの話す機会が、初SparkProject勉強会で、しかもStation5で、しかも大トリで。ということで緊張しました。今考えたら話す構成もめちゃくちゃだし、いろいろ反省すべき部分は多いですが、楽しかったです。
また、Ust録画してもらったりとか、レポートに掲載されたりとか初めての体験なのですごくうれしいです。
今年は人前に出る機会を増やしていけたらなーと思っていて、そのためにはいろいろ作らないとね！ってことです。

基本的には、Multitouch.inputModeを定義し、flash.events.TouchEventやflash.events.TransformGestureEventなどで値を受け取ることになります。

TransformGestureEventについては、すでにAdobe AIRデベロッパーセンターに掲載されている
「マルチタッチ機能を活用した AIR 2.0 アプリケーション Touch Viewer の紹介 | デベロッパーセンター」
が非常にわかりやすいです。

今回はTouchEventで効率的にタッチポイントを管理する方法について書きたいと思います。

TouchEventのタイプは

TOUCH_BEGIN
TOUCH_END
TOUCH_MOVE
TOUCH_OUT
TOUCH_OVER
TOUCH_ROLL_OUT
TOUCH_ROLL_OVER
TOUCH_TAP


以上の8つで、TouchEventではタッチ関連のプロパティが取得できます。タッチを管理していく上でメインになってくるのは touchPointID, localX, localYです。touchPointIDには、それぞれのタッチポイントにユニークなIDが割り振られており、localX, localYは、文字通りタッチポイントの座標です。

今回は、TOUCH_BEGIN, TOUCH_END, TOUCH_MOVEの3つにリスナを登録しておき、touchPointIDを添字としたPoint型のVectorにlocalX,localYを格納していく、という方法です。
実際には以下のようなコードになります。

public function MultiTouchSprite()
{
     Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
 
     _startPoint   = new Vector.<Point>(10);
     _currentPoint = new Vector.<Point>(10);
     _previewPoint = new Vector.<Point>(10);
 
     for (var i:int = 0; i < 10; i++)
     {
          _startPoint[i]   = new Point();
          _currentPoint[i] = new Point();
          _previewPoint[i] = new Point();
     }
 
     addEventListener(TouchEvent.TOUCH_BEGIN, _touchBeginHandler);
     addEventListener(TouchEvent.TOUCH_MOVE, _touchMoveHandler);
     addEventListener(TouchEvent.TOUCH_END,    _touchEndHandler);
}
 
private function _touchBeginHandler(e:TouchEvent):void
{
     _startPoint[e.touchPointID].x = e.localX;
     _startPoint[e.touchPointID].y = e.localY;
}

今回はstartPoint, currentPoint, previewPointとい3つのVectorを用意しました。これでcurrentPoint[touchPointID].x, currentPoint[touchPointID].yとかすると、座標が取れます。

あと、僕の環境だと、touchPointIDが2から始まるんですけど、これってなんなんですかね。
ほかの環境でもそうでしょうか。

現在のタッチ個数を得るために、touchPointというint型を用意しておき、TOUCH_BEGINで++, TOUCH_ENDで–しています。

private function _touchBeginHandler(e:TouchEvent):void
{
     _touchPoints++;
}
 
private function _touchEndHandler(e:TouchEvent):void
{
     _touchPoints--;
}

また、今回はタップ、ダブルタップを使えるようにしました。
TouchEvent.TOUCH_TAPを使うと、TOUCH_BEGIN, TOUCH_END, TOUCH_MOVE, TOUCH_TAPと4つのイベントすべてが発生してしまうので、それを回避するためです。
その部分のコードはこんな感じになります。

private function _touchBeginHandler(e:TouchEvent):void
{
     _touchDownTime = getTimer();
}
 
private function _touchEndHandler(e:TouchEvent):void
{
     _touchPoints--;
 
     if (_touchPoints == 0) _touching = false;
 
     if (getTimer() - _touchDownTime < TIME_DIFF) {
          var dist:Number = Math.sqrt(Math.pow(_currentPoint[e.touchPointID].x - _startPoint[e.touchPointID].x, 2) + Math.pow(_currentPoint[e.touchPointID].y - _startPoint[e.touchPointID].y, 2));
          if (Math.abs(dist) < POS_DIFF) _touchTap(e);
     }
}
 
public function _touchTap(e:TouchEvent):void
{
     _tapCnt++;
     if (!_timer.running) {
          _timer.addEventListener(TimerEvent.TIMER_COMPLETE, _timerHandler);
          _timer.start();    
     }
}
 
private function _timerHandler(e:TimerEvent):void
{
     switch(_tapCnt) {
          case 1 : atSingleTap.call(); break;
          case 2 : atDoubleTap.call(); break;
          case 3 : atTripleTap.call(); break;
          default:break;
     }
     _tapCnt = 0;
}

1. TOUCH_BEGINが発生してからTOUCH_ENDが発生するまでの時間がしきい値以下
2. TOUCH_BEGINの座標とTOUCH_ENDの座標がしきい値以下

2つの条件を満たした時にTimer.start()させます。タイマー作動中にもう一度2つの条件を満たした場合はtapCountを増やし、timerイベントがディスパッチされたタイミングでtapCountを判定し、シングルタップ、ダブルタップを判断します。この処理を利用すれば、3回や4回など、それ以上の回数も取れます。
ネックはラグが発生することですかねー。

また、イベントのハンドリングはProgressionのCommandやAS2と同じように関数を与えておき、適切な場所でそいつを実行してやることにしました。

MultiTouchSprite.atTouchBegin = function():void
{
     trace(currentPoint[touchObj.touchPointID]);
};

最初はExTouchEventというのを作ってディスパッチしていたんですけど、Flash Pratform Campで、Mike Chambersがディスパッチはパフォーマンス低下するよ！って言ってたので変更しました。
また当初Array型を使ってPointを管理していたのをVector型に変更し、パフォーマンス向上を図っています。

MultiTouchSpriteというクラスとしてまとめておいたので、使ってもらえるとうれしいです。
http://alterna.in/demo/MultiTouchSprite/MultiTouchSprite.zip

コード画面でコードをかき、ボタンを押すとレンダリングしてくれます。
なぜかiPad版もあります。iPad版は左にコード、右にレンダリング結果が表示されます。

経緯

@ll_koba_ll Processing jsやったらiPhone(iPad)で書いて実行とかできるのか
http://twitter.com/ll_koba_ll/status/11632081826

という@ll_koba_llさんのtwitterでの発言を見て、「あ、それほしい」となって、ここらへんの記事を読んだら意外と簡単そうだったので作ってみました。

まだまだほしいものがあったり（リファレンス的なものとか、twitpicへの投稿機能とか）しますが、通勤中にコードをかけるというのは素晴らしいです。

裏話

UITextViewのテキストを取り出して\nを削除し、UIWebViewでそのコードを実行してあげてるだけです。（すべての\nを削除しているために問題が発生しているみたいですが･･･）
あと作っているうちにiPhoneのオンライン版を発見したりとか本家がすごいのリリースしたりとかでびっくりしました。
でも、wonderP5だとhtmlとJSファイルをアプリ内にバンドルしているので、オフラインでも使えるよ！っていうのがイイトコだと思います。
ライセンス的にプロジェクトファイルの公開が可能かどうかがわからないので、問題がないことがわかれば公開します。
また、ベータ版として配信ということもできるかなーと思います。
完成度が上がれば、リリースもあるかもしれません。

FACEs: as3:フォントのダイナミックなローディング
CS3版　フォントのダイナミックなローディング | エントリー | _level0.KAYAC

ということでコマンドにしてみました。
Progression4です！

書き方

public function EmbedFontDynamicLoader(path:String, name:String = null, textfield:TextField = null, initObject:Object = null )

@param path フォントファイルへの相対パス
@param name フォントのリンケージ名
@param textfield フォントを適応するTextField
@param initObject initObject.sizeのようにTextFormatと同じように指定すると、TextFormatとして適応されます。

使い方1

使い方1「読み込みを行い、TextFieldにフォント適応をする」

new EmbedFontDynamicLoader("font.swf", "KozukaGo_Pro_R", textField )

上記のようなコマンドを書くと、第三引数として指定したTextFieldに”Helvetica_Bold_16″が適応されます。

AIRで利用する際には、EmbedFontDyamicLoderコマンドの以下のコメントを外してください。
//_context.allowLoadBytesCodeExecution = true;

使い方2「読み込みを行い、TextFieldにフォント適応を行い、TextFormatも設定する」

new EmbedFontDynamicLoader("font.swf", "KozukaGo_Pro_R", textField , { size:16, color:0xFF00FF } )

initObjectに、TextFormatの各種プロパティと一致する用に記述をすると、第三引数として指定したTextFieldにsetTextFormat()されます。
また、第三引数を省略した場合はinitObjectにtextFormatを指定していても無視されます。

使い方3「読み込みを行うが、TextFieldにフォントは適応しない」

必要なフォントファイルの読み込みだけを先に行い、適応は別に行う場合は上記のように記述します。

new EmbedFontDynamicLoader("font.swf")

読み込みを行い、Resourceに登録することで、読み込みの時間を短縮させたい時に利用します。
フォントファイルの読み込みにはLoadSWFコマンドを利用していますが、そのコマンドを実行するのみの処理になります。

僕はIndexSceneで使い方3で一気にswfファイルを読み込み、使い方2でTextFormatと一緒に指定するという使い方をよく使います。

コマンドの中身で、特別なことをしているわけではなく、CS3版のコードを使い、TextFormatを適応してあげただけです。

デモはこちら。

デモではIndexSceneにこんなコードを書いています。

package {
	import flash.text.TextField;
	import jp.progression.casts.*;
	import jp.progression.commands.display.*;
	import jp.progression.commands.lists.*;
	import jp.progression.commands.net.*;
	import jp.progression.commands.tweens.*;
	import jp.progression.commands.*;
	import jp.progression.data.*;
	import jp.progression.events.*;
	import jp.progression.executors.*;
	import jp.progression.scenes.*;
 
	/**
	 * ...
	 * @author ...
	 */
	public class IndexScene extends SceneObject {
 
		var textField:TextField;
 
		public function IndexScene() {
			textField = new TextField();			
			textField.text = "test";			
			container.addChild(textField);
			title = "EmbedFontDynamicLoaderDemo";
		}
 
		protected override function atSceneLoad():void {
			addCommand(
				new EmbedFontDynamicLoader("font.swf", "KozukaGo_Pro_R", null ),
				3,
				new EmbedFontDynamicLoader("font.swf", "KozukaGo_Pro_R", textField),
				3,
				new EmbedFontDynamicLoader("font.swf", "KozukaGo_Pro_R", textField, { color:0x999999 } )
			);
		}
	}
}

ソースファイル一式を置いておくので、ぜひいじってフィードバックください！書き換えてください！

http://alterna.in/demo/EmbedFontDynamicLoaderDemo/EmbedFontDynamicLoaderDemo.zip

1月7日

ブログをWordPressに変更
blog.alterna.in » Movable Type→WordPress

1月22日

専門学校コンソーシアムTokyoWebサイトローンチ

1月23日、24日

仙台の東北生活文化大学高等学校にてWeb制作のワークショップ。講師として参加
blog.alterna.in » 高校生の前でコーディングをしてきました@仙台

1月25日

ごはんと新年会に参加。@pekepと一緒に「Webデザイン科でやっていること」というテーマで話す。Flash界デビュー！
blog.alterna.in » ごはんと新年会で発表しました。

1月29日

iPhoneアプリのネタについていろいろ考える。
blog.alterna.in » iPhoneアプリ雑記

2月1日

iPhone for Flasherの勉強会に行く。
blog.alterna.in » iPhoneForFlasherで勉強したこと

2月11日

iPhone購入
blog.alterna.in » iPhone買いました

2月17日

卒業制作展Webサイト、CONNCECTローンチ
blog.alterna.in » 卒業制作展と、Flashプラットフォーム、Actionscriptの話。

3月7日

時間を場所に変えるサイト、TimeTriperを公開
blog.alterna.in » TimeTriperを公開しました。

3月23日

Macを買う
blog.alterna.in » MacBookを買いました。

4月1日

株式会社SNAPに入社
blog.alterna.in » デザイナー始めました。

5月25日

iPhoneアプリプロジェクトスタート
blog.alterna.in » iPhoneアプリ作ってます。

8月12日

アプリ１本目「eye clock」リリース
blog.alterna.in » iPhoneアプリ「eye clock」がリリースされました。

9月上旬

BetweenAS3をいきなり案件投入。
いろいろつくったりブログに書く。
blog.alterna.in » BetweenAS3使い方、Tweenerからの乗り換えのために。

9月16日

SiONであの楽器をつくる
SiONであの楽器 | wonderfl build flash online

9月25日

progression４をいきなり案件投入。

10月23日

checkmate4回目に参加。Queenをもらう
Progression4.xに追加してほしいことー！forked from: Progression4 Professional | wonderfl build flash online
checkmate | wonderfl build flash online

11月3日

1clickAwardに応募

11月21日

izm-design.comからalterna.inに名義を変更
blog.alterna.in » izm-design.comからalterna.inへ。

12月17日

「Talky clock」リリース
Talky clock : iPhoneアプリケーション | +ryu [プラスリュウ]

作り手として

このエントリをまとめていて、だいたい1ヶ月にひとつくらいはものづくりをしていたんだなーということを感じました。
もちろん会社ではこれ以上にお仕事してますけども。
全然作らなかった月というのがほとんどなくて、少し安心するとともに、来年はこの倍作っていきたいと思います。

2009年を振り返って

今年は学生を終えて社会人として働き出したり、Flashコミュニティに参加しだしたりとさまざまな変化があった1年だったと思います。
この1年間は、今まで生きてきた中で一番たくさんの方にお会いした年でした。
みなさん本当に素敵な人ばかりで、本当に自分は人に恵まれていると感じています。
その方々に恩返しするためにもおもしろいものを作っていきたいと思いますので、よろしくお願いしまっす！

gotoAndLearnの人のデモをfladdict先生のエントリーにある要約をみながらふんふんと聞いてました。
一番気になるのはここですね

・iPhone用へのコンパイルはAIR用とほぼ同じだが、専用UIあり。

コンポーネントだとは思うけども、全部Eventに変換してくれるのかしら。
「delegate、こうやって作って、定義した関数をこいつに通知して・・・」とかやっていたので、本当に助かります。

たのしみでしょうがないですね。

ステージは回転する

あらかじめ、縦向き、横向きの画を作りましょう。Flashだと、拡大縮小ですが、iPhoneの場合は回転です。サイズが変わるという面では同じですが、拡縮と回転では概念が違うので、画面も違ってくるでしょう。
没入系アプリをつくる際には、UIなどの画像も全て自作し、自分でレイアウトを行う場合が多いです。
さらに、没入系の場合、縦画面のみではなく、横画面をつくる時が多いので、その時の絵がないと、実装時に苦労します。

機能の割切り

コンセプトがスマートに伝わるシンプルなアプリは強いです。また、メモリの容量がすくないのでよく張るとパフォーマンスが低下します。アプリのコンセプトを伝えるために最低限必要な機能のみにしぼるとよいと思います。

実機で使い倒す

実機で動かして、自分の手のなかで動いているアプリを見ると、シュミレータ上とはまた違う感覚です。またパフォーマンスも全然違います。できればスペックの低いiPhone3Gでテストするといいです。通信を行う場合はwifi環境ではなく3G環境で。という感じ。

まとめ

なんかもうほとんど言及されていたので、あまり多くないですが。多分、iPhoneのUIはコンポーネントとして提供されるはずなので、スキンを変えるだけで、没入系のアプリはかなり作りやすくなると思います。
Flash的には、IDE上で絵が作れるのは強みなので、それを活かして、魅力的なUIを持つアプリが増えて欲しいです。

alternaはalternate

alternaはalternative

ちょっと中途半端に略した感じがゆるくて好きです。

読むときは「おるたなどっといん」って読むといいと思います。

前ドメインのこと

izm-design.comというサイトを運営していました。

そこではブログを書いたり、Flashで作った何かを公開していたりしていました。

このサイト、実は昨年、就職活動に向けてつくったものです。

ドメインもよく考えずに作ったので、後々大変な思いをしました。

このドメイン名義でいろんなアカウントを取っていろんなところにでかけていってたくさんの方に会えました。その結果今の僕があります。

ありがとう、izm-design.com。

なぜ変えようと思ったのかとか

世の中にはすごくかっこいいドメインの人もいるし、それを屋号にして活動していたりするので、「ちゃんとした屋号」を持ちたいな。と思ったのです。

少し前からいろいろ考えていたのですが、あまりいいものが思いつかず。

ふと会社で休憩時間に一服しているときにいい響きだなーと思って、そんなところから決まりました。

いろいろなところで変更中なので、少しばかりどたばたしてますが、alterna.inをよろしくお願いいたします。

1.DeMonsterDebugger

http://demonsterdebugger.com/

おなじく_level0.KAYACのこのエントリが分かりやすいです。

(1)DeMonsterDebugger側から、デバッグ用ライブラリをエクスポートする
(2)ドキュメンクラスでimport、初期化をする。
(3)Flashでプレビュー

といった簡単な手順でDeMonsterDebuggerに情報がずらっと表示されます。
FirexfoxアドオンのFireBugのような感じでプロパティを書き換えたり、traceをモニタすることができます。

DeMonsterDebuggerはすごく便利なので、後日もう少し掘り下げて書きたいですね。

2.ASDoc

ActionScript 3.0 コンポーネントリファレンスガイド

これ本当に読んでて楽しいです。
知らなかったプロパティとかメソッドを見つけてはニヤニヤしてます。
pdf版とかあるとオフラインでも読めてうれしいんですが…

3.英字配列キーボード

自宅のMacBookも英字配列、会社のiMacは英字配列キーボード持ち込んでで作業してます。
cmd+Spaceで入力を切り替えれるのと、アンダースコアが打ちやすいのが特に気に入ってます。
あと、自宅だとparallels＋FlashDevelopでメインのコードを書いていますが、日本語キーボードだと面倒なキーの配列問題も特に発生せず、快適に使えています。
ちなみに会社のキーボードはこれです。
ストロークが浅めなので、パシパシとたたく感じです。

他のFlash制作者の方がどんなツールを使っておられるか気になりますねー。

このエントリを書いている間に独学ActionScriptさんがこのエントリで３つのツールを紹介されてました。