前回の記事ではTuring Complete FM（TCFM）ポッドキャストの録音テクニックを紹介しました。TCFMウェブサイトにはポッドキャストのリスナーのユーザ体験を向上させる工夫がいくつか存在しています。今回はTCFMのウェブサイトの技術面を紹介します。

はじめに

TCFMはスタティックHTMLで構成されたサイトです。 ポッドキャストのテキスト情報が入っているYAMLファイルがあって、そこから僕が書いたPythonスクリプトでHTMLやRSSをあるディレクトリ以下に生成して、そのディレクトリ全体をFirebaseに転送して、そこからホストしています。

スタティックHTMLなサイトをFirebaseでホスティングするのはとても簡単で、ワンコマンドでできます。最近はHTTPは次第にdeprecatedな扱いになりつつありますが、Firebaseでは簡単にHTTPS化できるので、その点でもFirebaseはおすすめです。

TCFMでは外部リソースを減らしてなるべく短い時間でページがロードできるようにしています。JavaScriptやスタイルシートは同一のものをPythonスクリプトですべてのHTMLに埋め込んでインライン化しています。こういったレイテンシ削減の技法は普通のウェブサイトと同じです。

再生位置の保存と再開

ウェブサイトで長い音声ファイルを聞いていて不便なのは、デフォルトではファイルの再生位置を覚えてくれないことです。ページをリロードしたり、リンクをたどって戻ってきたとき、デフォルトではまた最初からの再生になってしまいます。こういった不便さは単に悪いユーザ体験になるだけなので、ウェブサイトの方でなんとかするべきです。

TCFMでは、JavaScriptのローカルストレージに再生位置と再生スピードを保存して、ページ読み込み時にそれを書き戻すようにしています。これにより、ページを再度開いたときに前の再生位置に自動的に戻るようになっています。詳しくはサイトのHTMLソースを読んでみてください。

#t =のサポート

音声ファイルの特定の位置にリンクしたいことがあります。TCFMでは、#t=h:mm:ssというフォーマットでその機能をサポートしています。たとえばhttps://turingcomplete.fm/14#t=38:26とすれば、エピソード14の38分26秒の位置にリンクすることができます。

この機能をJavaScriptで実装するのは簡単ですが、よく考えてみると、UXとしてどうあるべきかというのは簡単ではありません。例えば#t=付きのURLでページを開いて、かなり音声を再生したあと、別のページに行って、ブラウザの戻るボタンで戻ってきたとしましょう。再度#t=が解釈されると最初の再生位置に戻ってしまいます。これはよいユーザ体験とは言えません。

#t =を解釈してシークしたあと、即座にJavaScriptから#t=を消したURLに変更するというのはどうでしょうか？ こうすればページ再読込の問題は解決できますが、これもあまりよいユーザ体験とは言えません。自分が#t=つきのURLに飛んだという情報が失われてしまうし、#t=つきのURLをそのままシェアするのが困難になってしまいます。

以上の考察を踏まえた上で、TCFMでは、「#t=で表された時間とプレイヤの現在位置が一定時間（今のところ15秒以上）離れた時点で#t=を消す」という仕様を採用することにしました。ページを開いた直後には#t=が表示されたままなのでそのままコピペできますし、#t=が消えたURLに対してはデフォルトの再生位置の保存機能が働くようになるので、前回の再生位置と遠く離れた場所に再生位置がリセットされてしまうという問題もありません。もうちょっと使ってみないと最終的な結論は出せないのですが、今のところこの方法は悪くはないと思っています。

ポッドキャストのアプリへのリンク

Webブラウザよりも専用アプリのほうが使い勝手がよいので、ユーザにはなるべくポッドキャストアプリへの登録を勧めたいところです。そのためにTCFMでは、モバイルからのアクセスの場合、1クリックでポッドキャストを登録できるリンクをページ上部に表示しています。

iPhoneにはデフォルトの"Podcast"というアプリがあり、iTunesへのリンクをSafariが認識してアプリを自動的に起動します。サードパーティのポッドキャストアプリを起動する方法はないようです。従って、iPhoneからのアクセスの場合は、単にiTunesへのリンクを表示すればよいということになります。

Androidではデフォルトではポッドキャストアプリはインストールされていません。従って、「Podcastアプリに追加」リンクをクリックしたときには、何らかのポッドキャストアプリがインストールされていればそれを起動し、されていなければいくつかのおすすめのポッドキャストアプリへのリンクを含んだページを表示したいのですが、これは特別なURLを使うことで実現することができます。TCFMでは次のURLを使っています。

intent://feeds.turingcomplete.fm/tcfm#Intent;scheme=pcast;S.browser_fallback_url=https://turingcomplete.fm/apps;end

"pcast"というのはポッドキャストのURLスキームで、このリンクをクリックした時、もし"pcast"をハンドルできるアプリがインストールされていればそれが起動します。さもなければ、フォールバックURLのページがブラウザで表示されます。このようにしてTCFMでは1クリックでポッドキャストアプリに追加できるリンクを表示しています。

ビジュアルデザイン

かっこいいデザインは難しいので、TCFMでは、デザイン要素を極力ページから減らすことでデザインの必要性を減らすという方針を取ることにしました。基本的にはシングルカラムで、クリックできる要素は少なく、テキストとオーディオ以外の要素はほとんどありません。

シングルカラムにすることでモバイル対応も簡単になります。TCFMではブラウザの幅に応じてCSSを少し変えることでレスポンシブなデザインにしていますが、そのために必要な変更はごく僅かでした。

音声ファイルの配信

音声ファイルはレイテンシが低くてネットワークが速い場所に置いたほうがユーザ体験がよくなります。前回の記事で紹介したように僕はLibsynにMP3ファイルを置いて、そこに直接HTMLやRSSからリンクしています。この方法はCDN経由でのファイル配信になるので、とても速いです。僕はこの方法で満足しています。

Webブラウザは多彩なオーディオファイルフォーマットをサポートしているので、MP3以外のファイルフォーマットを使うことも可能です。たとえばOpusを使えば、音質を保ったままMP3の半分以下のファイルサイズにすることもできます。しかし、総合的にはそのようなことはやらないほうがよいようです。たとえばChromeはOpusファイルをシークする時、ファイルのオフセットの見当をつけるのが下手なようで、シーク時に何度もHTTPリクエストを送るので、シークに不必要に時間がかかります。ファイルフォーマットについては奇をてらわずに、1つのMP3ファイルをポッドキャスト配信サービスに置いて、それをすべての場所で使うほうがよいと思います。

おわりに

ウェブサイトとしてのTuring Complete FMで使っているテクニックを紹介しました。ポッドキャストのヘビーなリスナーはスマホのアプリで聞いている場合が多く、配信者もそうしていると思うので、Webサイトは軽視されがちです。しかし普通の人はウェブサイトで聞き始めて、何回か聞いて面白ければアプリに追加するという行動パターンでしょうから、ウェブサイトは重要です。自分で自分のウェブサイトをしっかり使ってみて、不便なところをきちんと直していくのがよいと思います。