ブログ・エス技研

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

スポンサーサイト

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

わずか半日で Googleにインデックスされた!!!

実は、このブログは、立ち上げたのは、今日、12月29日なのだ。
日付は 12月1日から付けてあるが、Seesaaブログで Swiffyの記事を書き始めたのが 12月1日だったので、それにあわせて 12月 1日の日付からの記事を掲載してはいるが、実際にブログの開設を行ったのは、12月29日の朝の 9時頃なのだ。

それから半日ほど経った 30日の 0時を過ぎた頃の寝る前に「さすがにまだインデックスされていることはないだろう。」と全く何の期待もせずに、Googleで検索をしてみると、なんとそこには朝作ったブログの名前が出ているではないかっ!!!

Googleの検索エンジンへの登録申請などは行っていない。
それなのに、このスピードでのインデックスされるのは恐ろしいスピードだ!

しかも、一部のキーワードでは、前の Seesaaブログでもインデックスされていたことを確認したが、すでにこちらのブログの方が上位に出てきているところがすばらしい。

ブログ自体の仕組みの違いなのか、利用しているデザインテンプレートの違いなのか、その辺りはよく分からないが、いずれにしても、FC2ブログのインデックスされるスピード、SEOの効果はすごいと言うことが分かった。


もっとも、Googleへの検索エンジンへの登録申請をしていない、とは書いたが、自身で運用している(していた?)ブログにはしっかりリンクの設定を行い、最低限の検索エンジン対策は行ってはいる。
とはいえ、前の Seesaaブログでも同じことをしているのに 1ヶ月経ってもインデックスされなかったことを考えると、恐ろしすぎるスピードだ。

Googleのロボットがやってくるのがたまたまこのタイミングだったのかもしれないが。
スポンサーサイト
[ 2012年12月29日 23:58 ] カテゴリ:ただの日記 | TB(0) | CM(2)

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)

PHP range関数を使って階乗と重複組み合わせを計算

「乱数発生器」
 http://s-giken.info/random/random.php

乱数発生器という Webアプリを作りました。

「乱数発生器」は見た目は非常にシンプルで、というか、実際中身の処理も非常に簡単なものなのですが(処理そのものは数行ですから)、処理を実行する前に細かく入力チェックを行っています。


その中で、任意の文字列から重複せずに生成できる文字列の件数と、生成の要求の件数を比較する、というチェックがあります。

具体的には、「ab」の 2文字から重複せずに生成できる文字列は「aa」「ab」「ba」「bb」の 4種類しかありません。
ですが、「ab」の文字列から 6件のランダム文字列が欲しいという条件入力があった場合は生成できませんので、それは入力エラーとして処理する必要があるわけです。

その際、指定の文字列から重複組み合わせの計算を行い、何件まで生成が可能なのか、を計算する必要があるわけですが、久しぶりに重複組み合わせの考え方を思い出す必要があり、ちょっと大変でした。

また、重複組み合わせを計算するには、階乗を計算する必要があり、これをプログラムで記述する必要が出てきます。

階乗については、下記のサイトに練習問題として提示されており、回答として for文でぐるぐる回す方法が提示されています。
 http://torasukenote.blog120.fc2.com/blog-entry-49.html


私は、こちらのやり方を参考にしつつ rangeという関数を使って処理を作ってみました。
for文が複数出てくると、プログラムを組んでいるときはよくても、後から読むときが大変なのでそれを軽減することを目的にこのような処理を作ってみました。

また、rangeという関数は、非常に便利な関数で、for分を使わずにもいろいろな処理を簡潔に書けるのではないか、と思いました。


上記の URLの練習問題と同じことを下記の処理で再現できます。

for ( $i = 1; $i <= 10; $i++ ) {
  $kumiawase = 1;
  $num = range ( $i, 1 );
  foreach ( $num as $val ) {
    $kumiawase *= $val;
  }
  echo $i . "! = " . $kumiawase . "<br />";
}


また、実際のプログラムに組み込んでいる重複組み合わせの数を取得する関数は下記のようになります。

