2006/11/03
吉岡 梅

連載目次へ >>

　メッセージ・カードなどのFlashムービーを作成するときに知っておきたいのが，テキスト・ファイルの読み込み方です。外部テキスト・ファイルを利用できれば，ムービーを再パブリッシュすることなくコンテンツの内容に変化を付けることができます。

テキスト・ファイルで内容に変化を付ける

　図1は以前にご紹介した「タイピング練習風ムービー」を少し改造したものです。問題文や表示する画像を，外部テキスト・ファイルを読み込んで変更できるようにしてみました。

図1：テキスト・ファイルを読み込むムービー（クリックするとムービーを表示します。ファイル一式はこちらからダウンロードできます）

　このムービーのファイル構成は図2のようになっています。

図2：ファイル構成

　このように，外部のテキスト・ファイルを読み込んで，その内容を取得するような仕組みを作っておくと，テキスト・ファイルの内容を変更するだけで，Flashムービーを再パブリッシュすることなく，コンテンツの内容変更を簡単に行うことができますね。

　テキスト・ファイルを始め，ムービーの外部のテキスト情報を取得するときには，LoadVarsクラスを利用します。LoadVarsクラスには，外部のテキスト情報を読み込んで処理する際に便利な仕組みがまとめられています。

LoadVarsクラスとは

　では，実際にLoadVarsクラスを使ってテキスト・ファイルを読み込んでみましょう。新規Flashドキュメントを作成し，任意の名前を付けて保存してください。

　次に，Flashドキュメントを保存したのと同じフォルダ内に，「メモ帳」等のテキスト・エディタを使って「data.txt」という名前のテキスト・ファイルを作成します。テキスト・ファイルは「hoge=10」という内容にして保存します（図3）。

図3：テキスト・ファイルを用意する

　LoadVarsクラスを使ってファイルの読み込みを行う際には，イベントハンドラの仕組みを使います。以前，ボタンの作成方法をご紹介した際に利用した「onPress」「onRelease」といった仕組みと同じですね（参考記事）。

　ボタンの場合には，「onPress」や「onRelease」といったイベントハンドラを利用しました。LoadVarsクラスでは，基本的には読み込み完了時に任意の処理を実行するイベントハンドラとして，「onLoad」イベントハンドラを利用します（表1）^＊1。

表1：LoadVarsクラスのイベントハンドラ

イベント ハンドラ	説明
onLoad	読み込みが完了し，既定の解析処理が終わったときに実行したい処理を割り当てる
onData	読み込み完了後，既定の解析処理を行わずに，自分でデータの解析処理を行いたいときに割り当てる(次回詳しく解説します)
onHTTPStatus	読み込み時にサーバーからHTTPステータスコードを受け取った際に実行したい処理を割り当てる

　基本的な流れは，

1. LoadVarsクラスのインスタンスを生成
2. 読み込んだあとの処理を作成(onLoadイベントハンドラの設定)
3. 読み込み

となります。コードで書くと，

var textReaderLV:LoadVars = new LoadVars;
textReaderLV.onLoad = function() {
  //読み込み完了時の処理
};
textReaderLV.load(テキスト・ファイルへのパス);

となります。

　先ほど保存した「data.txt」を読み込むコードは次のようになります。

var textReaderLV:LoadVars = new LoadVars();
textReaderLV.onLoad = function() {
  trace("「hoge」の値は，" + textReaderLV.hoge);
};
textReaderLV.load("data.txt");

　1フレーム目に上記のコードを記述してムービープレビューで動作を確認してみると，図4のように外部テキスト内に記述した「hoge」の値が表示されます。

図4：外部のテキストの値を読み込んだところ

値の取り出し方

　外部テキストの値を無事取り出すことができました。さて，ここで注目していただきたいのは変数「hoge」の値の取り出し方です。

trace("「hoge」の値は，" + textReaderLV.hoge);

hogeの値である「10」は「textReaderLV.hoge」という形で取り出されています。実はLoadVarsクラスは，loadメソッドでデータを読み込むと，読み込み完了時に変数の解析を行い，その「変数名」と「値」を，LoadVarsクラスのインスタンスの「プロパティ名」とその「値」のような形で取り込みます。

　今回のコードでは，

var textReaderLV:LoadVars = new LoadVars();

