Playerカード

English | 日本語

Twitterプラットフォームには、ビデオクリップやオーディオストリームを再生する特別な場所があります。それがPlayerカードです。Twitterルールに従ってウェブサイトにいくつかのHTMLメタタグを実装することで、世界中のユーザーにリッチメディアを提供できます。

  1. Playerカードの例
  2. スタートガイド
  3. カードのテスト
    1. ウェブから
    2. iPhoneから
    3. Androidから
  4. カードを送信して申請する
  5. 申請時のポイント
  6. プラットフォームによるPlayerカードの動作の違い
    1. iPhoneとAndroid (およびその他のネイティブモバイルアプリ)
    2. twitter.com (デスクトップブラウザから)
    3. mobile.twitter.comとその他のクライアント
  7. アプリのダウンロードとディープリンク設定
  8. 参考情報
  9. その他の情報

Playerカードの例

以下に、Playerカードを使用した効果的なエクスペリエンスの例を2つ紹介します。

Sometimes I think my days can’t get any more rediculous until today. https://t.co/x8HoullQMT

— Gareth Paul Jones (@gpj) December 18, 2013

#SCOTD is Stockholm, Sweden-based Daniel Rosenholm, aka @dubiousquip who creates a blend of blues, soul and pop. https://t.co/sVchJg3EgU

— SoundCloud (@SoundCloud) April 24, 2014

スタートガイド