// 重複組み合わせの計算(n H r)
function r_combination ( $mojisuu, $keta ) {
  $num1 = range ( ( $mojisuu + $keta - 1 ), 1 );
  $num2 = range ( $keta, 1 );
  $num3 = range ( ( $mojisuu -1 ), 1 );
  $kumiawase = 1;

  foreach ( $num1 as $val ) {
    $kumiawase *= $val;
  }
  foreach ( $num2 as $val ) {
    $kumiawase /= $val;
  }
  foreach ( $num3 as $val ) {
    $kumiawase /= $val;
  }
  return $kumiawase;
}

ちなみに、ここでは関数にしていますが、実際のプログラムでは関数にはしていません!

なぜなら、これまで十数年プログラムを組んできましたが、重複組み合わせが必要になったのはこれが初めてだからですね。
ここで関数を作っても、もう今後も使う機会はないでしょう。という判断ですね。


※一部、ソース上の「<」「>」などを全角文字で記述しています。
[ 2012年12月25日 10:29 ] カテゴリ:PHP | 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)

Google Swiffyの使い方 【3】Swiffyに FlashVars的にテキストを渡す方法(Swiffyでは扱えない文字「%」「+」「&」)

この方のサイトは、分かりやすく技術的な解説がされており、非常に参考になります。
前項のブログで書きました 2バイトの文字を後から渡す方法については、【4.FlashVars的データ渡し】の下記のページが参考になるかと思います。
http://www.1ft-seabass.jp/memo/2011/08/24/google-swiffy-4/

このページでは
----------------------------
<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
<script>stage.setFlashVars("fv=テキスト1,テキスト2,テキスト3");</script>
<script>stage.start();</script>
----------------------------
のように記述されていますが、それを下記のように各変数ごとに分けても問題ありません。
----------------------------
<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
<script>stage.setFlashVars("fv=テキスト1");</script>
<script>stage.setFlashVars("fv=テキスト2");</script>
<script>stage.setFlashVars("fv=テキスト3");</script>
<script>stage.start();</script>
----------------------------
さらに、「<script>」を何度も書くのが面倒であれば、下記のように一括でくくる方法でも問題ないようです。
----------------------------
<script>
var stage = new swiffy.Stage(document.body, swiffyobject);
stage.setFlashVars("fv=テキスト1");
stage.setFlashVars("fv=テキスト2");
stage.setFlashVars("fv=テキスト3");
stage.start();
</script>
----------------------------
(※「<」「>」を全角文字で編集しています。)

ちなみに、テキストの中に半角の「%」「+」「&」など特定の文字で不具合が起こる場合があるようです。
私が開発を行っている環境では
 「%」Swiffyの画面自体が表示されない
 「+」+の文字自体が表示されない
 「&」&以降の文字列が表示されない
と言った不具合があります。

私の環境では「%」「+」は表示のメッセージとして使用しているだけですので、対処方法としては表示の際に半角から全角に変換して表示をさせています。

場合によっては、なんとしても半角で表示させたい、という場合もあるかとは思いますが、その対応についての解決方法は見つけることができていません。
また、上記の文字列で不具合が起こると言うことは、同じ文字コードを持つ 2バイト文字でも不具合が起こると考えられるため、特定の 2バイト文字で不具合が起こる可能性も否定できません。

何か情報をお持ちの方は、情報提供いただけたら、と思っています。


また、当然のことながら「\」「"」の文字列もそのままでは表示されません。
「\」はエスケープシーケンスに使われる文字ですので、「\」を表示したい際には「\\」と記述することで対応できます。
「"」は、テキストを囲うための文字として使われているものですが、こちらも上記同様「\"」と記述することで対応することができます。



【目次】
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月10日 10:03 ] カテゴリ:Google Swiffy | TB(0) | CM(2)

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

しかし、それだけでは終わらない Flashも多数あるかと思います。というか、それだけではないものの方がはるかに多いと思います。

そして、現時点での一番の問題点と思われることは、Swiffyは日本語に対応しておらず、Flash内で日本語を使っていると様々な問題を引き起こすことです。

