Google Cast SDKを使ったAndroid／iOSアプリの作り方と注意点：Chromecastアプリ開発入門（終）（1/6 ページ）

メディアストリーミングデバイス「Chromecast」用アプリの開発方法を一から解説する連載。今回は、テレビ側のReceiverアプリにつなげるスマホのSenderアプリの概要と作り方、注意点、Cast Companion Libraryの使い方などを解説します。

[舛田明寛，オープンストリーム]

テレビ側のReceiverアプリにつなげるスマホのSenderアプリを作る

今回の主な内容

• Senderアプリ概要
  • Senderアプリが作れるプラットフォーム
  • Senderアプリの基本的な動作
• Androidアプリ開発方法
  • 依存ライブラリ
  • コラム「Google Play Servicesとは」
  • Chromecastデバイスでの接続概要
  • MediaRouterによるChromecastデバイスの検出と接続先選択
  • Chromecastデバイスとの接続とReceiverアプリの起動
  • MediaRouteActionBarによるCastアイコンの表示
  • Receiverアプリとの通信
  • メディアチャンネルによる動画再生
• Cast Companion Library（CCL）の利用
  • CCLとは
  • CCLが提供する機能
  • CCLのメリット
  • CCLの注意点
• iOSアプリ開発方法
  • Androidとの違い
  • 使用するフレームワーク
  • Chromecastデバイスの検出と接続先選択
  • Chromecastデバイスとの接続とReceiverアプリの起動
  • チャンネル確立と動画再生
• Senderアプリを開発する上での注意点
  • 複数台接続や接続が切れたときの動作
  • 再生中の動画を外部出力に切り替えるときの動作
• Chromecastアプリは誰でも開発できる

連載目次

　Web＆モバイル技術のSIを手掛けるオープンストリームでは、Chromecastデバイス国内発売前から、スマートフォンアプリ（iOS版およびAndroid版）の対応について技術検証を行い、詳細な技術ノウハウを獲得してきました。本連載ではそのときに得た技術を基に、Chromecastアプリにおけるシステム構成、開発環境、開発準備、メディアストリーミングアプリ開発方法について、注意点を含めて解説しています。

　前回の「スマホとWebSocketで連携するテレビ用SPA（Single-Page Application）の作り方」ではChromecast内部で動くReceiverアプリの開発方法について解説しました。最終回となる今回は、スマートフォンやPC上で動くSenderアプリについて、Android、iOSそれぞれにおける開発方法と注意点について解説します。

Senderアプリ概要

Senderアプリが作れるプラットフォーム

　Senderアプリの開発環境として、グーグルからは次の3種類のプラットフォームのGoogle Cast SDKが提供されています。

• Android
• iOS
• Chrome

　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アプリの基本的な動作

　Senderアプリが提供すべきUIや機能の詳細はGoogle Cast Design Checklistに記載されています。ここでは基本的な動作を確認しておきます。

　まず、Senderアプリは起動するとネットワーク上の接続可能なChromecastデバイスを検索します。Chromecastデバイスが見つかれば、図1のような「Castアイコン」を表示します。

図1　Castアイコン（接続前）

　ユーザーがCastアイコンをタップすると、図2のように見つかったChromecastデバイスの一覧がポップアップ表示されます。本記事では、この画面をGoogle Cast Design Checklistでの定義に合わせて「Castメニュー」と呼ぶことにします。

図2　Castメニュー（接続前）

　ユーザーはCastメニューの一覧から、接続したいChromecastデバイスを選んでタップします。すると選んだChromecastデバイス上でReceiverアプリが起動します。

　Receiverアプリ起動後はCastアイコンは図3のような表示に変わります。

図3　Castアイコン(接続後)

　図3の状態でCastアイコンをタップすると、図4のようなCastメニューがポップアップ表示されます。

図4　Castメニュー(接続後)

　Castメニューでは、Chromecastとの接続を解除できます。また、接続中のChromecastデバイスの名称が確認できる他、Receiverアプリの状態によっては再生中の動画に関する情報の確認や、メディアプレーヤーの簡単な操作も行えます。

　ユーザーが再生したい動画を選ぶと、Receiverアプリ上で動画の再生が始まります。その時、Senderアプリでは図5のようなメディアプレーヤーを操作する画面が表示されます。本記事では、この画面を「コントロール画面」と呼ぶことにします。

図5　コントロール画面

　コントロール画面では、一時停止や再生再開、シーク位置変更など、再生に関する細かな操作ができる他、コンテンツのメタデータ（サムネイルやタイトルなどの情報）や現在の再生位置を確認できます。ユーザーはコントロール画面を抜けてSenderアプリ内の他の画面を巡回できますが、その間もReceiverアプリでは動画の再生が続いたままです。

　以上がSenderアプリの基本動作です。