【nhk.or.jp】番組紹介にあるプレイリストの曲をSpotifyで検索するためのブックマークレット

はじめに

よくラジオでNHK-FMの音楽番組を聴きます。
先日ふと見ると、過去に放送されたプレイリストがウェブサイトに掲載されていることに気づきました。
その中の気に入った曲をSpotifyのプレイリストに簡単に追加できたら嬉しいかも！
普段Spotifyを使う音楽ファンの私はそう思いました。

皆さんは音楽配信サービスを使っていますか？

そういうわけで今回紹介するのは「楽曲検索用ボタンを追加するブックマークレット」です。

コード

javascript:(()=>{const r=[],o=document.querySelector(".program-onair-music li"),e=o.innerHTML.split(/<br><br>/);for(const o of e){const e=o.split("<br>");r.push('<a href="//open.spotify.com/search/'+encodeURIComponent(e[0].slice("1","-1")+" "+e[1].replace(/:作曲/,""))+'" style="background-color:#fff;padding:3px" target="_blank">&#x1f3b5;</a> 「'+e[0].slice("1","-1")+"」<br>"+e[1]),e[2]&&r.push("<br>"+e[2]),e[3]&&r.push("<br>"+e[3]),e[4]&&r.push("<br>"+e[4]),r.push("<br><br>")}o.innerHTML=r.join("")})();

使い方

1. デスクトップでNHKラジオ番組案内の過去の放送（例えば https://www4.nhk.or.jp/jazz/5/ ）を開く。
2. お好みの日付をクリック。
3. ブックマークレットを実行する。
4. プレイリストの各曲の先頭に追加された♫をクリックする。

解説

上記のコードは以下のコードを圧縮したものです。

(
    () => {
// ---------

const html_data = [];// for update
// playlist
const li = document.querySelector('.program-onair-music li');
const list_item = li.innerHTML.split(/<br><br>/);
for (const elm of list_item) {
    const playlist = elm.split('<br>');
    // playlist[0]: song name
    // playlist[1]: artist name
    // playlist[2]: time
    // playlist[3]: product code

    html_data.push(
        '<a href="//open.spotify.com/search/' + encodeURIComponent(playlist[0].slice('1','-1') + ' ' + playlist[1].replace(/:作曲/, '')) +
        '" style="background-color:#fff;padding:3px" target="_blank">&#x1f3b5;</a> 「' +
        playlist[0].slice('1','-1') + '」<br>' + 
        playlist[1]
    );
    if (playlist[2]) html_data.push('<br>' + playlist[2]);
    if (playlist[3]) html_data.push('<br>' + playlist[3]);
    if (playlist[4]) html_data.push('<br>' + playlist[4]);

    html_data.push('<br><br>');
}

// html update
li.innerHTML = html_data.join('');

// ---------
    }
)();

javascriptのコードを見る前に、nhk.or.jp のhtmlを確認しときましょう。プレイリストの該当部分はざっと次のようになっています。「曲名」の先頭に検索用リンクボタン♫を追加するのが最終目標です。

<div class='program-onair-music'>
<ul><li>
「曲名」<br>
アーティスト<br>
演奏時間<br>
音源<br><br>

「曲名」<br>
アーティスト<br>
演奏時間<br>
音源<br><br>

「曲名」<br>
アーティスト<br>
演奏時間<br>
音源<br><br>
...
</li></ul>
</div>

１つの<li>の中に全曲が記述され、曲と曲は<br>を連打して分けられているので、どうにも困ります。
これを踏まえてjavascriptを考えます。ちょっと面倒ですが、この場合<li>内の文字列を<br><br>で分割し、これをさらに<br>で分割すると全ての曲のデータが得られます。以上が曲情報の取得部分です。

次にhtmlを組み立てます。<li>内を一度に置換するやり方でいきます。他にいい方法を思いつきません。
予め、置換用htmlを保存する配列html_dataを用意し、次の順番で曲に関するデータを追加していきます。

1. ♫（曲名とアーティストで検索するためのリンクを設定している）
2. 「曲名」: playlist[0]
3. アーティスト: playlist[1]
4. 演奏時間: playlist[2]
5. 音源: playlist[3]

元のhtmlに倣って<br>を挟みながら、これを全曲分繰り返します（番組によって配列playlistの長さは変わり、その項目も異なります）。最後に配列html_dataの要素を連結して、現在のプレイリストとまるごと置き換えて完成です！

あとがき

一部の番組紹介に関しては明らかにDOMの構成が異なるので、コードの修正が必要です。形式が統一されていないのが残念です。
最近はプレイリストを公開しているFM局が多いです。今度は、そちらの方の攻略を目指したいと思います。

本日もありがとうございました。

参考

• https://qiita.com/embokoir/items/d667a6802105b842fb48