こんにちは。FASTCODINGデザイナーの七転び八重子です。
Adobe Flashがいよいよ、2020年末でサポート終了となります。
今回は、Flash終了に伴うリスクとHTML5への移行方法をまとめてみました。
目次
Flash終了の要因とリスク
１） セキュリティリスク
２） スマートフォンの普及
３） タッチスクリーンに対応できない
４） 各ブラウザもサポート終了へ
FlashからHTML5やJavaScriptへ移行する方法
１） HTML5を使う方法
２） CSS3を使う方法
３） JavaScriptを使う方法
Flashの移行の流れ
１） アニメーションや機能の定義
２） 実装方法の決定
３） 実装とテスト
まとめ
Flash終了の要因とリスク
１） セキュリティリスク
2007年にスティーブ・ジョブズが発表した文書「Thoughts on Flash」の中で、Flashのセキュリティの脆弱性が指摘されています。結果としてiPhoneにFlashが搭載されることはありませんでした。その後Adobeは2011年モバイル向けのFlashの開発終了宣言をするに至っています。
いますぐに、Flashによってシステムが破壊されたり、ローカルファイルに保存した情報が盗まれる可能性は低いですが、Flash PlayerやPDFに埋め込まれたFlashを再生できるAdobe Readerにはシステムのクラッシュや悪意のあるプログラムの実行を許す脆弱性がいくつか発見されています。
2014年にはFlashを利用したWebサイトが80%ほどあり、広く利用されていたことから、ハッカーから狙われる標的となり強く問題視されるようになりました。
そして2020年の今年末、いよいよAdobeによるFlash Player（Flashをブラウザ上で再生するプラグイン）のサポートが完全に終了することから、今後ますますFlashを狙った攻撃は増加、その被害も増加していくことが想像できます。
2） スマートフォンの普及
下記の統計のように、家でしか使えないパソコンより、外出先でも手軽に使えるスマートフォンが普及したことにより、外出先でお店を検索したりWebサイトを閲覧する機会が増えました。ですが、iPhoneやタブレットは最初からFlashに対応しておらず、Flashコンテンツが埋め込まれている部分は余白さえ表示されません。これでは、ユーザーにとって意味の通じないページになり、大きな機会損失となっている可能性があります。
2013年から2019年のスマホ利用率・年代別トピック
・20代：2013年66.2％ → 2019年91.0％
・30代：2013年54.7％ → 2019年90.5％
・40代：2013年43.8％ → 2019年87.5％
・60代：2013年17.9％ → 2019年68.5％
参考サイト：Marketing Research Campより
３） タッチスクリーンに対応できない
先ほどのスマートフォンの普及によって、タッチスクリーンが支流になりましたが、Flashは、タッチスクリーンに対応できません。
Flashコンテンツでは「マウスオーバー」と「クリック」を別々の動作として認識していることが多いですが、タッチスクリーンでは「マウスオーバー」に対する動作は「指がタッチスクリーンを触っていない」状態であり、このため、例えば動画プレイヤーでマウスオーバーによってコントロールメニューを表示させるような挙動をそのままタッチスクリーンで実現することができません。
４） 各ブラウザもサポート終了へ
Flash終了の発表を受けて、各ブラウザもFlashへの対応を進めています。
・Google chrome：2020年末サポート終了。
・Mozilla（Firefox）：2019年デフォルトで無効化。2020年にはFlashの機能削除。
・Microsoft（IE/Edge）：2019年中にFlashをデフォルトで無効化、2020年末Flash機能を削除。
FlashからHTML5やJavaScriptへ移行する方法
１） HTML5を使う方法
アニメーションを動画で制作し、＜video＞タグで表示する方法です。
Flashを利用しなければ動画を利用できなかったHTML4の欠点ともいえる部分を補えるようになったのが現在の標準技術である「HTML5」です。
HTMLはタグと呼ばれるものを利用してWebサイトを構築するわけですが、HTML5だと＜video＞や＜audio＞といったタグを利用することにより、動画や音声を埋め込むことが簡単にできるようになりました。
２） CSS3を使う方法
CSS3からアニメーションを扱うためのプロパティ 「transition」 と 「animation」 が増えました。
シンプルなアニメーションには「transition」本格的なアニメーションは「animation」
「transition」も「animation」も共にCSSのプロパティで動作を決めることが出来ます。
「transition」は、「animation」に比べると比較的簡単な（に）アニメーションを作ることが出来るプロパティです。
たとえばこういったボタンのエフェクトは以前はJavaScriptが必要でしたが、CSSだけで作成ができます。
「animation」もCSSを用いてアニメーションを作成するためのプロパティです。「transition」に比べれば
もう少し細かく動作を指定することが出来ます。
キーフレームという考え方を利用し、時間単位で動作を指定できるのでかなり細かい描写が可能になります。
３） JavaScriptを使う方法
画面全体をFlashで構成していたようなサイトの場合は、JavaScriptを使用します。
複雑なアニメーションや、アニメーション中にリンクを置く場合は、CSS3では限界があります。
JavaScriptを使うことでFlashよりもさくさく動くアニメーションを作ることが出来ます。
JavaScriptでできるコト
・よくあるリッチなスライダー （ゆっくり消えて次の画像を表示するなど）
・カウントダウンタイマーが作れる （イベントまで日数や時間を表示できる）
・ソートや検索機能が作れる
・リアルタイムで動くグラフが作れる
・文字を変形させる
などなど
この他にもできるコトはたくさんあります。
JavaScriptでのアニメーション開発は是非弊社にご相談くださいませ。
FASTCODING Flashの移行の流れ
１） アニメーションや機能の定義
現在どんなアニメーションや、機能が使われているかを確認します。Flaファイル（SWFの変換前のファイル）があればそれを見ながら進めます、無い場合は実際の動きをみながら確認します。
２） 実装方法の決定
HTML5、CSS3、JavaScriptのどの方法で実装するかを決定します。
動画を簡単に作成することが出来るのであればそれが一番早いですが、おおよその場合は、アニメーション中にリンクを置いたりすると思うので、JavaScriptを使うことになります。
JavaScriptを使う場合でも、実装方法は色々あります。既存のライブラリを使ったり、一部だけ動画を使ったり、また実装方法によってはサイトの表示スピードが落ちることもあるので注意が必要です。
３） 実装とテスト
色々なブラウザや端末でテストが必要です。特にFlash全盛期はスマホがなかったので、スマホを考慮していないアニメーションがいっぱいあります。
これからはむしろスマホファーストで作らなければならないので、PCだけじゃなくスマホでもしっかり検証します。
まとめ
Webの発展による時代の流れは、本当に早いものです。以前は主流だったFlashもまもなく終了します。
現在もFlashを実装したWebサイトを所有している場合は、なるべく早めに対応しましょう。
まずは弊社にご相談くださいませ。
