PC/スマホでは無いWEBアプリ開発の話 -ハイブリッドキャスト編-
こんにちは、Monaca for Hybridcastチーム、斉藤です。
さて、今回はテレビの一つの未来であるハイブリッドキャストという規格をエンジニア目線から、さらにそのためのツールとして弊社で開発したMonaca for Hybridcastについて語ってみたいと思います。まじめなWEBアプリ開発の話ですが、中々触れる機会が少ないとは思いますので、楽しんで読んでいただければと思います。
以下見出しです。
* ハイブリッドキャストとはなんぞや
* ハイブリッドキャストの制限
* Monaca for Hybridcastで解決できること
* 課題
* 余談
ハイブリッドキャストとはなんぞや
ハイブリッドキャストとは、従来のデータ放送をさらに進化させ、放送 ＋ WEBという形でテレビ内にコンテンツを表示する規格です。
従来のデータ放送で可能であった放送連動コンテンツの表示に加えて、CSS3を使ったデザイン表現の拡大、HTML5 APIを利用したコンテンツの作り込みが可能です。この仕組みでは、テレビ画面の中に放送領域とWEBブラウザ領域が一度に表示できます。さらに加えて、ハイブリッドキャスト独自の機能として、放送と連動するイベントを待ち受けて、そのタイミングでJavaScriptを実行することなどが出来ます。
要は、テレビ画面の中で放送と連動したWEBアプリを表示することが出来るって事ですね！
NHKがハイブリッドキャストを9月に開始、何ができるのか？
弊社制作実績 テレビ朝日様ハイブリッドキャストコンテンツ「クレヨンしんちゃん」
ハイブリッドキャストの制限
そんなハイブリッドキャストですが、まだまだイケてないところ（関係者の方、ご容赦ください）が多い。
特に問題だなーと思っているところは、そのコンテンツのデバッグのしにくさ。
僕たちWEBエンジニアは、コンテンツのデバッグが簡単できると思いがちですが、このハイブリッドキャストではそうはいかない。
以下のような制限が存在します。
ログ表示
Console.logと呼ばれるJavaScript APIで、ログを表 示するのが一般的です。
一般のブラウザであれば、開発者ツールなどを使って、そのログを表示/確認することができますが、テレビにはそんな都合の良いツールがありません。
そのためAPIの実行をフックして、テレビ画面のブラウザ上にログ表示するという方法が当たり前のように使われています。
エラーメッセージ捕捉
さらにJavaScript内でエラーが起きても開発者ツールが存在しないため、どんなエラーが起きたかも知る事が出来ません。これを回避するために、window.onErrorというAPIを利用して、サーバーにエラーログを投げて、そこで確認するという方法が普通です。
ブラウザリロード
皆さんはWEBアプリ開発中、当たり前のようにブラウザリロードを使いますよね？
ところがこれもこの仕組みの中では満足に出来ないのです。なぜなら、PCブラウザが持っているアドレスバー、リロードボタンは存在せず、ブラウザを操作するためのインターフェースもリモコンのみため、リロード一つ行うのも、それ用のJavaScriptをコンテンツのページごとに用意しなければなりません。万が一このJavaScriptが無いページを読み込んでしまうと、再度ブラウザを立ち上げ直すことでリロードしなければなりません（アドレスバーが存在せず、特定ページへの遷移が簡単に出来ないため、これが結構な手間なのです）。
こんな制限の中、WEBアプリを作るのはそんなに簡単な事ではありません。
ではどうするか、ですが・・・
Monaca for Hybridcastで解決できること
アシアルではテレビ朝日様ハイブリッドキャストコンテンツ「クレヨンしんちゃん」を制作し、そのハイブリッドキャストの仕組みを学ぶとともに、その難しさを知りました。
その中で様々なノウハウを学び、今年の5月よりMonaca for Hybridcast（以下Monacast）というクラウドツールを提供させていただいております！
このクラウドツールを使うと、上記ハイブリッドキャストの制限を解決する事ができます。デバッグ感をPCでの場合に近づけることができるのです。基本的にはPCブラウザからこのクラウドツールを通して、テレビブラウザに命令を送ってやる事によって仕組みを実現しています。
必要なものはインターネット接続されたPCブラウザ（Chromeであること）とテレビだけです。テレビとPCを接続するための機器等は必要ありません。
※ただし、テレビだけは開発時に特別な作業が必要になり、このために一般の方々がハイブリッドキャスト用のコンテンツを作成する事が現在不可能です。
ログ表示
PCブラウザページ上にログを表示するためのインターフェースと仕組みを提供しています。
テレビ上で実行されたJavaScriptのログ内容をPCブラウザ上で閲覧できる寸法です。また、JavaScriptの対話型シェルを用意しているので、JavaScriptオブジェクトの状態を確認する事が容易です。
エラーメッセージ捕捉
こちらも、同じ画面でJavaScriptのエラー 内容を表示する事が出来ます。いつ、どこでエラーが起きても、この画面によりエンジニアはそれを把握し、正しいデバッグを進める事が可能です。
ブラウザリロード
こちらも、PCブラウザ上から操作できるようにしました。
PCブラウザのボタン一つを押すだけで、テレビブラウザのリロードが可能です。
Monacastを開発した中でも、小さめの機能ですが、あると無いとではデバッグのスピードが全く違います。
この他にも、HTML, CSS動的書き換えをサポートしています。
課題
これら僕たちの結晶を買ってくださり、すでに使っていただいてる方々もいらっしゃいます。
ですが、このツールだけではまだまだ出来ない事が多い。
上記内容も踏まえ、以下にデバッグという観点で簡単に表を作ってみました。
いかがでしょうか？まだまだWEBアプリのデバッグという点では、PCでのそれには追いつきません。
このハイブリッドキャストでのデバッグをより良くするには、内部で使われている情報の取得（メモリ表示）、JavaScriptエンジンの実行制御（ブレークポイント）など、ネイティブレイヤーに触るといったことが必要になります。現状でそれが可能なのは各社テレビメーカー様のみため、そういった拡張がこのツールでは不可能になっています。
余談
いかがだったでしょうか。
こんな世界もあるんだーと思っていただけたでしょうか。
HTML5がPC/スマホ以外にも使われていること、それがこ んな進化を遂げている事を知っていただけたら幸いです。
個人的な予測ですが、今後HTML5機器が増えると、こういった事がテレビに限らず起こります。カーナビ、電話などなど、HTML5が搭載される機器は少なくはないはずです。そうなるとデバッグは大変ですよね。
Monacastを開発して行く中で、そういった未来のデバッグ環境をより良くすることに担えたら、と改めて思いました。
