音楽番組で披露された楽曲データを整備したい

CS放送のTBSチャンネル１で毎月末に放送されている音楽番組「Spicy Sessions」が好きです。番組は毎回録画して見返したりしてるんだが、あのときのあの曲が何回目の放送だったかを思い出せず、そんなときにはWikipediaの情報で確認していました。そんな時、この番組で披露された楽曲や放送回に関する情報を一覧にまとめたらわかりやすくてイイんじゃないかって思いつきました。

今回の投稿は、情報一覧サイトを作成するまでの過程を忘備録として残すことが目的で、生成AI利用に関する具体的なスクリプト等の情報はありません。あくまで私個人がやったこと（苦労譚）と生成AIを利用することへの感想を書いています。

番組公式ページ

Xの公式アカウント

instagramの公式アカウント

元ネタ

基礎データとして参考にしたのはWikipediaの該当記事です。

情報閲覧サイトはGithubPagesで作ろうと考えたので、まずはこの記事の『放送日程』にある情報を静的なサイト上でJavascriptが扱いやすい（だろうと考えた）JSONファイルにしようと目論みました。

しかし、掲載情報をすべて手入力でまとめるのは労力がかかりすぎると思い、まずはchatGPTにwikipediaのリンクを与えてJSONファイルを作成するよう指示しました。

その結果、出力されたJSONファイルはきちんとした形式ものでしたが、最後まで作成されていません。これは無料ユーザだからかもしれませんが、その後同じ情報をCSVにしたり、使用する生成AIをchatGPTからGeminiなど他の生成AIサービスにしたりといろいろ試行錯誤の結果、最後は手入力でなんとか形にすることができました。

作成されたJSONファイル（部分）

[
  {
    "回": 1,
    "放送日": "2023年12月16日",
    "放送タイトル": "Spicy Sessions  with 平原綾香",
    "セッション情報": [
      {
        "セッション曲": "からっぽのハート",
        "オリジナル": "平原綾香",
        "歌唱": "平原綾香",
        "演奏者": "大貫祐一郎(Piano)",
        "備考": null
      },
      ...
    ]
  },
  ...
]

これをベースに今度は情報閲覧サイトを作成するため、参照するJSONファイルと作りたいおおよそのイメージを以下のようなスクリプトとして与えました。

まずは放送タイトルの一覧が表示される
放送タイトル一覧からセッション曲一覧へ飛ぶリンクを張る
処理はjavascriptで作成する

そうするとHTML,CSS,javascriptの３つのコードが示されて、それらコードをコピペしてファイルに保存し、HTMLをダブルクリックすると情報閲覧ページがきちんと表示されました。

最終形への修正に手作業は必要

その後、もう少し機能追加したいとか、トップに画像を表示したいとかいろいろと試行錯誤して現在の形になりましたが、機能追加についてはその都度生成AIがまとめてくれます。前に依頼した内容も反映して作成してくれるので、大変便利です。

また作成したJSONファイルの仕様書もchatGPTが作成してくれますし、それをMarkdown形式に変換もしてくれます。フィールド詳細にある『説明』項目はchatGPTが勝手に考えてくれた内容ですが、十分適切な説明で驚きました。昔はファイル仕様書を手作業で作成してたことを思えば、すばらしい世の中になったなぁなんて思います。

以下は、chatGPTが作ってくれたファイル仕様書です。

chatGPTが作成したMarkdownコードをそのまま貼り付けました
項目は生成AIが作成したものに一部追加等行っています

JSONファイル仕様書: `spicy_sessions_songs.json`

🔸 ファイル概要

このJSONファイルは、音楽番組「Spicy Sessions」の各放送回について、放送情報とセッション内容をまとめた構造になっています。

🔹 JSON構造

ルート要素は配列（リスト）で、各要素が1放送回を表します。

[
  {
    "回": 1,
    "放送日": "2023年12月16日",
    "放送時間": "土曜日 23:00 - 24:00",
    "放送タイトル": "Spicy Sessions  with 平原綾香",
    "カレー": "特製チキンカレー",
    "参考": " ",
    "セッション情報": [
      {
        "セッション曲": "からっぽのハート",
        "オリジナル": "平原綾香",
        "歌唱": "平原綾香",
        "演奏者": "大貫祐一郎(Piano)",
        "備考": null
      },
      ...
    ]
  },
  ...
]

フィールド詳細（トップレベル）

フィールド名	データ型	必須	説明
`回`	Integer	✔	放送回数（第何回か）
`放送日`	String	✔	放送日（例：2023年12月16日）
`放送時間`	String	✔	放送時間帯（例：土曜日 23:00 - 24:00）
`放送タイトル`	String	✔	番組タイトル
`カレー`	String	✔	紹介されたカレーの名称
`参考`	String	✖	補足情報
`セッション情報`	Array	✔	セッション曲の情報リスト

フィールド詳細（セッション情報）

フィールド名	データ型	必須	説明
`セッション曲`	String	✔	演奏された楽曲名
`オリジナル`	String	✔	楽曲のオリジナルアーティスト
`歌唱`	String	✔	実際に歌唱したアーティスト名
`演奏者`	String	✔	楽曲演奏者（複数の場合はスペース区切り）
`備考`	String/null	✖	備考欄、特記事項など

備考

日付はすべて "YYYY年MM月DD日" の形式。
セッション情報は1回の放送につき複数曲含まれています。
備考 フィールドはnullの場合があります。

仕様書はここまで

まとめ

これらのソースコードをgithubに（無料ユーザは）publicのリポジトリとして登録し、pages機能を使って公開すれば情報閲覧サービスは簡単に立ち上げることができます。

最終的にはJSONへの項目追加、それの伴う機能追加やデザイン見直しなどで手修正も行いましたが、基本スクリプトさえ与えれば、当該情報が掲載されているサイトを参照してそのJSONファイルの生成と、それを表示するソースコード群を作成してくれます。そのおかげでjavascriptの知識がうっすい私もそれなりのサービスページを作ることができました。これは私のような初心者には大変便利な機能やサービスですし、プロの方々にとってはイチからコードを書くよりも格段の生産性向上が期待できるのではと思います。

でもね、最終的には人間が見て、使ってどうかって観点による見直しは必要なんよ。

こんな感じの画面です。

放送回一覧ページ（トップページ）
セッション情報ページ