はじめに

Chromecast は Netflix や hulu などが対応していて、世間的にも浸透し始めている頃ではないでしょうか。
さらに Google I/O の方でも Google Home が発表されるなど、これからますます普及していくのではないかと思います。

今回は、仕事の方で Chromecast を触る機会があったのと、困ったときに調べたら日本語の記事があまり無かったのでまとめてみようと思いました。

基本は google の developer ページに行ってもらえばやり方は載っていますが、今回はそれをある程度わかりやすくまとめてみようと思います。ですので、英語読むの面倒とか苦手とかいう方はお付き合いください。

準備

まずはライブラリのインストールや、 SDK の準備を行って Cast API を使用できる状態にしましょう。

最初にやるのは Android SDK Manager を使ったライブラリ系統のダウンロードです。Android Studio を使用しているなら GUI 等から Android SDK Manager を立ち上げましょう。

さて、 Cast API を使用するためには以下の物が必要になります。

  • revision 19.0.1 以上のサポートライブラリ
  • 9.0.2 以上の Google Play services SDK

上記 2 点を SDK Manager を使用してダウンロードしましょう。

Gradle の設定

今回は Gradle を使っていることを前提として話をしていこうと思っています。 その為ここでも Gradle の設定に関してのみの説明になります。ご了承ください。

Gradle を使っている方ならもう慣れていることと思いますが、 ライブラリを使用するためには build.gradle ファイルに、使用する外部ライブラリのパスを記述する必要があります。

その記述が以下になります。

dependencies {
    compile 'com.android.support:appcompat-v7:25.+'
    compile 'com.android.support:mediarouter-v7:25.+'
    compile 'com.google.android.gms:play-services-cast-framework:10.0.1'
}

これを今現在作成しているアプリに追加すれば大丈夫です。 すでに dependencies を使用している方はその中にこの 3 つのライブラリパスを書いてもらえれば大丈夫です。

proguard を使用している方は、使用するライブラリの退避処理を忘れないようにしましょう。

Cast の導入

さて、ライブラリを使えるようにしたことで Cast SDK を利用して Chromecast を使用することができるようになりました。

なのでここからは実際にアプリに Cast 機能を埋め込んでいく作業になります。 SDK のみを利用して実装を行う場合、非常に簡単に導入することができますので気楽に行きましょう！

導入の為の準備

先程準備が出来たと言いましたが、実装を進めていくためにはいくつか確認する必要があります。

  • サポートしている最小 SDK を確認する

    • Cast SDK 自体は API レベル 9 まで対応しています。その為、アプリを作成するためには minSdkVersion が 9 以上になっている必要があります。 とはいえ、今現状で API レベル 9 以下まで対応しているアプリは稀だと思うのでこの辺はあまり気にしなくて良いと思います。

  • テーマの確認をする

    • 次に、アプリのテーマを AppCompat 準拠のものにする必要があります。 すでにこれになっている方はやる必要はありませんが、既存アプリを Cast 対応する場合には必須になります。

    というのも、後述する Cast 機能を一通りサポートしてくれる キャストボタンと言うものを設置する場合、 AppCompatActivity かそれを継承しているクラスでないと例外が発生してしまうためです。 そしてこのアクティビティを使用するためには AppCompat 準拠のテーマが必要ということになります。

Theme については詳しく解説しているサイトがいくつもありますのでここでは割愛します。

導入

さてそれでは Cast 機能をアプリに導入していきましょう。

まず初めにアプリ内で Cast 機能を利用するために、このアプリは Cast を使いますということを Manifest ファイルに宣言する必要があります。 この宣言には、Cast が利用する機能や AppId を指定する為のクラスを指定する必要があります。

その為まずはそのクラスから作成しましょう。 まずは以下のコードを見てください。

public class CastOptionsProvider implements OptionsProvider{
    @Override
    public CastOptions getCastOptions(Context context) {
        CastOptions castOptions = new CastOptions.Builder()
                .setReceiverApplicationId(context.getString(R.string.castApplicationId))
                .build();
        return castOptions;
    }
}

まずクラスには OptionsProvider の実装を組み込みます。 そして getCastOptions というメソッド内に使用する Cast 機能の設定を書き込んでいきます。

上記は AppId のみを設定する必要最小限のものになります。 今後機能を追加する場合には、ここに記述していくこともあります。その為クラス名もそれとわかりやすい名前にしておくことをおすすめします。

さてこのクラスの作成が済んだのなら Manifest に宣言をしましょう。

<application>
    ...
    <meta-data
        android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
        android:value="com.foo.CastOptionsProvider" />
</application>

application タブの中に meta-data として上記を追加します。

