Windows 8 アプリ (および Web サイト) から優れたリモート再生エクスペリエンスを有効にする

Windows 8 アプリ開発者ブログ

Windows 8 エンジニアリング チームが語る Windows 8 向け Metro スタイル アプリの開発

Windows 8 アプリ (および Web サイト) から優れたリモート再生エクスペリエンスを有効にする

  • Comments 0

リモート再生の概要

リモート再生とは、アプリから Xbox やその他のサポートされているデバイスへ、音楽、写真、ビデオをホーム ネットワーク経由でストリーミングできるようにする機能です。皆さんのアプリから大画面のテレビへ、写真やビデオを簡単に出力できるようになったところを想像してみてください。あるいは、アプリからリビング ルームのスピーカーへ音楽を流すことができたらどうでしょうか。リモート再生コントラクトを使えば、このようなシナリオを皆さんのアプリで簡単に実現できるのです。これは、リビング ルームでのアプリの魅力を高める強力な手段の 1 つです。

私たちは、ユーザー、開発者、そしてデバイスにエンド ツー エンドの優れたエクスペリエンスを提供するため、次のようにリモート再生を設計しました。

  • ユーザー: 共有が有効になっているネットワーク (ホーム ネットワークなど) では、Windows 認定を受けたリモート再生デバイスが Windows 8 によって自動的に検出され、インストールされます。オペレーティング システムには、スワイプしてチャームを表示し、デバイス チャームでデバイスをタップするという一貫したユーザー エクスペリエンスが備わっています。サポートされるアプリであれば、どれでも同じ操作でリモート再生を開始できます。ミュージック アプリ、ビデオ アプリ、フォト アプリなど、メディアが中心となる Microsoft 製のアプリにはすべて、リモート再生エクスペリエンスが組み込まれています。リモート再生コントラクトは Internet Explorer 10 にも実装されているので、Web ページから写真や HTML5 の音楽をストリーミングすることもできます。
  • 開発者: 開発者にとってのリモート再生コントラクトは、基盤となるメディア ストリーミング テクノロジ (プロトコル、フォーマット照合、トランスコードなど) の高度な抽象化であり、さまざまなアプリでリモート再生エクスペリエンスをすばやく簡単に実装 (およびテスト) できるようにするものです。すべてのアプリ (および IE で表示される HTML5 Web ページ) では、基本的なエクスペリエンスが既定で有効になりますが、後で調整することも除外することもできます。
  • デバイス: Windows 8 のリモート再生エクスペリエンスは、Windows 認定を取得したリモート再生デバイスで機能するように設計されています。認定デバイスでは、信頼性の高い一貫したエクスペリエンスを得ることができます。現在、多くのコンシューマー向け電子機器メーカーが自社デバイスにリモート再生の認定を取得するべく取り組んでおり、対象となるデバイスの種類は多岐にわたっています。デバイスの例として、テレビ、セットトップ ボックス、スピーカー、オーディオ受信機といったものがあります。リモート再生レシーバーのサポートは、今年前半に開催された Electronics Entertainment Expo (E3) で発表された新機能で、この秋のダッシュボード アップデートで約 7,000 万台に及ぶ Xbox 360 に展開されました。他のデバイスについては、今後の Windows ブログ (英語) でお知らせしていく予定です。

 

魅力的な対話型エクスペリエンスの構築

リモート再生を使うと、ユーザーを引き付け、Windows ストアで目立つことのできる魅力的なマルチスクリーン エクスペリエンスを簡単に実現できます。リモート再生の実装によって、次のエクスペリエンスを組み込むことができます。

  • ソーシャル エクスペリエンス。ユーザーは、皆さんのアプリから直接お気に入りの写真やビデオを自宅の大画面に映し出して、友だちや家族と簡単に共有することができます。
  • コンパニオン エクスペリエンス。アプリでセカンド スクリーン エクスペリエンスを提供できます。これには、単純なリモコン機能から、ユーザーがトラックを評価したり、アルバムとアーティストに関する詳しいメタデータを利用したりできるレーティング システムまで、さまざまな形が考えられます。

今回の記事では、開発者向けサンプルとフォト アプリを例として使い、優れたリモート再生エクスペリエンスを構築してテストする方法を紹介します。

Windows 8 でのリモート再生の動作

まず、エンド ツー エンドのエクスペリエンスについて、ユーザー側から見たリモート再生の動作はどのようなものか、つまり新しいネットワークへの参加からデバイスへのメディアのストリーミングまでを追いかけていきましょう。

