全国のリビングがターゲット！スマートテレビのクロスデバイス視聴体験開発

AbemaTV, Inc. All Rights Reserved  AbemaTV, Inc. All Rights Reserved 
1 全国のリビングがターゲット！スマートテレビのクロスデバイス視聴体験開発 2022 June 9th 株式会社 AbemaTV 五藤佑典

AbemaTV, Inc. All Rights Reserved  五藤佑典 YUSUKE GOTO https://ygoto3.com/
@ygoto3_ • California State University, San Bernardino グラフィックデザイン専攻 • デザインエンジニア／動画エンジニア @ サイバーエージェント • ABEMA 開発本部 ◦ Cross Device チームあらゆるデバイスに AbemaTV を展開するための技術を提供するチーム ◦ Streaming Client チーム AbemaTV の再生品質を軸に UX エンジニアリングにコミットするチーム ◦ 動画技術エバンジェリスト世界各国に足を運び動画技術に関する情報をキャッチアップし、社内外の動画サービスの発展に貢献するロール ◦ DesignOps 推進バックエンド大規模組織でスケールできるプロダクトデザイン開発組織を構築する活動

3 in Video Technology and Product Design

4 キャプション CTV（コネクテッドテレビ）とスマートテレビ https://www.jiji.com/jc/article?k=000000168.000036691&g=prt

5 キャプション ABEMA がサポートしているコネクテッドテレビ

6 キャプション ABEMA がサポートしているコネクテッドテレビボリューム大 https://ad.abematv.co.jp/ad-product/

スマートテレビアプリケーションの開発 7 • HTML Living Standard / HTML5 ベースのアプリケーションエンジン ◦ IPTV 関連のさまざま標準規格から参照される HTML の標準仕様 • Android ◦ モバイル端末で実績がある GUI ベース OS スマートテレビのプラットフォームは大きく分けて 2 つ

スマートテレビアプリケーションの開発 8 • HTML Living Standard / HTML5 ベースのアプリケーションエンジン ◦ IPTV 関連のさまざま標準規格から参照される HTML の標準仕様 • Android ◦ モバイル端末で実績がある GUI ベース OS スマートテレビのプラットフォームは大きく分けて 2 つ本日はクロスデバイス関連のトピックが多い Android ベースのスマートテレビの話です

9 テレビで使うインターネットは使いやすい？

Spatial Navigation 10 • つまりテレビのリモコンを使って操作すること矢印キーを利用してフォーカスをナビゲートするインターフェース

AbemaTV, Inc. All Rights Reserved  Spatial Navigation 17 長い文字入力時のキー打数は容易に 100
を超える

18 ユーザーが求めているのは大画面での視聴

19 ユーザーが求めているのは大画面での視聴コンテンツを探すなどの作業にリモコンを使いたいわけではない

20 https://times.abema.tv/articles/-/10017349

21 https://times.abema.tv/articles/-/10017349 スポーツは特に大画面で見たい

動画のキャスト 22 • Google Cast • Miracast • AirPlay コンテンツ選択は手元で、視聴はテレビやモニタなど大画面で視聴する機能

動画のキャスト 23 • Google Cast • Miracast • AirPlay コンテンツ選択は手元で、視聴はテレビやモニタなど大画面で視聴する機能 Android と親和性が高いキャスト技術

Google Cast 24 Google Cast SDK Developer Console Sender Receiver Application ID Application ID Receiver Application URL or Package Name

Google Cast 25 • Android sender app • Google Chrome sender app • iOS sender app Receiver Sender • Web receiver app • Android TV receiver app

Google Cast 26 • Android sender app • Google Chrome sender app • iOS sender app Receiver Sender • Web receiver app • Android TV receiver app 実は Android アプリ上に Receiver を作れる

Google Cast 27 • Sender から Android TV アプリを起動 ◦ Package Name 指定 • 特定のコンテンツを再生 • Sender 側から再生を制御 ◦ Mini Controller / MediaNotiﬁcationService Android TV Receiver App https://developers.google.com/cast/codelabs/cast-videos-android/#6

