ブログ・エス技研

当ブログは引越しをしました。10秒後に自動で転送しますが、転送されない場合は、http://blog.s-giken.net/ をご覧ください。
ブログ・エス技研 TOP  >  Google Swiffy

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:-- ] カテゴリ:スポンサー広告 | TB(-) | CM(-)

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

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

PHPでpreg_match_all、preg_replace、str_replaceを使って任意の場所の文字列を置換する方法


Swiffyのテンプレートを作るツールを作成する際、置換する画像を「Base64」を目印にデータを置換する処理を作りましたが、置換する必要がない画像もあるわけです。

例えば、ABCという画像があり、Aと Cは置換するけど Bは置換せずにそのままにしておきたい。という場合です。

ですが、preg_replace、str_replaceの機能には、全部を置換する、1個目を置換する、と言った機能はありますが、「2個目」「1個目と 3個目」と言った場所を指定して変換する機能はありません。

PHPのコマンドのなかに、それを一つのコマンドで実行できるものはないようです。

そのため、いろいろ悩んだ結果、私が採った方法は、
 ・一度前から順番に置換
  (その際、元に戻す部分に印を付けていく)
 ・印がついている部分を元に戻す
という感じです。

具体的なソースは、以下の通りです。



// 置き換える場所を指定
$replase_array = array (1,4);
// 置き換えるコードのスタートのカウント
$replase_cnt = 1;
// swiffyで変換されたファイルの中身
$subject

// 置換する文字列の事前チェック
preg_match_all ( '/base64,[A-Za-z0-9+\/\n=]*"/', $subject, $matches_array );
$i = 1;
foreach ( $matches_array[0] as $val ) {
  $matches[$i] = $val;
  $i++;
}
$matches_cnt = count ( $matches );


// 「base64,」をキーに画像部分を置換
for ( $i = 1; $i <= $matches_cnt; $i++ ) {
  if ( in_array ( $i, $replase_array ) ) {
    $replacement = 'base64,<!--data_0' . sprintf("%02d",$replase_cnt) . '-->"';
    $replase_cnt++;
  } else {
    $replacement = 'base64,<!--return_0' . sprintf("%02d",$i) . '-->"';
  }

  $subject = preg_replace( '/base64,[A-Za-z0-9+\/\n=]*"/', $replacement, $subject, 1 );
}

// 置換する必要がなかった部分を元に戻す
for ( $i = 1; $i <= $matches_cnt; $i++ ) {
  $replasement = 'base64,<!--return_0' . sprintf("%02d",$i) . '-->"';
  $subject = str_replace ( $replasement, $matches["$i"], $subject );
}
**************************************


これを関数化できればいいのですが、↓こんな部分とか、
 $replacement = 'base64,<!--data_0' . sprintf("%02d",$replase_cnt) . '-->"';
                 ↓こんな部分とか
 $replacement = 'base64,<!--return_0' . sprintf("%02d",$i) . '-->"';

を汎用性がある書き方にする方法がピンと来なくて、今のところ関数化はしていません。
今後、何度か同じ様な処理が必要になった際に、どのように汎用的な関数にするべきか、改めて考えたいと思います。

※一部、ソース上の「<」「>」などを全角文字で記述しています。
スポンサーサイト
[ 2012年12月28日 10:31 ] カテゴリ:Google Swiffy | TB(0) | CM(0)

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

Swiffyは 1ヶ月に 1回くらいのペースでバージョンアップしています。
最初にも書きましたが、バージョンアップすると不具合が起こる場合があります。

Flashを変換したファイルのバージョンと、それを動かすための runtimeのバージョンが一致していないと全く表示されなかったり、表示されても何かしらの不具合が起こる場合があります。
具体的には、runtimeが「4.8」から「4.9」にバージョンアップした際は、マスク関連の処理が変更されていたことでマスク関連の処理が全く使えなかったことと、テキストを挿入するところで説明しましたが、挿入した文字列が上の方にずれてしまうような不具合がありました。
これは、変換した Swiffyのファイルと、runtimeのバージョンが一致していないことで起こりますが、Swiffyのバージョンが更新されていることに気づかずに Swiffyで変換してしまうと自動的に最新版で変換されるために、不具合が起こる場合もあります。

最新版の Swiffyのバージョンを調べるには、下記のリリースノートで更新された日時を確認する必要があります。
 https://www.google.com/doubleclick/studio/swiffy/releasenotes.html

