・・・

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 日。出版記念のなんかイベント、なんかしゃべるらしい。アポーストア銀座？

あざしたー。

• 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

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