Whizzo Blog

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

ポッドキャストをMovable Typeで配信

  •  (2020.12.10更新)

Movable Type Advent Calendar 2019 の9日目の記事です。

Advent Calendarを書くにあたって、慌てて放置ぎみだったサイトのSSL化を行いました。SSL化というか、MovableType.netに移行しました。しかし、テンプレートをタグで振り分けてたのでちょっと苦労しました。.netでタグがないので。

昨年、MT7でポッドキャストの汎用的なテーマを作成中という記事を書いたのですが、なんだかんだ時間がかかって、しかも反応もあまりなく挫けてしまいまして、完成してません。

代わりに、自分のポッドキャストのリニューアルに使ってしまったので、今回はその話です。

自前のCMSでのポッドキャスト配信

ポッドキャストを配信するには、ホスティングサービスもあるのですが、自前でサーバー立ててポッドキャストを配信しようと思うと、ほとんどWordPressの情報が出てきます。

Seriously Simple Podcastingとか、Blubrry PowerPressとかのプラグインを使うのが多いのかな。

自分はMovable TypeでエムロジックさんのEasyPodcastingプラグインと、サイトがなくなってしまいましたが、mt-enclosureプラグインというものを組み合わせて作っていました。

相談されて、Blubrry PowerPressの設定などを見たりはしてるんですが、分かりづらい。そして、メンドクサイ。それに、そもそもWordPressが苦手。

ということで、リニューアルもMovable Type、MT6から7にバージョンアップしつつ、ポッドキャスト用に組んでいきました。今回はプラグインは使わずに作っていきます。

以前は、ブログ記事とポッドキャストと一緒になってごちゃっとしてたので、ブログ記事は記事にして、ポッドキャストはコンテンツタイプで作りましょうと。

ポッドキャストのRSSをコンテンツタイプで吐き出す

ポッドキャストの要件としては、ポッドキャスト用のRSSを出力することです。

AppleのポッドキャストのRSSガイドやフィードサンプル、GoogleのRSSフィードの要件などを参照してRSSを吐き出します。ちなみにAppleのフィードサンプルではうまく表示されないアプリもあるので、実機検証も大事です。

フィードには、ポッドキャスト全体の情報と、エピソード毎の情報が必要で、そのほかにサイトでの表示の仕方などもコンテンツタイプで作ろうかと。

Movable Typeはつくづく、静的ファイルジェネレーターとして使いやすいなと。ポッドキャスト用のRSS、ブログ用のRSS、それぞれのインデックスページ、それぞれの検索用のJSONなど、好きにファイル作れます。ポッドキャストはRSSが吐き出され、音声ファイルが置いてあればそれで配信ができるので、プラグインなど不要です。

実際のテンプレートと、工夫した点などを紹介します。

番組全体の情報

単純にRSSに記述したい内容をコンテンツタイプで作っていきます。RSSの仕様に沿ってコンテンツフィールドを用意。

カテゴリについては、Apple Podcast のカテゴリに沿うため、カテゴリセットを用意しました。カテゴリセット、夏ぐらいにAppleが変更したので、それに合わせて修正もしました。

カテゴリ、110とかありました。自分用なら決め打ちで良かったんですが、昨年作っちゃったんで、流用。

その他の情報も用意します。ポッドキャストを引っ越したときや終了したときのチェックも、自分用だけなら不要ですが、一応用意してしまってます。

これらを元にRSSを作成。

RSSに合わせてコンテンツフィールドの内容を呼びだずだけですが、カテゴリのところはちょっと工夫が必要。カテゴリフィールドのカテゴリにセットした、CategoryBasenameを呼び出しますが、このCategoryBasenameに半角空白を含めることができません。けど、Appleのカテゴリには半角空白と&が入ったものがある。なので、その部分はアンダースコアにしておいて、Replaceしています。

<mt:ContentField content_field="カテゴリ">
<mt:HasNoParentCategory><itunes:category text="<mt:CategoryBasename  replace="___"," &amp; "  replace="_"," ">" /></mt:HasNoParentCategory>
<mt:HasParentCategory>
<itunes:category text="<mt:ParentCategory><mt:CategoryBasename  replace="___"," &amp; "  replace="_"," "></mt:ParentCategory>">
    <itunes:category text="<mt:CategoryBasename  replace="___"," &amp; "  replace="_"," ">" />
</itunes:category>
</mt:HasParentCategory>
</mt:ContentField>

カテゴリは子カテゴリがあるものと、ないものがあるので、mt:HasNoParentCategory mt:HasParentCategoryなどで分岐したりもしています。Appleの仕様では、カテゴリは複数設定できますが、認識するのは最初のカテゴリとサブカテゴリのみ。そこをどうしようかと思いましたが、カテゴリセットで選んだカテゴリは、プライマリに選んだカテゴリが最初に表示されるので、ちょうど良かったです。

