![Google Cast とは？
映画やテレビ番組、音楽、ゲーム、スポーツといったお気に入りのエンターテイメ
ント アプリを、Android または iOS 搭載端末、Mac や Windows パソコン、
Chromebook からテレビにキャストできます。
[引用元] https://www.android.com/intl/ja_jp/tv/
[引用元] https://developers.google.com/cast/
音楽や動画のキャスト ゲーム アプリ拡張
アプリで再生中のコンテンツ
を大画面ディスプレイで再生
大画面ディスプレイを使って
ゲームであそぶ
モバイル端末でデュアルディ
スプレイ体験ができる
4本日ご紹介するのはこちら！](https://image.slidesharecdn.com/googlecast-150706093750-lva1-app6892/85/Google-cast-4-320.jpg)
![Sender/ReceiverアプリのUI
? 公式に細かい要件が書かれている[1]
? 準拠せねば QA で爆死 → フィーチャー不可
19
[1] https://developers.google.com/cast/docs/design_checklist
Sender アプリ (Android) の要件例
A. はじめて chromecast が利用可能になった時は、イントロダク
ション画面を表示すること
B. キャストボタンをハイライト表示すること（例: 丸で囲む）
C. キャストボタンがどのように動作するか説明すること?
（例: このボタンを押すとTVに動画がキャストされます。）](https://image.slidesharecdn.com/googlecast-150706093750-lva1-app6892/85/Google-cast-19-320.jpg)
![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](https://image.slidesharecdn.com/googlecast-150706093750-lva1-app6892/85/Google-cast-20-320.jpg)
Google cast開発入門
- 1. Google Cast 入門 開発からフィーチャー掲載されるまで 2015/07/06(月) 社内勉強会 しくみ製作所株式会社 加茂 浩之
- 2. 本日の内容 ? Google Cast とは？ ? 対応アプリのUX ? 対応アプリの開発 ? Google によるQA 2 とある動画配信アプリを Google Cast に対応させて、 フィーチャー枠に掲載してもらうまでのお話。
- 4. Google Cast とは？ 映画やテレビ番組、音楽、ゲーム、スポーツといったお気に入りのエンターテイメ ント アプリを、Android または iOS 搭載端末、Mac や Windows パソコン、 Chromebook からテレビにキャストできます。 [引用元] https://www.android.com/intl/ja_jp/tv/ [引用元] https://developers.google.com/cast/ 音楽や動画のキャスト ゲーム アプリ拡張 アプリで再生中のコンテンツ を大画面ディスプレイで再生 大画面ディスプレイを使って ゲームであそぶ モバイル端末でデュアルディ スプレイ体験ができる 4本日ご紹介するのはこちら！
- 5. chromecast とは？ ? Google Cast に対応して いるデバイスの1つ ? 映像: HDMIにて出力 ? 電源: マイクロUSB ? 通信: WiFi 5 ←電源ケーブルが残念orz 以降、本資料では Google Cast 対応端末を chromecast と呼びます。
- 6. キャストの流れ 6 ① 動画へアクセス ② chromecast へ ? リソースの指定と ? 再生を指示 ③ 動画へアクセス
- 7. よくある誤認識 7 ① 動画へアクセス ② chromecast へ ? 画面を転送
- 8. 開発が必要な2つのアプリ 8 ① 動画へアクセス ② chromecast へ ? リソースの指定と ? 再生を指示 ③ 動画へアクセス Sender アプリ Receiver アプリ
- 10. 1. cast 前の状態 10 Sender アプリ Receiver アプリ castボタンをタップ
- 15. 再生開始までの UX ? 接続 → 再生 ? 再生 → 接続 15 Sender 接続先デバイスを選択 Sender 再生ボタンをタップ Receiver 再生スタート Sender 接続先デバイスを選択 Sender 再生ボタンをタップ Receiver 再生スタート
- 16. 再生開始後の UX ? メディアに対する操作を Sender から実行 ? 再生/停止 ? ボリュームUP/Down ? ミュートのON/OFF ? キャストの停止 16
- 17. 対応アプリの開発 17
- 18. Sender/Receiverアプリ 18 Sender Receiver 役割 リモコン プレイヤー やること 同一WiFi内のchromecast探索 chromecastとの接続 Receiverアプリの起動 動画情報をReceiverに送信 動画再生をReceiverに指示 音量変更をReceiverに指示 Receiverアプリの終了 動画の再生 ※ Sender アプリの言いなり 開発方法 Android / iOS アプリに? chromecast 対応機能を実装 HTMLでプレイヤーページを実装 自前のサーバにデプロイ(https必須)
- 19. Sender/ReceiverアプリのUI ? 公式に細かい要件が書かれている[1] ? 準拠せねば QA で爆死 → フィーチャー不可 19 [1] https://developers.google.com/cast/docs/design_checklist Sender アプリ (Android) の要件例 A. はじめて chromecast が利用可能になった時は、イントロダク ション画面を表示すること B. キャストボタンをハイライト表示すること（例: 丸で囲む） C. キャストボタンがどのように動作するか説明すること? （例: このボタンを押すとTVに動画がキャストされます。）
- 20. 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
- 21. Receiverアプリの実装方法 ? ニーズに合わせて3種 類から選択 ? Default Receiver ? Styled Receiver ? Custom Receiver 21 Receiver実装方法を決めるためのフローチャート https://developers.google.com/cast/docs/receiver_apps
- 22. Receiver アプリ比較 22 Default Styled Custom デザイン カスタマイズ不可 限定的に カスタマイズ可能 お好きにどうぞ 実装範囲 不要 CSSのみ HTML / CSS / JS デプロイ 不要 基本的には不要 CSSファイルは Google Driveに設置 自前のサーバへの設置も可 必要 https 必須！
- 23. 実装してみての所感 ? 公式サンプルが充実しているのが嬉しい ? 品質とスピードを向上させるためには? できるだけコードを書かないこと ? 基本機能を実装するのは簡単 ? キャストの概念を誤解していてハマった ? 異常系のパターンが多い 23
- 24. Google による QA 24
- 25. フィーチャーの条件 ? iOS, Android 両対応であること ? QA の重要指摘項目をクリアしていること 25
- 26. フィーチャー掲載までの道のり 26 プロジェクト用 Google Drive と Issue Tracker を用意 Sender アプリの APK, IPA ファイル を Driveに上げる Receiver アプリの App ID を伝える レビュー, Issue 起票 Issue対応, 再アップロード QA基準をクリアしている？ フィーチャー掲載！ Google QA 担当者タスク 開発者タスク
- 27. QA 合格基準 ? Issue の P0, P1 を全てクリアすること ? P0: 論外 (アプリが落ちるとか) ? P1: Requirement 違反(UXを激しく損なう) ? P2: Requirement 違反(軽微) ? P3: 要望 27
- 28. Google さんの QA が神 ? Issue に以下の情報を載せてくれる ? アプリバージョン ? 使用端末, OS ? 再現手順 ? 期待結果 ? 実際の結果 ? 再現頻度 ? 動画（オプション） ? ログ（オプション） 28 Issue の情報量が豊富！ お陰で修正がスムーズにできました。 なかなかここまでの情報を載せるのは 難しいですが社内PJでも参考にしたい。
- 29. QA の反省 ? chromecast, WiFi, Senderデバイスは全て複数用意す べきだった ? 切り替え時の挙動での問題指摘が多かった ? APK, IPAの手動アップロードは慎重に！ ? アップロードミス、伝達ミスで最新版でないファイ ルをレビューさせてしまう事例が発生し、先方に迷 惑をかけた。 ? こういった操作はできるだけ自動化すべき 29