お客様事例

Flash(swf)コンテンツの変換・移行(HTML5+mp4)

1 概要とお客様のメリット

Flash(swf形式)で作成されている数多くのコンテンツは、アドビ社からサポート打ち切りがアナウンスされており、Google Chromeをはじめ、ブラウザではデフォルトでアニメーションが表示されなくなりました(2019年7月時点の情報)。さらに、そもそもiPadやiPhoneでは再生する事すら出来ません。一方でスマートフォンやタブレットを前提とした出版コンテンツやデジタル教材の提供ニーズが高まり、これらのFlashコンテンツのインタラクティブ機能(ボタンによる問題選択や動画再生コントロール等)も含めてiPadで再生できるように変換する作業が必要となっています。

このようなHTML5を使ったWebサイト制作サービスと動画をキャプチャするという人海戦術作業の代行を国内の制作会社に依頼すると、コスト面で折り合わないケースが殆どです。サイバーテックが提供する「ITアウトソーシング・BPO」サービスでは、このようなケースでもお客様の予算に合わせたリーズナブルな価格で実施することが可能です。

2 使用技術・ノウハウ

ITアウトソーシングでは、Flash(swf形式)からコンテンツ部分のみをmp4の動画形式に書き出す手法として「画面をキャプチャする」という方法で行いますが、Adobe Animate(旧 Adobe Flash)を用いてHTML5形式に出力後、調整するといったことも可能です。また、ボタンでコンテンツを選択する、動画再生をコントロールするなどFlashで実装していたインタラクティブ機能は、HTML5及びJavaScript/JQueryの技術を組み合わせて実現します。

3 使用ツール

用途 ツール名 備考
動画キャプチャ Swfキャプチャソフト HTML5に組み込むための動画をキャプチャします。
※Adobe Animateで書き出す場合は動画キャプチャは不要となります。
HTML5ビューア制作 HTMLエディタ HTML/CSSをコーディングして、お客様仕様のHTML5ビューアを作成します。
動画ビューア制作 JavaScript/JQuery 開発環境 JavaScript/JQueryを使って動画のコントロール部分を実装します。
動画キャプチャ Swfキャプチャソフト HTML5に組み込むための動画をキャプチャします。
※Adobe Animateで書き出す場合は動画キャプチャは不要となります。
HTML5ビューア制作 HTMLエディタ HTML/CSSをコーディングして、お客様仕様のHTML5ビューアを作成します。
動画ビューア制作 JavaScript/JQuery 開発環境 JavaScript/JQueryを使って動画のコントロール部分を実装します。

4 制作から納品までの流れ

1.ヒアリング

お客様からヒアリングを行い内容・スケジュール面で可能かどうかを検討します。

2.サンプルデータによる仕様確認と生産性確認

データの一部をご提供頂き、以下の通り仕様などの確認を行います。

  • お客様との役割分担
  • 指示書に記載すべき内容
  • ファイル命名規則
  • 納品方法
  • チェック項目
  • 解像度、動画及び音声の品質(フレームレート)、圧縮方式等
  • 動作保証ブラウザの確認(HTML5の場合、IE10以上、Crome、safari、Firefox最新版になります)
  • HTML5ビューアのデザイン

また、1日あたりの生産性を共有してお客様とスケジュール感を共有します。

3.体制確保と最終お見積

お客様のご要望に合った契約形態でお見積を提示します。

4.制作準備

フィリピンのITアウトソーシングセンターの日本人管理者が、変換する元データを受け取り、作業担当のフィリピン人オペレータへの指示や作業手順の作成を行います。

5.制作開始と日本人によるチェック

現地日本人チェッカーが、ブラウザを使った最終チェックを行います。また、お客様から提供いただいた素材自体のチェックもオプションで承ります。

6.納品及び納品後の微修正

納品物はサイバーテックのサーバもしくはお客様がご用意したサーバ環境にアップします。

5 「ITアウトソーシング・BPO」実績

教育サービス企業の教材データにおいて、FlashからHTML5へ変換(約数千ファイル)

教育サービス企業の教材データの変換 概要図

御相談、ご質問はこちら

ITアウトソーシング・お問い合わせ

ITアウトソーシング・デジタルBPO・オフショア開発のポイントがわかる資料(事例つき)

ITアウトソーシング・資料ダウンロード

最新事例の公開情報や、イベント・セミナー情報をお届け

ITアウトソーシング・メルマガ登録
ITアウトソーシング・PAGETOPボタン
サイバーテックお知らせ画像