アクセルは、パチンコ・パチスロ等のアミューズメント機器(遊技機)向けのグラフィックス・サウンドLSIやLEDドライバ、また工場内設備や計測器などの産業組み込み機器のグラフィックスLSIの開発・販売を行う半導体メーカーである。創業当時より、顧客専用半導体(ASIC)製品を提供。1998年からは、特定用途向け半導体(ASSP)製品を開発しており、専門企業として研究・開発を続けてきた。

同社の特徴は、製造拠点・工場を持たず、要素技術の研究・開発とマーケティング、設計業務に特化したファブレスメーカーである点だ。年間300万台とも言われる遊技機市場の中で、グラフィックスLSIでは50%以上のシェアを獲得するトップメーカーとして、2010年には東証一部上場を果たしている。

LSI開発で知見を得た技術力を生かし、Webブラウザで高度な動画再生

東京・目黒雅叙園において2015年2月19日～20日の日程で開催された「Developers Summit 2015」では、そのアクセルがブースを出展し、開発者向けに新しい技術を紹介していた。今回展示されていたのは半導体製品では無く、上述のようなグラフィックスLSIの設計開発で培ってきたグラフィックス系の技術力を生かした、Web用途に利用できるHTML5向け動画制御ライブラリ「H2MD」である。

「Developers Summit 2015」にブース出展し、「H2MD」を紹介していたアクセル

展示会で話を聞いた同社の説明員によれば、同社がLSI製品の開発をする中で研究開発をしてきた技術力が、H2MDに生かされているという。

「昨今は、Webブラウザやスマートフォンで高品質な映像効果を利用するゲームやプロモーションが盛り上がりを見せており、アプリやサービスを提供する側にとって重要な技術要素の1つとなっています。当社の研究開発の中で培った技術力をWeb向けの動画制御ライブラリとして応用できるのではという話が上がり、製品化が実現しました」(説明員)

同社の「H2MD」は、PCやスマートフォンに搭載されているWebブラウザで再生できるソフトウェア動画コーデックということだ。実際には、元動画を圧縮されたJPEGファイルやPNGファイルに変換し、HTML5のCanvasタグへ動画を合成して再生するものとのこと。

動画をJPEG画像化する技術としては、古くから「MotionJPEG」が存在していたが、MotionJPEGでは、自動再生やマルチストリームには対応するが、すべてのフレームをJPEG化するため圧縮率が低く、ファイルが大きくなってしまうという欠点がある。

一方でH2MDは、シーンの差分情報を活用し、付加情報と組み合わせ、JavaScriptによって動画を構築・再生するという手法を採っている。そのため、MotionJPEGに比べ高い圧縮率を実現している。

単にムービー再生という観点では、動画コーデック「H.264」が広く使われている。しかしH.264は、必ずしも開発者の意図したとおりに動画を再生できないという問題がある。例えばスマートフォンのWebブラウザでは、再生の際フルスクリーン表示になってしまうこともある。また、Webの演出として動画を活用したくとも、一部のスマートフォンでは自動再生に対応していなかったり、複数の動画を同時再生すること(マルチストリーム)も不可能だ。高画質で圧縮率も優秀な技術ではあるが、Web上での"演出"という面では機能が乏しい。

動きのある演出を実現するものとして、「Adobe Flash」の名もあげられる。しかし、Flash Playerを搭載していないスマートフォンでは見ることができないという大きな問題が残される。動画を使わないアニメーションも可能だが、なめらかな動きを演出するのはなかなかの手間が掛る。

こうした従来の形式に対して、H2MDはいくつかの特長を持っている。1つ目は、「アルファチャンネル(透過レイヤ)」を利用可能であること。また「マルチストリーム再生」に対応していることだ。つまり、複数の動画を重ねあわせて、一枚の動画のように見せることが可能となる。その他にも、シーク再生、ループ再生など柔軟な再生制御も可能であるとのことだ。

特にスマートフォンのアプリでは、HTML5を活用して開発されていることも多い。しかし上述のH.264やFlashなどの既存技術では、インタラクティブな動画演出を行うのは簡単では無く、ネイティブアプリとして開発するのには高い技術力と人員・工数が必要となる。

H2MDの豊富な機能は、こうしたエンターテインメントの分野で非常に重要な役割を果たしそうな予感だ。H2MDの動画素材は、最終的に一般のJPEG/PNGファイルとして動作するということで、Webコンテンツへの組み込みも容易とのことだ。HTML5のAPIを利用し、クリックやタップを起点とした映像の切り替えや再生などに対応するほか、audio要素のcurrentTimeプロパティを活用すれば音声との同期も可能となる。

こうした機能を用いれば、画面上に表示されたモンスターをクリックすると、アルファチャンネルを利用した動画素材を重ねて派手なエフェクト・効果音と共に攻撃するといった、ゲームでよくある表現も、かなり容易に実装可能だろう。

ブースのライブデモから、画面上に表示されたモンスターをクリックすると、派手なエフェクトが。ネイティブアプリと遜色無いような表現が可能となる

H2MDの専用サイト「H2MD.js」には、ゲーム風コンテンツや動画広告風コンテンツなどが用意されており、高品質な演出を実際に楽しむことができる。ぜひ試していただきたい。

H2MDの専用サイト「H2MD.js」では、コンテンツ例の各種デモを体験可能だ

開発者の負荷を減らし、プロダクトやビジネスに注力するために

アクセルからは、7KB程度の軽量なH2MDライブラリ(JavaScript)とH2MD変換用のWindowsソフトウェア(CUIエンコーダ)が提供される。エンコーダを用いて動画をH2MD形式に変換し、HTML5からシンプルなJavaScriptコードで呼び出すだけでよい。

同社の説明員は、特に開発を短期間で行わなければならないスマートフォンアプリ分野において、有効な技術であると述べる。

「特にゲームなどのインタラクティブ性のあるアプリケーションの開発現場では、演出方法を変更するたびにプログラムの実装し直しが発生していたのではないかと思います。H2MDであれば、背景画像もムービーで実装でき、さらに複数のキャラクターやエフェクトもムービーで構成できるため、さまざまな演出を効率的に生み出すことができます。演出を作り替えたい場合でも、素材ファイルを差し替えするだけでよく、開発の手戻りを非常に小さくできることが期待できます」(説明員)

もう1つの利点は、PCやスマートフォンで、ファイルやライブラリを共有できることである。HTML5(Canvas)に対応したブラウザ機能があれば、いずれのデバイスでもライブラリを共有化でき、アプリケーションの構成を共通化し、開発工数の削減が期待できる。エンコーダは動画のリサイズにも対応しているため、用途やデバイスに応じて使用するデータサイズを変えるのも自在だ。

「当社の技術は、従来の技術では手間が掛っていた高度な動画再生を容易にするだけでなく、開発者の負荷を減らし、効果的な演出やゲーム性の向上など、より重要なコンテンツ制作やプロダクト開発、企画などに注力していただくためのものです。無償の評価版ライブラリも提供していますので、ぜひ製品サイトからお問い合わせ頂ければと思っています」(説明員)