Whizzo Blog

Web制作やコンテンツ制作、イベントなどについての Whizzo Production のブログです。

Twitterカードの再生プレイヤーで動画や音声を表示

今回は、Movable Type Advent Calendar 2022 の12日目の記事です。

今年もアドベントカレンダーの時期になってしまいましたね。今回は何を書こうかかなり迷いました。日常的にMovable Typeは使っていますが、自分はプロデューサー・ディレクターの立場。何か作ったりなどできていないのでどうしようかと。

2018年、2019年にはプライベートで配信している「ポッドキャスト」について、その配信システムをMovable Typeで作ってるのでその紹介をしました。このところ音声配信が再注目されて、ポッドキャストに興味を持ってくれる方も増えてきましたので、今回も「ポッドキャスト」に関連して書いてみます。

2019年の記事でも少し触れていましたが、ポッドキャストをTwitterでシェアした時に、Twitter上で再生できるようにTwitterカードを設定しているので、その部分をもう少し詳しく書いてみます。

プラグイン化などは出来ていないですが、ディレクターレベルの知識でも、テンプレートを追加するだけで対応できるのが助かります。

Twitterカードの仕様

ポッドキャストでは、音声ファイルを作成して更新情報をRSSで記述します。Movable Typeでの更新の仕方については、2019年の記事を参照ください。

TwitterカードとはTwitter用のOGP(Open Graph protocol)設定になります。ポッドキャストを更新すると記事ページが作成されますが、この記事ページのURLをTwitterにシェアした際に、Twitterで表示される情報をTwitterカードでしています。

Twitterカードのドキュメントはこちら。
About Twitter Cards | Docs | Twitter Developer Platform(英語)

Twitterカードは、次の4種類となります。

  • Summary Card: タイトル、概要文、サムネイルを表示
  • Summary Card with Large Image: サマリーカードに似てますが、画像を大きく目立たせます
  • App Card: モバイルアプリの直接のダウンロードを促します
  • Player Card: 動画や音声を表示させます

ここでは、最後のプレイヤーカードを使います。動画や音声などのメディアを再生するプレイヤーを表示するというものです。 プレイヤーカードのサンプルが用意されていますので、これに倣って作成します。

表示例:

「twitter:image」で指定した画像がサムネイルで表示され、サムネイルをクリックするとサイトに遷移します。同じ投稿をTwitterサイトで表示し、サムネイルをクリックすると、下図のようなプレイヤーが表示されます。

このプレイヤーの画面も自由にアレンジできます。サンプルの「container.html」が表示内容にあたり、iFrameで読み込んでいるという仕組みです。
ポッドキャストプラットフォームやメールフォームへのリンクを置くなども可能です。


<meta name="twitter:card" content="player" />
<meta name="twitter:title" content="<mt:ContentField content_field="タイトル"><mt:ContentFieldValue encode_html ="1"></mt:ContentField>" />
<meta name="twitter:player" content="<$mt:ContentPermalink replace="/podcast/","/podcast/twitter_card/"$>" />
<meta name="twitter:player:width" content="500" />
<meta name="twitter:player:height" content="300" />
<meta name="twitter:image" content="<mt:ContentField content_field="サムネイル画像"><$mt:AssetThumbnailURL height="262" square="1"$><mt:Else><mt:ContentField content_field="アートワーク"><$mt:AssetThumbnailURL height="262" square="1"$></mt:ContentField></mt:ContentField>" />
<meta name="twitter:site" content="@pot_au_feu" />

「twitter:card」をplayerにし、iframeで読み込むページのURLを「twitter:player」で指定します。

詳細ページのURLに、「/twitter_card/」 を途中に追加したものをiframeで読み込むURLとしてルール付けし、URLをreplaceで置き換えています。iframeの幅と高さは500×300に固定しています。

「twitter:image」は、コンテンツデータのサムネイル画像またはアートワークを取得しています。
最後に「twitter:site」へTwitrerのユーザーネームを設定しています。
すべて必須項目になります。

ページのheadタグ内に、このように記述することで、動画や音声をTwitter上で再生できるようになります。

Apple Podcastsへのリンク

もう1つおまけ。

iOS版のSafariでページを開いた時、iOSアプリへの誘導のように、Apple Podcastsの番組ページへ誘導するバナーをページ上部に表示することができます。

これはSmart App Bannersと呼ぶもので、通常は、iOSアプリへのリンクを表示するものですが、Apple Podcastsの番組ページにも利用できます。

まず、Apple Podcastsの番組ページを開いてID番号をコピーします。
番組ページのURLに「id+数字」で記載した部分を探します。この数字の部分がID番号です。

ページのHTML内のhead部分に下記のように記述します。


<meta name="apple-itunes-app" content="app-id=(ID番号)" />

この1行を追加するだけです。ぜひお試しください。

Ranking

Archives