28 ユーザーが求めているのは大画面での視聴

29 ユーザーが求めているのは大画面での視聴視聴以外の作業をクロスデバイスで行うことができると快適になる

30 4/23 - 4/27 NAB Show 2022 @ 米国ラスベガス

31 • 米国 600,000 のホテルで導入 • Hilton, Embassy Suites, Doubletree, Hampton Inn, Homewood Suites, Sheraton, W Hotels, Westin, Marriott, Ritz-Carlton, Courtyard, Fairmont, Omni, InterContinental, Crowne Plaza, Holiday Inn, Joie de Vivre, Kimpton, Loews 等 Stayconnect アプリ

32

33 とても基本的な機能だけだが、米国のテレビ放送はチャンネル数が多いため、スクロール操作が可能なスマホで探すのは楽だった

34 https://io.google/2022/program/1e5d0560-24f2-4891-8991-0d93af8d9965/ 5/11 - 5/12 Google I/O 2022

クロスデバイスなユースケースを支える技術 35 • DNS-SD • Wi-Fi Direct • DIAL データ通信サービスディスカバリー • TCP/IP • Bluetooth

クロスデバイスなユースケースを支える技術 36 • DNS-SD • Wi-Fi Direct • DIAL データ通信サービスディスカバリー • TCP/IP • Bluetooth 近くのデバイスを見つけて

クロスデバイスなユースケースを支える技術 37 • DNS-SD • Wi-Fi Direct • DIAL データ通信サービスディスカバリー • TCP/IP • Bluetooth 情報をやりとりする

クロスデバイスなユースケースを支える技術 38 • DNS-SD • Wi-Fi Direct • DIAL データ通信サービスディスカバリー • TCP/IP • Bluetooth 近くのデバイスを見つける

サービスディスカバリー 39 • 同一ネットワークにいるデバイス／サービスを IP アドレス／ホスト名を知らなくても探すことができる仕組み • Bonjour と Avahi として実装されているプロトコルの IETF 標準化 DNS-SD

サービスディスカバリー 40 • Android で使う手段その１ ◦ Network Service Discovery API ▪ ＞ API level 16 (Android 4.1) DNS-SD

AbemaTV, Inc. All Rights Reserved  サービスディスカバリー 41 val nsdManager =
getSystemService(Context.NSD_SERVICE) as NsdManager nsdManager?.discoverServices("_protocol._tcp.", NsdManager.PROTOCOL_DNS_SD, discoveryListener) … val resolveListener = object : NsdManager.ResolveListener { … override fun onServiceResolved(nsdServiceInfo: NsdServiceInfo) { val servicePort = nsdServiceInfo.port val serviceHost = nsdServiceInfo.host … } } NsdManager

サービスディスカバリー 42 • Android で使う手段その２ ◦ JmDNS ▪ オープンソースライブラリ ▪ Java 1.6 ▪ 全ての API level で使用可能 DNS-SD

サービスディスカバリー 43 • アクセスポイントやインターネットを経由することなく、ほかのデバイスと Wi-Fi 接続することができる仕組み ◦ P2P ▪ 1on1 ▪ 1onN Wi-Fi CERTIFIED Wi-Fi Direct

サービスディスカバリー 44 • Android で使う手段 ◦ Wi-Fi P2P API Wi-Fi CERTIFIED Wi-Fi Direct

サービスディスカバリー 45 • Discovery-and-Launch ◦ 同一ネットワーク内のデバイスから別のデバイスのアプリを検出し起動する仕組み ◦ Netﬂix と YouTube が共同開発（Sony と Samsung サポートのもと） ◦ 以前は Chromecast でも使用されていた（現在は multicast DNS） DIAL

サービスディスカバリー 46 DIAL https://developers.google.com/cast/codelabs/cast-videos-android/#6

クロスデバイスなユースケースを支える技術 47 • DNS-SD • Wi-Fi Direct • DIAL データ通信サービスディスカバリー • TCP/IP • Bluetooth 情報をやりとりする

