Voicy Tech Blog

Voicy公式Techブログ

Twitterがしゃべる!?Playerカードの作成方法

こんにちは!Voicy CTOの窪田です。

先日Voicyのサイトにチャンネル紹介のページが追加されました! 公式チャンネルや人気のパーソナリティをピックアップして掲載しているのですが、それぞれのページをTwitterでシェアすると、なんとタイムライン上で音声を聴くことができます!

例えばこちらのVoicy公式チャンネルのURLをTwitterでつぶやくと
https://voicy.jp/channel/voicy.html

このように表示されます。

f:id:voice-tech:20170504190928p:plain

そしてツイートをクリックすると再生画面が展開されて、Twitterのタイムライン上で音声を聴くことができます!

f:id:voice-tech:20170504190933p:plain

そこで、今回はこの再生機能の作成方法ついてお話しさせていただきます。

Playerカードについて

タイムライン上での再生機能は、Twitterが提供しているPlayerカードというものを使用しています。正確にはTwitterカードで選べるカードタイプのうちの1つがPlayerカードです。表示される再生画面はHTMLで自作するので、デザインはかなり自由に作ることができ、もちろん音声に限らず動画も再生可能です。

Twitterカード自体は誰でもすぐに使用できるのですが、Playerカードだけはドメインの利用申請が必要になります。また、HTTPSでアクセスできるWebサーバーも必要です。

Playerカードは以下の手順で作成していきます。公式マニュアルも合わせてお読みください。

  1. 再生画面をHTMLで作成
  2. 再生画面をHTTPSでアクセスできるように配置
  3. シェアされるページに専用のMETAタグを設定
  4. シェアされるページのドメインTwitterに申請
  5. Card Validatorで動作確認

Playerカード作成手順

1. 再生画面をHTMLで作成

再生画面を作成する際の注意点が公式マニュアルの"申請時のポイント"に載っているので、それさえ守れば自由にデザインや機能を実装できます。

後から変更することもできるので、Voicyではまず最小限の機能だけを半日くらいで開発して申請を行い、その後正式版として作り直しました。申請時には特に以下の内容を意識して開発しました。

  • iPhoneAndroidTwitterアプリ、twitter.com、mobile.twitter.comなどのすべてのTwitterクライアントでエクスペリエンスをテストしてください。これらすべてのTwitterクライアントで動作しないカードは承認されません。
  • すべてのクライアントで動画コンテンツが表示エリアの横幅いっぱいに表示されるようにしてください。
  • 動画コンテンツとオーディオコンテンツに関する注意
    1. コンテンツが自動的に再生される動画では、初期設定を “消音” にする
    2. 長さが10秒を超えるコンテンツは自動的再生されないようにする
    3. 停止、一時停止、再生ボタンを設置する

2. 再生画面をHTTPSでアクセスできるように配置

再生画面はHTTPSでアクセスできる必要があります。実はVoicyのサイトはこれまでHTTPSに対応していなかったのですが、これを機にサイト全体をHTTPS化しました。

3. シェアされるページに専用のMETAタグを設定

Playerカードを使用するために、シェアされるページのMETAタグで再生画面に関する情報を指定します。この設定が必要なのはシェアされるページであって、再生画面のHTMLではないのでご注意ください。

さきほどのVoicy公式チャンネルページでは以下のように指定しています。

<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="Voicy - Voicy公式チャンネル" />
<meta name="twitter:description" content="毎朝月曜から土曜まで、新鮮なニュースをお伝えするVoicy公式チャンネル。 これさえ聞けば日々の主要ニュースは網羅できるはず。通勤・通学のお供におすすめです。" />
<meta name="twitter:image" content="https://voicy.jp/tw/img/thumb/voicy.png" />
<meta name="twitter:site" content="@voicy_jp" />
<meta name="twitter:player" content="https://voicy.jp/tw/#voicy" />
<meta name="twitter:player:width" content="320" />
<meta name="twitter:player:height" content="450" />
プロパティ 必須 説明
twitter:card 必須 Playerカードを使用する場合は"player"固定です。
twitter:title 必須 タイムラインに表示されるサイトのタイトルです。
twitter:description 必須 タイムラインに表示されるサイトのタイトルです。
twitter:image 必須 タイムラインに表示されるサムネイル画像です。iframe未対応のブラウだでは再生画面の代わりに表示されます。
twitter:site 任意 TwitterのIDです。"twitter:site"もしくは"twitter:site:id"のどちらかが必須です。
twitter:player 必須 再生画面のURLです。HTTPSで指定する必要があります。
twitter:player:width 必須 再生画面の横幅です。
twitter:player:height 必須 再生画面の縦幅です。

プロパティに指定できる値はこの他にもあります。詳細は公式マニュアルをご覧いただきたいのですが、日本語ページと英語ページで説明が異なる部分もあるので、実際に作って動作確認することをオススメします。

4. シェアされるページのドメインTwitterに申請

公式マニュアルでは、「Playerカードを申請する」とあるので、新しいPlayerカードを作成したらその度に申請が必要なのかと思いましたが、実際はドメイン毎の承認になるので、一度承認されれば以降の申請は必要なさそうです。

マニュアルではCard Validatorで動作確認をしてから申請するように書いてあるのですが、Playerカードの場合はドメインの承認前はエラーとなってしまい動作確認ができません。

申請前の画面

f:id:voice-tech:20170504190942p:plain

そのため、多分大丈夫だろうという見込みで申請を行いました(笑) エラー画面に表示されているRequestApprovalのボタンを押して必要事項を入力します。

申請画面

f:id:voice-tech:20170504190938p:plain

Descriptionには簡単なサイトの説明を英語で入力します。"Mark my cards ~“のチェックボックスは基本的にチェック不要です。もしsensitive contentを扱うのであればチェックしてください。その他はデフォルトで入力されていました。

申請が完了するとエラーメッセージが変わります。

f:id:voice-tech:20170504190946p:plain

申請した翌日には承認され、以下のメールが送られてきました。

f:id:voice-tech:20170504191226p:plain

5. Card validatorで動作確認

無事承認されるとCard Validatorで確認することができます。

f:id:voice-tech:20170504190950p:plain

Audioカードについて

今回紹介したPlayerカードの他にも、TwitterにはAudioカードという似たような名前のものがあります。

Audioカードの方がPlayerカードよりもリッチな表現ができるようなのですが、残念ながらこれを使用するにはTwitterと企業提携を行う必要があるそうです。もしTwitterの方がいらしたらぜひ連絡ください(笑)

現在は@SoundCloudのアカウントがよくAudioカードを使用しています。スマホのアプリで見るとわかるのですが、PlayerカードだとWebViewが立ち上がって再生画面が表示されるのに対し、Audioカードではポップアップで表示されるので、ユーザー体験を考えるとAudioカードの方が良いと思います。

終わりに

現在は動画全盛期なので、動画のシェア方法は充実しているのですが、音声や音楽といった音だけのコンテンツに関しては十分とは言えません。Facebookでもタイムライン上で動画を流すことはできますが、音声だけとなると簡単にはできないのが現状です。(Music Storiesというサービスがあるのですが、新規の募集は受け付けていないそうです。。。)

それはさておき、今回のサイトリニューアルで、これまでアプリでしか聴けなかった音声を(一部ですが)ブラウザや、Twitter上でも聴けるようになりました!Voicyでは今後もあらゆる手段で声をお届けできるよう、新しいことへ積極的にチャレンジしていきます!

Voicyのメンバーがどういった思いでサービスを作っているのか、ぜひともこちらのインタビューも合わせてお読みください!