本日(昨日?)F-site でお話させていただいた内容をまとめましたよ−、ってか台本まま。来てない人にはよくわからん内容ですが。意外と 50 分短くて全部話しきれんかったねー。またなんかの機会に。
・・・
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話じゃないかも。
・実案件3つ。
・紹介するサイトはどれも 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 の2軸。
・1ヶ月に1回ぐらい、サイトが公開されたらこっちも更新。
・通常こういうサイトには 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 日。出版記念のなんかイベント、なんかしゃべるらしい。アポーストア銀座?
あざしたー。
[…] demo3「サイトを作るツールを作るでござる、の巻。」Saqoosha氏 とりあえず、「流石」の一言でした。 困ったらツールを作ってしまえば良い。 言うのは簡単ですけど、やっぱりこれって技術ついてること前提ですもんねー(´・ω・`) 技術はあとから着いてくるってよく言いますけど、前倒しで着けるもの手だと思います! 今回のセミナーで話した内容のまとめ http://saqoosha.net/2009/11/01/1782/ […]