Google Swiffyの使い方 【5】Swiffyの画像を差し替える方法
2014/06/26
Swiffyの中の画像を差し替える方法
テキストを追加する方法の次は、画像を差し替える方法です。
Flashの中で利用している画像を動的に差し替えたい場合の対応方法についてです。
コーポレートサイトなどのイメージ Flashなどであれば、差し替える画像をあらかじめ Flash内に入れておき、必要に応じてそれを差し替える方法でも対応も可能ですが、差し替える画像の数が多い場合や後から動的に変更される画像を差し替える画像の対象にする必要がある場合などは、別途対応が必要です。
そのような場合の画像の差し替え方法については、【9.画像の構造と差替え実験】に分かりやすく実験結果が掲載されています。
http://www.1ft-seabass.jp/memo/2012/01/10/google-swiffy-9/
上記の記事でも書かれていますが、画像の部分は「”data”:”data:image/png;base64,」と言った記述で始まっていますので、その部分を探して画像を差し替えることで対応が可能です。(下の画像を参照。赤のアンダーラインの部分。その続きの「/9j/4AAQSkZJRgABA…..」の部分が画像のデータになります。画像の最後は「”(ダブルクォーテーション)」で閉じられています。)
差し替える側の画像もあらかじめ Base64でエンコードをする必要がありますが、PHPには Base64エンコーディングのコマンドもありますので、PHPで処理をする場合は簡単に処理を作ることができるでしょう。
また、Flash内のオブジェクトは、上記の画像の黄色のアンダーラインの部分のように「”id”:20」のような形で IDが振られていますので、どの部分を差し替えればいいかは、この IDを目印に探せばいいのではないかと思います。
ただ、複数の画像を差し替える場合は、Flashを作成する際に気を付ける点があります。
それについては、下記のサイトに分かりやすく掲載されています。
「Swiffyで画像を差替える際のFlash側の対応」
http://www.plusmb.jp/2012/09/28/5790.html
画像を差し替える方法はいくつかあるかとは思いますが、私の場合は、Google Swiffyで変換したファイルから差し替える必要がある画像の部分をあらかじめ特定の文字列に置き換えた中間ファイルを作成しておく方法を採っています。
そして、表示側のプログラムで、特定の文字列ごとに必要な画像と差し替える形で JSONを完成させて HTMLに組み込むと言う方法です。
そして、中間ファイルを生成するツールを作っておけば Flashの作り替えが発生したときも比較的手間をかけずに対応をする事が出来ます。(上記の画像の赤色のアンダーラインの部分の用に画像のデータの部分を「<?!–image01–>」に置き換えています。)
Base64の画像の部分を差し替えるツールの処理としては、夏季のような感じでしょうか。
————-
preg_replace( ‘/base64,[A-Za-z0-9+\/\n=]*”/’, $replacement, $swiffy_f, 1 );
————-
本当は、変換ツールを公開したいところですが、諸事情があってそれは出来ないのが残念ですね…
【Google Swiffy 使い方目次】
Google Swiffyの使い方 【1】基本編
Google Swiffyの使い方 【2】日本語の文字化けについて
Google Swiffyの使い方 【3】Swiffyに FlashVars的にテキストを渡す方法(Swiffyでは扱えない文字「%」「+」「&」)
Google Swiffyの使い方 【4】Swiffyに FlashVars的テキスト渡しで発生する不具合(テキストの背景が黒くなる)(テキストが上にずれる)
Google Swiffyの使い方 【5】Swiffyの画像を差し替える方法
Google Swiffyの使い方 【6】Swiffyの Flashムービー・Flashベクターを差し替える方法
Google Swiffyの使い方 【7】Swiffyの バージョンの調べ方
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
Google Analytics 時間帯別アクセス数を確認する方法
時間帯別アクセス数をカスタムレポートを使って集計する方法解説。1ヵ月分のレポートを時間帯ごとに集計してグラフ化する方法はデフォルトでは用意されていない。
-
GoogleのSNS・Google+とFacebookの違いと設定方法解説
GoogleのSNSであるGoogle+の特徴(Facebook、Mixiとの違い)を解説し、アカウントの設定方法の説明。
-
ブログを何時に更新?投稿時間でアクセス数をアップさせる方法
ブログの更新時間を調整してアクセス数をアップさせる方法の解説です。自分のサイトのアクセス状況を知ることも大切でそれによってわかることも解説しています。
-
Google Swiffyの使い方 【1】基本編
Google Swiffyの使い方 【1】基本編。Google Swiffyの使い方を説明するシリーズの 1本目として、基本的な使い方、仕組みを説明します。
-
Google Swiffyの使い方 【3】Swiffyに FlashVars的にテキストを渡す方法(Swiffyでは扱えない文字「%」「+」「&」)
Google Swiffyの使い方 【3】Swiffyに FlashVars的にテキストを渡す方法(Swiffyでは扱えない文字「%」「+」「&」)
-
Googleマップの企業名検索で出る人気キーワードを変更する方法を探る
企業名検索をして表示されるキーワードは気になるところですが、この項目を変更することができるのか?調べて見ましたが編集できないようです。
-
Google Swiffyの使い方 【6】Swiffyの Flashムービー・Flashベクターを差し替える方法
Google Swiffyの使い方 【6】Swiffyの Flashムービー・Flashベクターを差し替える方法を解説。
-
Swiffyで変換されたファイルの Base64変換された画像を置換する方法
Swiffyで変換されたファイルの Base64変換された画像を置換する方法を解説。
-
Google Swiffyの使い方 【2】日本語の文字化けについて
Google Swiffyの使い方 【2】日本語の文字化けについて。Google Swiffyは日本語に対応していませんので、その対応方法についての説明です。
-
ads.txtの設置方法解説。AdSenseの警告への対処と設置の確認方法
ある日突然Googleがads.txtを設置せよと警告を発した。AdSenseの画面に真っ赤な警告が表れて戸惑ったが、ads.txtは簡単な1行のテキストファイルを設置するだけなので、作業をする気になれば簡単だ。