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

前回はケータイFlashでのテキスト入力フォームの作り方について説明しました。
今回は文章量に合わせてレイアウトを自動的に調整できるようにする方法について説明します。
参照：ケータイFlashでテキスト入力フォームを作ろう
　
動的に生成するFlashページを作成しているとテキスト領域の大きさが問題になってきます。
コンテンツの内容を更新できるのはよいのですが、ダイナミックテキストのサイズが決まっているので生成する側で文字数を制限しなければならなくなります。
　
この問題の解決策として、ActionScript側で領域のサイズを変更する方法について説明します。
以下の方法はFlashLite2.0以上でのみ有効ですのでご注意下さい。
　
　

自動的にレイアウトを調整するしくみ

しくみとしては以下の通りです、
　
１．ダイナミックテキスト自体を文字の量によってサイズが変わるようにしておきます。
２．テキストはパーツごとにムービークリップとしてまとめておきます。
３．それぞれのムービークリップの位置と高さをもとに、一つ下のムービークリップの位置と高さを変更します。
４．ダイナミックテキストのサイズが変わるとムービークリップの高さも変わります。
５．ムービークリップの高さと位置が変わるとムービークリップ同士の間隔が自動的に調整されます。
　
　

swfファイルを用意する

まずはswfファイルの作り方を説明していきます。
　
あらかじめパブリッシュバージョンFlashLite2.0で240px×240pxの入力フォームを用意します。
　
項目名を静止テキストで配置します。
→[図73]
　
次に各項目ごとにダイナミックテキストを配置します。
ダイナミックテキストにはswfmillで変換するための文字を入力しておきます。
例：「{$stationName}」
ダイナミックテキストにインスタンス名をつけておきます。
例：「station_name_txt」
→[図74]
　
静止テキストとダイナミックテキストをセットでムービークリップに変換します。
ムービークリップにインスタンス名をつけておきます。
例：「station_name_mc」
→[図75]
　
シーン（root）にレイヤーを追加し、以下のようにフレームアクションを記述します。
→[図76]

station_name_mc.station_name_txt.autoSize = true;
station_digest_mc.station_digest_txt.autoSize = true;
station_layout_mc.station_layout_txt.autoSize = true;
station_next_mc.station_next_txt.autoSize = true;

station_digest_mc._y = station_name_mc._y+station_name_mc._height+10;
station_layout_mc._y = station_digest_mc._y+station_digest_mc._height+10;
station_next_mc._y = station_layout_mc._y+station_layout_mc._height+10;

stop();

ダイナミックテキストのautoSizeを有効にすることで、ダイナミックテキストの内容によって自動的に高さが変更されます。
　
レイアウトの自動調節は下のムービークリップの縦座標を上のムービークリップとの間隔から計算して行います。
今回は10pxの間隔を空けて配置する設定です。
　
ここまで完了したら、パブリッシュしてサーバーにアップロードします。
　
　

PHP側の処理

全体的には以前の下記記事とほぼ同様です。
参照：swfmillでケータイFlashを動的生成してみよう（文字列置換編）
　
ただし、２点だけ違いがあります。
　
１．swfmillコマンド変換オプションの文字コード指定を解除
FlashLite2.0向けに作成していますので文字コードはUTF-8になりますので省略もしくはUTF-8を指定することになります。
　
２．変換するデータの変数名とデータ
今回は駅情報を表示するようなサンプルにしています。
　
また、error-output.txtを書き込み可能なパーミッションにして配置しておいて下さい。
　
実際のソースは以下の通りです。
　
sample2120.php

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

// 置換パターンを指定
$pattern = intval($_GET['pattern']);
if (!in_array($pattern, array(0,1,2))) {
    $pattern = 0;
}

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


// SWFからXMLに変換

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

// swfmillコマンドを実行してリソースとファイルポインタを取得
$process = proc_open('/usr/local/bin/swfmill 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[0] = array(
    'stationName'   => "心斎橋駅",
    'stationDigest' => "大阪府大阪市中央区心斎橋筋1丁目8-16にある、大阪市営地下鉄の駅。",
    'stationLayout'   => "御堂筋線・長堀鶴見緑地線ともに島式1面2線ホームの地下駅である。",
    'stationNext'   => "御堂筋線：本町駅・難波駅n長堀鶴見緑地線：西大橋駅・長堀橋駅",
);
$replaceStrings[1] = array(
    'stationName'   => "南阿蘇水の生まれる里白水高原駅",
    'stationDigest' => "熊本県阿蘇郡南阿蘇村大字中松にある南阿蘇鉄道高森線の駅。",
    'stationLayout'   => "単式ホーム1面1線を有する地上駅。開業当初から無人駅である。",
    'stationNext'   => "阿蘇下田城ふれあい温泉駅・中松駅",
);
$replaceStrings[2] = array(
    'stationName'   => "津駅",
    'stationDigest' => "三重県津市羽所町にある、東海旅客鉄道（JR東海）・近畿日本鉄道・伊勢鉄道の駅である。",
    'stationLayout'   => "島式ホーム2面4線と単式ホーム1面1線、切り欠きホーム1面1線、合計4面6線のホームを持つ地上駅。",
    'stationNext'   => "東海旅客鉄道 紀勢本線：一身田駅・阿漕駅",
);

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


// XMLからSWFに変換

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

// swfmillコマンドを実行してリソースとファイルポインタを取得
$process = proc_open('/usr/local/bin/swfmill 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;
?php>

まとめ

生成結果を確認していただくと文章量に合わせてテキストの間隔が調整されているのが確認できるかと思います。
　
スクロールするサイトの場合はスクロールエリアの高さやスクロール座標もうまく調整する必要がありますので注意して下さい。
　
　

flaファイルサンプル

sample2120.zip※Flash8形式
→こちらよりダウンロードしていただけます。
　
　

実行例

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

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

Flashサイト動的生成関連の記事一覧

1.ケータイFlashの概要
　1-1 ケータイFlashの概要について
　
2.ケータイFlashのページ作成
　2-1 ケータイFlashのページを作ってみよう
　2-2 ケータイFlashで縦スクロールするページを作ってみよう
　2-3 ケータイFlashで縦スクロールするページを作ってみよう（３ボタン制御編）
　
3.swfmillでケータイFlashを動的生成
　3-1 swfmillでケータイFlashを動的生成してみよう（インストール編）
　3-2 swfmillでケータイFlashを動的生成してみよう（文字列置換編）
　3-3 swfmillでケータイFlashを動的生成してみよう（画像置換編）
　3-4 ケータイFlashのレイアウトを文章量に同期させよう
　
4.ActionScriptとPHPの連携
　4-1 ActionScriptで文字列をPHPから動的に取得しよう
　4-2 ケータイFlashでテキスト入力フォームを作ろう