のステートメントで変数「textReaderLV」に新規LoadVarsインスタンスを割り当てていますので，外部テキストの「hoge」という変数は，「textReaderLV.hoge」という形で取り込まれ，その値は「10」となります^＊2。

　イメージとしては，電話番のアルバイト君（textReaderLV）を一人雇い，社外の担当者さんに御用聞きをしてもらい（loadメソッド），そして聞いた内容を「アルバイト君，『hoge』はどうなったって？」「あ，『10』だそうです」というような会話を通して値を得ている，と，いうような形でとらえてみてください。値を聞くように頼んでおいたバイト君が，その値の情報も保持している，というわけですね。

　複数の変数の値を読み込ませたい場合には，外部テキストを「変数名=値」という形を1セットとして，「&」で区切って記述します（図5）^＊3。

図5：複数の値を区切って記述したテキスト・ファイル

　図5のテキスト・ファイルでは「name」「age」「address」の三つの変数を「&」で区切って記述しています。このテキスト・ファイルを読み込むコードは次のようになります。

var textReaderLV:LoadVars = new LoadVars();
textReaderLV.onLoad = function() {
  trace("name:" + this.name);
  trace("age:" + this.age);
  trace("address:" + this.address);
};
textReaderLV.load("data2.txt");

　このコードの実行結果は図6のようになります。「name」「age」「address」の三つの変数の値を，それぞれ三つのプロパティのように取り込んでいるのが確認できますね。

図6：三つの値を読み込んだところ

文字化けが起こったら

　さて，基本的な外部テキスト・ファイルの読み込み方と，その値の取り出し方を紹介しました。でも，ここで紹介したコードを実行してみたら，変数の値が文字化けしてしまった，という方もいらっしゃるのではないでしょうか。

　実はFlashはデフォルトでは^＊4，読み込むテキスト・ファイルの文字コードが「UTF-8」であるものとして処理を行います。そのため，日本語WindowsやMacで使用されているShift-JISで記述されたテキスト・ファイルを読み込むと文字化けを起こしてしまうのです。

　一番簡単な解決方法は，UTF-8形式で保存のできるテキスト・エディタを使って，UTF-8形式でテキスト・ファイルを保存することです。しかし環境によっては（あるいは，ユーザーによっては），保存できない（しない）場合もありますよね。

　このようなケースでは，スクリプト側で，

//OS既定の文字コードを使用するように設定を変更
System.useCodepage = true;

の1ステートメントを追加することで，読み込むテキスト・ファイルをOS既定の文字コード（つまり，Shift-JISですね）で書かれているものとして解析することができます。文字化けを起こしてしまう場合には，お試しください。

　今回は，外部テキスト・ファイルを読み込む基本的な方法をご紹介させていただきました。LoadVarsクラスでは，loadメソッドで外部テキストを簡単に読み込んで値を利用できることがわかりました。

　でも，この独特の変数の記述方式ではなく，すでに手元にあるCSV形式のテキストや，TAB区切りのテキスト等を読み込む場合にはどうすればよいのでしょう？ すべての記述方式をLoadVarsクラスに合わせて変更しなくてはいけないのでしょうか？ 次回はそのようなケースで役立つ，テキスト・ファイルの解析のカスタマイズ方法をご紹介します。お楽しみに。

---

＊1 この説明を読んで「え？MovieClipLoaderクラスみたいにイベントリスナーの仕組みじゃないの？違うんだ？」と感じた方もいらっしゃるでしょう。そうなのです。違うのです。ActionScriptはまだまだ発展途上の言語であるので，似たような処理でもいろいろな手法が混在している状態なのです。

＊2 イベントハンドラ・メソッドには，「this」キーワードの参照先として，そのイベントハンドラ・メソッドを呼び出したインスタンスが渡されるという仕組みがあります。この仕組みを利用して「textReaderLV.hoge」ではなく「this.hoge」と記述するのが一般的です。仕組みが理解できた方は，「this」を使った簡単で汎用的な記述方法をお勧めします。

＊3 このような記述方法は，実はMIME コンテンツタイプ「application/x-www-form-urlencoded」の形式の記述方法です。uriのクエリー・ストリング(よく見かける「http://○○.○○/hoge.html?hoge=10」等のアドレスの「?」以降のものです。)と同じ形式で記述してください，ということですね。

＊4 より正確に言うと，「Flash Playerでは」既定の文字コードをUTF-8として読み込みます。