HTML5を活用した組み込み機器向けHMI/GUI開発

パソコンやスマートフォン向けではウェブブラウザは一般的に使われる技術となり、HTML5・CSS3・Javascriptなどの技術はウェブブラウザをベースとして進化してきました。PCやスマートフォン向けのウェブサイト開発を担う技術者は世界中に広がり、書籍やマニュアル、FAQや事例などそれらの開発を支援するコンテンツも充実するようになりました。 しかし、組み込み機器向けのHMI (Human Machine Interface)やGUI設計は依然として組み込みOS上の専用ツールを用いて開発されることが多く、パソコンやスマートフォンで使われている技術がありながらも、実際には活用されていませんでした。 一方で、ウェブブラウザを組み込み機器でも活用する動きが徐々に出始めました。最も早く活用し始めたのはテレビとゲーム機器でした。ウェブテクノロジーを使ったウェブアプリケーションが搭載された機器が発売されるようになりました。たとえばHybidcastやNintendo Wii Uなどです。チップベンダーの努力により、価格帯性能比の高いCPUが発売されたため、一気に組み込み機器でもブラウザが十分動作する環境が揃うようになりました。 これらの背景から、テレビ、ゲーム機器だけではなく、自動車、産業機器、FA機器、家庭用機器などの組み込み機器でもHTML5技術を活用したHMI/GUIが注目されるようになりました。

HTML5のメリットは?

  1. これまでにない新しい顧客体験 HTML5を使うことで、現在のパソコンやスマートフォンで使われている操作性に近い操作が可能となります。たとえば、スマートフォンでは一般的なスワイプやダブルタップなどの操作、アニメーション効果を使った画面遷移、フォントの大きさの自由な変更・コントラスト変更などのアクセシビリティの向上などです。これらの顧客体験を提供するために独自のミドルウェアを開発する企業もありますが、HTML5を使うことで、すでにパソコンやスマートフォンで実現できている技術を活用し、即座に新しい顧客体験を提供開始することができます。
  2. パソコンとターゲットボード両方を活用したアジャイルな開発スタイル これまでの組み込み機器向けの専用ツールでは、パソコン上で開発した後、ターゲット向けにコンパイルした上でターゲットボードにプログラムを転送し、ターゲットボード上で動作確認するという手順を踏んでいました。 しかし、HTML5を使って開発したコンテンツは、当たり前のことではありますが、パソコンでもスマートフォンでも、そして組み込み機器のターゲットボードでもコンパイルなしに動作します。このマルチプラットフォーム性により、開発者にとっては、パソコン上でもターゲットボードでも自由にいつでも動作確認を行うことができます。このため、これまでよりも高速にソフトウェア開発を行うことができるようになります。
  3. 開発トータルでのコスト削減の実現 HTML5を使い、ブラウザを搭載する組み込み機器を実現するためには、ブラウザが動作するレベルの(これまでの組み込み機器向けCPUと比較して)高い性能のCPUを利用する必要があります。このため、ハードウェア面だけを考えるとどうしてもコストが高くなる傾向があります。 一方で、HTML5を利用することでソフトウェア開発工数の削減が見込めます。このため、ソフトウェア開発単体で考えると開発コストが下がる傾向にあります。 ハードウェアとソフトウェアの開発費用をトータルで考えることで、トータル開発コストを下げることができれば、HTML5を活用するために高い性能のCPUを選択したとしても、全体での開発費用は下げられる可能性が出てくるものと考えられます。

最新のCSS3仕様を活用することで、たとえば以下のようなアニメーション効果を利用した表示を実現することが可能です。

transform(3D)とtransitionプロパティ

ドロワーメニューのサンプル

CSStransformsのrotateメソッド

HTML5開発できるプラットフォームとは?

市場の注目が高まるに従い、組み込み機器向けHMI/GUIツールのベンダー各社もHTML5が利用出来るオーサリングツールやブラウザをリリースしてきています。詳しくは以下Medium記事を参照ください。

Medium : 組み込み機器向けHMI/GUIツール調査(2017年5月現在)

特にこの中でも注目されるのは、Chromiumをベースに開発しているIgalia(イタリア企業)です。車載向けのブラウザとしてChromiumを使う取り組みが進んでいます。この開発には日本のルネサスエレクトロニクスも支援しており、ルネサスR-Car+ AGL (Automotive Grade Linux)+Chromiumブラウザ、という組み合わせを実現しようとしているようです。

日本ではACCESSがNetfront Browser NX を販売しており、こちらもHTML5対応です。

WebKitベースとすることで、HTML5やクラウドサービスといった最先端のWeb技術にも対応しリッチなWebコンテンツもすばやく、パワフルに再現します。また、パソコン等で広く使われているブラウザと互換性を保っているためいつもパソコンで閲覧しているコンテンツを組込み機器でも同様に楽しむことができます。

この他にも、2017年はいくつかのHTML5 for 組み込み機器GUIのソリューションがいくつか登場すると思われます。今後の動向に注目が集まっています。

Like what you read? Give Munehisa Ito a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.