ちなみに、最新版のバージョン以外で Swiffyを変換する方法はありませんので、バージョンが変わってしまったら諦めて最新のものにあわせていくしか必要がないでしょう。

また、Swiffyのファイルがどのバージョンで変換されたのかを確認するには、下記の画像の赤色のアンダーラインを引いてある部分を確認してください。
これは、一番最後の方の「」タグのちょっと手前の辺りにあります。
画像の場合は 4.9で変換されたことが分かります。

20121201_swiffy_6.gif



ちなみに、Swiffyは 1ヶ月に 1回くらいのペースでバージョンアップしていますが、RSSなどを配信しているわけではないため、それを確認するには自分でチェックをしに行く必要があります。

そのため、Swiffyリリースノートページの Webサイト更新チェッカーを作ってみましたので、是非ともご利用いただければ、と思います。(Swiffyのリリースノート以外でも使えるように作っていますので、必要に応じてご登録いただければ、と思っています。)

 Webサイト更新チェッカー
 http://s-giken.info/page/page_list.php


また、runtimeの情報については、下記の記事の一番最初の「1」の部分が runtimeの設定部分です。
デフォルトでは、直接 Googleのサイトを直接見に行くように設定されていますが、runtime.jsをローカルに保存しておく方が無難だと思われます。

●「Google Swiffyを使うときに役立つTIPS集」
 http://case-mobile-design.com/google-swiffy%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8%E3%81%8D%E3%81%AB%E5%BD%B9%E7%AB%8B%E3%81%A4tips%E9%9B%86/


また、実際に試していませんのではっきりとは言えませんが、Flashから直接 Swiffyのファイルを作成するプラグインをダウンロードして使用すれば、プラグインをダウンロードしたそのバージョンで常に Swiffyのファイルを作成することができる可能性はあります。

 Swiffy プラグインのページ
  「https://www.google.com/doubleclick/studio/swiffy/extension.html

また、実際の使い方などにつては下記のサイトが参考になるでしょう。
  http://clockmaker.jp/blog/2011/11/flash-pro-swiffy/



以上、あれこれと書いてきましたが、現時点ではある意味 Swiffyは非常にニッチな仕組みで、まだまだ完全ではないために使い始めていないユーザも多いのではないかと感じていますが、現在の 4.9のバージョンでは非常に優秀でかなり制限なく Flashを変換してくれるため、ほぼ問題なく実用に耐えうるものとなっていると思います。

今後は、iPhone/iPadだけではなく、Androidも徐々に Flash非搭載の端末が増えてきますので、それにあわせて 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の バージョンの調べ方
[ 2012年12月22日 10:16 ] カテゴリ:Google Swiffy | TB(0) | CM(0)

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

Swiffyで画像を差替える際のFlash側の対応
 http://www.plusmb.jp/2012/09/28/5790.html
 には「ベクターデータは変換できない」と書かれています。

ですが、差し替える Flashも Swiffyで変換することで対応することが可能になります。

20121201_swiffy_5.gif


差し替える Flashの中の Flashも含め、一度全体の Flashを Swiffyで変換し、差し替える Flashも別途 Swiffyで変換をします。
そして、全体の Flashの中の Flashの部分を差し替えることで変換することができるようになります。

ただ、差し替える場所は、画像の場合の「Base64」のように分かりやすいキーワードがあるわけではないため、探しにくいのは事実です。
そして、差し替える部分は、差し替える Flashを変換したファイルを見ながら、どこからどこまでを置き換えていいのかを確認する必要があります。
私が行ったファイルでは「{"bounds":[{"ymin":......」~「......"width":[1]}],"type":1}」と言う部分を置換することで対応が可能でした。
前項で説明したように、それぞれのオブジェクトには「"id":20」の様に IDが付いていますのでそれをそれを頼りに差し替える場所を探すと分かりやすいかと思います。

また、差し替えた後、オブジェクトの ID(「"id":20」の部分)を、元の IDに変更する必要があります。
差し替える Flashの IDは、おおよそ「"id":1」となっていると思いますので、その IDを差し替えるオブジェクトの IDと同じものに変更しておかないと動きません。



【目次】
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の バージョンの調べ方
[ 2012年12月18日 10:12 ] カテゴリ:Google Swiffy | TB(0) | CM(0)

Google Swiffyの使い方 【5】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.gif

【画像での説明】