文字化けに関しては、下記のサイトで検証をされている方がいらっしゃいます。
 「swiffyで日本語フォントが文字化け」
 http://nex.xrea.jp/?s=1253
 「Swiffy日本語対応まとめ」
 http://nex.xrea.jp/?s=1260

ですが、根本的な問題は、先にも書きましたが Swiffyは日本語をサポートしていませんので、日本語は使えないと考える必要があるということのようです。

また、単純に 2バイト文字が文字化けすると言うだけではなく、表示されるテキスト以外の使用していないレイヤーなどにも 2バイト文字があることで変換後の Swiffyが表示されないと言った不具合の原因にもなります。
(ほとんどないとは思いますが、Flash内で利用しているファイル名に 2バイト文字が使用されていると致命的な不具合になることがあります。)

また、2バイト文字がある場合に生成される Swiffyファイルの文字コードは「UTF-8」で生成されますが、Flashを組み込んで使う HTML側のファイルと文字コードが違う場合も再生されない原因になります。
そのため、Swiffyで変換したスクリプトのファイルを HTMLファイルと同じ文字コードに変換する必要がありますが、変換しても再生されない場合もありますので、根本的な対応としては 2バイト文字を使わない対応をする必要があるでしょう。


2バイト文字を使わない方法として、単純に固定の文字列として表示に使っているのであれば、テキストを画像に置き換えてしまう、という方法が手っ取り早い方法なのですが、動的に変更される場合など、理由があってテキストとして編集している場合などはその方法は使えません。

動的に変更したい場合の 2バイト文字としては、あらかじめ Flashの中に文字列を組み込むのではなく、Swiffyで変換したあと、再生の際に文字列を渡すという方法を取ることで解決できます。


Swiffyで生成された HTML5のファイルの中身がどのようになっていて、それに対してどのように対応することで何が出来るのか、それを実験された方のサイトが書きにあります。

【1.使い方~単純なアニメ変換】
http://www.1ft-seabass.jp/memo/2011/07/22/google-swiffy-1/

【2.フレームアクション】
http://www.1ft-seabass.jp/memo/2011/07/29/google-swiffy-2/

【3.ボタンアクション】
http://www.1ft-seabass.jp/memo/2011/08/06/google-swiffy-3/

【4.FlashVars的データ渡し】
http://www.1ft-seabass.jp/memo/2011/08/24/google-swiffy-4/

【5.画面フィット・ステージサイズ】
http://www.1ft-seabass.jp/memo/2011/09/05/google-swiffy-5/

【6.時間取得関数】
http://www.1ft-seabass.jp/memo/2011/12/31/google-swiffy-6/

【7.テキストフィールド内の改行の注意点】
http://www.1ft-seabass.jp/memo/2012/01/01/google-swiffy-7/

【8.簡易クラス構造のテスト】
http://www.1ft-seabass.jp/memo/2012/01/06/google-swiffy-8/

【9.画像の構造と差替え実験】
http://www.1ft-seabass.jp/memo/2012/01/10/google-swiffy-9/



【目次】
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月07日 10:02 ] カテゴリ:Google Swiffy | TB(0) | CM(0)

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

業務を行う中で、Google Swiffyを利用する機会がありましたので、それについて情報を書いているサイトの情報や、さらにそれらのサイトでは分かりにくかった箇所、足りない解決方法などを追加していってみようと思い書き始めました。


ちなみに、私は、PHPをメインにしたエンジニアですので、Flashの事はほとんどわかりません。
そのため、今回のこの記事は PHPエンジニアの視点で書いたものですのでその点はご了承下さい。


まずは、「Swiffyって何?」「そもそもどうやって使うの?」という場合には、ググってもらうといろいろとサイトが出てきますので、そちらを参考にしていただきつつ、下記のサイトなどが役に立つかと思います。

●「Swiffyのサイトの使い方」
 http://hi-posi.jp/?p=1084

●Swiffy全般では下記のページが役に立ちます。
 「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/