この時の value に入れるファイルパスは先程作成した OptionsProvider の実装を含んだクラスを指定します。 ちなみにこの部分フルパスじゃないとエラーが起きていたので、注意が必要かなと思います。

さて、ここまで来たら導入フェイズはもう後少しです。 最後に Cast ライブラリ系の初期化を行うメソッドを呼び出します。

使用する Activity の onCreate などで以下の一文を呼び出しましょう。

CastContext castContext = CastContext.getSharedInstance(this);

CastContext と呼ばれる、キャスト機能を利用する時に呼び出すクラスのインスタンスを取得しようとするタイミングで Cast ライブラリ系が初期化されます。 なのでとりあえず使い始める前に呼んでおくのが良いでしょう。

またこの CastContext クラスのインスタンスは再生の時とかにも使用するので、マネージャークラス等に保持しておくのもありかもしれません。

UI 系の実装

導入も終わったのでここからはアプリに Cast の機能を組み込んでいく作業になります。 実際に Cast を使用する上で必須のものとオプショナルになっているものがありますが、今回はそれらの実装方法等について説明しようと思います。

使える UI の種類

まずは Android で利用することの出来る UI パーツの一覧を以下に示したいと思います。

  • Cast Button
  • Introductory Overlay
  • Mini Controller
  • Expanded Controller
  • Notification
  • Lock Screen

上記 6 つの UI パーツが Cast には用意されています。 それではこれらの導入方法について順に説明していきたいと思います。

Cast Button

キャストへの接続、キャスト再生中にリモコンを表示する、音量の調節、キャスト接続の解除。 といろいろな機能を持っていて、 Cast 対応を行う際まず対応しないといけないのがこの Cast Button です。

この Cast Button ですが、置くこと自体はとても簡単です。 やることとしては、アクションバーのメニュー部分に置くだけです。

まずはメニューに以下を追記します。

<item
    android:id="@+id/media_route_menu_item"
    android:title="@string/media_route_menu_title"
    app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider"
    app:showAsAction="always" />

アプリで使用しているメニューがない場合には作ってこれを item として追加しましょう。

後は表示したいアクティビティにて以下の記述をしておけば完了です。

@Override public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    getMenuInflater().inflate(R.menu.main, menu);
// キャストボタンを置くための処理
CastButtonFactory.setUpMediaRouteButton(getApplicationContext(),
                                            menu,
                                            R.id.media_route_menu_item);
    return true;
}

getMenuInflater で使用している R.menu.main というのが上で item を追加したメニューのファイルを指しています。

これだけでボタンを置くことが出来ます。更に言うと、置いただけで周りのキャスト端末をスキャンし表示・非表示の制御を勝手にやってくれます。 その為、こちらで色々制御する手間がかかりません。

Introductory Overlay

Introductory Overlay は Cast Button に表示し、簡単な使い方やこのアプリはキャスト対応していますよということを示すためのものになります。 表示タイミング等はアプリによって様々だと思いますが、基本的には初めて Cast Button が表示されたタイミング等が適切ではないでしょうか。

表示の仕方は以下のサンプルを参照してください。

//ビルダーを取得してそこに色々と付けていく。
//第一引数に渡すものは表示する activity
//第二引数はこのビューを表示したい MenuItem か MediaRouteButton
IntroductoryOverlay introductoryOverlay = new IntroductoryOverlay.Builder(activity, showMenu)
// 表示する文字列
.setTitleText(mContext.getString(R.string.castIntroductionMessage))
// 表示するオーバーレイビューの色
.setOverlayColor(R.color.castIntroductionBack)
// 一度だけ表示するという設定
.setSingleTime()
.build();
//実際に表示する部分
introductoryOverlay.show();

IntroductoryOverlay を表示するためにはまず Builder を取得します。 この Builder を取得するコンストラクタは 2 種類あります。

  • アクションバーやツールバーに表示する MenuItem
  • MediaRouteButton を継承した CastButton

このどちらかをコンストラクタの第二引数に設定します。

Builder を取得したら、後は IntroductoryOverlay の表示状況の設定を行います。

詳しい部分は公式 API リファレンス を参照してもらえばいいと思います。
とりあえず今回は、基本的に設定するであろうものをサンプルには加えてあるので、他にいらないのであればサンプルを利用してもらえればいいと思います

おわりに

如何でしたでしょうか。動画系のアプリを作成することを考えている方にとっては Chromecast 対応と言うのは気になっている部分だと思います。 そういう方が実際にやってみようとなったときの助けになれば幸いです。

しかし、今回ではキャストの関連機能に関して伝えきることが出来ませんでした。
またの機会にもう一度 Android での Chromecast 対応記事を書こうと思います。

その時をお楽しみにお待ち下さい！



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる

このエントリーをはてなブックマークに追加