また、Flash内のオブジェクトは、上記の画像の黄色のアンダーラインの部分のように「"id":20」のような形で IDが振られていますので、どの部分を差し替えればいいかは、この IDを目印に探せばいいのではないかと思います。


ただ、複数の画像を差し替える場合は、Flashを作成する際に気を付ける点があります。
それについては、下記のサイトに分かりやすく掲載されています。
 「Swiffyで画像を差替える際のFlash側の対応」
 http://www.plusmb.jp/2012/09/28/5790.html


画像を差し替える方法はいくつかあるかとは思いますが、私の場合は、Google Swiffyで変換したファイルから差し替える必要がある画像の部分をあらかじめ特定の文字列に置き換えた中間ファイルを作成しておく方法を採っています。
そして、表示側のプログラムで、特定の文字列ごとに必要な画像と差し替える形で JSONを完成させて HTMLに組み込むと言う方法です。


そして、中間ファイルを生成するツールを作っておけば Flashの作り替えが発生したときも比較的手間をかけずに対応をする事が出来ます。(上記の画像の赤色のアンダーラインの部分の用に画像のデータの部分を「」に置き換えています。)

Base64の画像の部分を差し替えるツールの処理としては、夏季のような感じでしょうか。
-------------
preg_replace( '/base64,[A-Za-z0-9+\/\n=]*"/', $replacement, $swiffy_f, 1 );
-------------
本当は、変換ツールを公開したいところですが、諸事情があってそれは出来ないのが残念ですね...



【目次】
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の バージョンの調べ方
[ 2012年12月14日 10:11 ] カテゴリ:Google Swiffy | TB(0) | CM(0)

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

前項で説明したテキスト情報を渡して表示させる処理ですが、この処理を行うと表示させたテキストの背景が黒くなる場合があります。(下記参照。今回の一連の記事の中で使っている画像は、実際のものではなく、あくまでも説明のために作成した画像です。そのため、実際の表示と違う場合もありますのでその点はご承知おきください。)

20121201_swiffy.jpg


その原因と対応方法については、下記のブログが参考になります。

 iOS6になったら、Google swiffy で書き出したFLASHのtextfield(テキスト)の背景が黒くなった問題
 http://d.hatena.ne.jp/bushimichi/20121011/1349920357


ただ、原因から考えると、黒くなる場合だけではなく、白くなる場合もあるわけですので、SEO対策として下記のタイトルも書いておきましょう。

「iOS6になったら、Google swiffy で書き出したFLASHのtextfield(テキスト)の背景が白くなった問題」にも対応できます(笑)。



また、文字を編集する場合の不具合として、文字が上にずれるという問題がありました。(画面のイメージは、上記のものをご覧ください。)


この問題は、Swiffyの runtimeのバージョンが「4.8」と「4.9」では対応方法が違うようです。(「4.8」で文字ずれが起こらないように Flashを調整しても「4.9」にする事で文字ズレが発生します。)

現在の最新版「4.9」での対処方法は、Flashのテキストで行間を設定する際に「マイナス」の設定をする事で対応が可能な場合があるようです。(「4.8」で同様の不具合が起こった際は、行間を大きくするという対処で対応をすることができましたが。)

私の環境で具体的に設定した値としては、行間の設定を「-10」に設定にする事で対応が出来ました。
数値は文字のサイズ、サイズの単位にも影響すると思いますので、各自の環境で適切な値を設定してください。

20121201_swiffy_2.gif


Swiffyで変換したあとの JSONの中では、上記の部分が行間を設定している箇所になります。(赤色のアンダーラインの部分。上記の画像は分かりやすく改行しています。また、改行をしていても問題なく動作します。)

Flashと JSONでは単位が違うようで、Flashで「-10」の設定をすると、変換後は「-200」になるようです。
(おそらく、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の バージョンの調べ方
[ 2012年12月13日 10:03 ] カテゴリ:Google Swiffy | TB(0) | CM(0)
プロフィール

エス技研

Author:エス技研
性別:男性
職業:Web系エンジニア
エンジニアになって 15年ほど経ちますが、その途中で 5年ほどディレクタ、マネジメントを中心とした業務を行っていたためにやや現場を離れていましたが、転職をきっかけに 2012年に現場に復帰し、新たな技術を楽しみながら勉強しています。
メインの環境は LAMP環境です。

FC2ブログランキング
FC2カウンター
FC2拍手ランキング
GoogleAdWords
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
検索フォーム
ブロとも申請フォーム
QRコード
QR
フリーエリア


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。