・・・

F-site セミナー 2009/10/31
「サイトを作るツールを作るでござる、の巻。」
Tomohiko Koyama a.k.a. Saqoosha

・自己紹介
　・Tomohiko Koyama a.k.a. Saqoosha。
　　・@Saqoosha
　　・http://saqoosha.net/
　・カタマリ。大阪の Web 屋。http://katamari.co.jp/
　・Flash Developer 兼 CTO。
　・Flash 歴 10 年ぐらい。
・そんなにコアなAS話じゃないかも。
・実案件３つ。
・紹介するサイトはどれも AS で書かれたツールをつかってつくられてる。
・やってるひとはすでにやってるよね。
・社内ツールをつくるのは CG 屋とかゲーム屋ならあたりまえ。
・社内ツールが製品になった事例もいろいろ。
　・3D 系なんかあったはず。
　・ゲームフレームワークとかも。
・ぼくがつくるのはだいたいどれも AIR 製。
・AIR の登場によって AS でそういったツールがサクっと作れるようになった。
・それ以前は Perl 書いたり、Mac で Cocoa でつくったり。Automator。

Katamari Web
http://katamari.co.jp/

・2007 年 8 月に AID-DCC Inc. から分社。
・2008 年 2 月公開。
・AID-DCC プランニング＆プロデュース、Katamari クリエイティブ。みたいな関係。
・サイト構造。Member, Works の２軸。
・１ヶ月に１回ぐらい、サイトが公開されたらこっちも更新。
・通常こういうサイトには CMS いれるけどこのサイトには入ってない。
・サイトの担当者が規定フォーマットでデータ提出。
　・更新データフォーマットマニュアル。
　・XML (Property List) + 画像 or ムービー + カラー。
　　・plist にしたのはエディタが便利だったから。JSON Editor はまだなかった。
　　・plist 読み込みクラス。net.saqoosha.net.PlistLoader。
　・カラー指定はサイトプレビューできるツールで。
　　・Parameter クラス便利。
　　　・もともとは popforge 内にあったやつ。こんなんにつかってたり。
　　　・改良して SharedObject で値を保存できるようにしたり。
　　　・わりと人気あるクラス。
　　　　・社内でたまに見かける。
　　　　・こないだ @naggg のひとがさらに改良してつかってた。
　　　　　・公開してつったら拒否られたけど。
　　・いまなら minimalcomps つかうかな。 Google Code。
　　　・Keith Peters 作。
　　　　・FITC Tokyo にもくるよ！
　　　・レイアウト用ツールもある。
　　　・ShaderObject 保存機能つけたい。
・特定フォルダにぶっこんで、KatamaniWebUpdater 起動→設定ファイル&RSS書き出し。
・KatamariWebUpdater は AIR アプリ。
　・サイト開設当時 2008/2 にはまだ AIR が一般的ではなかったので Perl で書いてた。
　・RSS とかもうちょっとちゃんとしようっていうタイミングで AIR 化。
　・仕組み
　　・images フォルダ内の info.xml を全部くっつける。
　　・テンプレートにはめこむ。
　　・一個の plist として出力。
　　・同時に RSS も書き出す。（RSS 2.0 フォーマット）
　　・ファイル入出力ができるのが Flash との違い。
・できたファイルをアップしたら更新完了。


Elcity Nanko
http://www.kepco.co.jp/pr/elcity/top.html