データ通信 48 • Android で使う手段 ◦ java.net.Socket など ▪ Server/Client モデル ◦ NSD 等で host と port が取得できた後は TCP/UDP ベースの通常の情報通信 TCP/IP（ローカルネットワーク）

データ通信 49 • Classic Bluetooth • Bluetooth Low Energy ◦ > API level 18 (Android 4.3) Bluetooth

データ通信 50 • Android で使う手段 ◦ android.bluetooth.BluetoothSocket Bluetooth

51 選択肢は多い

52 選択肢は多いでも、課題も多い

クロスデバイス機能開発の課題 53 • 単純に複数プラットフォームでのインテグレーション大変 ◦ 各々ライブラリの調査だったり自前での実装などが必要 • クロスデバイスの UX デザインの難易度 ◦ UX とセキュリティを高く両立させる設計 • テストの難易度 ◦ 実機や距離などバラエティテストの条件の多さ課題

高レベル API 54 近距離のデバイスを発見し、データ通信を行う 2 種類のクロスプラットフォームライブラリ • Nearby Messages API • Nearby Connections API Google Nearby API

Google Nearby API 55 • デバイス検出を複数の手段で実施 ◦ Wi-Fi / Wi-Fi Direct / Classic Bluetooth / Bluetooth Low Energy ◦ どの手段を使うかは実装者は気にする必要がない • 検出後、複数のデバイスに対して短いメッセージを配信 • Nearby Messages API が有効になったプロジェクトの API key が必要 ◦ Google Developers Console から取得 Nearby Messages API

AbemaTV, Inc. All Rights Reserved  Google Nearby API 56 val
message = Message("Hello".toByteArray(Charset.forName("UTF-8"))) … val messageListener = object : MessageListener() { override fun onFound(message: Message) { // Do something with the message on found } override fun onLost(message: Message) { // Do something with the message on lost } } … // メッセージの公開 Nearby.getMessagesClient(activity).publish(message, options) … // リスナーの登録 Nearby.getMessagesClient(activity).subscribe(messageListener, options) Nearby Messages API

Google Nearby API 57 • Service discovery は Wi-Fi で実施 ◦ ソケット、ポート、スレッド、接続などの管理を任せられる • P2P による双方向通信チャンネル • データストリーミング • ファイル転送 Nearby Connections API

AbemaTV, Inc. All Rights Reserved  Google Nearby API 58 private
val payloadCallback = object : PayloadCallback() { override fun onPayloadReceived(endpointId: String, payload: Payload) { when (payload.type) { case Payload.Type.BYTES -> { … } case Payload.Type.FILE -> { … } case Payload.Type.STREAM -> { … } } … } } … Nearby.getConnectionsClient(activity).acceptConnection(endpointId, payloadCallback); Nearby Connections API

Google Cross Device SDK 59 • Google I/O 2022 で発表 • > API level 26 (Android 8) • クロスプラットフォーム ◦ iOS / Windows / Chrome OS / Android etc. ビジネスロジック層の開発に集中するための SDK

60 クロスデバイスの未来は明るそうだけど、まだまだ大変です

61 クロスデバイスの未来は明るそうだけど、まだまだ大変です We’re hiring !

62 クロスデバイスの未来は明るそうだけど、まだまだ大変です We’re hiring ! デバイスもプラットフォームも跨いだ開発したい人と一緒に働きたいです

まとめ 63 • テレビのリモコンはインターネットの複雑な操作性に対してベストな選択肢ではない • 複雑な操作をテレビのリモコン以外で行うためにクロスデバイスな視聴体験のデザインが必要 • クロスデバイス機能実現の選択肢はたくさんある • 便利な API の恩恵は徐々に大きくなっている

全国のリビングがターゲット！ スマートテレビのクロスデバイス視聴体験開発

全国のリビングがターゲット！ スマートテレビのクロスデバイス視聴体験開発

More Decks by Yusuke Goto

Other Decks in Technology

Featured

Transcript

全国のリビングがターゲット！スマートテレビのクロスデバイス視聴体験開発

全国のリビングがターゲット！スマートテレビのクロスデバイス視聴体験開発