Windows 8 でのリモート再生のしくみはシンプルで、パブリック ネットワークでユーザーのプライバシーとセキュリティが損なわれることもありません。ホームグループがセットアップされている PC と、初回セットアップ時にユーザーが簡単設定を選んだ PC では、共有が自動的に有効になります。また、ユーザーが新しいネットワークに参加するときには、共有を有効にしてデバイスに接続するかどうかをたずねるメッセージがそのつど表示されます。このメッセージは、ネットワーク接続のポップアップでネットワーク名を押し続けた場合にも表示されます。

スタート画面での共有設定

共有が有効になると、ネットワーク上のリモート再生デバイスが Windows によって自動的に検出され、インストールされます。これにかかる時間は 30 秒ほどです。デバイスが利用可能かどうかは、[PC 設定] の [デバイス] ページで確認できます。[PC 設定] の [デバイス] ページでは、新しいデバイスを手動で追加することもできます。

[PC 設定] 画面

インストールされたリモート再生デバイスは Windows に記憶され、ネットワーク上で利用可能な状態にあるかどうかが自動的に追跡されます。これで、リモート再生に対応したアプリから、いつでもデバイス チャームを通じてデバイスにアクセスできるようになりました。

この動作をもっと詳しく確認するために、開発者向けサンプル (英語) を Visual Studio で実行してみましょう。このサンプルでは、Big Buck Bunny ビデオに対してリモート再生が有効になります。

Big Buck

 

このアプリケーションのビューにはリモート再生コントラクトが実装されているため、スワイプするとデバイス チャームが表示され、利用可能なデバイスを見ることができます。

Big Buck 2

デバイスを選択するとリモート再生が始まります。この例では Xbox 360 を選びます。すると、下の図のようにビデオ コントロールのモードが変わり、ビデオが灰色のオーバーレイに置き換えられます。一時停止、再生、シーク、音量の各ボタンは、出力先デバイスでの再生を制御するものになります。

リモート再生によるストリーミング

デバイス チャームで [切断] を選ぶと、セッションを終了できます。

リモート再生によるストリーミング 2

リモート再生コントラクトの実装

アプリへのリモート再生の実装は簡単です。アプリのいずれかのビューについて、次の手順を実行します。

  1. 現在のビューに PlayToManager オブジェクトを作成します。
  2. デバイス チャームの選択時に通知を受け取るように、SourceRequested イベントに登録します。
  3. PlayToSource を設定して、そのビューからストリーミングするメディア要素を指定します。デバイス チャームは、ソース要素がオーディオか、ビデオか、画像かに基づいて、該当するメディアの種類に対応するデバイスだけを表示します。ユーザーがデバイスを選択すると、PlayToSource がデバイスに送信されます。PlayToSource は、デバイス上で現在のメディア要素の再生が終わった後、次の要素をストリーミングするように更新できます。

簡単な例を見てみましょう。この例は、1 つのメディア項目に対してリモート再生を有効にする方法を示しています。

JavaScript

<video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay />
<script type="text/javascript">
// Step 1: Obtain PlayToManager object for app’s current view.
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
// Step 2: Register for the sourcerequested event (user selects Devices button).
ptm.addEventListener("sourcerequested", function(e) {
var request = e.sourceRequest;
// Step 3: Specify the media to be streamed (to filter devices)
request.setSource(document.getElementById("videoplayer").msPlayToSource);
// The media will then be streamed to the device chosen by the user in the UI.
});
</script>

XAML

<MediaElement x:Name="videoplayer" Source="http://www.contoso.com/clip.mp4" 
AutoPlay="true" />
// Step 1: Obtain PlayToManager object for app’s current view.
PlayToManager ptm = Windows.Media.PlayTo.PlayToManager.GetForCurrentView();
// Step 2: Register for the SourceRequested event (user selects Devices button).
ptm.SourceRequested += (PlayToManager sender, PlayToSourceRequestedEventArgs e) => {
request = e.SourceRequest;
// Step 3: Specify the media to be streamed.
PlayToSourceDeferral deferral = request.GetDeferral();
request.SetSource(videoplayer.PlayToSource);
deferral.Complete();
}
// The media will then be streamed to the device chosen by the user in the UI.

リモート再生コントラクトを実装するべき状況

アプリで写真を表示したり、音楽やビデオを再生することがあり、大きい画面や高品質のステレオに出力した方がより楽しめると思われる場合は、リモート再生を有効にする価値があります。私たちは、ライフスタイル、ニュースリーダー、ポッドキャスト、メディアなど、さまざまなジャンルのアプリで開発者が魅力的なエクスペリエンスを構築するところを見てきました。

