こんにちは、編集長の白石です。

この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。

今回お話を伺ったのは、株式会社ACCESSの梅田雅士さんです。

梅田さんのセッション「TV・車・ゲームに搭載されているブラウザってどうなってるの？」に関するスライド資料は、こちらで公開されています。

組み込みブラウザって…なに？

白石:では、まずは簡単に自己紹介をお願いできますか？

梅田:株式会社ACCESS IoT事業本部課長の梅田 雅士です。 もともとはエンジニアでして、ブラウザ開発からWebサービスまで、組み込みからフロントエンドまで開発していました。

白石:すごく幅広い経歴をお持ちですね！今回はPCやスマートフォン「以外」の環境におけるブラウザのお話を伺えると聞いています。

梅田:はい、今やブラウザはテレビにも、自動車にも、ゲームにも搭載されています。それらを総じて「組み込みブラウザ」と呼んでいます。

白石:組み込みブラウザと言うのは、PCやスマートフォンのブラウザとどう違うんでしょうか？

梅田:Webを閲覧できると言うのは、ブラウザの基本的な機能ですので、組み込みブラウザであっても変わりません。違うのはまず動作環境ですね。例えばOSも、LinuxからiTronまで、様々な環境があります。中にはタッチ操作やマウス操作が存在しない環境でも動作することが求められることもあります。

白石:ACCESSさんの組み込みブラウザは、今は主にChromiumやWebKitをベースにして開発してらっしゃるんですよね。組み込み向けに機能を追加したり、ということもあるんでしょうか？

梅田:はい、例えばテレビのリモコンとか、ゲームのコントローラーとかでブラウジングを可能にすると言った機能の追加は一般的にありますね。ブラウザの操作に関しては、「組み込みならでは」という部分は多いです。

テレビとブラウザ

白石:では、テレビ、クルマ、ゲームに搭載されているブラウザの状況について、詳しく教えてください。

梅田:ではテレビからいきましょう。実はテレビには昔から身近にありまして、テレビのdボタンを押して立ち上がる画面は、実はブラウザなんです。

白石:dボタンはブラウザ起動ボタンでもあったわけですね。

梅田:はい、それにテレビのメニュー選択を行うアプリもHTMLで書かれていたりしますね。

白石: ハイブリッドキャストと言うのは何でしょうか？

梅田:テレビ向けのブラウザでは、以前はBML (Bloadcast Markup Language)という、XHTMLベースの独自言語が利用されていました。ですが現在では、HTML5をベースとしたテレビ用の規格がありまして、それが「ハイブリッドキャスト」です。

ハイブリッドキャストは「放送と通信の連携」を目的として、NHKさんを中心とした標準化が行われています。単にHTML5が使えると言うだけではなく、スマートフォンとの連携（セカンドスクリーン）機能なども備えています。

白石:民放局の、ハイブリッドキャストへの対応度合いとかはいかがですか？

梅田:各社とも、現在対応を拡充している段階ですね。2020年の東京オリンピックで、テレビ放送をより楽しく観せるのが、各社共通の目標になっています。

白石:ちなみに昔聞いた話なのですが、テレビって意外にも低スペックで、重たいWebページを表示させるのは難しいと聞いたことがあります。その状況は現在では変わりましたか？

梅田:いえ、あまり変わりないです。テレビの中で一番高価な部品はやはりパネル。その他の部品、例えばCPUなどは、やはり廉価なものが使われることが多いんですね。なのでテレビ向けのWebページは、軽量であることが望まれます。

車とブラウザ

白石:では次は車とブラウザの関係について教えてください。

梅田:自動車業界では、カーナビを中心とした、操作可能な中央のスクリーンを「HMI (Human Machine Interface)」と呼びます。HMIでブラウザを利用できると、例えば自動車のマニュアルをHTMLで書いたりできます。HTMLは多言語化しやすいのでメリットは大きいですね。

あとは車載システムにアプリを追加することができるものもあります。インターネットと繋がって、例えば天気を表示したり、運転を楽しくするようなアプリがインストールできたりします。車載システムは「情報（インフォメーション）」と「娯楽（エンターテインメント）」を提供するという概念から、「インフォテインメント」とか、「IVI（In-Vehicle Infotainment：車載インフォテインメント）」と呼ばれたりします。HMIでブラウザが利用できるなら、そうしたアプリもWeb技術で開発できるようになります。