・関西電力、南港発電所のそばにある科学館のサイト。リニューアル。
・新しくできたアトラクションを紹介するトップページ。
・アトラクション制作中につき、撮影とかしてる時間ナシ。
・イラストでアトラクションを表現→3Dピクセルとかどーよ。
・ピクセルがバラバラになったりくっついたりとかどーよ。
　・ピクセルのデータを内部に持っておかないと AS で制御できない。
　・ツールつくらなあかんやん。
・PixelEditor3D
　・とりあえず SWF で。
　・3D エンジン自作。つーほどでもないけど。
　　・参考）as3isolib っていうオープンソースのんもある。
　・ファイル保存とか読み込みとかめんどくさくなってきたので AIR に。
　・AIR のよいところ、マルチプラットフォーム。Mac 使いでも Win 用のん作れる。
　・データは PNG で保存。
　　・Photoshop で編集できる。
　　・でも PNG データの解析が重いのでバイナリ化。ElcityDataConverter。
　・レンダリングも重かった。。
　　・あらかじめレンダリングしたデータをキャッシュとして保存。
　　・キャッシュデータ作成ツール作った。ElcityCacheCreator。
　　・必要に応じてそこから取り出して表示。RenderCache。
・透過 PNG でレンダリングイメージ書き出し。ElcityTestRenderer。
　・他ページで使うイラストを生成するためのん。


東京リアルレポート!
http://tokyobookmark.net/feature/real_report/

・トーキョー☆ブックマーク。
　・東京のひとはしらんやろねー。
　・新幹線とホテルをセットで予約。
・リアルに楽しんでる様子をWebに。
・10 組の 1 泊 2 日の東京旅行中、行ってから帰ってくるまでずっとビデオカメラ回してもらう。
・最終的なムービー本数、400 本以上。こまかいのあわせると 900 本ぐらい。
・この素材を地図上にマッピング、擬似的に追体験。
・実は Progression 4。（PA 1.5 ぐらいだったかしら。）
　・SceneLoader が作業分担にちょー便利だった。
・地図部分は Google Map API for Flash をカスタマイズ。かなりトリッキーなことも。
　・ツールの話じゃないけど、まー。
　・マップ画像の差し替え。
　　・でっかい画像つくって切り出しスクリプトつかってバラバラに。
　　　・Automatic Tile Cutter。
　　　・めんどい。
　　・Tile 読み込みクラスつくる。
　　　・TileLayerBase のサブクラス。
　　　・Map#setInitOptions でこのこのクラスを指定する。
　　　　・new MapType → new MapOptions → setInitOptions
　　　・ちゃんと Copyright 設定しましょう。
　　　　・表示させる緯度経度とズームの範囲を指定。
　　　・範囲内なら地図画像、それ以外はデフォルト画像パターン。
　　　・全タイルの読み込み完了イベント取得はちょっと面倒。。
　　・移動範囲制限。
　　　・厳密に制限することはできない。
　　　・適当なタイミングで範囲チェックして範囲外ならもどす。
　　・重ね順は自前でがんばる。
　　　・毎フレームやると重いのでてきとうに Timer で。
　　・アニメーション。
　　　・Map#setCenter をオーバーライドしてイージング。
・ルート設定ツールを AIR (Flex) で構築。
・こちらも同じく Google Maps API for Flash。
　・複数ウィンドウが便利。
　・デザイナーが使用。
　・できたルートデータとムービー・画像をもらって組み込み。
　・組み込んだあとはテストサイト内のデータを直接デザイナーが更新。
・サイト作りながらツールも更新。
　・最初はもっと低機能だった。
　・サイトのデザイン変更とかコンテンツの増加にともなってツールも更新。
・多少のバグはキニシナイ！

・.fla2 でるよ。
・@Saqoosha, @beinteractive, @trick7, @hgw, FORM::PROCESS 小瀧くん + @prismgirl
・11 月 20 日。3,800 円。300 ページオーバー。だいぶんごつい。（.fla 比 150% ?）
・こんな感じ（AR で）
・12 月 5 日。出版記念のなんかイベント、なんかしゃべるらしい。アポーストア銀座？

あざしたー。

んで、使えるようにした。

最近 OSCulator っていうアプリをいじくってまして（某書籍サンプル用に）。これはなにかというと OSC というプロトコルでメッセージを受信して MIDI 信号に変換したりキーボードとかマウス操作に変換したり、逆に Wii リモコンとか SpaceNavigator のセンサーの値を OSC メッセージとして送信したりできるソフト。そう SpaceNavigator に対応してるの。つまり Flash で OSC が受信できれば SpaceNavigator が Flash で使えるちゅーわけです。はーい、知ってる人は知っている、Flash で OSC といえば flosc。SpaceNavigator → OSCulator → flosc → Flash ってつなげてやるとようやく Flash で SpaceNavigator のコントローラーの値が取得できるというわけ。AS3 で flosc に接続するにはこのクラスを使う。AS3 のコードだけ書いてもあんまし意味ないけどこんな感じで値を受け取る。