Playerカードの作成を簡単に始められるように、Twitterカードスターターキットをご用意しています。このキットには、サンプルコードと詳細な手順が記載されたReadmeファイルが含まれています。基本的な手順は次のとおりです。

  1. コンテンツを解凍して、外部からアクセス可能なウェブサイト上のパスに保存
  2. index.htmlファイルを開いて、twitter:imagetwitter:player、およびtwitter:player:streamの値にお使いのサーバーおよびファイルの場所を指定
  3. すべてのパスが安全に指定されていることを確認 (https://)
  4. URLをテスト (「カードのテスト」セクションを参照)

Card Validatorを使用するとカードのエクスペリエンスをシミュレーションすることができますが、Playerカードの実際の表示とまったく同じではありません (特に、twitter:player:streamを指定せずにtwitter:playerだけを指定した場合、画像は表示されますが再生はできません)。この問題については現在対応中です。Card Validatorでは、基本的な構成が機能するかどうかを確認できます。

カードのテスト

エクスペリエンスの作成に役立つように、さまざまなプラットフォームでエクスペリエンスをテストする手順をご紹介します。

ウェブから

ブラウザに twitter:player のURLを入力します。右のイメージでは、動画の再生はまだ始まっておらず、画面全体に画像が表示され、ブラウザの鍵マーク (左上) がそのまま表示されています。混在コンテンツが警告されている (鍵マークの上に赤い “X” のアイコンがある) 場合は承認されませんので注意してください。   image2
右のイメージは、動画の再生が開始されたところです。   image3

iPhoneから

iPhoneのブラウザに twitter:player のURLを入力します (埋め込みの場合は twitter:player を使用し、
twitter:player:stream

は使用しません)。右のイメージでは、動画の再生はまだ始まっておらず、画像が全画面表示され、ブラウザの鍵マーク (左上) がそのまま表示されています。前述のとおり、混在コンテンツが警告されている場合は承認されません。

  image6
右のイメージは、動画の再生が開始されたところです。   image7

Androidから

iPhoneの手順と同様に、Androidのブラウザにtwitter:playerのURLを入力します。 (埋め込みの場合は``twitter:player``を使用し、twitter:player:streamは使用しません。) 動画が開かれますが、再生はまだ始まっておらず、画像が全画面表示され、ブラウザの鍵マーク (左上) がそのまま表示されています。前述のとおり、混在コンテンツが警告されている場合は承認されません。

カードを送信して申請する

Twitterでは、Twitterのすべてのプラットフォームですべてのユーザーに安全で一貫したエクスペリエンスを提供できるように、コンテンツの承認を行っています。この承認プロセスには、さまざまなプラットフォームでのエクスペリエンスのテストと定期的な再認証が含まれます。

Card ValidatorでPlayerカードをテストしたら、同じくCard Validatorを使用してカードを送信し、承認を受けます。手順はとても簡単です。

  1. Card Validatorに移動
  2. [Validate & Apply] タブをクリック
  3. URLを入力して [Go!] をクリック
  4. メタタグがすべて正しく入力されていれば、[Submit for Approval] をクリック
  5. Twitterチームからの連絡を受け取るメールアドレスなどの情報をフォームに入力

カードを送信する前に、送信するコンテンツがスターターキットに含まれていたものではなく、自分で作成したコンテンツであることを確認してください。

Playerカードの承認には最大で1週間かかります。承認チームからの連絡を見逃さないように、メールを頻繁に確認してください (迷惑メールフォルダも確認してください)。

申請時のポイント

Twitterでは、Twitterプラットフォームでコンテンツを作成する際のさまざまなポリシーを網羅したTwitterルールを公開しています。以下の注意事項は、Playerカードの作成に関する要件をより具体的に示したものです。

すべきこと

  • iPhoneとAndroidのTwitterアプリ、twitter.com、mobile.twitter.comなどのすべてのTwitterクライアントでエクスペリエンスをテストしてください。これらすべてのTwitterクライアントで動作しないカードは承認されません。
  • (twitter:player:streamで参照される) iframe内に表示するHTMLページを作成します。この時、すべてのクライアントで動画コンテンツが表示エリアの横幅いっぱいに表示されるようにしてください。
  • iframeやストリームを含むメタタグ内のすべての要素にHTTPSを使用してください。
  • 動画コンテンツとオーディオコンテンツに関する注意
    1. コンテンツが自動的に再生される動画では、初期設定を “消音” にする
    2. 長さが10秒を超えるコンテンツは自動的再生されないようにする
    3. 停止、一時停止、再生ボタンを設置する
  • 不適切な内容を含むメディアが再生される可能性があるかどうかを判断して、適切に設定してください。

してはならないこと

  • Twitterルールおよび商標およびコンテンツの表示ガイドラインに違反しないでください。以下は、Twitterプラットフォームの基本原則です。
    1. ユーザーを驚かさない
    2. スパムを作成または配布しない
    3. プライバシーを尊重する
    4. Twitterのよきパートナーとなる
  • 本来の目的以外にカードを使用しないでください。Playerカードは音声および動画の再生のみを目的としています。
  • メディアの再生にあたってユーザーのログインを要求しないでください。
  • 動画プレーヤーまたはオーディオプレーヤーの外側に、インタラクティブな要素を追加しないでください (バナーや標準以外のボタンなど)。
  • Playerカードのコンテンツと関係のないエンドツーエンドのインタラクティブな要素 (購入、ゲーム、投票、メッセージ機能、データ入力など) を、動画プレーヤーまたはオーディオプレーヤー内に作成しないでください。代わりに、インタラクティブな機能を持つ他の種類のカードを使用したり、Playerカードにウェブサイトやモバイルアプリケーションへのリンクを追加するなどしてください。
  • 音声または動画のロードや再生時に、ブラウザに混在コンテンツの警告が表示されないようにしてください。詳細については、「トラブルシューティングガイド」をご覧ください。

プラットフォームによるPlayerカードの動作の違い

プラットフォームの機能の違いにより、クライアントごとにPlayerカードの動作が若干異なります。以下に、各プラットフォームの動作を簡単に紹介します。

iPhoneとAndroid (およびその他のネイティブモバイルアプリ)

iPhoneとAndroidのTwitterネイティブアプリでPlayerカードを表示すると、まずメディアの画像プレビュー (twitter:image で指定したもの) と、その上に再生アイコンが表示されます。再生アイコンをタップすると、次の動作が発生します。

  • twitter:player:streamを指定して、twitter:player:stream:content_typeを “video/mp4” に設定している場合、ストリームURLがアプリから直接再生されます。
  • twitter:player:streamを指定していない場合は、twitter:playerで指定したURLが既定のブラウザで開かれます。

前述のとおり、MP4ファイルを指定して、twitter:player:stream:content_typeを “video/mp4” にすると、モバイルアプリケーション内で直接動画を再生できます。詳細は、「参考情報」のセクションをご覧ください。

twitter.com (デスクトップブラウザから)

Playerカード付きのツイートをデスクトップで表示すると、タイムライン上でツイートを詳細表示した場合に、twitter:playerで指定したURLがiframe内で再生されます。 (ユーザーのプロフィールに固定されているツイートや、ツイートの固定リンクページでは自動的に再生されます。)

iframeの幅が435ピクセルよりも広い場合は、iframeプレーヤーのサイズが元の縦横比を保ったまま、最大幅435ピクセルに変更されます。

mobile.twitter.comとその他のクライアント

mobile.twitter.comとその他のクライアントでは、画像プレビューが表示され、プラットフォームの既定のウェブブラウザで、ユーザーのツイート内のURLに直接リンクされます。

アプリのダウンロードとディープリンク設定

コンテンツをより魅力的な方法で表示するだけでなく、Summaryカードはモバイルアプリケーションのダウンロードを促進したり、モバイルアプリケーションに直接リンクさせることもできます。詳細は、「モバイル開発者向けカード」をご覧ください。

また、このカードからモバイルアプリにディープリンクする方法もこちらで学べます。

参考情報

カードプロパティ 必須
twitter:card

“player” に設定する必要があります。

はい
twitter:title

カードに表示するコンテンツのタイトル

はい
twitter:description

コンテンツの説明 (200文字以内)

はい
twitter:player

iframeプレーヤーのHTTPS URL。このURLはHTTPS URLでなければなりません。それ以外を指定すると、ウェブブラウザに混在コンテンツの警告が表示されます。

はい
twitter:player:width

twitter:playerで指定したiframeの幅をピクセルで指定します。

はい
twitter:player:height

twitter:playerで指定したiframeの高さをピクセルで指定します。

はい
twitter:image

iframeやインラインプレーヤーをサポートしていないプラットフォームのプレーヤーに表示される画像。この画像はプレーヤーと同じサイズにしてください。262×262や350×196 (16:9) など、68,600ピクセル未満の画像を指定するとPlayerカードが作成されません。画像のサイズは1MB未満にしてください。

はい
など、68,600ピクセル未満の画像を指定するとPlayerカードが作成されません。画像のサイズは1MB未満にしてください。 | |
twitter:player:stream:content_type

twitter:player:streamに含まれるコンテンツのMIME type/subtypeを指定します。形式はRFC 6381の仕様に従います。現在サポートされているcontent_typeの値は、RFC 4337 (MP4用MIMEタイプの登録) に定義されている値です。

ストリームを提供する場合は必須