白石:車載システムにブラウザを搭載するという動きは、どれくらい進んでいるものなんでしょうか？

梅田:海外では結構進んでいます。車載システムのOSは共通化が進みつつあって、主要なものとしてはAGL (Automotive Grade Linux)やGENIVIがありますが、これらには今後ブラウザが搭載される予定があります。

ちなみにAGLって、Tizen IVIが元になっているんですよ。Tizenは一時期HTML5にも注力していましたので、白石さんはご存知じゃないかと思いますが。

白石:ええっ！Tizenって久しぶりに聞いた名前です。そうだったのか…そういう風に受け継がれていたんですね。IT業界って、思わぬところが繋がってたりするので面白い(笑)

ところでそういう車載システムとかだと、テスラの車とかは進んでるイメージありますけど、実際のところどうなんでしょう？

梅田:確かにテスラは進んでいて、WebKitを搭載した車載システムを既に積んでいますね。ただ、古いバージョンのWebKitを搭載していたため、そのセキュリティホールを突かれてハッキングが可能な状態になっていたことがあったりします。車載システムの高度化に伴って、セキュリティリスクも高まりつつあるというのが実情です。

ゲームとブラウザ

白石:ゲーム機にブラウザが搭載されているという点についてはいかがでしょう？

梅田:実は、ゲーム機にブラウザが搭載されているのは結構昔からなんです。2003年に発売されたPlayStation 2や、2004年に発売されたPlayStation Portableには、もう入っていましたからね。

白石:そんなに昔から入っていたんですね。そう言えば、ガラケーとかにもブラウザ積まれてたし、そう言えば組み込みブラウザって結構昔からあったんですよね。

梅田:そうですね。それに、ゲームソフト自体にブラウザが積まれていたこともありましたよ。

白石:ええっ！ゲームソフトがブラウザを内蔵していたんですか？

梅田:そうです。例えばモンスターハンター3には、弊社のNetFrontというブラウザが内蔵されていました。

白石:ゲームソフトにブラウザが入ってるなんて、考えたこともありませんでした。すごい世界だ。

ブラウザ開発ってどんな仕事？

白石:そもそもブラウザ作ってる会社ってあまりないですよね。そこら辺の実際をお聞きしてみたいです。ブラウザ開発って、どのように進めるものなんですか？

梅田:基本的には、W3Cの仕様を満たすように実装するというのがブラウザ開発の中心になります。ただ、今はオープンソースのブラウザをベースに開発していますので、少し仕事の範囲が変わりましたね。W3Cの仕様を満たすために開発するのは、主にChromiumやWebKitのコアチームに任せて、私たちはその移植が中心になりました。

白石:なるほど、今はブラウザエンジンそのものの開発に深く食い込んでいるわけではないと。

梅田:ただ、弊社ではEPUBのエンジンも作っていまして、そのために独自開発した部分とかは結構ありますね。例えば縦書きレイアウトとかは、W3Cに提案されている仕様を元に弊社で開発したコードを、ブラウザエンジン側にコントリビュートしたりもしています。

白石:ちなみにブラウザ開発って、どんな言語を使って行うんですか？

梅田:WebKitやChromiumはC++で書かれているので、C++ですね。C++ってメモリマネジメントが重要な言語ですが、WebKitとかってそこら辺が少しいいかげんだったりするんです(笑)。

白石:え、そうなんですか？メモリリークしたり、とかですか？

梅田:さすがに派手なメモリリークとかはめったにありませんが、メモリ確保に失敗した時の処理が甘かったり、とかですね。で、車載システムとかで利用する場合って、「動かない」って状況になるのはすごくまずいわけです。運転中は安全がなにより最優先ですから。そういう穴を潰して本家にコントリビュートする…というのもたまにありますね。

組み込みブラウザベンダーはつらいよ

白石:ACCESSさんはブラウザと言っても、更に「組み込みブラウザ」を作っているという数少ない存在。そういう、数少ない組み込みブラウザベンダーならではの苦労などをお聞きしたいです。

梅田:そうですね、まず先ほども申し上げたように、現在はChromiumやWebKitをベースに開発しています。以前は独自のブラウザエンジンでしたが、数年前にWebKitに切り替えたんです。ただ、WebKitはそもそも組み込み用途が主ではありませんでしたから、当初はハードのスペック的な制約との折り合いを付けるのが大変でしたね。（Webページが）メモリに乗り切らないので、数キロバイト単位に分割してメモリに載せるようにしたり…