このように出力されます。

<itunes:category text="Music"/>
<itunes:category text="Society & Culture">
<itunes:category text="Personal Journals"/>
</itunes:category>
<itunes:category text="Technology"/>

エピソード毎の情報

番組全体の次は、エピソード毎の情報。これもRSSの仕様に沿ってコンテンツフィールドを作ります。

なお、RSSの仕様以外に追加した項目もあります。Jamendoプレイリストとか、YouTubeリンク、タイムラインなどは自分仕様です。このように自由にできる点が、１からテンプレートを作っていくメリットです。

「ゲスト」というコンテンツタイプを呼び出すようにしています。これは、ゲストを別のコンテンツタイプで管理するように指定、ゲストが複数回登場した場合も、１個情報変更したら全てに反映できるようにしています。

エピソード情報も、番組情報と同様に入力しますが、番組情報は基本最初だけ。エピソード情報は更新の際に追加していきます。MP3のアップロードやその他情報を入力できます。

下の方にある「タイムライン」の項目。これは、表示側で再生中の時間の部分にスキップするリンクなのですが、ここの入力方法が一番悩んだかもしれません。

最終的には、テーブルを入力するコンテンツフィールドを用意しました。列は自由に増減できるようにしてます。

入力内容を強引に表示用に変換しています。スマートじゃないけど、なんとか。時間の部分のセルを選択してthにしないといけないですが。たぶん、もっとスマートな方法はあるかもしれません。

 <mt:ContentField content_field="タイムライン"><mt:ContentFieldValue regex_replace="/<tr>[\s]*<th>(.*)<\/th>[\s]*<td>(.*)<\/td>[\s]*<\/tr>/g","<p><a href="$1">$1</a> <em>$2</em></p>"  regex_replace="/(<table>|<\/table>)/g","" encode_xml="1"></mt:ContentField><p><mt:ContentPermalink></p>

ちょっと困ったのが「テキスト（複数行）」にした部分、フォーマットを「Markdown」にしても反映するものと、しないものがあること。複数回は使えないんだろうか。なんかのバグだろうか。問い合わせる時間もなかったので、HTMLをベタ打ちにしています。ここは、このままでは汎用的にできないなと。

もう１つ、今回はポッドキャストのアクセス解析ができるChartableというサービスを利用しています。Chartableで解析するためには、RSSで音声ファイルへのリンクにprefixをつける必要があリます。ホスティングサービスも対応しているサービスと、対応していないサービスがあリWordPressのBlubrry PowerPressなどは対応していないようです。

この中では「Self-hosted」にあたリます。下記のように音声ファイルのURLを出力する部分にprefixをつけるようにしました。

<mt:ContentField content_field="Podcastファイル">
<enclosure 
    length="<$mt:AssetProperty property="file_size" format="0"$>" 
    type="<$mt:AssetMimeType$>" 
    url="<$mt:AssetURL  replace="https://","https://chtbl.com/track/（個別コード）/"$>"
/></mt:ContentField>

Twitterカードを利用してTwitter上で再生

Movable Typeならではですが、１つのコンテンツタイプから２つのHTMLファイルを生成できます。Twitterカード用にもう１つページを作成しています。

単純に再生プレイヤーだけのページを作ってます。その上で、Twitterカードの情報を「エピソード」テンプレートのmetaタグに記載します。

 <meta name="twitter:card" content="player" />
    <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:player:stream" content="<mt:ContentField content_field="Podcastファイル"><mt:AssetUrl  replace="https://","https://chtbl.com/track/（個別コード）/"></mt:ContentField>" />
    <meta name="twitter:player:stream:content_type" content="audio/<mt:If tag="AssetFileExt" eq="m4a">aac<mt:Else>mpeg</mt:If>" />
    <meta name="twitter:site" content="@pot_au_feu" />

Twitterで個別ページのリンクを貼ると、上記のTwitterカードの情報を読み取って、プレイヤーが埋め込まれます。パソコンとスマホでは見え方が少し違いますが、ツイート内の再生ボタンをクリックすると、Movable Typeで作ったシンプルな再生プレイヤーだけのページがTwitter上で表示されます。

他にも細々と工夫もあり、徐々にカスタマイズしていっているところもありますが、Movable Typeのコンテンツタイプを使って、出力する内容に合わせてかなり思い通りに構築していくことができました。

ホスティングサービスなどではカスタマイズしきれない部分にも手を出せます。まだまだ改良の余地はありますが、かなり満足できるものになってます。

ポッドキャストのように静的ファイルをしっかり作れれば良いようなものには、Movable Typeは向いているなと実感しています。

...My cup of tea... [Season 2]

　

Ranking

Recent Post

Archives