まめフラスコであそぼう。
2010. 5. 28
uraniwa project

まめフラスコとは？
「まちうけメイカーforフ ラッシュマス コット」
なにができるの？
キャラクターが会話をするFlashファイルを生成するよ
こんなの⇒
なにがうれしいの？
作ったFlashファイルは携帯電話でも動くよ
お気に入りのキャラクターが持ち歩けるよ
待ち受け画面に設定するとより伺かっぽいね

やってみるのに必要なもの
つくるため
環境 素材
PC
Java 画像 台本 Flashファイル
うごかすため
PC
携帯
Flash Player
まれによくある誤解への回答：
つくるためにはJava VMが必要ですが、動かすためには要りません。
つまり「Javaアプリが動く携帯」である必要はありません。

動作環境(Flash Lite)について
わたしの携帯電話でも動くの？
Flash Player(Flash Lite1.1以降）が搭載された携帯電話なら
動作します。その率99％！（『ケータイ白書2010』より）
Lite1.1≒通常のPlayerのver.4なのでケータイ以外でも大抵動くよ
○ よいところ： ↓試してみよう
普及率高い！
起動が早い！
いろんなところで同じように動く！
(PC,各社ケータイ, PSP etc)
× よくないところ：
サイズ制限(100KB)!
データ保存できない
最近（今後）どーよ？

実際にやってみよう(1)
薄いラッパですが一応ＧＵＩで操作できます。
画像や台本のファイル、立ち位置などを指定して生成ボタンを押すだけです。
まめフラスコは3つのタブから成ります。以下の内容を各タブで指定します。
メインキャラクターの画像 複数枚指定して表情変えられます
メインキャラクターの画像の拡大縮小・画質指定
メインキャラクターの立ち位置 100ｋＢ容量制限あるので
いろいろ変えられるように
メインキャラクターの吹き出し位置 してみた。
サブキャラクターの画像 同上
サブキャラクターの画像の拡大縮小・画質指定
サブキャラクターの立ち位置
サブキャラクターの吹き出し位置
台本記述ファイル
縦×横の大きさ。
背景画像ファイル 背景も設定できます PSP用なら480ｘ272pxとか
吹き出し・吹き出し内テキストの色指定
生成されるFlashファイルのサイズ指定

実際にやってみよう(2)
Sakura SurfacesタブとUnyu Surfacesタブはほぼ同じ内容で、それぞれ
キャラクターの画像ファイルの指定・立ち位置や吹き出しの指定などをします。
① ② ③ 押すとファイル選択ダイアログが出る
表情ナンバーごとに
画像を指定 画像ファイル名の表示・入力欄
画像の画質・倍率・立ち位置・吹き出し位置の指定

実際にやってみよう(3)
Script and etc.タブでは、台本ファイル、背景画像ファイル、
生成されるFlashファイルのキャンバスサイズや吹き出しと文字の色指定をします。
台本ファイル
背景画像ファイル
Flashサイズ 吹き出し色
押すと生成開始
生成ログ

台本ファイルについて
ただのテキストファイルです。
さくらスクリプト＋華和梨0.42相当（らしい。さとーさん曰く）
台本
入力例：
sentence: 0s[0]今晩は${food}を食べよう1s[10]そうだねそうしよう
sentence: 0s[4] ネタ尽きた…1s[11]はえーなおい
food: うどん, そば, いぬ, さる, きじ
・ 1回のトークの内容は sentence のどれか（今回はどちらか）がランダムで選ばれる
・ 話主、表情を指定して話す内容を書く
・ ${food} は food のなかからどれか1つがランダムで選ばれる
出力例：

技術的な話(1)
プログラムとしては
プログラムとしては
まめフラスコはなにをしているか ○をつけた2つがメインです
○をつけた2つがメインです
まめフラスコ内包のベースFlash
ダミー画像
置換 入
力
埋込 受
付
台本
スクリプト解釈＆トーク制御用
Flashプログラム Flashファイルの解釈・
分解・再構築
出力
台本

技術的な話(2)
これについて。
主にFlashファイルのバイナリいじり担当
・ ベースFlashのパース、ヘッダやタグの内容変更や新規生成
- 指定された画像ファイルのFlash内部形式への変換と置換
- 台本ファイルのパースと整形、トーク内容代入文のバイナリの生成
- キャンバスサイズ変更、ファイルサイズ整合などのためのヘッダ変換
・ ＧＵＩまわり
Flashのバイナリは1つのヘッダと複数のタグがなります。仕様は公開されています。
一番最後はファイル
ヘッダ タグ タグ タグ タグ タグタグ 終端を示すタグ。
タグの内容はさまざま。テキスト、プログラム、画像（ベクタ・ラスタ）、音楽、etc.
バージョン情報やファイルサイズなどFlash全体に関する内容
Flashファイルの生成について
専用GUIアプリで作るもの： Adobe Flash CS5（本家）や他社製簡易版 など
プログラムで作るもの： ming, swfmill, flex
まめフラスコではAdobe Flashで作ったベースファイルを、
独自ライブラリを使ったプログラムでいじるという
ハイブリッドな方法をとっています。

技術的な話(3)
ひきつづき、これについて。
まめフラスコはJava VM上で動きますが、
Jythonで実装しています。
Jythonってなに？
Javaによるプログラミング言語Pythonの実装。Javaのライブラリも使える
Pythonってなに？
オブジェクト指向プログラミング言語 Perl, Ruby, PHPあたりに近い
いろんなアプリケーションのスクリプト言語として採用(Maya, Shade, Blender, Metasequoia...)
ninix(-aya): 伺かのUNIX(というかX Window System)での実装もPythonでされている
なんでそうしてるの？
Jythonで実装(.py)⇒jythoncでJavaVM用アーカイブ(.jar)⇒jsmoothでラップ(.exe) すると
・ exeファイルで撒けるので(最も数的に多いであろう)Windowsユーザに優しい
・ jarファイルも同梱すればマルチプラットフォームで動作可能
・ (JavaVMは別途用意してもらえれば)配布サイズが1MB程度と小さくてすむ
・ Javaの画像関連ライブラリが使える

技術的な話(4)
これについて。
なにをしてるか
Flashファイル実行時のスクリプト解釈とトーク制御
・会話や辞書データからランダムに拾い出したり
・スクリプトの指定する画像にキャラクターの表情を変えたり
・吹き出しとその中の文字を表示させたり
どんなものか
FlashLite1.1(Flash4相当)はスクリプト環境として非常に貧弱です！
・オブジェクト指向？なにそれ
・関数がない。サブルーチン呼び出しっぽいことはできるが変数はグローバル
・配列がない。eval関数を用いてもどきっぽいことはできるけど重い
ので、例えば food: うどん, そば, いぬ, さる, きじ は、
food_name=”うどんそばいぬさるきじ”
何番目の要素を得るにはどこからどこまで
food_length=”001004006008010012” 切り出せば良いかの情報
のようなかたちで文字列で埋め込んでおいて、必要に応じて切り出している。
（実際には上の代入文をFlashPlayerが理解できるバイナリにして埋め込み）
・ 8ビットマイコン時代のBasicプログラミング経験が生きる…かも
・ あんまり複雑なことはしんどいです。⇒巷の携帯Flashでワンキーゲームが多い理由

できないこと・できてないことについて
というかランダムトークするだけしかできていない。
制限の主要因：
・ Flash Liteのファイルサイズ制限（100KB)
・ ActionScript1.0では複雑なことは難しい
・ 細かいところで機種・キャリア依存性がある
■ ユーザからのアクション・入力
⇒待受画面ではボタン・方向キー受け取れない
⇒データフォルダからでも受け取れる入力に機種・キャリア依存性あり
[2][4][6][8]でマウスカーソルもどきを移動させて触り反応、とか、したい？
⇒ユーザからの入力（例：名前や好感度）を次回再生時まで覚えてられない
FlashLite2.0以降なら不可能ではないが機種・キャリア依存性あり
ことあるごとにネットワークつないでデータ送信、反応パラメタ埋め込んだ
Flashファイルを動的に再生成、とかできなくはないけど…
↑の応用でネットワーク更新もどきもできなくはないけど…
■ .narファイルの読み込み
⇒100KBサイズ制限のせいでShellデータ入りきりません
勝手に自動縮小・低画質化してしまうのも…
⇒各栞への対応は無理
ninix-ayaがちょうどPythonで書かれているけどどう活かせば…

ふゅ～ちゃ～☆わ～く
■ 生成UIとかユーザフレンドリーに
全体的に使いやすくできるところの修正
台本ファイルの仕様・説明をちゃんとする
座標を数字で入力させるだけでなくプレビューつけるとか
設定SAVE/LOADまわり
■ こまかな（内部的な）修正
埋め込んでいるキャラクタ画像をjpgベースからLosslessBitmapへの変更
吹き出しのとんがり位置のカスタマイズとか
もうちょっとだけまともなSakuraScript対応(waitとか）
■ Flash Liteの機能の活用
日にち、曜日、時刻、電波状態、電池残量等取得できるので
トーク内容に反映させられるように
■ GoogleAppEngineの活用
せっかくPythonなので。
キャラクターなんとか機的な機能も取り込んで一通りブラウザ上でやれるよに
生成物はQRコードを表示させてケータイに取り込ませるとか
■ （オーサリングツールとしての）Adobe Flashからの脱却
内包するFlashファイルをつくるのを全部プログラミングでやりたい