白石:うわー、それは大変そう…。

梅田:最近はハードのスペックが向上したので、そういう苦労をすることも少なくはなってきましたけどね。あとは、レンダリングのパフォーマンスを改善するのも大変ですね。車載システムだと、最低でも60fpsは要求されるので、動画のデコードをハードウェアに行わせるようにするとか、CanvasをGPUレンダリングするとか。スクロールが滑らかになるようチューニングするのも大変でした。

白石:WebKitとChromiumは使い分けてるんですか？

梅田:お客様からのご要望や、用途に応じて使い分けています。WebKitはリリースサイクルがだいたい年一回で安定していますが、Chromiumのリリースサイクルはもっと速くて、コードもどんどん変化していきます。どちらがいいということでもなくて、それぞれにメリットがありますね。

白石:大変興味深いお話です。組み込む製品ごとに異なる苦労とかはあったりするんですか？

梅田: 車の場合とかは、製品の開発サイクルが長いのが特徴です。一つの車を作るのに5年とかかかったりすることもあるので、何回もつなぎ込みが発生するわけです。

白石:5年！Webの世界で5年と言ったら、状況はかなり変わってしまいますよね。

梅田:そうですね。ベースになっているブラウザもどんどん進化していくので、つなぎ込みを行うたびに、できるだけ最新に近づけていくようにするんです。その際に、ブラウザエンジンが持つAPIが変わってしまうことも珍しくありません。そういう事態に対応しやすいように、APIを抽象化したレイヤーを持っていたりします。

白石:いやー、ぼくみたいなフロントエンドエンジニアが全然体験したことのない苦労だ(笑)

梅田:他には、ブラウザの機能を拡張しなくてはならないこともよくあります。組み込みの場合って、HTML5が元々持っている機能だけじゃ足りないことが多いんですよ。

ゲームの場合は、ゲーム機というハードに閉じているからか、独自に拡張することが多いのが特徴です。

車載の場合は、Vehicle APIっていうAPIがW3Cで標準化されていますので、その実装を行うのも仕事の一つです。このAPIを使うと、例えばキーロックの情報を取れたりと、車載システムならではの機能を利用することができます。

PCやスマホ「じゃない」Webアプリ開発とは

白石:では最後に、PCやスマホじゃない世界でのWebアプリ開発について、どのようなものかお聞かせください。

梅田:基本的には、それほど変わるところはありません。組み込みブラウザと言っても結局WebKitやChromiumをベースとしていますし、HTML5以降はブラウザ間の互換性も高くなっていますし。

ただ、市場によって制約はありますね。例えば車載システムで動作する場合は、運転手の気を逸らさないようUIガイドラインがあったりします。

一方で、市場ごとに特有の拡張機能を使うことも求められます。

白石:先ほどおっしゃっていた、車載システム上で使えるVehicle APIなどですね。

梅田:そうです。そして、そうした標準化されたAPIと言うのは、組み込みの世界で特に重要なんです。

基本的にオープンなPC/スマホに比べて、組み込みは市場に特化しがちな世界でもあります。クローズドな世界で、クローズドな技術を使っているのでは、スキル的にもビジネス的にも拡がりにくい。

オープンで標準化されたAPIを使うことで、そうした事態を避けることができる。Web技術者も、活躍できる場がどんどん広がっていきます。

白石:なるほど。ちなみに、車載の世界とかでは、App Storeのようなアプリプラットフォームが出てくる可能性はあるのでしょうか？そして、Webで作ったアプリであればそれらのプラットフォームにどこでもデプロイできるというような可能性はありますか？

梅田:はい、そういう可能性はもちろんあります。アプリプラットフォームみたいな構想は各社持っていて、今後登場してくるのは間違いありません。 その時に、Web技術を使ってアプリを開発できる可能性も、それが複数のプラットフォームで展開できる可能性も、大いにあると思います。

そうした世界を見据えて、総務省さんと一緒に「Webとクルマのハッカソン」というイベントをここ数年開催しています。10月下旬から申し込み開始ですので、興味のある方にはどんどん参加してほしいですね。

白石:あ、そのイベント去年ぼくが審査員やったやつだ(笑)。去年もすごく盛り上がりましたよね。本日は組み込みブラウザ開発の話、そしてPC/スマホ以外のWeb開発の話など、普段あまり聞けないお話をお聞かせいただき、ありがとうございました！