ケータイFlashで埋め込みフォントを表示してみよう

By ookura - 09/07/10 -

ケータイFlashで動的に内容を変化させる場合、デザイン面の都合で端末のフォントではなく埋め込みフォントを使用したい場合があります。
埋め込みフォントを使用すると、フォントデザインの自由度が上がる代わりに、埋め込むフォントの分だけサイズが大きくなってしまいます。
　
ですが、埋め込むフォントの数を減らせばケータイFlashとして問題なく表示できるファイルサイズに抑えることが可能です。
今回は「アルファベット」に限定して埋め込むことにします。
　
　

フォントの埋め込み方

テキストフィールドで指定できるフォントには「デバイスフォント」と「埋め込みフォント」があります。
「_等幅」「_serif」のようにアンダースコアで始まっているのがデバイスフォント、それ以外が埋め込みフォントです。
　
デバイスフォントは端末内のフォントを使用して表示するため、SWFの容量を抑えられますが、フォントサイズが端末によって異なったり、表示できるフォントが限られていたりします。
　
埋め込みフォントはSWFファイルのパブリッシュ時にフォント情報を埋め込むため、ファイルのサイズが大きくなりますが、フォントサイズやフォントデザインの自由度は高まります。
　
静止テキストで埋め込みフォントを使う場合は入力した文字のフォントデータだけが埋め込まれますが、ダイナミックテキストで埋め込みフォントを使う場合は必要なフォントを文字の種類やリストで選択して埋め込みます。
　
埋め込むフォントのファイルサイズは埋め込む文字のパターンやフォントの種類によって異なりますが、漢字を埋め込んだり複雑な形状のフォントを埋め込んだりするとサイズが大きくなります。
　
ケータイFlashとして表示可能なサイズにおさまっているかどうかは実際に埋め込むフォントを選択してパブリッシュして確認してみてください。
　
　

SWFファイルの作り方

パブリッシュバージョンはFlashLite1.1、
サイズは240×240pxにします。
　
ステージ背景を黒にしてステージ上に文字色を白にしたダイナミックテキストを配置します。
ダイナミックテキストのフォントはWindowsのフォント「Comic Sans MS」にしておきます。
　
フォントはお持ちのフォントを指定してみてください。
　
ダイナミックテキストの文字幅は自動的に広がらないので大きめにしておきます。
今回はテキストを中央寄せにしておきます。
　
ダイナミックテキストのプロパティで「埋め込み」というのがあるのでここをクリックして埋め込むフォントを指定します。
今回はアルファベットに限定して埋め込みますので「大文字[A..Z](27文字)」と「小文字[a..z](27文字)」を選択します。
　
ダイナミックテキストの変数の部分に「text1」と記入しておきます。
これでtext1という変数に指定された内容がFlashのダイナミックテキストに表示されます。
→[図139]
　
「action」レイヤーを追加してアクションスクリプトで以下のように記述します。

text1="{$text1}";

「{$text1}」の内容はPHPから置換することになります。
→[図138]
　
できたらパブリッシュします。
　
　

PHPでFlash内の文字列を置換する

PCのFlashであればそのままSWFファイルに対してURL引数やFlashVarsで値を渡すことができます。
ですが、ケータイFlashでは値を渡せる端末と渡せない端末があります。
loadVariablesで読み込む方法もないではありませんが、ユーザーのアクションが必要になります。
ですのでここではPHPでFlash内の文字列を置換する方法を取ります。
　
先ほどのSWFファイルでActionScriptに置換用の文字列を指定しているのでPHPで置換処理を行います。
　
PHPソース
sample4103.php

<?php
/* 
 * swfのテキストを置換して出力するサンプル
 */

$text1 = $_GET['text1'];

// SWFファイルの内容を取得
$swfData = file_get_contents('sample4103.swf');


// SWFからXMLに変換

