スマホとWebSocketで連携するテレビ用SPA（Single-Page Application）の作り方：Chromecastアプリ開発入門（2）（5/5 ページ）

[大西克己，オープンストリーム]

Receiverアプリを配置するサーバーの環境設定

　ここまではReceiverアプリの実装方法について解説してきました。Receiverの基本的な実装方法については理解できたかと思います。最後に、Receiverアプリが配置されるサーバー環境の設定で重要となるCross-Origin Resource Sharing（CORS）についても解説します。

　Chromecast上で実行されるReceiverアプリは、コンテンツデータなどにアクセスするため、自身が送信されたドメインとは異なるドメインのリソースに対してクロスサイトHTTPリクエストを行う必要があります。

　通常、スクリプトによって実行されるクロスサイトHTTPリクエストは、セキュリティ上の理由から制限が掛けられています。これを「同一生成元ポリシー（same-origin policy）」といいます。Ajax／XMLHttpRequestより発行されたHTTPリクエストはこの同一生成元ポリシーの制約を受け、Webアプリは自身が送信されたドメインにのみHTTPリクエストを発行でき、他のドメインには発行できません。

　CORSは、Webサーバーが異なるドメインからのアクセスを制御することで、異なるドメイン間での通信を安全にするための仕様です。CORSで制御できるルールには以下のようなものがあります。

• クロスドメインアクセスを許可するサーバーのドメイン
• 使用を許可するHTTPメソッド
• 使用を許可するHTTPヘッダー

　典型的なReceiverアプリからは、以下の図5のようなHTTPリクエストが発行されると予想されます。

図5　Chromecast アプリのHTTPリクエスト

　図5で発生するHTTPリクエストを列挙すると、以下のようになります。

• WebServerへ、Receiverアプリ取得リクエスト
• Media Serverへ、メディアの取得リクエスト
• DRM License Serverへ、メディア再生時のライセンス認証のキー取得リクエスト
• Web App Serverへ、何らかのロジックのためにREST APIのリクエスト

　CORSの設定するための例を以下の表にまとめました。図5の各サーバーを設定する際に参考にしてください。

表5　Media Server

Access-Control-Allow-Origin	com.example.web
Access-Control-Allow-Methods	GET
Access-Control-Allow-Headers	Content-Type

　メディアへのアクセスはGETで、ヘッダーにContent-Typeが設定されるHTTPリクエストを許可します。プリフライトリクエストが発生するので、OPTIONSを許可しています。

表6　DRM License Server

Access-Control-Allow-Origin	com.example.web
Access-Control-Allow-Methods	GET、POST、OPTIONS

　ライセンスサーバーへのアクセスには、プリフライトリクエストが発生するので、OPTIONSを許可しています。

表7　Web App Server

Access-Control-Allow-Origin	com.example.web
Access-Control-Allow-Methods	GET、POST、PUT、DELETE

　Webアプリサーバーでは、RESTで使用されるメソッドを許可しています。

※プリフライトリクエストが発生する場合は、DRM License Serverと同じ設定が必要となります。

　各サーバーで、カスタムヘッダーを含む場合は、以下のような設定を追加します。

表8

Access-Control-Allow-Headers	X-Custom-Header

　リクエストにCookieを含める場合、クレデンシャルを含むリクエストへ応答できるようにします。

表9

Access-Control-Allow-Credentials	true

　プリフライトリクエストが発生する場合は、DRM License Serverと同じ設定が必要となります。

表10　Web App Server

Access-Control-Allow-Origin	com.example.web
Access-Control-Allow-Methods	GET、POST

　CORSについては、「Using CORS - HTML5 Rocks」の詳細な解説が参考になると思います。

次回はAndroid／iOS版のSenderアプリの実装

　以上が、メディア操作や状態管理、Adaptive Bitrate StreamingやDRMを使用したより高度なReceiverアプリの開発についての解説となります。

　次回はAndroid／iOS版のSenderアプリの実装方法について解説します。

「Chromecastアプリ開発入門」バックナンバー

• Google Cast SDKを使ったAndroid／iOSアプリの作り方と注意点
• スマホとWebSocketで連携するテレビ用SPA（Single-Page Application）の作り方
• Chromecastで動くHTML5ベースのメディアストリーミングアプリを作るための基礎知識

著者プロフィール

大西克己

株式会社オープンストリームにおいて、アーキテクトとしてAndroidの技術調査・支援、開発案件に従事。社外ではいくつかのAndroid系コミュニティに所属し、勉強会やハッカソンへ積極的に参加、アプリケーションコンテストで入賞したことがある。

最近は、Androidを中心としたウェアラブルデバイスなどのエコシステムに興味がある。