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

2014/05/102014/05/13DevelopmentJavaScript,Twitter

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

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

暮井慧ボイス

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

1. 必要なカード属性
2. カード属性の検証 Card Validator
3. プレイヤーの作成
4. 許可の申請
5. オプションのカード属性

必要なカード属性

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&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 を使って、ツイートされたときの見た目を検証できます。

「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 の種類などにも注意しておかないときちんと表示されず審査が通りません。

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

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 を利用する方法に変えました。