Google Cast 入門開発からフィーチャー掲載されるまで

2015/07/06(月) 社内勉強会 しくみ製作所株式会社 加茂 浩之

本日の内容

• Google Cast とは？

• 対応アプリのUX

• 対応アプリの開発

• Google によるQA

2

とある動画配信アプリを Google Cast に対応させて、 フィーチャー枠に掲載してもらうまでのお話。

Google Cast とは？

3

Google Cast とは？映画やテレビ番組、音楽、ゲーム、スポーツといったお気に入りのエンターテイメント アプリを、Android または iOS 搭載端末、Mac や Windows パソコン、Chromebook からテレビにキャストできます。

[引用元] https://www.android.com/intl/ja_jp/tv/

[引用元] https://developers.google.com/cast/

音楽や動画のキャスト ゲーム アプリ拡張アプリで再生中のコンテンツを大画面ディスプレイで再生

大画面ディスプレイを使ってゲームであそぶ

モバイル端末でデュアルディスプレイ体験ができる

4本日ご紹介するのはこちら！

chromecast とは？

• Google Cast に対応しているデバイスの1つ

• 映像: HDMIにて出力

• 電源: マイクロUSB

• 通信: WiFi

5

←電源ケーブルが残念orz

以降、本資料では Google Cast 対応端末を chromecast と呼びます。

キャストの流れ

6

① 動画へアクセス② chromecast へ 　 リソースの指定と 　 再生を指示

③ 動画へアクセス

よくある誤認識

7

① 動画へアクセス

② chromecast へ 　 画面を転送

開発が必要な2つのアプリ

8

① 動画へアクセス② chromecast へ 　 リソースの指定と 　 再生を指示

③ 動画へアクセス

Sender アプリ

Receiver アプリ

chromecast 対応アプリの

UX

9

1. cast 前の状態

10

Sender アプリ Receiver アプリ

castボタンをタップ

2. キャスト先デバイスの選択

11

Sender アプリ

利用可能なデバイス一覧からキャスト先を選択

Receiver アプリ

12

Sender アプリ

選択したデバイスで Receiverアプリが起動

2. キャスト先デバイスの選択

Receiver アプリ

3. 再生を開始

13

Sender アプリ

再生ボタンをタップ

Receiver アプリ

14

Sender アプリ

TV側で再生をスタート

3. 再生を開始

Receiver アプリ

再生開始までの UX

• 接続 → 再生

• 再生 → 接続

15

Sender 接続先デバイスを選択

Sender 再生ボタンをタップ

Receiver 再生スタート

Sender 接続先デバイスを選択

Sender 再生ボタンをタップ

Receiver 再生スタート

再生開始後の UX

• メディアに対する操作を Sender から実行

• 再生/停止

• ボリュームUP/Down

• ミュートのON/OFF

• キャストの停止

16

対応アプリの開発

17

Sender/Receiverアプリ

18

Sender Receiver

役割 リモコン プレイヤー

やること

同一WiFi内のchromecast探索 chromecastとの接続 Receiverアプリの起動 動画情報をReceiverに送信 動画再生をReceiverに指示 音量変更をReceiverに指示 Receiverアプリの終了

動画の再生 ※ Sender アプリの言いなり

開発方法 Android / iOS アプリにchromecast 対応機能を実装

HTMLでプレイヤーページを実装 自前のサーバにデプロイ(https必須)

Sender/ReceiverアプリのUI

• 公式に細かい要件が書かれている[1]

• 準拠せねば QA で爆死 → フィーチャー不可

19

[1] https://developers.google.com/cast/docs/design_checklist

Sender アプリ (Android) の要件例

A. はじめて chromecast が利用可能になった時は、イントロダクション画面を表示すること

B. キャストボタンをハイライト表示すること（例: 丸で囲む）

C. キャストボタンがどのように動作するか説明すること

（例: このボタンを押すとTVに動画がキャストされます。）

Senderアプリの実装

• 要件通りに実装されたサンプルアプリ有[1] • 困ったらサンプルのコードを読むべし

• CastCompanionLibrary が神！[2]

• 複雑な処理を隠蔽してくれている

• 残念ながら Android のみ

20

[1] サンプル一覧 https://developers.google.com/cast/docs/downloads Android Senderサンプル https://github.com/googlecast/CastVideos-android iOS Senderサンプル https://github.com/googlecast/CastVideos-ios [2] https://github.com/googlecast/CastCompanionLibrary-android

Receiverアプリの実装方法

• ニーズに合わせて3種類から選択

• Default Receiver • Styled Receiver • Custom Receiver

21

Receiver実装方法を決めるためのフローチャート

https://developers.google.com/cast/docs/receiver_apps

Receiver アプリ比較

22

Default Styled Custom

デザイン カスタマイズ不可 限定的に カスタマイズ可能 お好きにどうぞ

実装範囲 不要 CSSのみ HTML / CSS / JS

デプロイ 不要

基本的には不要

CSSファイルは Google Driveに設置

自前のサーバへの設置も可

必要

https 必須！

実装してみての所感

• 公式サンプルが充実しているのが嬉しい

• 品質とスピードを向上させるためにはできるだけコードを書かないこと

• 基本機能を実装するのは簡単 • キャストの概念を誤解していてハマった • 異常系のパターンが多い

23

Google による QA

24

フィーチャーの条件

• iOS, Android 両対応であること

• QA の重要指摘項目をクリアしていること

25

フィーチャー掲載までの道のり

26

プロジェクト用 Google Drive とIssue Tracker を用意

Sender アプリの APK, IPA ファイル を Driveに上げる

Receiver アプリの App ID を伝える

レビュー, Issue 起票 Issue対応, 再アップロード

QA基準をクリアしている？

フィーチャー掲載！

Google QA 担当者タスク

開発者タスク

QA 合格基準

• Issue の P0, P1 を全てクリアすること

• P0: 論外 (アプリが落ちるとか)

• P1: Requirement 違反(UXを激しく損なう)

• P2: Requirement 違反(軽微)

• P3: 要望

27

Google さんの QA が神

• Issue に以下の情報を載せてくれる

• アプリバージョン

• 使用端末, OS

• 再現手順 • 期待結果 • 実際の結果 • 再現頻度 • 動画（オプション） • ログ（オプション）

28

Issue の情報量が豊富！ お陰で修正がスムーズにできました。 なかなかここまでの情報を載せるのは 難しいですが社内PJでも参考にしたい。

QA の反省

• chromecast, WiFi, Senderデバイスは全て複数用意すべきだった • 切り替え時の挙動での問題指摘が多かった

• APK, IPAの手動アップロードは慎重に！

• アップロードミス、伝達ミスで最新版でないファイルをレビューさせてしまう事例が発生し、先方に迷惑をかけた。

• こういった操作はできるだけ自動化すべき29

ご静聴ありがとうございました

30