Windows 8 アプリでは、音楽やビデオ要素の再生については自動的にリモート再生が有効になります (ただし、イメージ要素の表示に対しては有効になりません)。この既定のエクスペリエンスは個々のメディア要素を再生する分には十分ですが、スライドショーやプレイリストといったやや複雑なシナリオに対応するには、リモート再生の調整が必要になります。

リモート再生によるデバイスへのストリーミングは、DRM で保護されていないあらゆる音楽、ビデオ、画像でサポートされ、ユーザー コレクションと Web ベースのストリーミング メディアのどちらにも対応します。DRM コンテンツは Web から直接スマート テレビなどのデバイスに配信されるため、サポートされません。

この記事では、優れたリモート再生エクスペリエンスの例としてフォト アプリを取り上げます。フォト アプリは、デジタルの思い出を味わうのにぴったりの場所、過去の記録を見て思い起こし、楽しみ、共有し、思い出に浸ることができる場所となるように作成されました。デジタルの思い出を自宅の大画面に出力すれば、全体のエクスペリエンスが向上するだけでなく、もっとインタラクティブな交流を楽しむことができます。

フォト アプリの例

フォト アプリには、ユーザーがスライドショーを制御できるリモート再生ビューがあります。これを使うと、メディア セット全体をスライド ビューで表示することができます。ユーザーは、ここからビデオを再生または一時停止したり、スライドショーを開始したり、アイテムを手動でテレビに送ったりできます。写真とビデオはテレビに映し出されるので、アプリでは Windows 8 デバイスの表示領域を追加画面として活用できます。つまり、次に再生されるアイテムなどの追加情報を表示して、テレビのエクスペリエンスを補完することができます。

重要なのは、リモート再生をアプリの流れに合わせて組み込むことです。フォト アプリでは、アプリのメイン レイアウトの横にリモート再生ビューが組み込まれています。

ユーザーは、アプリのどこからでもデバイス チャームを開き、互換性のあるデバイスを確認することができます。写真やビデオを見ているときも、コレクションを参照しているときも、いつでもデバイス チャームを開いてデバイス オプションを表示できます。閲覧中にアルバム全体を別のデバイスに送ることはもちろん、複数のアルバムから選択した一連の写真をまとめて送ることもできます。

下の例では、ユーザーがいくつかの写真とビデオを選択しているので、それらがテレビに送られることになります。デバイス チャームを開くと、選択されているコンテンツの種類を再生できるデバイスが表示されます。アプリで実行する必要のある処理は、コンテンツ ソースを指定することだけです。

スケボー場

デバイスの選択後、どのデバイスがコンテンツを再生しているかを確かめたいと思うユーザーもいます。このため、フォト アプリではヘッダーを作成して、現在のコンテンツのストリーミング先を表示しています。現在再生中のメディア項目については、その写真やビデオが四角い枠で囲まれて強調表示されます。

テレビでの再生中、アプリの画面は次のようになります。

スケボー場 2

スライドショーのパフォーマンスの改善

Windows の認定を受けたリモート再生デバイスでは、プレイリストのシナリオで、次に再生されるアイテムの事前バッファリングがサポートされます。最適なパフォーマンスを確保するには、プレイリストの次のアイテムを事前バッファリングするようにデバイスに通知するのが良い方法です。このようなパフォーマンスは、優れたユーザー エクスペリエンスにとってきわめて重要な要因です。アプリでこの機能を利用するには、プレイリスト シナリオの "次" の要素に相当するリモート再生ソースを指定します。MSDN のクイック スタートでは、この拡張機能をアプリで利用する方法について詳しく説明しています。

スライドショーの継続的再生

リモート再生セッションでは、ユーザーが切断するまで再生が続きます。このため、次の 2 とおりのマルチタスク シナリオが可能になります。

  1. ユーザーは、同じアプリ内で別々のフォト アルバムに移動することができます。このシナリオに対応するには、"再生中" のスライドショーから離れてもリモート再生が続行されるようなエクスペリエンスをアプリで構築する必要があります。たとえばフォト アプリでは、テレビでスライドショーを再生し続けたまま、複数の写真を選んでメールで共有することができます。
  2. ユーザーは、テレビにスライドショーをストリーミングしながら別のアプリに移動して、メール チェックなどを行うことができます。この場合、アプリで行う処理は何もありません。リモート再生セッションがアクティブな間、アプリは Windows によって自動的にバックグラウンドで実行され続けます。セッションをアクティブに保つために、アプリでは、現在の画像が表示されてから約 10 秒以内に新しい画像を送る必要があります。現在のオーディオやビデオが終わってから次のオーディオまたはビデオを送るまでに許容される時間も約 10 秒です。スライドショー、音楽、ビデオ、プレイリストが終わると、アプリは Windows によって中断されます。

