皆さんこんにちは。いのこーです。
いやあ、年明け一発目は岬なこさん2ndアルバム「Repeated Reflect」の感想を吐き出したかったんですが、どうやらこの記事が先になりそうですね。
大丈夫ですよ。近いうちにその記事も出そうと思ってますのでお楽しみに。
さて、2月初めの話になりますが、岬なこデータベースというサイトをリリースしました。
ここ最近私のXを見ている方なら、なんか私がWebサイトの更新をガンガンやってるな〜って思ってると思うんですよ。そう、最近はプログラミングの勉強をしています。
そんな中作成したのがこのサイトです。
テッテレ〜「岬なこデータベース(非公式)！」
ドラえもん風に紹介しましたが、こんなものを作成しました。
今回はこのサイトの制作についてお話ししたいと思います。
⚠️注意
※ここから先は、プログラミング用語が羅列します。できる限り例えを用いてお話ししますが、着いて来れなかったら「あ、そういうのがあるんだな〜」って感じですっ飛ばしてもらって構いません。
発端
そもそもなぜこのサイトの制作をすることに踏み切ったのかと言うと、近々岬なこさんの2ndライブがあるのですが、その前にこれまでの曲がどれくらい披露されてきたかというのを確認したかったんですよね。
そこで私が目をつけたのが、ラブライブ！シリーズだとセットリストや作曲者などのデータベースを作っている「LL-Fans」さんというファンの組織が存在するんですよね。ありがたいことに私もDiscordなどにも参加させて頂いているのですが...
ともあれ、その「LL-Fans」さんが公開しているデータベースにある、イベント･TV披露のページ。このように、これまで披露してきたイベントをまとめ、これまで披露してきた回数をまとめたい。そしてせっかくならそのシステムを構築して公開したい。という思いで制作が決まりました。
たった1日で制作。力を借りて。
しかし、プログラミングを知ってる人にしか分からない専門用語が出ますが、私はHTMLとCSSしか知りません。てかその2つですら米粒程度の知識しかありません。「どこでその知識を使ってるの？」と思うかもしれませんが、それはこのサイト「いのこーのオタ活Doodle」なのです。ヘッダーのメニューとか、フッターの「フォローはこちらから！」の文言とかは全て外部のサイトから「自由に使ってね！」と配布されているものをコピペしているだけですけど、そこで「ああ、この部分のコードはあの表示部分を動かしているんだな...!!」と独学で少しずつ覚えてます。お風呂に世界地図を張ってたら、気づいたら196カ国覚えてたみたいな...そんなノリで。
「そんなノリであのデータベース作れるの!?」と思う方もいるでしょう。無論そんなわけありません。だって米粒くらいの知識しかないやつが2026年2月2日に「LL-Fansのイベントセトリデータベースの岬なこソロ活動verみたいなサイトが欲しいなって思って自分で作るか迷い」って呟いて、翌日に「できました」ってリリースしたんですよ？明らかにおかしいじゃないですか。AIを使うか大人数で制作しないかしないと。
AI...
そう、これはGoogle Geminiに9割コード書き書きを頼んで制作したサイトなのです。とはいえ現在のシステムがこの時期からあったわけではなく、挙動の確認を行うため楽曲データは最初から全て詰めましたが、セットリストは2,3個のデータしかない状態で、絞り込み検索や披露回数の表示もなく、現在よりもデザインはかなり簡素な形でオープンしたのです。とりあえず完了主義で、基礎固めが大切かなと思って。
リリースのポストに当時のスクショがあります。
できました。
— 『いのこー』 (@ino_kou1121) 2026年2月3日
これでセトリ全部組めてるか不安だけど...https://t.co/5QEVOaJlG6 https://t.co/OrsSFSA7NO pic.twitter.com/Q3UR7tIP8O
こうして2026年2月3日、岬なこデータベースはオープン。
ちなみにこの時、めっちゃインフルエンザB型に感染していました(笑)
サイト制作に夢中になってたら、風邪を引いてしまったようです。
AIと作ったけど、それでも試行錯誤
...くらいしか話すことないんですが、今回の記事。現時点で3000字くらいあるらしいのでもうこれで終わりでも十分だと思うのですが、せっかくなのでこのサイトをどう作ったのか、どう更新しているのかについて説明したいと思います。詳細なシステムを述べると時間かかりますし、そもそもにわかエンジニアの私が堂々と述べるのはなんかおかしいので簡単なとこしか話しません。
当時私はHTMLの知識しかなかったので、HTMLで無理やりあのデータベースを作成しようとしていました。今の私が見れば頭おかしいんじゃないの？って思考ですけどね。
何言ってるか分からない人のために、今回制作した岬なこデータベースを一軒家１棟と例えて説明したいと思います。
HTMLとCSSとは、例えるなら「家でいうと壁や床」の部分にあたります。今回制作したデータベースは今後更新が不要というわけではなく、今後も更新が定期的に必要になるのです。なので更新内容が増えると毎回リフォーム規模のコード書き換えが発生してしまうのです。そんなんめんどくさいじゃないですか。
当時の私はそんなことも知らずに、最初にGeminiにこう聞きました。
このサイトのようなイベントデータベースをHTMLのみでのみで再現することは可能ですか？
無論、Geminiには「絶対にJSONを使ったほうがいい」と言われました。実際そうして正解でした。
このJSONがデータベース作成で重要になってきます。
JSONとは、例えるなら「家の中に置く家具や道具」。Wi-FiのルーターやPCを購入したとしても、毎回リフォームをしなければならない。そんなめんどくさい作業が、このJSONを使うことにより今後は楽曲やセットリストのデータを追加していくだけで良いのです。なのでセットリストが追加される度にリフォームをする必要がないということ。
2月3日に公開した当時のものは、「とりあえず現時点のデータベースを作りたい!!」ということで、JSONは後で学ぶことにし、HTMLとCSSで無理やり作成したデータベースです。
とりあえずこの時は、「リリースできてよかった...!!」という気持ち。
ただ、これは実際にやってみると分かるんですが、こんなことをしてると確実に今後の更新に問題が出てくるんですよね。例えば1文字でも文字に不足や余剰があると、サイトのデザインが崩れてしまったりエラー画面が出てしまうのです。例えるならたった1本の柱の位置がずれていただけで、家全体が傾いてしまうようなもの。
そんな事態をJSONが解決してくれるのです。先述の通り、JSONとは、「家の中に置く家具や道具」の役割を果たしてくれます。家があれば、とりあえずコンビニ弁当と寝具さえあれば家具を用意するまでは耐えられるじゃないですか。これがあのサイトを最初にリリースした状態。そこから家具の用意に取り掛かる、そんな感じです。
新しいことを学ぶのは大変ですが、そんな時には岬なこさんの曲に助けられました。
無駄なことなんて 一つもないんだ
全ての失敗が 今より強い僕を作ってく
HURRAY!! - 岬なこ
岬なこさんの曲にも、Liella!のみんなにも教えてもらったんですよね。
自分に降りかかる困難って、絶対これからの自分に必要なことなんだってことを。
だからこれも、いつか絶対役に立つ時が来るかもしれない。
そう思うと、自然と走り出せるんです。
いつもと違う今日にしたいから。
くり返しの日々なんて、どこにもないから。
JSONの導入が決まったら、どう構築すればいいかを一からGeminiに教えてもらいました。やればできるじゃん。強くなったね自分。
セトリ集め
さて、新しいことを学んで強くなったのはいいんですが、問題なのは過去のセットリスト集め。2023年にデビューしてまだ3年しか経っていませんが、それでもこれまで積み重ねてきた公演数はリスアニなどの外部イベントも含めると膨大な数になります。
1stライブはBlu-rayを持ってるし、アコースティックライブも自分でXにポストしたセトリのデータを引っ張ってくればいいのですが、問題なのはフリーライブや、リスアニとかを含めた外部イベントのセトリ。これは見てないものも多く、セトリを集めるのが困難です。
しかし、私を舐めてもらっては困ります。
私は岬なこさんが2023年にソロアーティストデビューする前から、岬なこさんが好きな人とのネットワークを何年もの期間をかけて築いてきました。そしてその人たちが過去にセットリストをポストしていたのも私は知っています。なので、その人のポストを頑張ってXの検索コマンドなどを駆使して探し出し、それをセットリストに全て書き出しました。なので現在私のXアカウントはそのブックマークでいっぱいになっています。Xに残してくれたおとなりさんのみんな、本当にありがとう。
このサイトを制作したことにより、「あ、これからXにセトリを共有する必要はないな」と思われている方もいるかもしれませんが、皆さんのおかげで成り立っているサイトなのは間違いないので、そのような共有は引き続きしていただけると大変助かります。おかげでこのサイトの反映も進みますしね...!!
ポストになかったものは、報道サイトの記事を参考に披露された曲を入力し補うことに成功。こうしてセットリストは全て入力が完了しました。もしかしたらまだ入れてないものがあるかもしれません。そのようなものがありましたら私のXなどで個別にお問い合わせください。
どうやって入力しているの？
ただ、そのJSONも全て決まったコードを書かないとサイトに反映されません。
それを毎回書かないといけないのは辛いですし、このサイトは私一人で運営しているので、イベントの終演後にサイトの編集環境を開いて即更新！というのは、スマートフォンしか方法がないわけです。一応JSONを追加する環境はスマートフォンでも可能なんですが、長いコードを書く環境はスマホだと無理があります。一文字でも文字がズレてしまったりなかったりするとしっかり表示されないのですから。
PCであっても私には難しい話です。だって知識がほぼないもん。
そこで、スマホでも使えるJSONコード生成アプリをGeminiと開発しました。
右が楽曲のJSON生成アプリ。新シングルが発表されたらここに入力する。
[追記:2026年6月30日]現在はこのシステムを使用していません。
ここでJSONのコードを生成し、サイトに自分でコピペするのです。
本当はここもなんとかステージング環境を作りたかったのですが、現時点の私には不可能で、Geminiと一緒に作ろうとしましたが、皆さんに見えているあのサイト自体がぶっ壊れたりと問題が発生するので、当面の間はこのような形で更新していこうと思います。
エンジニアの皆さん向けの解説にはなってしまいますが、楽曲データを右画像の画面で生成して公開環境にある楽曲データベースに入力し、セットリストの入力画面の最下部にある曲入力エリアの上部にある「-既存曲・セクションを選択-」というところを押すと、楽曲データがプルダウンで表示されるシステムになっています。自分の曲ではない曲をイベント内で歌う時もありますが、その際にも対応できるようにその下に自由入力欄を設け、そこに岬なこさん以外の曲が来た際に対応しています。実際にこれが活きたのはFCイベントや外部イベントのデータを入れる時ですね。
こはならむさんの「不完全花」をこはならむさんと岬なこさんで歌唱した際にこの件の入力が実現した。
こうして、JSONを採用したデータベースが完成しました。
AIで制作したとはいえ、人間側から「これやるにはどうしたらいいですか？」でコードをポンと出されても、実際の環境に置いたらうまく動かなかったりする時もあって困った時もありましたが、何とか乗り越えて無事に基礎が出来上がってよかったです。
プログラミングの話をしていると何言ってるか分からなくて頭痛くなる人もいるでしょうし、ここまでにしておきます。
実現したかったけど、大人の事情で実現に至らなかったもの
さて、ここまで順調そうに見えますが、もちろんそうでない部分もあります。
実は技術的にできたけど、残念ながら大人の事情でできなかったものもあったのです。
それがなにかというと、YouTubeのMVの埋め込みです。
何を言ってるか分からない人のために...こういうことです。
このように埋め込みをして楽曲データベースを作成しようと思ったのですが、実はこれをするためにはJASRACに許諾を取らなければできません。
今回制作したデータベースの運用はあくまで私個人で行っており、許諾を取ったとしても使用料をサブスクリプションのように毎月単位で支払う必要があるのです。実際私が参考にさせていただきましたLL-Fansさんは2021年にJASRACの契約を締結しており、このおかげでYouTubeの埋め込みが楽曲データベース内で実現しています。
2021年残すところ僅かとなりました。
— LL-Fans (@LLFans_jp) 2021年12月31日
今年のLL-Fansの主な活動は次の通りです。
📌YouTube埋込のためJASRACと契約締結
📌イベントDB（セトリ）公開
📌ラブライブ！シリーズGoogleカレンダー公開
📌2000フォロワー突破
📌運営体制の構築
それではカウントダウンライブ行ってきます！#lovelive #LLFans pic.twitter.com/74iBfmtcbR
今後アクセスが増えるようであれば検討しますが、現時点では不要ということで私が運営する「岬なこデータベース」内にそのようなものは設置していません。いくら自分の推しとはいえこんなところにお金かけたくないので、各自でYouTubeを立ち上げて「岬なこ 曲」とか調べてください。ただ、あくまでこれは埋め込みのみの話になりますので、YouTubeのリンクの掲載に関しては問題なくできるかと思います。問題なくできそうであれば実装する予定ですので、今後のアップデートを楽しみにしていただければと思います。
いとも簡単に埋め込めるからといって、他人の、しかもプロである有名アーティストの演奏やプロモ動画を外部サイトにペタペタ貼り付けてもいいのだろうか。
というわけで早速、1ユーザーとしてJASRACのネットワーク課にYouTubeとニコニコ動画の利用方法について電話して聞いてみた。それによると……、
・動画へのリンクを張るだけなら許諾不要。ただし、埋め込みは、配信の主体がサイト側になるので次の注意が必要
・有名アーティストのPVや演奏動画を埋め込む場合、権利者（アーティストや楽曲管理者）の許諾が必要
・権利者の許諾があって初めてJASRACも許諾を出せるがくぜんとした。冒頭で紹介したような有名アーティスト動画の使い方をしたら、アーティスト本人なり、楽曲を管理する出版社なり、レコード会社なりの許諾に加え、JASRACの許諾が必要になるということだ。
有名アーティストの動画をブログに埋め込んだら使用料を請求されるのか？：JASRACに聞いてみた（1/4 ページ） - ITmedia ビジネスオンライン
このあたりはお金が絡む話になりますので慎重に更新を行っていきます。何にせよ最近歌詞掲載を行ったことが仇となって高額請求がかかった方も中にいらっしゃいますからね。
自分頭悪すぎて泣ける😭😭
— san@個人開発初心者 (@s_s3s3s_s) 2026年2月23日
高校の頃から運営してるサイトで、一つだけ歌詞を載せてしまっていたせいでJASRACから請求が来てる😭
歌詞載せたページで500円も稼いでないのに10万以上払わないといけないっぽい
学生にこれはきついよ😭😭
まじ頑張ってお金稼がないと
ちなみに、この「岬なこデータベース」の公開にあたり、実際に事前にJASRACへお問い合わせを行っており、歌詞やメロディの掲載がなければ問題なく公開できることを確認しています。ですので、現在の環境を維持して更新していこうかなと思います。先述の通り、めっちゃ需要があれば契約締結も視野に入れていますので、あんまり期待はしてほしくないですが、0.000001%ぐらい可能性があると信じてお待ちください。
(って言いながらこれ個人運用だからあまり金かけたくないんだよなぁ...と独り言。)
余談ですが、このサイトでのYouTubeのMVの埋込みは運営会社のはてなブログがJASRACとの包括契約を締結しているため問題ありません。これがきっかけで私ははてなブログで記事の更新をしています。noteさんがこれをしているのであれば私もそっちに移行しようかななんて考えたり...
最後に
ここまでご覧いただきましてありがとうございます。
今回のサイト制作で学んだことは、「AIさえあればサイト制作も容易にできてしまうんだな...!!」っていうことに実際やったからこそ驚いたのと、どんなことも基礎を固めるって大切なんだな!!ってこと。曲やセトリのデータを入れるためにはサイトをデザインまで決めて構築する、一軒家を建てる工程が必要であり大事だよってこと。それを改めて感じました。
今後も更新はしていきますが、あくまで趣味で制作したサイトなので更新の速さに期待はしないでいただければと思います。
さて、これを機に私もプログラミングの勉強でもしますかね...
でも私、大学でC言語を学ぶ授業を履修したけどもう何にも覚えてないんだよなぁ...
だめだこりゃ。私はHTMLとCSSしかお友達になれなそうです。
