連載
» 2015年05月13日 05時00分 UPDATE

Chromecastアプリ開発入門(終):Google Cast SDKを使ったAndroid/iOSアプリの作り方と注意点 (1/6)

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

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

テレビ側の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アイコン」を表示します。

chromecast3_1.jpg 図1 Castアイコン(接続前)

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

chromecast3_2.jpg 図2 Castメニュー(接続前)

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

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

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

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

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

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

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

chromecast3_5.jpg 図5 コントロール画面

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

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

       1|2|3|4|5|6 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。