リモート再生に関する推奨事項と非推奨事項

高品質なリモート再生エクスペリエンスの構築に取り組むときは、ここに挙げる推奨事項と非推奨事項を念頭に置いてください。

推奨:

  • アプリから別のデバイスに再生中であることをユーザーに通知する。
  • デバイス チャームを通じてデバイスに接続 (および切断) する。
  • ユーザーがアプリ内の別のビューに移動してもリモート再生セッションを続行する。
  • 音楽、写真、ビデオのプレイリストでは、次に再生する PlayToSource を必ず指定してパフォーマンスを高める。
  • リモート再生を最適に使うための詳しいガイドラインについては、MSDN のリファレンス ページをご覧ください。

非推奨:

  • アプリ内からリモート再生を開始または終了するカスタム ボタンを追加しない。必ずデバイス チャームを使ってください。

Web サイトの場合

アプリのエクスペリエンスと同様に、新しい IE10 アプリでも、音楽、ビデオ、画像のリモート再生が自動的に有効になります。IE は、リモート再生のソースとして使う最適なメディア項目を特定しようと試みますが、現在再生中の要素、選択されている要素、ビュー内でアクティブな要素が優先されます。

5 秒以内の音楽要素とビデオ要素、および 300 x 300 ピクセル以下の画像は IE で無視され、自動的に有効になることはありません。

Web ページをリモート再生に対応させるためのガイドラインとヒントについては、MSDN のページをご覧ください。

メディア フォーマットに関する注意

この記事にまとめられているように、Windows 8 は広範囲にわたるメディア フォーマットに対応しています。ただし、最適なパフォーマンスを得るために、画像には 1080p の JPEG、ビデオには 720p (または 1080p) の MP4 (H264 ビデオと AAC オーディオ) を使うことをお勧めします。

リモート再生のテストと検証

リモート再生のテストと検証は、Windows Media Player をリモート再生レシーバーとして使い、ごく少数の PC で簡単に行うことができます。以下に手順を説明します。

  1. ホーム ネットワークに 2 台の PC をセットアップします。��発者の PC と、Windows Media Player (WMP) を実行するもう 1 台の PC を用意してください。この 2 台目の PC をテスト用のリモート再生レシーバーとして使います。
  2. リモート再生レシーバーにする PC で、WMP を開いて [ストリーム] メニューを選択し、[プレーヤーのリモート制御を許可] を選択します。
    • Windows 7 と Windows 8 のどちらの WMP でも動作しますが、Windows 8 の方が改良されているので、そちらを使うことをお勧めします。
    • 両方の PC で共有が有効になっていることを確認します。
    • ホーム ネットワークに参加していることを確認します。企業ネットワークでは、リモート再生デバイスの検出を妨げるファイアウォールや管理ポリシーが存在する場合があります。
  3. 開発者の PC で、[PC 設定][デバイス] ページに移動し、[デバイスの追加] を選択して、Windows Media Player (上の手順 2 で設定したもの) をインストールします。
  4. 2 台目の PC では、リモート再生コントラクトを実装している任意のアプリから、WMP をリモート再生デバイスとして使うことができます。フォト アプリやリモート再生のサンプルはもちろん、皆さんの自作のアプリもコントラクトを実装していれば使用できます。

また、Xbox を使ってアプリからのリモート再生のテストと検証を行うこともできます。この場合、特別な構成は必要ありません。

まとめと追加情報

優れたリモート再生エクスペリエンスをアプリに上手に組み込む方法について考えるときに、この記事が皆さんのお役に立てばさいわいです。フィードバックやご質問はコメントとしてお寄せください。Windows ストアで皆さんのアプリを拝見できることを楽しみにしています。

最後に、デベロッパー センターにある参考になるドキュメントへのリンクをまとめておきます。

概要のビデオとドキュメント

クイック スタート

API リファレンスと開発者向けサンプル

お読みいただき、ありがとうございました。

Gabe Frost、Analy Otero、リモート再生チーム

  • Loading...
Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post