エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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で処理をする場合は簡単に処理を作ることができるでしょう。
 
20121201_swiffy_3
 
また、Flash内のオブジェクトは、上記の画像の黄色のアンダーラインの部分のように「”id”:20」のような形で IDが振られていますので、どの部分を差し替えればいいかは、この IDを目印に探せばいいのではないかと思います。
 
 
ただ、複数の画像を差し替える場合は、Flashを作成する際に気を付ける点があります。
それについては、下記のサイトに分かりやすく掲載されています。
 「Swiffyで画像を差替える際のFlash側の対応」
 http://www.plusmb.jp/2012/09/28/5790.html
 
 
画像を差し替える方法はいくつかあるかとは思いますが、私の場合は、Google Swiffyで変換したファイルから差し替える必要がある画像の部分をあらかじめ特定の文字列に置き換えた中間ファイルを作成しておく方法を採っています。
そして、表示側のプログラムで、特定の文字列ごとに必要な画像と差し替える形で JSONを完成させて HTMLに組み込むと言う方法です。
 
20121201_swiffy_4
 
そして、中間ファイルを生成するツールを作っておけば 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の バージョンの調べ方

 - Google Swiffy・Google関連

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

Googleマップの企業名検索で出る人気キーワードを変更する方法を探る

企業名検索をして表示されるキーワードは気になるところですが、この項目を変更することができるのか?調べて見ましたが編集できないようです。

Googleアカウントの特徴と登録方法、使い分けの解説

Google+を始めるためにも必要なGoogleアカウントの登録方法解説。

Google Swiffyの使い方 【1】基本編

Google Swiffyの使い方 【1】基本編。Google Swiffyの使い方を説明するシリーズの 1本目として、基本的な使い方、仕組みを説明します。

Google Swiffyの使い方 【6】Swiffyの Flashムービー・Flashベクターを差し替える方法

Google Swiffyの使い方 【6】Swiffyの Flashムービー・Flashベクターを差し替える方法を解説。

Google Swiffyの使い方 【7】Swiffyの バージョンの調べ方

Google Swiffyの使い方 【7】Swiffyの バージョンの調べ方を解説。

Google Swiffyの使い方 【4】Swiffyに FlashVars的テキスト渡しで発生する不具合(テキストの背景が黒くなる)(テキストが上にずれる)

Google Swiffyの使い方 【4】Swiffyに FlashVars的テキスト渡しで発生する不具合(テキストの背景が黒くなる)(テキストが上にずれる)

Swiffyで変換されたファイルの Base64変換された画像を置換する方法

Swiffyで変換されたファイルの Base64変換された画像を置換する方法を解説。

Google Analytics 時間帯別アクセス数を確認する方法

時間帯別アクセス数をカスタムレポートを使って集計する方法解説。1ヵ月分のレポートを時間帯ごとに集計してグラフ化する方法はデフォルトでは用意されていない。

GoogleのSNS・Google+とFacebookの違いと設定方法解説

GoogleのSNSであるGoogle+の特徴(Facebook、Mixiとの違い)を解説し、アカウントの設定方法の説明。

Google Swiffyの使い方 【2】日本語の文字化けについて

Google Swiffyの使い方 【2】日本語の文字化けについて。Google Swiffyは日本語に対応していませんので、その対応方法についての説明です。