Download - 俺のChromecast
![Page 1: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/1.jpg)
俺のChromecast(´ ・ ω ・ `)
![Page 2: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/2.jpg)
岡野忍 ( おかのしのぶ )
• Android エンジニア
• @operandoOS
• Play
Framework/Firefox OS
Processing/Arduino
Dart/Ruby
Chromecast
![Page 3: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/3.jpg)
![Page 4: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/4.jpg)
はい、これ!
![Page 5: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/5.jpg)
USB の中に
Chrome OS
入ってるの?
![Page 6: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/6.jpg)
はい、そうです。
![Page 7: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/7.jpg)
あ、それ欲しい。
![Page 8: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/8.jpg)
買いました。
![Page 9: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/9.jpg)
![Page 10: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/10.jpg)
Chrome OS です
![Page 11: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/11.jpg)
Chrome OS とは?
![Page 12: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/12.jpg)
Chrome OS とは?Google Chrome OS とは、 Google が
開発しているオープンソースのオペレー
ティングシステム (OS) であ
る。 Linux カーネルを採用し、独自の
ウィンドウシステムを備えている。
![Page 13: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/13.jpg)
なんか話が違うぞ・・・
こいつ大丈夫か?(-_-)zzz
みなさんの頭の中
![Page 14: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/14.jpg)
すいません(´ ・ ω ・ `)
![Page 15: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/15.jpg)
![Page 16: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/16.jpg)
Chromecast です
![Page 17: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/17.jpg)
買った人!
![Page 18: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/18.jpg)
買いたい人!
![Page 19: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/19.jpg)
Chromecast
とは?
![Page 20: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/20.jpg)
ざっくりいうと
![Page 21: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/21.jpg)
HDMI 端子に差し込む
小型の
メディア ストリーミング
端末
![Page 22: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/22.jpg)
わかった?
![Page 23: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/23.jpg)
いや、わからない
![Page 24: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/24.jpg)
テレビ
HDMI 端子
![Page 25: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/25.jpg)
テレビ
HDMI 端子
![Page 26: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/26.jpg)
テレビ
HDMI 端子無線 LAN
![Page 27: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/27.jpg)
テレビ
HDMI 端子
PC
無線 LAN
![Page 28: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/28.jpg)
テレビ
HDMI 端子
PC
無線 LAN
動画!音楽!
動画!音楽!
![Page 29: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/29.jpg)
テレビ
HDMI 端子
PC
無線 LAN
動画!音楽!
![Page 30: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/30.jpg)
テレビ
HDMI 端子
PC
無線 LAN動画!音楽!
![Page 31: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/31.jpg)
わかった?
![Page 32: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/32.jpg)
いや、わからない
説明間違ってる
![Page 33: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/33.jpg)
http://www.google.com/intl/ja/chrome/devices/chromecast/
これ見たらわかるはず!
![Page 34: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/34.jpg)
てか、実際やればいいやん
![Page 35: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/35.jpg)
DEMO
![Page 36: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/36.jpg)
わかった?
![Page 37: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/37.jpg)
なんとなく
![Page 38: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/38.jpg)
Chromecast できること
![Page 39: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/39.jpg)
Chromecast できること
設定から自分の Chromecast の端末
名を変えられる
「俺の Chromecast(´ ・ ω ・ `) 」
![Page 40: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/40.jpg)
だけ?
![Page 41: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/41.jpg)
だけ
![Page 42: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/42.jpg)
正直説明するの
めんどう・・・
![Page 43: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/43.jpg)
すいません(´ ・ ω ・ `)
![Page 44: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/44.jpg)
では
Developer 向けの
話
![Page 45: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/45.jpg)
Chromecast のアプリ
![Page 46: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/46.jpg)
Chromecast のアプリ
Sender Application
![Page 47: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/47.jpg)
Chromecast のアプリ
Sender Application
Receiver Application
![Page 48: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/48.jpg)
Sender Application
![Page 49: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/49.jpg)
Sender Application
Chromecast にコンテンツを送信する側
のアプリケーション
![Page 50: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/50.jpg)
Sender Application
Chromecast にコンテンツを送信する側
のアプリケーション
Android / iOS / Chrome ウェブアプ
リ
![Page 51: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/51.jpg)
Receiver Application
![Page 52: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/52.jpg)
Receiver Application
Android / iOS / Chrome ウェブアプリな
どからコンテンツを受け取る側のアプリケー
ション。
![Page 53: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/53.jpg)
Receiver Application
Android / iOS / Chrome ウェブアプリな
どからコンテンツを受け取る側のアプリケー
ション。
Chrome ウェブアプリ
![Page 54: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/54.jpg)
Receiver Application
![Page 55: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/55.jpg)
Receiver Application
![Page 56: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/56.jpg)
Receiver Application Sender Application
![Page 57: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/57.jpg)
Receiver Application Sender Application
![Page 58: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/58.jpg)
Receiver Application Sender Application
![Page 59: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/59.jpg)
Sender Application
![Page 60: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/60.jpg)
Sender Application
各プラットフォームごとに SDK/API が
用意されている
![Page 61: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/61.jpg)
Sender Application
各プラットフォームごとに SDK/API が
用意されている
必要な操作の UI は Sender 側で作成す
る
![Page 62: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/62.jpg)
Receiver Application
![Page 63: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/63.jpg)
Receiver Application1ページから成る HTML 5アプリ
![Page 64: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/64.jpg)
Receiver Application1ページから成る HTML 5アプリ
Receiver Application は3種類
![Page 65: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/65.jpg)
Receiver Application1ページから成る HTML 5アプリ
Receiver Application は3種類
• Default Media Receiver
![Page 66: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/66.jpg)
Receiver Application1ページから成る HTML 5アプリ
Receiver Application は3種類
• Default Media Receiver
• Styled Media Receiver
![Page 67: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/67.jpg)
Receiver Application1ページから成る HTML 5アプリ
Receiver Application は3種類
• Default Media Receiver
• Styled Media Receiver
• Custom Receiver
![Page 68: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/68.jpg)
Receiver Application1ページから成る HTML 5アプリ
Receiver Application は3種類
• Default Media Receiver
• Styled Media Receiver
• Custom Receiver
Styled Media Receiver と Custom Receiver は Developer Console の登録が必要
![Page 69: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/69.jpg)
Default Media Receiver
![Page 70: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/70.jpg)
Default Media Receiver
単純なメディア再生のみを行う
![Page 71: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/71.jpg)
Default Media Receiver
単純なメディア再生のみを行う
スタイルのカスタマイズができない
![Page 72: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/72.jpg)
Default Media Receiver
単純なメディア再生のみを行う
スタイルのカスタマイズができない
アプリケーション ID はない
![Page 73: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/73.jpg)
Default Media Receiver
単純なメディア再生のみを行う
スタイルのカスタマイズができない
アプリケーション ID はない
→ Developer Console で登録不要
![Page 74: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/74.jpg)
Default Media Receiver
単純なメディア再生のみを行う
スタイルのカスタマイズができない
アプリケーション ID はない
→ Developer Console で登録不要
→何にもいじれないから開発者的に微
妙!!
![Page 75: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/75.jpg)
Styled Media Receiver
![Page 76: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/76.jpg)
Styled Media Receiver
CSS で見た目をカスタマイズできる
![Page 77: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/77.jpg)
Styled Media Receiver
CSS で見た目をカスタマイズできる
自身で Receiver Application を作る必要
なし
![Page 78: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/78.jpg)
Styled Media Receiver
CSS で見た目をカスタマイズできる
自身で Receiver Application を作る必要
なし
→出来上がっているアプリの見た目だけ変えられる
![Page 79: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/79.jpg)
Styled Media Receiver
CSS で見た目をカスタマイズできる
自身で Receiver Application を作る必要
なし
→出来上がっているアプリの見た目だけ変えられる
初めはこいつで作るのがオススメらしい
![Page 80: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/80.jpg)
Styled Media Receiver
CSS で見た目をカスタマイズできる
自身で Receiver Application を作る必要
なし
→出来上がっているアプリの見た目だけ変えられる
初めはこいつで作るのがオススメらしい
→うーん、やっぱり微妙!!
![Page 81: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/81.jpg)
Custom Receiver
![Page 82: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/82.jpg)
Custom Receiver
自由になんでも作れるよ!ゲームみたいなの
も
![Page 83: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/83.jpg)
Custom Receiver
自由になんでも作れるよ!ゲームみたいなの
も
→これ!これが作りたい!
![Page 84: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/84.jpg)
Custom Receiver
自由になんでも作れるよ!ゲームみたいなの
も
→これ!これが作りたい!
Receiver 用 SDK を使って開発
![Page 85: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/85.jpg)
Custom Receiver
自由になんでも作れるよ!ゲームみたいなの
も
→これ!これが作りたい!
Receiver 用 SDK を使って開発
Sender とのメッセージのやりとりが柔軟にでき
る
![Page 86: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/86.jpg)
Custom Receiver
自由になんでも作れるよ!ゲームみたいなの
も
→これ!これが作りたい!
Receiver 用 SDK を使って開発
Sender とのメッセージのやりとりが柔軟にでき
る
→かなり強力!やり方次第で何でもいけそう!
![Page 87: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/87.jpg)
Application動作の流れ
![Page 88: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/88.jpg)
Sender Application
![Page 89: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/89.jpg)
①Application ID
Sender Application
![Page 90: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/90.jpg)
Google Service
App IDURL
①Application ID
②App ID
Sender Application
![Page 91: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/91.jpg)
Google Service
App IDURL
①Application ID
②App ID③URL
Sender Application
![Page 92: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/92.jpg)
Google Service
App IDURL
①Application ID
②App ID③URL
HTML
④URL Sender Application
![Page 93: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/93.jpg)
まとめ
Sender Application は Developer Console に
登録しなくても、割りと作れる
→ 対応する Receiver Application がないと意味なし
Receiver Application は Custom Receiver の
開発が一番いい!!
まだわかってないこといっぱい・・・
![Page 94: 俺のChromecast](https://reader036.vdocuments.site/reader036/viewer/2022062513/556a3a65d8b42a4a1e8b4571/html5/thumbnails/94.jpg)
Happy casting!