// コマンド実行時の入出力とエラー出力先を指定
$descriptorspec = array(
   0 => array("pipe", "r"),
   1 => array("pipe", "w"),
   2 => array("file", "swfmill_error_log", "a")
);

// swfmillコマンドを実行してリソースとファイルポインタを取得
$process = proc_open('/usr/local/bin/swfmill -e cp932 swf2xml stdin stdout', $descriptorspec, $pipes);

if (is_resource($process)) {
    // 標準入力にSWFファイルのバイナリデータを書き込み
    fwrite($pipes[0], $swfData);
    fclose($pipes[0]);
    
    // 標準出力からXMLデータを読み込み
    $xmlString = stream_get_contents($pipes[1]);
    fclose($pipes[1]);
    
    // パイプを全て閉じてからプロセスを閉じる
    proc_close($process);
}

// 文字列置換

// 置換する値を連想配列で設定
$replaceStrings = array(
    'text1'   => $text1,
);

foreach($replaceStrings as $key => $value){
    // 文字列内の改行を置換
    $value = str_replace("\n", '&#13;', $value);
    
    // 文字列を連想配列の値に置換
    $xmlString = str_replace('{$' . $key . '}', $value, $xmlString);
    
}


// XMLからSWFに変換

// コマンド実行時の入出力とエラー出力先を指定
$descriptorspec = array(
   0 => array("pipe", "r"),
   1 => array("pipe", "w"),
   2 => array("file", "swfmill_error_log", "a")
);

// swfmillコマンドを実行してリソースとファイルポインタを取得
$process = proc_open('/usr/local/bin/swfmill -e cp932 xml2swf stdin stdout', $descriptorspec, $pipes);

if (is_resource($process)) {
    
    // 標準入力にXMLデータを書き込み
    fwrite($pipes[0], $xmlString);
    fclose($pipes[0]);
    
    // 標準出力からSWFファイルのバイナリデータを読み込み
    $swfOutput = stream_get_contents($pipes[1]);
    fclose($pipes[1]);
    
    // パイプを全て閉じてからプロセスを閉じる
    proc_close($process);
}

// SWFのヘッダを出力
header('Content-type: application/x-shockwave-flash');

// SWFのデータを出力
echo $swfOutput;

※上記サンプルはUTF-8で記述しています。
※同階層に「swfmill_error_log」を書き換え可能パーミッションで配置する必要があります。
※上記サンプルでのSWFの動的生成にはサーバーへのswfmillのインストールが必要です。
→参照：「swfmillでケータイFlashを動的生成してみよう（インストール編）」
　
　

動的に変更するテキストを指定する

以下のようにFlashを置換出力するPHPのURLにGETパラメータをつければFlashに値を渡すことができます。

sample4103.php?text1=Sample

このURLで表示したい文字が入ったFlashを公開することができます。
　
HTMLのフォームに入力した内容を上記のパラメータとして設定するにはフォームの種類をGETメソッドにして、フォームのname属性に「text1」のように指定します。
フォームのaction属性にはswfファイルのパスを指定します。
※アクセス後のURLを共有する必要がなければPOSTメソッドでも問題ありません。
istyle属性をつけて英文字のみ入力可能にしておき、入力できる文字数の制限もつけておきます。

<form action="sample4103.php" method="GET">
<input type="text" name="text1" value="" istyle="3" maxlength="8" /><br />
<input type="submit" name="submit" value="入力した内容で表示">
</form>

　
これでフォームに入力した文字がFlashで表示されるようになりました。
　
工夫次第でタイポグラフィ的なものも作れそうですね。
　
　

実行例

実行例はこちらからご確認下さい。

→URLをメールで送る
http://ookura.tanikaze.com/Sample/post4103/
　
　

画面イメージ

サンプルファイル

sample4103.zip
上記サンプルのFlashファイル及びPHPファイル一式です。
　
　

スマホサイト・アプリをつくろう。

おすすめ

カテゴリー