今回は、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種類となります。
ここでは、最後のプレイヤーカードを使います。動画や音声などのメディアを再生するプレイヤーを表示するというものです。
プレイヤーカードのサンプルが用意されていますので、これに倣って作成します。
表示例:
「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行を追加するだけです。ぜひお試しください。