Chromecast向けアプリ開発の準備

前回はChromecastをエンドユーザー視点で触ってみました。
今回は、Chromecast向けアプリの開発向けページを読んでみた内容を書いてみます。

SenderとReceiver

Chromecast向けのアプリは、SenderアプリとReceiverアプリで構成されます。
SenderアプリとReceiverアプリは、SDKを介して動作連携したりお互いの状態をやりとりします。

Senderアプリ

Chromecastを操作するリモコンのようなイメージです。
スマホやタブレットで動作するiOSまたはAndroidOSのネイティブアプリ、またはPCのChromeブラウザ内で動作するWebアプリです。
iOS、AndroidOS、PCのChromeブラウザ向けそれぞれにSDKが提供されています。

Receiverアプリ

Senderアプリから操作されるメディアプレイヤーのイメージです。
Chromecast側で動作するWebアプリです。(Chromecastはマルチメディア再生に特化したChromeブラウザを内蔵しています。)
Receiverアプリは、以下のものに分類されます。

  1. Default Media Receiver
    標準のメディアプレイヤーです。Googleへのアプリの登録が不要です。
  2. Styled Media Receiver
    UIを若干カスタマイズ可能なメディアプレイヤーです。Googleへのアプリの登録が必要です。
  3. Custom Receiver
    HTML5で作成可能な独自のアプリケーションです。Googleへのアプリの登録が必要なほか、インターネット上のサーバーにアプリの配置が必要です。

Custom Receiver向けにSDKが提供されています。

開発の準備

以下の手順で準備を進めます。
Chromecastの初期セットアップが完了済であることが前提です。(前回記事参照)

Google Cast SDK Developer Consoleに登録する

Google Cast SDK Developer Consoleにサインインするアカウントを作成します。(登録時のみ5.00USDが必要なようです。)

デバイスを登録する

Google Cast SDK Developer Consoleにサインインします。

Devicesに開発に利用するChromecastデバイスを登録します。

シリアル番号は、Chromecast背面のHDMIという表示の下あります。(写真の赤い箇所)

DeviceのステータスがReady For Testingとなるのを待ちます。(15分程度待つと登録完了するようです。)

 

デバイスを設定する

Chromecastセットアップアプリを起動し、対象のChromecastの情報画面で「全般」に進み、「アップデート確認時にこのChromecastのシリアル番号を送信する」にチェックを付けます。 一応、その画面にある再起動のボタンで再起動もしておきます。

設定されているか確認

Chromecastと同じLANに接続されたPCからChromeブラウザで、http://[ChromecastのIPアドレス]:9222にアクセスしてみましょう。開発用のページが表示されます。

以上で開発の準備は完了です。

サンプルアプリを動かしてみる

サンプルアプリは、GitHubにあります。
今回はこの中で「CastHelloText-ios」を使ってみたいと思います。
GitHubからクローンすると、iOSのSenderアプリとReceiverアプリのソースコードがあります。

Receiverアプリを登録する

このアプリのReceiverは、Custom Receiverになりますので、インターネット上のサーバーへのReceiverアプリの配置と、Googleへのアプリ登録が必要になります。
まずは、Google Cast Developer Consoleにログインしてアプリを登録し、Application IDを取得します。

独自に作成されたReceiverのソースコードがありますので、Custom Receiverを選択します。

Nameは任意です。
URLには配置予定のURLを入力します。
Publishは公開する際のものなのでOFFです。
PlatformはSenderアプリの公開をどのプラットホームにするかを選択するものなので入力しません。

登録完了すると、Application IDが発行されます。

Receiverアプリを配置する

Receiverアプリ(クローンした場所のreceiverフォルダにあるhtml)を上記アプリ登録時に入力したURLに配置します。

Senderアプリを編集する

SDKダウンロードページにある「download the iOS Sender API libraries.」のリンクからiOS版のSDKをダウンロードします。
ダウンロードしたSDKを解凍し、GoogleCast.frameworkフォルダをSenderアプリ(クローンした場所にあるXcodeプロジェクト)のフォルダにコピーします。
Xcodeプロジェクトを開き、TargetのBuild PhaseのLink Binary With Libraryで、コピーしたGoogleCast.frameworkフォルダを選択します。

HTGCViewController.mに、kReceiverAppIDというconst定義がありますので、この値をアプリ登録した際に発行されたApplication IDに編集します。

これでアプリが動作するはずです。

アプリを動かしてみる

iOSデバイスにSenderアプリをインストールして起動します。
iOSデバイスとChromecastが同じWiFiアクセスポイントに接続されていることを確認してください。
Senderアプリを起動すると、右上にアイコンボタンがあるのでここからChromecastに接続できます。接続するとアイコンボタンが青色に変わります。
同じネットワークに接続しているのに接続エラーが出る場合には、Chromecastの再起動、Application IDが間違っていないかの確認などを行ってみてください。
接続できたら、TextFieldに何か入力してUpdateScreenボタンを押してみてください。Chromecastの画面のほうに入力したものが表示されるはずです。

今回はここまでです。
次回は、他のサンプルアプリも動かしてみながら、内部の動作を確認してみたいと思います。

%d人のブロガーが「いいね」をつけました。