package {
 
    import com.bit101.components.HUISlider;
 
    import flash.display.Sprite;
    import flash.events.Event;
 
    import it.h_umus.osc.OSCConnection;
    import it.h_umus.osc.OSCConnectionEvent;
    import it.h_umus.osc.OSCMessage;
 
    [SWF(backgroundColor=0x808080, frameRate=60)]
 
    public class SpaceNavigator extends Sprite {
 
        private var _conn:OSCConnection;
 
        private var _transX:HUISlider;
        private var _transY:HUISlider;
        private var _transZ:HUISlider;
        private var _rotX:HUISlider;
        private var _rotY:HUISlider;
        private var _rotZ:HUISlider;
 
        public function SpaceNavigator() {
            _conn = new OSCConnection();
            _conn.addEventListener(Event.CONNECT, _onConnection);
            _conn.connect('localhost', 3000);
 
            _transX = new HUISlider(this, 10, 10, 'Translate X');
            _transY = new HUISlider(this, 10, 30, 'Translate Y');
            _transZ = new HUISlider(this, 10, 50, 'Translate Z');
            _transX.minimum = _transY.minimum = _transZ.minimum = -1.0;
            _transX.maximum = _transY.maximum = _transZ.maximum = 1.0;
            _transX.labelPrecision = _transY.labelPrecision = _transZ.labelPrecision = 3;
 
            _rotX = new HUISlider(this, 10, 80, 'Rotation X');
            _rotY = new HUISlider(this, 10, 100, 'Rotation Y');
            _rotZ = new HUISlider(this, 10, 120, 'Rotation Z');
            _rotX.minimum = _rotY.minimum = _rotZ.minimum = -1.0;
            _rotX.maximum = _rotY.maximum = _rotZ.maximum = 1.0;
            _rotX.labelPrecision = _rotY.labelPrecision = _rotZ.labelPrecision = 3;
        }
 
        private function _onConnection(e:Event):void {
            _conn.addEventListener(OSCConnectionEvent.OSC_PACKET_IN, _onPacketIn);
        }
 
        private function _onPacketIn(e:OSCConnectionEvent):void {
            for each (var msg:OSCMessage in e.data.messages) {
                switch (msg.name) {
                    case '/sp/1/trans/xyz':
                        _transX.value = Number(msg.getArgumentValue(0));
                        _transY.value = Number(msg.getArgumentValue(1));
                        _transZ.value = Number(msg.getArgumentValue(2));
                        break;
                    case '/sp/1/rot/xyz':
                        _rotX.value = Number(msg.getArgumentValue(0));
                        _rotY.value = Number(msg.getArgumentValue(1));
                        _rotZ.value = Number(msg.getArgumentValue(2));
                        break;
                }
            }
        }
    }
}

半分ぐらいは値を表示するためのコードだな。まあ Mac でもすげえ簡単に SpaceNavigator つかえますよちゅーことで。SpaceNavigator はなかなかおもしろいデバイスなので Google Earth 探索以外になんかうまく使えるといいんだけどなー。このへんの話のもうちょい詳しい感じの解説が、来月発売される某書籍に掲載されてるので買ったらいいよっていう宣伝でした。ばいちゃ。

• Katamari Inc.
• 09.aid-dcc.com
• NyARToolkit
• ARToolKit
• FLARToolKit
• GE | Plug into the Smart Grid
• Living Sasquatch
• Wrigley – 5 Gum Sound Mixer
• Julian Perretta – RIDE MY STAR
• USPS Priority Mail – Virtual Box Simulator
• adidas x Japan National Soccer Team
• Start-up guide for FLARToolKit
• Homography transform
• ARToolKit’s internal algorithms
• FLARManager
• FLARToolKit Alchemy branch
• AlchemyMaster
• FLARToolKit-userz
• Spark project