●「Swiffy オブジェクト(HTML5 化されたFLASH)の外部ファイル化」
 http://webmage.pro/blog_img/load_swiffy.pdf
 ※PDFへ直リンクです....


いまさら書くまでもないのですが、Google Swiffyは Flashを HTML5に変換するツールです。
これを利用することで、Flash Playerを搭載していない最新のAndroid端末や iPhone/iPadでも Flashを再利用して動的なコンテンツを提供することを出来るようになります。
Google Swiffy以外にも同様のツールはありましたが、Swiffyはバージョンを重ねるごとに機能を充実させてきており、現在の最新版の 4.9ではかなり部分実用に耐えうるようになってきています。


コーポレートサイトのような Webサイトでイメージ訴求のための Flashを利用している場合など、とりあえず Flashを Flash非搭載端末でも見られるようにしたい、という用途であるならば、「Swiffy オブジェクト(HTML5 化されたFLASH)の外部ファイル化」を参考にしながら、「.swf」ファイルを「.html」に変換し、その中から Flashの部分を取り出して、Flashが使われていた部分にはめ込む、という作業で対応が可能だと思います。

この作業だけであれば、それほど難しい作業ではありませんので、JavaScriptが分からない方でもしばらく眺めていれば対応できるようになるのではないかと思います。
かくいう私自身が JavaScriptを避けてきていましたので、最初は暗中模索な状況でしたので。


ちなみに、Google Swiffyはだいたい 1ヶ月に 1回のペースでバージョンアップをしており、すごいペースで機能改善が進んでいます。
そのため、現在の機能で不具合が起こっている場合などは特にそうですが、定期的に最新情報をチェックして不具合が解消されているかの確認をしてみる方がいいでしょう。

そんな時用に、Web更新チェッカーをご用意してみました。(Google Swiffy専用というわけではありませんが。)
 http://s-giken.info/page/page_list.php


【目次】
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月05日 09:56 ] カテゴリ:Google Swiffy | TB(0) | CM(0)

初めまして。エス技研です。

初めまして。エス技研です。


エス技研の「技研」は、システムエンジニアリングとフィナンシャルエンジニアリングの技術研究所の意味ですので、システム開発に関連する内容と、経済、金融に関する内容を中心にこのブログを書いていこうと思っています。


もともとは Seesaaブログでブログを書いていましたが、内容を新たに書き始めるためにブログを引っ越しすることにいたしました。

半年ぶりくらいに Seesaaブログで書き込みを再開をしていましたが、IEではエラーが出てまともに動かないし(前からエラーが出ていましたが)、全く検索エンジンに登録される気配もないので、思い切って引っ越しすることにしました。

他にもいくつかブログを更新していて、Seesaaブログよりも FC2ブログの方が機能的に必要としているものがそろっているし、使い勝手がいいので、再開を契機に、書く内容も少しずつ変わってくることもありまして、FC2にしようかなぁと思っていましたので、思い切るきっかけになりましたね。
1ヶ月経っても検索エンジンに登録されない、ということは。

検索エンジンに登録されないと、何を書いても見られることがないわけですからね。


検索エンジンに登録されない理由はよく分からないですね。
同じ Seesaaブログで管理しているブログでもすぐにインデックスされるものもありましたし(間違えてエントリーした記事がすぐにインデックスされて、消した今でもインデックスされたまま...)、Seesaaブログそのものがエントリーされないと言うワケではなく、何かの理由があるのだとは思いますが。

ただ、テンプレートを変えてみても、他のブログからリンクを貼ってみてもインデックスされないブログはインデックスされませんので、今回根本的な解決方法を図る決心をしたわけです。

これまで書いてきた記事は残念な結果となりますが、過去のものは過去のものとして、心機一転違う展開を目指していきますので、よろしくお願いいたします。
[ 2012年12月01日 07:39 ] カテゴリ:ただの日記 | TB(0) | CM(0)
プロフィール

エス技研

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

FC2ブログランキング
FC2カウンター
FC2拍手ランキング
GoogleAdWords
カレンダー
11 | 2012/12 | 01
- - - - - - 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。