メモ

GoogleSwiffyでバージョン4.6から4.7で画像の表示周りが厳しくなったメモ

Posted on by seigo

ちょっとGoogleSwiffyでバージョン4.6から4.7で画像の表示周りが厳しくなった挙動が見つかったのでメモしておきます。

具体的にはバージョン4.6では画像が破損しててもなんとか表示してたものが、4.7だと表示されないという挙動です。

今回の挙動によって、いままでシステムで画像差し替えを行った際に、データが空だったり、上手くデータが入らなかった場合にも表示されていたものが、4.7では一つでも不具合のあるデータがあると表示されなくなるので注意が必要です。厳しくなったならそう言ってくればいいのに・・・。

今回のソース

今回のソースは以下のとおりです。同じ画像が2つ利用されており「↑　両方同じ画像　↑」というテキストが表示されています。

FLASH

[SWF]https://www.1ft-seabass.jp/memo/archives/google-swiffy-012/google-swiffy-012.swf,240,270[/SWF]

これをSwiffyに変換します。特に問題無いですね。

Google Swiffy元コード

これをSwiffyで変換します。

→別ページで開く　※JSON部分は見やすいように整形しております。

JSONを覗いてみると、最近のビットマップ周りの変更で「bitmap:1」というIDでのアクセスで、2つの画像が1つのリソースに対してアクセスできるようになっています。

画像をわざと壊してみる

今回のコードはSwiffyランタイムJSのバージョンは「v4.7」でJSONのデータの中身も「v4.7」です。画像をわざと壊してみます。

画像データJSON部分

    {
      "id": 1,
      "height": 50,
      "width": 50,
      "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABUUlEQVR42u2a4Q2CMBCFbwTjKMQN\niBsQNyCOQtyAOApxA+IGxA2II2Dej5KI2BRsofeE5P0Cyn30er22J+LpSlM5FoVcqkpuTSOPrpNu\nTLiHZ/As3pEYriyTU1nK9ZvRrkIbaGtxgDyXs+2vzxXaRNvBAeAKdS133wBD4RvB3A4+HRpgKHzT\nG8BuJ/slesHWO7DhJ4gkkUOIsTBn7MCW2RBtK8+1IYxgy2QYdGUMPTHWM5PcbM0x4TJmoo1O3qMZ\nYnfsEEbWeSZml3J2MaQGWiCMRtOZGKOUSxT7yGK1QRi9Zc0+UvG1BNt7EK0QRupCrjUUa5gAnSZI\nrJ+1g4BBZdgdDcPaIfoBv4FsIBvIn4DQhF+aCZEmRaFJGmnSeKqFFc1Sl2bzgWo7iGaDjmrLlGYT\nm+pYgeqgh+bojeowlOp4mqpggK6Eg6qohq7MKcbCsxf0hCwCh7c8pAAAAABJRU5ErkJggg==",
      "type": 8
    }

画像データJSON部分を破損させた

わざと「わざと破損させる」という日本語を入れることでbase64を成立させなくします。

    {
      "id": 1,
      "height": 50,
      "width": 50,
      "data": "data:image/png;base64,わざと破損させる",
      "type": 8
    }

Swiffyを見てみる

こうすると、結果こうなります。

「↑　両方同じ画像　↑」すら表示されず、Swiffy自体がバグって表示されないようです。

→別ページで開く　※気になる方は、こちらのリンクから直接表示してみて、ソースコードを見てみてください。

前のバージョン、SwiffyランタイムJSのバージョン4.6で表示してみる

今回の破損コードを前のバージョン、SwiffyランタイムJSのバージョン4.6で表示してみます。

手順は簡単。ランタイムのアドレスを4.6に向けます。

<script src="https://www.gstatic.com/swiffy/v4.7/runtime.js"></script>

　　　↓

<script src="https://www.gstatic.com/swiffy/v4.6/runtime.js"></script>

表示してみます。

→別ページで開く

4.6の場合は画像は破損画像として表示されて、コンテンツ全体はしっかり表示されていますね。

まとめ

以上、ちょっとわかりにくいですが、ざっと調べたものをまとめると以下のとおりです。

  • ランタイムバージョン4.6
    • base64のデータが空のケース　→　破損画像として表示されていた
    • base64のデータが不正なケース　→　破損画像として表示されていた
    • 以上の「空」「破損」データが1つ含まれる場合　→　その画像は破損画像として表示。コンテンツ全体も表示。
    • 以上の「空」「破損」データが複数含まれる場合　→　その画像は破損画像として表示。コンテンツ全体も表示

といった感じで4.6までは「多少破損しても緩く表示させる」ようですね。

  • ランタイムバージョン4.7
    • base64のデータが空のケース　→　コンテンツ全体が表示されない
    • base64のデータが不正なケース　→　コンテンツ全体が表示されない
    • 以上の「空」「破損」データが1つ含まれる場合　→　コンテンツ全体が表示されない
    • 以上の「空」「破損」データが複数含まれる場合　→　コンテンツ全体が表示されない

4.7では一つでも不正な画像データが混入すると表示されなくなます。こうやって比較すると、わかりやすいですね。明らかに画像の表示周りの扱いが厳しくなりました。

おわりに

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

.fla(CS6作成)データダウンロード：google-swiffy-012.zip

※CS6のflaは、CS5.5で開いても警告が出るものの問題なく扱えるようです。CS5.5の方も是非試してみてくださいませ。

バージョンアップで戦々恐々するのは、こういうサービスの常ですが、今回気づいた部分はシステムとFLASH(Swiffy)で分業していると、データの中身の世界なので気づきにくいと思いますのでご注意ください。あと、そろそろ、更新情報だけでは、こういったバグは推測しにくいので、フォーラムとか欲しい・・・。

・・・それでは、よき Google Swiffy Life を！

、、、
seigo