スマホの動画をテレビで再生！動画共有アプリがChromecastと歩む物語 2014/08/23(土) DevLOVE現場甲子園2014 東日本大会

1. スマホの動画をテレビで再生！
動画共有アプリが
Chromecastと歩む物語
2014 / 08 / 23 ふかさわひかり
DevLOVE現場甲子園2014 東日本大会

2. おはなしするまえに…

4. HICO00
おはなし中の YO
たいへんよろこびます

5. わたし
株式会社スタジオ・アルカナ
おんなのこプログラマ 深澤 ひかり
!
平成４年うまれ
!
ふだんは PHP とかかいています

6. 毎月末に開催される PHP勉強会@東京 によくいます

7. きょうおはなしすること

8. Chromecast

9. 既存アプリの
Chromecast対応開発について
Chromecast

10. Chromecast をざっくり
• テレビの HDMI 端子に差し込む
小型のメディアストリーミング端末
• 発売１周年！
（国内発売は 2014/5/28 でした）
!
• 最近では、一部のAndroidで
ミラーリングができるようになりました

11. 動画共有アプリ
今回対応させるアプリ
ちょっと宣伝くさくなります

12. • ストリーミング録画なので
アップロードの待ち時間がゼロ
• 録画した動画はサーバーに保存
スマホの容量の心配もゼロ
• 発行されたURLから、
ブラウザで動画が見れる

13. 大体こういうふうにしたい…
1. REPREの動画履歴から、動画を選択
2. キャストボタンを表示して、Chromecast一覧が表示
3. デバイス選択すると、Chromecastに接続
4. テレビでREPREの動画再生！

14. よくわかんないけど、
やってみるっ！

15. 大体こういうふうにしたい…
1. REPREの動画履歴から、動画を選択
2. キャストボタンを表示して、Chromecast一覧が表示
3. デバイス選択すると、Chromecastに接続
4. テレビでREPREの動画再生！

17. 大体こういうふうにしたい…
1. REPREの動画履歴から、動画を選択
2. キャストボタンを表示して、Chromecast一覧が表示
3. デバイス選択すると、Chromecastに接続
4. テレビでREPREの動画再生！

18. Google Cast SDK

19. Google Cast SDK
https://developers.google.com/cast/
Google Cast SDK Developer Console
登録に $5 かかります
!

20. の場合
Adobe AIRによるハイブリッドアプリのため、
このままではつかえません
!
!
AdobeAIR Native Extension じゃないと…

22. ANE-chromecast
https://github.com/renaudbardet/ANE-
chromecast
すでに、Adobe AIR Native Extension を
公開している方がいました

23. ありがとぉ( ＾ω＾ )

24. Receiver

25. Receiver Application
コンテンツを受け取るための
Chromecast側のアプリケーション
!
ちなみにREPREなどの、コンテンツを
送信する側は、Sender Application と
よびます

26. Receiver Application
• Styled Media Receiver
最初からReceiver Applicationが
用意されている
管理画面から、CSSを変更できる
• Custom Receiver
自分で１からじゆうに作れる
Receiver用SDKをつかう
https通信が必須

27. Receiver Application
• Styled Media Receiver
最初からReceiver Applicationが
用意されている
管理画面から、CSSを変更できる
• Custom Receiver
自分で１からじゆうに作れる
Receiver用SDKをつかう
https通信が必須

28. Receiver Application
• Styled Media Receiver
最初からReceiver Applicationが
用意されている
管理画面から、CSSを変更できる
• Custom Receiver
自分で１からじゆうに作れる
Receiver用SDKをつかう
https通信が必須

29. 大体こういうふうにしたい…
1. REPREの動画履歴から、動画を選択
2. キャストボタンを表示して、Chromecast一覧が表示
3. デバイス選択すると、Chromecastに接続
4. テレビでREPREの動画再生！

30. デバイス一覧取得
// デバイス一覧を取得できたとき
AirCast.getInstance().addEventListener(
AirCastDeviceListEvent.DEVICE_LIST_CHANGED,
function(e:AirCastDeviceListEvent):void {
// e.deviceList : デバイス一覧
for each ( var device:AirCastDevice in e.deviceList )
{
trace( "deviceID : " + device.deviceID );
trace( "friendlyName : " + device.friendlyName );
trace( "ipAddress : " + device.ipAddress );
trace( "manufacturer : " + device.manufacturer );
trace( "modelName : " + device.modelName );
trace( "servicePort : " + device.servicePort );
}
}
);

31. 大体こういうふうにしたい…
1. REPREの動画履歴から、動画を選択
2. キャストボタンを表示して、Chromecast一覧が表示
3. デバイス選択すると、Chromecastに接続
4. テレビでREPREの動画再生！

32. Chromecastのデバイスに接続
// デバイスに接続
AirCast.getInstance().connectToDevice( device.deviceID );

33. 大体こういうふうにしたい…
1. REPREの動画履歴から、動画を選択
2. キャストボタンを表示して、Chromecast一覧が表示
3. デバイス選択すると、Chromecastに接続
4. テレビでREPREの動画再生！

34. テレビ（レシーバー）で再生
// デバイスに接続したとき
AirCast.getInstance().addEventListener(
AirCastDeviceEvent.DID_CONNECT_TO_DEVICE,
function(e:AirCastDeviceEvent):void {
AirCast.getInstance().loadMedia(
"動画URL",
"サムネイル画像パス",
"動画タイトル",
"動画詳細文",
"video/mp4",
0, // 動画開始時間
true // 自動再生スタート
);
}
);

35. できたかな？？

36. 再生終わったらデバイスから
切断したぃ。

37. 再生終了後、切断する
// ステータス変更時
AirCast.getInstance().addEventListener(
AirCastMediaEvent.STATUS_CHANGED,
function(e:AirCastMediaEvent):void {
trace( "STATUS_CHANGED" );
if (e.status.playerState == AirCastMediaStatus.MEDIA_PLAYER_STATE_IDLE
&& e.status.idleReason == AirCastMediaStatus.MEDIA_PLAYER_IDLE_REASON_FINISHED) {
// 再生が終わったら切断
AirCast.getInstance().disconnectFromDevice();
}
}
);

38. できました！ぱちぱち。

40. まとめます
Chromecast対応アプリはまだまだ少ないです。
（iOSのアプリだけでも、130コほど）
（サンプルアプリみたいなものも含む）
!
ミラーリングもできるようになり、
まだまだこれからがたのしみです。
!
個人的にはHuluが対応してくれるとうれしい。
!
お子さんがいるご家庭では、ようかい体操が無限リピートしてるそうな。

41. AppStoreで
絶賛配信中です
おためしあれっ
「リプレ」で検索
動画共有アプリ

42. ご清聴、ありがとうございました！