こないだのインタラ塾で流したムービー。僕が作ったんじゃないっすよ、なんか勘違いしてる人がいたようなので書いときますけど。これはうちの AID-DCC の敏腕映像ディレクター、中村さんの仕事でございます。ぼかーこれ作ってる間はふらーと海外いってまして、帰ってきたらあとは撮影を残すのみ、みたいな状況で。こーれまじでみんなでせーのって iPhone でムービー再生してんの。一発取り。Take 27 か 28 ぐらいだったかねー、久しぶりの撮影おもしろかったですねー。

ちなみにうちのブログの背景のコードはだいたいこんなん。実際のはもうちょっといろいろやってるけど。

つーわけで、みなさんんもお気軽にご参加くださいまし。

追記（2009/10/2）：結果発表ー。

今週来週は、

9/3〜7 Linz / Ars Electronica Festival 2009
〜9/10 Praha
9/11 Tokyo / Spark project 勉強会 SP2 （いけるかな、、、）
9/12 Tokyo / DeskTopLive.xna
9/13 Tokyo / 月刊インタラ塾 / Bridge
9/14 Tokyo / APMT5 CONFERENCE

ってな具合でございます。よろしくお願いいたします。原稿は、、、なんとか書きます。。

9/13 はインタラ塾に 15 分ほど。APMT WEEK のイベントの一つですな。「本気勉強会 ～届く作品の創り方～」ですって。何はなすんですかねー。僕はサブで。

はい、次。10/4〜7 にアメリカ、ロサンゼルスで開催される本家 Adobe MAX 2009 に、BeInteractive! の yossy くんと１セッション、30 分ずつ。FLARToolKit の話、詳細未定。日本からのツアーもあるから行ける人はどーぞー。見る的に楽しみ。

はい、次。10/18 に京都精華大学で開催される、dotFes 2009 KYOTO に 50 分ほど。１コマ。FLARToolKit 的な話。詳細未定。裏は artless。

ちょと出過ぎやろ、、しゃべるの苦手なんやってｗ
落ち着いたら潜ります。消えます。探さないでください。

・・・
追記（2009/10/02）：もう消えますつってんのに増えたww

受付開始三日目にしてすでに定員いっぱい。締め切り。らしい。今回は FLAR じゃないのをしゃべりますよ。「超！濃ゆい ActionScript の日～つくるために創る！」おもしろそうねー。

もう一個、めずらしいやつ。Infinity Ventures Summit 2009 Fall。なんじゃそらって感じですが。なんかメンツがすごいくてビビる。招待制らしいので普通のひとは参加できないんだけど、呼ばれたので行ってきます。

もー、いいやろー。。

今月は告知がはやいですね。なによりです。戻るボタンアワードに挑戦するらしいです。まあアワードに応募するしないはおいといて、なんか戻るボタンつくってきてください。詳しくはこつら。あ、そうそう、今回は Ust ナシね。見たい人はなんかつくって参加。

ついでにライセンス形態をもう一度まとめておきますけど。FLARToolKit は 2 種類のライセンス形態が用意されていてどっちかを選ぶようになっています。

1 つは、GPL。
こっちは無料で使用できるけど、作ったもの（SWF とか AIR アプリとか）を一般に公開するときにはそのソースコードも同時に公開しないといけないライセンス。（超訳。詳しくは本物を。）

もうひとつが商用ライセンス。
こっちは有料だけど、ライセンス買えばソースコードを公開する必要はないやつ。今回の日本代理店はこのライセンスの販売を日本語で日本円でやってくれます。

という感じで。よく使うほかの Flash 用ライブラリとはちょっと違うライセンス形態なのでよろしくです。

# こーゆーちょい面倒な感じになってるのは移植元の ARToolKit がそういうライセンスで配布＆販売されてるので従わざるをえないのですよね。