2025年8月30日日本語

フロントエンド Presentation API を探求し、シームレスなマルチスクリーンWebアプリケーションを作成します。複数のディスプレイで魅力的なコンテンツを提供するための概念、実装、ベストプラクティスを学びましょう。

マルチスクリーン体験の実現：フロントエンド Presentation API の詳細解説

今日の相互接続された世界では、ユーザーは複数のデバイス間でシームレスな体験を期待しています。フロントエンド Presentation APIは、Web開発者が単一の画面を超えて拡張するアプリケーションを作成するための強力なメカニズムを提供し、魅力的で共同作業可能なマルチスクリーン体験を提供します。この包括的なガイドでは、Presentation APIの機能、実装の詳細、ベストプラクティスを探求し、複数のディスプレイの力を活用した革新的なWebアプリケーションの構築を可能にします。

Presentation APIとは？

Presentation APIは、Webページ（プレゼンテーションコントローラー）がセカンダリディスプレイ（プレゼンテーションレシーバー）を検出し、接続できるようにするWeb APIです。これにより、開発者は複数の画面にコンテンツを表示するWebアプリケーションを作成できます。例えば、以下のようなものです：

プレゼンテーション： 発表者がラップトップでメモを見ながら、プロジェクターにスライドを表示する。
デジタルサイネージ： 中央のWebアプリケーションから制御される公共ディスプレイに情報を表示する。
ゲーム： 没入感を高めたり、協力プレイを可能にするために、ゲームプレイをセカンドスクリーンに拡張する。
インタラクティブダッシュボード： 制御室やオフィス環境で、リアルタイムのデータや視覚化を複数のモニターに表示する。
共同作業アプリケーション： 複数のユーザーが別々の画面で同時にコンテンツを操作できるようにする。

基本的に、Presentation APIは、Webアプリケーションが他の画面にコンテンツを「ブロードキャスト」することを可能にします。Chromecastのようなものですが、ブラウザに直接組み込まれ、あなたの制御下にあります。これは、制御側のWebページと、表示されるコンテンツをレンダリングする1つ以上の受信側Webページとの間の通信を容易にします。

主要な概念と用語

Presentation APIを扱うには、以下の概念を理解することが不可欠です：

プレゼンテーションコントローラー： プレゼンテーションを開始し、制御するWebページ。これは通常、ユーザーがアプリケーションと対話するプライマリスクリーンです。
プレゼンテーションレシーバー： セカンダリスクリーンに表示されるWebページ。このページはプレゼンテーションコントローラーからコンテンツを受け取り、レンダリングします。
プレゼンテーションリクエスト： 特定のURL（プレゼンテーションレシーバー）でプレゼンテーションを開始するための、プレゼンテーションコントローラーからのリクエスト。
プレゼンテーション接続： プレゼンテーションリクエストが成功した後に、プレゼンテーションコントローラーとプレゼンテーションレシーバーの間に確立される双方向通信チャネル。
プレゼンテーションの可用性： プレゼンテーションディスプレイが利用可能かどうかを示します。これはブラウザとオペレーティングシステムによって決定されます。

Presentation APIの仕組み：ステップバイステップガイド

Presentation APIを使用してマルチスクリーンプレゼンテーションを確立するプロセスには、いくつかのステップが含まれます：

プレゼンテーションコントローラー：可用性の検出： プレゼンテーションコントローラーは、まず `navigator.presentation.defaultRequest` オブジェクトを使用してプレゼンテーションディスプレイが利用可能かどうかを確認します。
プレゼンテーションコントローラー：プレゼンテーションのリクエスト： コントローラーは、プレゼンテーションレシーバーページのURLを指定して `navigator.presentation.defaultRequest.start()` を呼び出します。
ブラウザ：ユーザーへのプロンプト： ブラウザは、プレゼンテーション用のディスプレイを選択するようユーザーに促します。
プレゼンテーションレシーバー：ページの読み込み： ブラウザは、選択されたディスプレイでプレゼンテーションレシーバーページを読み込みます。
プレゼンテーションレシーバー：接続の確立： プレゼンテーションレシーバーページは、`PresentationConnection` オブジェクトを含む `PresentationConnectionAvailable` イベントを受け取ります。
プレゼンテーションコントローラー：接続の確立： プレゼンテーションコントローラーも、独自の `PresentationConnection` オブジェクトを持つ `PresentationConnectionAvailable` イベントを受け取ります。
通信： プレゼンテーションコントローラーとレシーバーは、`PresentationConnection` オブジェクトの `postMessage()` メソッドを使用して通信できるようになります。

実装の詳細：コード例

簡単なプレゼンテーションアプリケーションを実装するために必要なコードを見てみましょう。

プレゼンテーションコントローラー (sender.html)

このページでは、ユーザーがプレゼンテーションディスプレイを選択し、レシーバーにメッセージを送信できます。


<!DOCTYPE html>
<html>
<head>
  <title>Presentation Controller</title>
