メモ

元ソースに手を加えずにPHPを用いてGoogle Swiffyのコードにソースを追加する

Posted on by seigo

今回は、Swiffyの検証中にviewport追加コードや時間差スクロールを利用してiPhoneのアドレスバーを消すJavaScriptなどをいちいち追加するのは大変なので、元ソースに手を加えずにPHPを用いてGoogle Swiffyのコードにソースを追加する方法を書きます。

今回のソース

今回のテストに使うGoogle Swiffy元コードです。undefinedのところはFlashVarsでparam1を指定すると反映されるようにしています。

Google Swiffy元コード

→別ページで開く

それでは、早速PHPによるソースコード追加をやってみましょう。

PHPでソースを挿入してみる

早速PHPを書いてみます。

viewportとiPhoneSafariでアドレスバーを消す便利2コードを追加

まずはじめに、検証時はiPhoneのSafariで検証するので以下の2コードはいつも必要なので加えるようにしたいです。

viewport指定 iPhoneでフィットして表示される。

<meta name="viewport" content="width=320px, user-scalable=no" />

iPhoneでアドレスバーを消すを消す処理

<script type="text/javascript">
window.onload = function() {
  setTimeout(scrollTo, 100, 0, 1);
}
</script>

上記の2つのソースコードの挿入はheadタグ以前なのでheadの閉じタグの手前を起点に文字列を挿入するようにしています。

str_replace( '</head>' , $add_header . '</head>' , $gsHTML );

FlashVars挿入をswiffy表示（stage.start）前に割り込ます

また、元ソースではFlashVarsでparam1変数を指定すると反映するようにしているのでその追加コードも書きます。

<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.start();
</script>

以上のコードを以下のように追加するようにします。

<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.setFlashVars("param1=テスト")
stage.start();
</script>

これはstage.startの手前を起点に文字列を挿入するようにしています。

$gsHTML = str_replace( 'stage.start();' , $add_js . 'stage.start();' , $gsHTML );

ちょっと便利にSwiffyソースを切り替えられるようにもする

使い勝手を良くするためGoogle Swiffy元コードのパスを指定すると読む仕組みも加えています。

// Google Swiffy元コードのパス
// URLで～～～/gs_html_replacer.php?gs_path=google-swiffy-011.swf.html
// といった形で利用する。
$gs_html_path = $_GET['gs_path'];

// GoogleSwiffyを読む
$gsHTML = file_get_contents( $gs_html_path );

実際の完成PHPソース

というわけで、実際の完成PHPソースです。


<?php

// Google Swiffyの元コードに必要コードを追加する仕組み

// Google Swiffy元コード取得 /////////////////////

// Google Swiffy元コードのパス
// URLで～～～/gs_html_replacer.php?gs_path=google-swiffy-011.swf.html
// といった形で利用する。
$gs_html_path = $_GET['gs_path'];

// GoogleSwiffyを読む
$gsHTML = file_get_contents( $gs_html_path );

// ヘッダーの割り込み /////////////////////
$add_header = '';

// viewport指定 iPhoneでフィットして表示される。
$add_header .= '<meta name="viewport" content="width=320px, user-scalable=no" />' . "\n";

// iPhoneでアドレスバーを消す処理
$add_header .= '<script type="text/javascript">' . "\n";
$add_header .= 'window.onload = function() {' . "\n";
$add_header .= '  setTimeout(scrollTo, 100, 0, 1);' . "\n";
$add_header .= '}' . "\n";
$add_header .= '</script>' . "\n";

$gsHTML = str_replace( '</head>' , $add_header . '</head>' , $gsHTML );

// Google Swiffy JavaScript部分の割り込み /////////////////////

$add_js = '';

// 試しにsetFlashVarsを指定
$fvar .= 'param1=テスト';
$add_js .= 'stage.setFlashVars("' . $fvar . '")' . "\n";

$gsHTML = str_replace( 'stage.start();' , $add_js . 'stage.start();' , $gsHTML );

// 出力
echo $gsHTML; 

?>

このPHPを通したコードはこちら

そして、このPHPを通したコードはこちらです。

→別ページで開く

無事反映され「テスト」と表示されましたね！

おわりに

いかがでしたでしょうか。Swiffy実装時の一助となれば幸いです。

Google Swiffyも用途次第で実用に耐えられるものになって来まして、WEB公開する上で、書き出された元コードに追加する要素が多くなってきています。

そのときに、htmlをいちいちいじってしまうと、Swiffy書き出しを行うたびに、コードを追加せねばならず手間が増えてしまいます。
そういったとき、自動的に追加してくれるこのようなPHPは便利です。

また、例えば、AndroidやiPhoneなどの判定JavaScriptといった今後追加すべきコードが増えてきてもPHPに追記するだけなので柔軟に対応しやすいですね。
ゆくゆく追加するコードが多くなった場合、こういった小さい範囲のテキスト挿入ではなく、いっそJSONのデータ部分だけ抽出して、他のコードは独自に書いてしまったほうがきれいかもしれませんね。

以下、今回のファイル一式を置いておきますので興味のある方は変換して試してみてください。

.fla(CS5.5作成)データダウンロード：google-swiffy-011.zip

それでは、Google Swiffy Lifeを！

、、
seigo