Developer's Blog

さようなら Flash、こんにちは HTML5

HTML5_Logo_256

 

こんにちは、河岸です。主に WEB システムや WEB サイトの開発を行っています。

本日のテーマは「さようなら Flash、こんにちは HTML5」。
Flash 好きの皆さん、ごめんなさい。

本記事では Flash の否定ではなく、最近、フェンリルのお客様からよくご相談いただく、「Flash の既存コンテンツをスマートフォン対応にリプレイスしたい」というご要望への対応のお話をしたいと思います。

 

Flash リプレイスなら HTML5 ! でも IE8 は Video, Audio, Canvas 非対応

 

Flash コンテンツのリプレイスとなると、まず思いつくのが HTML5 化です。ムービーは Video タグへ、インタラクティブコンテンツは Canvas タグや JavaScript 実装 へ。

しかし IE8 は HTML5 のCanvas, Video, Audio 等に対応していません。2013 年 6 月の時点で IE8 は 10〜20% 程度のシェアがあり、マーケティング的にこれを切り捨てるのは、容易ではありません。

しかし、手がないわけではなく Video や Audio なら html5media
Canvas は Google の ExplorerCanvas を使ったり、シンプルな動きでよければ IMG 要素を JavaScript でゴリゴリ動かす方法も考えられます。

 

写真を合成したい? それは簡単。え、透過 PNG ?

 

写真を合成する Flash をスマートフォンブラウザに対応させる場合はどうでしょうか。単純に重ね合わせるだけなら、Canvas を使う必要はありませんね。JavaScript の実装だけで十分です。

ただ、「透過 PNG でマスクできるように」という要件がある場合、一筋縄ではいきません。CSS の -webkit-mask-image を使えば可能ですが、名前の通り Webkit ベースのブラウザしか対応できません。IE 系が全滅してしまいます。こうなると Canvas を使った実装しかありません。

透過 PNG は一例ですが、対象の Flash の実装によって、最適な手段を選択することにより、リプレイスのコストが大きく変わってきます。

 

まとめると… Flash は偉大だった

 

HTML5 により WEB エンジニアの領域は広がりましたが、そこには各プラットフォーム間の差異調整という WEB ではおなじみの難題もついてきました。

Flash は各プラットフォーム間の差異を吸収した上で、リッチなインターフェース、
ムービー、オーディオなどのメディアを提供できる意味で大きな存在価値があったことを再認識させられます。(使いやすいオーサリングツールもありますからね)

Flash とさよならしたくない WEB エンジニアの方、たくさんいらっしゃいますよね?

以上、HTML5 案件に囲まれたエンジニアのつぶやきでした。

 

Copyright © 2019 Fenrir Inc. All rights reserved.