</head>
<body>
  <button id="startPresentation">Start Presentation</button>
  <input type="text" id="messageInput" placeholder="Enter message">
  <button id="sendMessage">Send Message</button>
  <div id="status"></div>
  <script>
    let connection = null;

    const startPresentationButton = document.getElementById('startPresentation');
    const messageInput = document.getElementById('messageInput');
    const sendMessageButton = document.getElementById('sendMessage');
    const statusDiv = document.getElementById('status');

    startPresentationButton.addEventListener('click', async () => {
      try {
        connection = await navigator.presentation.defaultRequest.start('receiver.html');
        statusDiv.textContent = 'Presentation started!';
        connection.onmessage = (event) => {
          statusDiv.textContent += '\nReceived from receiver: ' + event.data;
        };
        connection.onclose = () => {
          statusDiv.textContent = 'Presentation closed.';
          connection = null;
        };
      } catch (error) {
        statusDiv.textContent = 'Error starting presentation: ' + error;
      }
    });

    sendMessageButton.addEventListener('click', () => {
      if (connection) {
        const message = messageInput.value;
        connection.postMessage(message);
        statusDiv.textContent += '\nSent: ' + message;
        messageInput.value = '';
      } else {
        statusDiv.textContent = 'No presentation connection.';
      }
    });
  </script>
</body>
</html>

プレゼンテーションレシーバー (receiver.html)

このページは、プレゼンテーションコントローラーから受信したコンテンツを表示します。


<!DOCTYPE html>
<html>
<head>
  <title>Presentation Receiver</title>
</head>
<body>
  <div id="content">Waiting for content...</div>

  <script>
    navigator.presentation.receiver.connectionList.then(list => {
      list.connections.forEach(connection => {
        handleConnection(connection);
      });
      list.addEventListener('connectionavailable', event => {
        handleConnection(event.connection);
      });
    });

    function handleConnection(connection) {
      const contentDiv = document.getElementById('content');
      contentDiv.textContent = 'Connection established!';
      connection.onmessage = (event) => {
        contentDiv.textContent += '\nReceived: ' + event.data;
        connection.postMessage('Receiver received: ' + event.data);
      };
      connection.onclose = () => {
        contentDiv.textContent = 'Connection closed.';
      };
    }
  </script>
</body>
</html>

説明：

sender.html（プレゼンテーションコントローラー）は、`navigator.presentation.defaultRequest.start('receiver.html')` を使用してプレゼンテーションをリクエストします。その後、接続が確立されるのを待ち受け、メッセージを送信するためのボタンを提供します。
receiver.html（プレゼンテーションレシーバー）は、`navigator.presentation.receiver.connectionList` を使用して着信接続を待ち受けます。接続が確立されると、メッセージを待ち受けて表示します。また、返信メッセージも送信します。

プレゼンテーションの可用性の処理

プレゼンテーションを開始する前に、プレゼンテーションディスプレイの可用性を確認することが重要です。`navigator.presentation.defaultRequest.getAvailability()` メソッドを使用して、プレゼンテーションディスプレイが利用可能かどうかを判断できます。


navigator.presentation.defaultRequest.getAvailability()
  .then(availability => {
    if (availability.value) {
      console.log('Presentation displays are available.');
    } else {
      console.log('No presentation displays available.');
    }

    availability.addEventListener('change', () => {
      if (availability.value) {
        console.log('Presentation displays are now available.');
      } else {
        console.log('Presentation displays are no longer available.');
      }
    });
  })
  .catch(error => {
    console.error('Error getting presentation availability:', error);
  });

エラーハンドリングと堅牢性

他のWeb APIと同様に、適切なエラーハンドリングが不可欠です。以下にいくつかの考慮事項を示します：

例外のキャッチ： 潜在的なエラーを処理するために、Presentation APIの呼び出しを `try...catch` ブロックで囲みます。
接続切断の処理： `PresentationConnection` の `close` イベントをリッスンして、接続が失われたことを検出します。再接続するか、ユーザーエクスペリエンスを適切に低下させるメカニズムを実装します。
ユーザーへの通知： 問題を説明し、考えられる解決策を提案する、有益なエラーメッセージをユーザーに提供します。
グレースフルデグラデーション： ブラウザがPresentation APIをサポートしていない場合や、プレゼンテーションディスプレイが利用できない場合でも、マルチスクリーン機能が無効になっていても、アプリケーションが引き続き利用可能な体験を提供できるようにします。

セキュリティに関する考慮事項

Presentation APIには、ユーザーを保護し、悪意のある使用を防ぐためのセキュリティ機能が組み込まれています：

ユーザーの同意： ブラウザは常にユーザーにプレゼンテーション用のディスプレイを選択するように促し、ユーザーがプレゼンテーションを認識し、承認していることを保証します。
クロスオリジン制限： Presentation APIはクロスオリジンポリシーを尊重します。プレゼンテーションコントローラーとレシーバーは、同じオリジンから提供されるか、通信するためにCORS（Cross-Origin Resource Sharing）を使用する必要があります。
HTTPS要件： セキュリティ上の理由から、Presentation APIの使用は通常、セキュアなコンテキスト（HTTPS）に制限されています。

