Web&モバイル技術のSIを手掛けるオープンストリームでは、Chromecastデバイス国内発売前から、スマートフォンアプリ(iOS版およびAndroid版)の対応について技術検証を行い、詳細な技術ノウハウを獲得してきました。本連載ではそのときに得た技術を基に、Chromecastアプリにおけるシステム構成、開発環境、開発準備、メディアストリーミングアプリ開発方法について、注意点を含めて解説しています。
前回の「スマホとWebSocketで連携するテレビ用SPA(Single-Page Application)の作り方」ではChromecast内部で動くReceiverアプリの開発方法について解説しました。最終回となる今回は、スマートフォンやPC上で動くSenderアプリについて、Android、iOSそれぞれにおける開発方法と注意点について解説します。
Senderアプリの開発環境として、グーグルからは次の3種類のプラットフォームのGoogle Cast SDKが提供されています。
AndroidとiOSはご存じの通りです。それぞれのプラットフォーム向けにネイティブなSDKが提供されており、スマートフォン上で動くSenderアプリが開発できます。
ChromeとはMac/Windows/Linux/Chrome OSのPC上で動くWebブラウザーのことを指します。Android/iOS上で動くChromeブラウザーは対象外です。Chromeブラウザーで表示したWebページにSenderアプリとしての機能を持たせることができます。
つまり、Webページ内で再生している動画をChromecastに転送したり、そのページ内のUIからChromecastで再生中の動画を操作したりすることができるようになります。Chrome用SDKはJavaScriptで提供されています。
プラットフォームごとの開発方法についてはGoogle Developersのサイトに記載されています。本記事では、そちらに記載されている内容をベースにAndroid/iOSの実装について解説します。
Senderアプリが提供すべきUIや機能の詳細はGoogle Cast Design Checklistに記載されています。ここでは基本的な動作を確認しておきます。
まず、Senderアプリは起動するとネットワーク上の接続可能なChromecastデバイスを検索します。Chromecastデバイスが見つかれば、図1のような「Castアイコン」を表示します。
ユーザーがCastアイコンをタップすると、図2のように見つかったChromecastデバイスの一覧がポップアップ表示されます。本記事では、この画面をGoogle Cast Design Checklistでの定義に合わせて「Castメニュー」と呼ぶことにします。
ユーザーはCastメニューの一覧から、接続したいChromecastデバイスを選んでタップします。すると選んだChromecastデバイス上でReceiverアプリが起動します。
Receiverアプリ起動後はCastアイコンは図3のような表示に変わります。
図3の状態でCastアイコンをタップすると、図4のようなCastメニューがポップアップ表示されます。
Castメニューでは、Chromecastとの接続を解除できます。また、接続中のChromecastデバイスの名称が確認できる他、Receiverアプリの状態によっては再生中の動画に関する情報の確認や、メディアプレーヤーの簡単な操作も行えます。
ユーザーが再生したい動画を選ぶと、Receiverアプリ上で動画の再生が始まります。その時、Senderアプリでは図5のようなメディアプレーヤーを操作する画面が表示されます。本記事では、この画面を「コントロール画面」と呼ぶことにします。
コントロール画面では、一時停止や再生再開、シーク位置変更など、再生に関する細かな操作ができる他、コンテンツのメタデータ(サムネイルやタイトルなどの情報)や現在の再生位置を確認できます。ユーザーはコントロール画面を抜けてSenderアプリ内の他の画面を巡回できますが、その間もReceiverアプリでは動画の再生が続いたままです。
以上がSenderアプリの基本動作です。
Copyright© 2015 ITmedia, Inc. All Rights Reserved.