Twitter Cards の Player Card に対応したサイトの作成

2014/05/13DevelopmentJavaScript,Twitter

Twitter Cards は、Web や公式クライアントで URL を含むツイートを表示したとき、ツイート内にそのサイトのコンテンツを表示できる仕組みです。

player-card1

暮井 慧 ボイス (pronama.jp/voice) を、Player Card というツイート内で動画や音声を再生できる Twitter Cards に対応しました。暮井 慧 ボイスは、暮井 慧 のボイスを再生できるオーディオコンテンツで、気軽に Twitter で共有もできます。

コードは jz5/KureiKeiVoice に置いてます。

必要なカード属性

Twitter Cards の対応は、サイト内に指定の meta タグを挿入すれば OK です。Twitter 社の審査もあります。


<meta name="twitter:card" content="player">
<meta name="twitter:site" content="pronama">
<meta name="twitter:title" content="暮井 慧 ボイス">
<meta name="twitter:image:src" content="https://pronama.azurewebsites.net/voice/img/img0.png">
<meta name="twitter:player" content="https://pronama.azurewebsites.net/voice/player.php/?no=A015&amp;fc=0">
<meta name="twitter:player:height" content="350">
<meta name="twitter:player:width" content="350">

view raw

gistfile1.html

hosted with ❤ by GitHub

Player Cards に必要なカード属性は次の通りです。

カード属性 説明
twitter:card 「player」を指定
twitter:title タイトル
twitter:player iframe 内で動作させるメディアプレイヤー
twitter:player:width iframe の幅
twitter:player:height iframe の高さ
twitter:image プレイヤーの代替表示用の画像 URL

twitter:description が必須と Player Card の説明ページには書いてありますが不要です。

カード属性の検証 Card Validator

開発者サイトの Card Validator を使って、ツイートされたときの見た目を検証できます。

card-validator

「Try Cards」タブからカード属性を入力してツイートの見た目を検証したり、「Validate & Apply」タブから実際のサイトの URL を指定して条件を満たしているか検証でき、満たしている場合 審査の申請ボタン(Request Approval ボタン)が表示されます。

プレイヤーの作成

Player Card の場合、meta タグによるカード属性の指定だけでなく、動画や音声を再生するプレイヤーページを用意する必要があります。Player Card も見てどんな要件が必要か確認してくださいね。

暮井 慧 ボイスの場合は、暮井 慧のイラストの表示と下段にプレイヤーの操作 UI を表示しました。メディアの再生は JavaScript ライブラリの MediaElement.js を利用しました。

ちなみに、プレイヤーは Card Validator では表示・検証できません。

HTTPS 上で動作

プレイヤーは HTTPS 上で提供する必要があります。

  • ツイートした URL のドメインと違う URL でも OK
    • 暮井 慧ボイスは、https://pronama.jp/voice 上のコンテンツだけどプレイヤーは https://pronama.jp に置いてます
  • JavaScript なども HTTPS 上で提供しブラウザーの警告が表示されないようにする
    • 警告が出ないものは HTTP でも審査通りました

画面サイズ

ページ内全体でプレイヤーを構成します。ヘッダーやフッターなどは不要ということですね。

twitter:player:width と twitter:player:height でプレイヤーの大きさを指定しましたが、この比率で表示されることがあるだけで、縦長・横長、大きいサイズ・小さいサイズに対応する必要があります。

特に Android や iPhone ブラウザーでは、ツイート内に iframe で表示されず、プレイヤーのみ全画面表示され、縦長になったりします。また、使える CSS の種類などにも注意しておかないときちんと表示されず審査が通りません。

一度、これが原因で審査落ちしました。

Screen Shot 2014-05-08 at 10.54.53 AM

Your card works well on desktop, iPhone and Android, but there are display issues on Android that is cutting off the top of your image (screenshot attached). Please adjust this.

CSS の background-size を利用してイラストの全画面表示をしてたのですが無理っぽいので、jQuery の画像を全画面表示するライブラリ MaxImage を利用する方法に変えました。

プレイヤー画像

twitter:image に指定する画像を用意します。ツイート一覧でプレイヤーっぽく表示されます。

player-card2

twitter:player:width と twitter:player:height も関連し、小さいサイズだと使われることがないようです。

68,600ピクセル(262×262の正方形の画像、または350×196の16:9画像)より小さい画像の場合、Playerカードは表示されません。画像のサイズは1MBを超えてはいけません。

表示されない小さいサイズでも審査は通りました。暮井 慧 ボイスは、審査後に表示されないことに気づいて大きいサイズに今は変えています。

許可の申請

Card Validator の Request Approval ボタンから行います(条件を満たすと表示されます)。3回申請しましたが、いずれも1日程度で結果がきました。

申請時に管理者情報とサイト情報を記入します。

  • 管理者情報
    • 名前
    • メールアドレス(結果が返ってきます)
    • Twitter アカウント
  • サイト情報
    • Web サイトドメイン
    • Web サイトの説明
    • センシティブなコンテンツを含むかどうか
    • Web サイトの Twitter アカウント

request-approval1

request-approval2

後は、結果を待つだけです!

オプションのカード属性

必須項目だけ説明しましたが、必須ではないオプションのカード属性もあります。Player Card の場合、直接 mp4 を指定することもできます。詳しくは、開発者サイトを見てください。

DevelopmentJavaScript,Twitter

Posted by jz5