マルチスクリーン開発のベストプラクティス

魅力的で使いやすいマルチスクリーンアプリケーションを作成するには、次のベストプラクティスを考慮してください：

さまざまな画面サイズと解像度に対応した設計： プレゼンテーションレシーバーページが、さまざまなディスプレイサイズや解像度に適切に適応するようにします。レスポンシブデザイン技術を使用して、異なる画面間で一貫したユーザーエクスペリエンスを作成します。
パフォーマンスの最適化： 特に低帯域幅の接続でスムーズなパフォーマンスを確保するために、プレゼンテーションコントローラーとレシーバー間で転送されるデータ量を最小限に抑えます。データ圧縮技術の使用を検討してください。
明確な視覚的合図の提供： どの画面がプライマリスクリーンで、どれがセカンダリスクリーンであるかをユーザーに明確に示します。視覚的な合図を使用して、ユーザーの注意と操作を誘導します。
アクセシビリティの考慮： マルチスクリーンアプリケーションが障害を持つユーザーにもアクセス可能であることを確認します。画像に代替テキストを提供し、適切な色のコントラストを使用し、キーボードナビゲーションがサポートされていることを確認します。
さまざまなデバイスとブラウザでテストする： 互換性を確保し、潜在的な問題を特定するために、さまざまなデバイスとブラウザでアプリケーションを徹底的にテストします。Presentation APIは成熟してきましたが、ブラウザのサポートや実装の微妙な違いは依然として存在します。
ユーザージャーニーについて考える： 初期設定から切断までのユーザーエクスペリエンス全体を考慮します。明確な指示とフィードバックを提供して、プロセスを通じてユーザーをガイドします。

実世界の例とユースケース

Presentation APIは、革新的なWebアプリケーションのための幅広い可能性を開きます。以下にいくつかの例を示します：

インタラクティブホワイトボード： 大型のタッチスクリーンやプロジェクターに表示される共有キャンバス上で、複数のユーザーが共同作業できるWebベースのホワイトボードアプリケーション。
リモートコラボレーションツール： リモートチームが複数の画面でドキュメントやプレゼンテーションをリアルタイムで共有し、注釈を付けることができるツール。
会議・イベントアプリケーション： 会議やイベントで、中央のWebアプリケーションによって制御され、大型スクリーンに講演者情報、スケジュール、インタラクティブな投票などを表示する。
博物館・美術館の展示： 複数のスクリーンで来場者を引き付けるインタラクティブな展示を作成し、展示されている工芸品についてより深い洞察を提供する。メインスクリーンで工芸品を展示し、小さなスクリーンで追加の文脈やインタラクティブな要素を提供するようなものを想像してください。
教室での学習： 教師は指導用にプライマリスクリーンを使用し、生徒は個々のデバイスで補助的なコンテンツと対話する、これらすべてがPresentation APIを通じて調整される。

ブラウザのサポートと代替手段

Presentation APIは、主にGoogle ChromeやMicrosoft EdgeなどのChromiumベースのブラウザでサポートされています。他のブラウザでは、部分的なサポートまたはサポートがない場合があります。最新のブラウザ互換性情報については、MDN Web Docsを確認してください。

ネイティブのPresentation APIサポートがないブラウザをサポートする必要がある場合は、以下の代替手段を検討できます：

WebSockets： WebSocketsを使用してプレゼンテーションコントローラーとレシーバーの間に永続的な接続を確立し、通信プロトコルを手動で管理します。このアプローチはより多くのコーディングを必要としますが、より大きな柔軟性を提供します。
WebRTC： WebRTC (Web Real-Time Communication) はピアツーピア通信に使用でき、中央サーバーに依存せずにマルチスクリーンアプリケーションを作成できます。ただし、WebRTCはセットアップと管理がより複雑です。
サードパーティライブラリ： マルチスクリーン通信とプレゼンテーション管理のための抽象化を提供するJavaScriptライブラリやフレームワークを探求します。

マルチスクリーンWeb開発の未来

フロントエンド Presentation APIは、より豊かで魅力的なマルチスクリーンWeb体験を可能にするための重要な一歩を表しています。ブラウザのサポートが拡大し続け、開発者がその潜在能力を最大限に探求するにつれて、複数のディスプレイの力を活用したさらに革新的なアプリケーションが登場することが期待されます。

結論

Presentation APIは、Web開発者がシームレスで魅力的なマルチスクリーン体験を作成することを可能にし、プレゼンテーション、コラボレーション、デジタルサイネージなどの新たな可能性を切り開きます。このガイドで概説したコアコンセプト、実装の詳細、ベストプラクティスを理解することで、Presentation APIを活用して、単一の画面の制約を超えた革新的なWebアプリケーションを構築できます。この技術を受け入れ、マルチスクリーンWeb開発の可能性を解き放ちましょう！

提供されたコード例を試したり、さまざまなユースケースを探求したりして、Presentation APIへの理解を深めることを検討してください。アプリケーションの互換性を維持し、マルチスクリーンWeb開発の最新の進歩を活用するために、ブラウザの更新や新機能について常に情報を入手してください。