このトピックでは、JavaScript から Media API のクエリを行うための基本的な手順を示します。このトピックの読者は、プログラミング言語の JavaScript に習熟しており、ブラウザが JavaScript で HTTP 要求をする際に抵触する、クロスドメインに関するセキュリティの制約について理解していることを前提としています。続きを読む前に、以下のトピックも確認してください。
JavaScript による Media API へのアクセスには、いくつかの重要な欠点やリスクがあります。その中でも重要なのは、トークンのセキュリティです。トークンへアクセスしたハッカーによって、知らないうちにコンテンツのライブラリへアクセスされたり、場合によってはコンテンツを再生されたりする可能性があります。JavaScript では、トークンは JavaScript ソース内のプレーン テキストとして記述されているため、格好の標的です。サーバーサイドを利用することにより、セキュリティのレベルを高めることができます。詳細については、このトークン セキュリティのベスト プラクティスについてのトピックを参照してください。
クロスドメイン セキュリティについて考慮することも重要です。ブラウザのクロスドメイン セキュリティに関するポリシが、AJAX アプリケーションの実装を困難にしています。このセクションのサンプルでは、動的スクリプト タグのテクニックを用います。後で詳細を説明します。
最後に、JavaScript で要求を行うと、ページにメタデータを埋め込むことができるという Media API による SEO のメリットを生かせなくなります。検索エンジンのクローラは JavaScript のコードを実行しません。詳細については、このMedia API による SEO のベスト プラクティスについてのトピックを参照してください。
Media API は、PHP、Java、ColdFusion などのサーバーサイド言語で使用することをおすすめします。
Media API へクロスドメイン HTTP 要求を行うのに、もっとも簡単なのは、動的スクリプト タグを用いる方法です。スクリプト タグの src 属性はブラウザによるドメインチェックを受けないため、src に別のサーバーの URL を設定することにより、クロスドメインの通信を効果的に許可できます。ただし、src を要求したときにサーバーから返されるのは、有効な JavaScript である必要があります。Media API では、「callback」パラメータを指定できます。こうすると、callback パラメータの値を名前とする関数の呼び出しで、JSON の応答がラップされます。次に例を示します。
// 次のような要求を行う: http://api.brightcove.co.jp/services/library?queryparams&callback=response // 次のような応答が返される: // response(... json data ...); // // これが、コードで定義済みの関数 “response” を呼び出す
この手法で要求を行う際にもっとも難しいのは、呼び出しの構文作成です。また、応答が JavaScript のネイティブ オブジェクトとして返されるため、応答の処理においてもっとも難しいのは、結果のパースと、サイトのデザイン要件に従ってそれを表示する部分です。Media Read API 呼び出しの構文は以下のようになります。
<URL>?command=<method_name>&<arguments>=<values>&token=<API_token>
すべての Brightcove Media 読み込み API 呼び出しの URL は http://api.brightcove.co.jp/services/library です。すべての Brightcove Media 書き込み API 呼び出しの URL は http://api.brightcove.co.jp/services/post. です。
以下のトピックでは、基本的な例を紹介しています。