1 モチベーション

作業中にBGMが聞きたい時、RadikoのWebサイトからラジオ日経第2の音楽チャンネルを垂れ流しにしております。Radikoの場合、過去1週間分の番組であれば好きな時間にアクセスしてラジオ番組を楽しむことができます。ただ残念ながらRadikoのWebページはこれでもかというくらいユーザビリティーが悪く、Webページ自体も重く応答性も悪いと感じています。例えば今週火曜日19:00のラジオ日経第2の番組を聞きたい場合、再生までたどり着くのに１～2分程度かかってしまいます。
そこで、ボタン1つで、聞きたい番組にアクセスできるようにしてユーザービリティーを改善したいと思いました。

2 作成したアプリ

ラジオ日経第2(21:15～、21:30～の番組はラジオ日経第2)の聞きたい時間帯をセレクトボタンで選択し、クリックするのみでWebページに自動でアクセスし、音楽をストリーミングします。このアプリを作ってからは、わずか3クリックでラジオ日経第2の聞きたい番組のストリーミングができるようになり、ユーザービリティーが大きく向上しました。

3 どうやって実現したか

ハードウエアはラズベリーパイ4と800円のUSBスピーカーを組み合わせて作りました。

ソフトウエアは、フロントエンドはVue.js, バックエンドはpythonで実現しています。pythonのWebスクレイピングライブラリseleniumを使いRadikoのWebページから指定した番組データにアクセスし、番組音声を再生しています。また、環境を別のハードウエアに移動することも考え、仮想化アプリDockerの上で、フロントエンドを作成しております。

4 ソースコード

4-1 Vue-CLIのインストール

環境構築には、Vue-CLIのインストールが必要です。Vue-CLIのインストールはこちらに記載しています。

Vue-CLIのインストールが完了すると、ディレクトリ(下記図で説明すると第2階層と第3階層)が構成されているので、「Radiko.vue」「index.js」「radiko.py」「radikoend.py」「radikoendforce.py」を下記図記載のとおり所定のディレクトリに配置してください。

4-2 コードファイルの配置

こちらに必要ファイルをアップロードしました。
Radikoi.vueは、Vue-CLIの /scr/componentsに配置してください。
index.jsは、node.jsが動作する任意の場所にインストールしてください。