生成AIポッドキャスト時代なので a-blog cms の mp3対応を考えてみる

NotebookLM で生成AIポッドキャストの生成が話題になっています。標準的に a-blog cms で MP3 をそのまま扱うことが残念ながらできません。しかし管理画面の設定と、テンプレートのカスタマイズで簡単に実装できる内容ですのでご紹介します。

管理画面の設定で mp3 ファイルのアップロード可能に

まずは a-blog cms のアップロード可能なファイルかどうかを 拡張子 でチェックしている部分がありますので、そちらの設定で mp3 を設定します。

コンフィグ > 編集設定 > アップロード許可ファイル拡張子

オーディオの欄に mp3 の設定が無ければ追加ください。

この設定を行うことで最低限の設定として、これでファイルユニットから mp3 がアップロード可能になります。

ファイルユニットで mp3 をアップロードする

ファイルユニットでアップロードすると、先ほどのオーディオのところに mp3 と設定したことから以下のように、音声ファイルのアイコンでエントリーに配置することができるようになりました。

ファイルを開く

audio タグでプレイヤーを表示できるように

今のブラウザは、

利用しているテーマに unit.html を用意する

今回実装したいテーマのユニットの表示をカスタマイズする事になりますので、/themes/system/include/unit.html を /themes/blog/include/unit.html にコピーします。 ここでは blog テーマを利用している前提で紹介します。

@extends("/_layouts/unit.html")

この1行しか書かれていないハズです。実際の中身は /themes/system/_layouts/unit.html を確認してみてください。そして、今回修正するファイルユニットの部分をコピーして、先ほどファイルとして用意した /themes/blog/include/unit.html のファイルの extends の下にコピペします。

@extends("/_layouts/unit.html")

@section(file-unit)
<!-- ファイル -->
<div class="column-file-{align} js_notStyle">
  <a href="%{HTTP_ROOT}{path}">
    <img class="columnIcon unit-id-{utid}" src="%{HTTP_ROOT}{icon}" alt="ファイルを開く" width="{x}" height="{y}">
  </a>
  <p class="caption">{caption}[raw|nl2br]</p>
</div>
@endsection

mp3 の時には audio タグで表示

次に、拡張子が .mp3 だった時に表示を分岐するようにカスタマイズしていきます。 ファイルのパスが表示される変数が {path} になりますので、こちらを IFブロックで分岐し表示を分けていきます。

この場合、正規表現で .mp3 で終わっているという記述になりますので、

<!-- BEGIN_IF [{path}/re/\.mp3$] -->

のように記述します。正規表現では / で囲む記述がよくあるので /.mp3$/ としてしまいがちですが、後ろ側の / があると正常に動作しませんので注意ください。

結果、 /themes/blog/include/unit.html は以下のようになります。

@section(file-unit)
<!-- ファイル -->
<div class="column-file-{align} js_notStyle">
<!-- BEGIN_IF [{path}/re/\.mp3$] -->
<audio controls style="margin:10px;">
  <source src="%{HTTP_ROOT}{path}" type="audio/mpeg">
</audio>
<!-- ELSE -->
  <a href="%{HTTP_ROOT}{path}">
    <img class="columnIcon unit-id-{utid}" src="%{HTTP_ROOT}{icon}" alt="ファイルを開く" width="{x}" height="{y}">
  </a>
<!-- END_IF -->
  <!-- BEGIN_IF [{caption}[delnl]/nem] --><p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->
</div>
@endsection

これでファイルユニットの際に mp3 のプレイヤーが表示できるようになりました。

ポッドキャストで学ぶ a-blog cms：静的HTMLからのテーマ作成 エントリー編

これで最低限の実装は完了です。 自分のサイトであれば、これで大丈夫ではありますが誰かに使ってもらうための実装の際には、もう一工夫必要になることが予想されます。

知らない人が、写真やPDFをメディアにアップロードしていたのであれば、残念ながらメディアにはエラーでアップロードできません。mp3 はファイルユニットを利用すること ということを共有し、理解して運用してもらう必要が出てきます。

ユニット拡張

a-blog cms のカスタムユニット機能を紹介するところですが、もっと簡単に柔軟な実装ができるところを紹介してみます。通常のファイルユニットをそのまま利用し、表示側だけオリジナルのコードを出力できるようにします。

コンフィグ > 編集設定 > ユニット追加ボタン

追加ボタンで1行追加し 拡張 を設定し file_mp3 のように設定します。ラベルは自由に設定で構いませんが分かりやすく mp3 としておきます。

コンフィグ > ユニット設定

ユニット追加ボタンで追加した MP3 のユニットを、ユニット設定で追加します。MP3ボタン をクリックして追加してください。 ファイルユニットが追加されます。

一般的な カスタムユニット は、custom_mp3 のようにして管理画面のフォームから作成しますが、カスタム標準ユニット では、標準で提供している ファイルユニット を利用することから管理画面のテンプレートを作る必要がありません。

これで、MP3 のファイルを追加しようと思った人が、迷うことなく MP3 ボタンをクリックできるようになりました。

a-blog cms の良さは、表示側だけでなく管理画面のカスタマイズが柔軟にできるところではないでしょうか。複雑にすることなく、簡単に分かりやすい UI を目指して実装ください。

表示側のテンプレート

この段階では、管理画面しかできてないので表示されません。表示側のテンプレートを用意します。

/themes/blog/include/unit/extend.html のファイルが無ければ作成し、すでに作成されているようであれば、以下を追記します。

<!-- BEGIN unit#file_mp3 -->
<audio controls>
    <source src="{path}" type="audio/mpeg">
</audio>
<!-- END unit#file_mp3 -->

最後に

今回は、ファイルユニット自身をカスタマイズする実装 方法と、ファイルユニットの表示側だけをカスタムする実装「ユニット拡張」 の2つの方法を紹介しました。あと今回は説明していませんが、一般的な カスタムユニットとして実装 するという方法もあります。

いろいろな方法で実装はできますが、利用者が分かりやすい方法で実装ください。

同じタグ付けがされている記事