SlideShare a Scribd company logo
1 of 30
Download to read offline
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

More Related Content

What's hot

Apache Kafka 0.11 の Exactly Once Semantics
Apache Kafka 0.11 の Exactly Once SemanticsApache Kafka 0.11 の Exactly Once Semantics
Apache Kafka 0.11 の Exactly Once SemanticsYoshiyasu SAEKI
 
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Teruchika Yamada
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!mosa siru
 
[External] 2021.12.15 コンテナ移行の前に知っておきたいこと @ gcpug 湘南
[External] 2021.12.15 コンテナ移行の前に知っておきたいこと  @ gcpug 湘南[External] 2021.12.15 コンテナ移行の前に知っておきたいこと  @ gcpug 湘南
[External] 2021.12.15 コンテナ移行の前に知っておきたいこと @ gcpug 湘南Google Cloud Platform - Japan
 
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理NTT DATA Technology & Innovation
 
FridaによるAndroidアプリの動的解析とフッキングの基礎
FridaによるAndroidアプリの動的解析とフッキングの基礎FridaによるAndroidアプリの動的解析とフッキングの基礎
FridaによるAndroidアプリの動的解析とフッキングの基礎ken_kitahara
 
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版貴志 上坂
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなKentaro Matsui
 
Infrastructure as Code自身のテストを考える
Infrastructure as Code自身のテストを考えるInfrastructure as Code自身のテストを考える
Infrastructure as Code自身のテストを考える辰徳 斎藤
 
[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送
[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送
[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送Google Cloud Platform - Japan
 
ぱぱっと理解するSpring Cloudの基本
ぱぱっと理解するSpring Cloudの基本ぱぱっと理解するSpring Cloudの基本
ぱぱっと理解するSpring Cloudの基本kazuki kumagai
 
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021whywaita
 
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal3分でわかるAzureでのService Principal
3分でわかるAzureでのService PrincipalToru Makabe
 
事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)
事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)
事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)Tokoroten Nakayama
 
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイドAzure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイドYoichi Kawasaki
 
BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話itkr
 
GitOpsでKubernetesのManifest管理
GitOpsでKubernetesのManifest管理GitOpsでKubernetesのManifest管理
GitOpsでKubernetesのManifest管理Shinya Sasaki
 
その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)
その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)
その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)NTT DATA Technology & Innovation
 
Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)
Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)
Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)NTT DATA Technology & Innovation
 

What's hot (20)

Apache Kafka 0.11 の Exactly Once Semantics
Apache Kafka 0.11 の Exactly Once SemanticsApache Kafka 0.11 の Exactly Once Semantics
Apache Kafka 0.11 の Exactly Once Semantics
 
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
 
[External] 2021.12.15 コンテナ移行の前に知っておきたいこと @ gcpug 湘南
[External] 2021.12.15 コンテナ移行の前に知っておきたいこと  @ gcpug 湘南[External] 2021.12.15 コンテナ移行の前に知っておきたいこと  @ gcpug 湘南
[External] 2021.12.15 コンテナ移行の前に知っておきたいこと @ gcpug 湘南
 
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
 
FridaによるAndroidアプリの動的解析とフッキングの基礎
FridaによるAndroidアプリの動的解析とフッキングの基礎FridaによるAndroidアプリの動的解析とフッキングの基礎
FridaによるAndroidアプリの動的解析とフッキングの基礎
 
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
Infrastructure as Code自身のテストを考える
Infrastructure as Code自身のテストを考えるInfrastructure as Code自身のテストを考える
Infrastructure as Code自身のテストを考える
 
[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送
[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送
[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送
 
ぱぱっと理解するSpring Cloudの基本
ぱぱっと理解するSpring Cloudの基本ぱぱっと理解するSpring Cloudの基本
ぱぱっと理解するSpring Cloudの基本
 
Docker Compose 徹底解説
Docker Compose 徹底解説Docker Compose 徹底解説
Docker Compose 徹底解説
 
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
 
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal
 
事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)
事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)
事業の進展とデータマネジメント体制の進歩(+プレトタイプの話)
 
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイドAzure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
Azure Functions 2.0 Deep Dive - デベロッパーのための最新開発ガイド
 
BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話
 
GitOpsでKubernetesのManifest管理
GitOpsでKubernetesのManifest管理GitOpsでKubernetesのManifest管理
GitOpsでKubernetesのManifest管理
 
その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)
その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)
その Pod 突然落ちても大丈夫ですか!?(OCHaCafe5 #5 実験!カオスエンジニアリング 発表資料)
 
Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)
Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)
Apache Airflow 概要(Airflowの基礎を学ぶハンズオンワークショップ 発表資料)
 

More from しくみ製作所

マジシャン視点で考える心理術
マジシャン視点で考える心理術マジシャン視点で考える心理術
マジシャン視点で考える心理術しくみ製作所
 
コミュニティーマネージャー
コミュニティーマネージャーコミュニティーマネージャー
コミュニティーマネージャーしくみ製作所
 
グロースハックのマインドセット
グロースハックのマインドセットグロースハックのマインドセット
グロースハックのマインドセットしくみ製作所
 
レガシコード改善ガイド
レガシコード改善ガイドレガシコード改善ガイド
レガシコード改善ガイドしくみ製作所
 
冴えない動画の育てかた
冴えない動画の育てかた冴えない動画の育てかた
冴えない動画の育てかたしくみ製作所
 
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICSしくみ製作所
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介しくみ製作所
 
Rubyによるクローラー開発
Rubyによるクローラー開発Rubyによるクローラー開発
Rubyによるクローラー開発しくみ製作所
 
Webサービスを分類してみた
Webサービスを分類してみたWebサービスを分類してみた
Webサービスを分類してみたしくみ製作所
 

More from しくみ製作所 (14)

Vim活用術 初級編
Vim活用術 初級編Vim活用術 初級編
Vim活用術 初級編
 
マジシャン視点で考える心理術
マジシャン視点で考える心理術マジシャン視点で考える心理術
マジシャン視点で考える心理術
 
コミュニティーマネージャー
コミュニティーマネージャーコミュニティーマネージャー
コミュニティーマネージャー
 
グロースハックのマインドセット
グロースハックのマインドセットグロースハックのマインドセット
グロースハックのマインドセット
 
レガシコード改善ガイド
レガシコード改善ガイドレガシコード改善ガイド
レガシコード改善ガイド
 
リーン顧客開発
リーン顧客開発リーン顧客開発
リーン顧客開発
 
Reactjs
ReactjsReactjs
Reactjs
 
冴えない動画の育てかた
冴えない動画の育てかた冴えない動画の育てかた
冴えない動画の育てかた
 
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
Rubyによるクローラー開発
Rubyによるクローラー開発Rubyによるクローラー開発
Rubyによるクローラー開発
 
スマホ対応
スマホ対応スマホ対応
スマホ対応
 
Androidアプリ開発
Androidアプリ開発Androidアプリ開発
Androidアプリ開発
 
Webサービスを分類してみた
Webサービスを分類してみたWebサービスを分類してみた
Webサービスを分類してみた
 

Google cast開発入門