加賀美ハヤト社長の歌を検索・視聴できるサイトを作りました
にじさんじが誇るロックンローラーが１人、加賀美ハヤト（以下「社長」）の歌、良いですよね。（挨拶）
以前も『少女レイ』の紹介記事を書いたんですが、今回もハイパーダイマ記事です。
記事タイトルの通り、社長の歌動画や配信アーカイブを検索・ページ内視聴が出来るサイトをこの度作成しました。（非公式）
「こういうのが欲しかった」「自分も作ってみたい」という方がいるかもしれないと思い、開発理由やポイント等をつらつら書かせて頂きます。
案の定長いので読むのが面倒な人は社長の歌だけでも聞いてってください。
このサイトで出来ること
曲名、アーティスト名、コラボライバー名、タグ等による検索やソート
ページ内で視聴（Youtube動画のみ）
歌詞やサブスクサイトへのリンク
シャッフル再生
お気に入り機能
元動画へのリンク、X（旧Twitter）投稿用リンク
楽曲データはデビュー時から現在（2024年2月）まで全て入れていますが、「アーカイブ視聴出来るもの」を基準としているので、アーカイブカットされている物や有料配信されているものは一部除外しています。（※今のところは）
何故このサイトを作ったのか
「社長の歌をお手軽に聞きたい」「あわよくば他の人ももっと沢山聞いてくれ」というのがメインの目的です。
社長は大変歌が上手く、これまで色々歌ってはいるんですが、実は全部把握するのって結構大変です。
まず社長本人が作成している楽曲関係のYoutubeプレイリストは動画がメインで配信アーカイブはほとんど載っていません。そもそもYoutubeのプレイリストだと、歌枠のように1つの配信枠で複数曲を歌っている場合、個別の曲名で探せません。
次に網羅性が高いのは非公式Wikiの歌リストです（私も今回作成の際に大変頼りにしました、ありがとうございます）。ただこちらも分類の関係上、若干情報が散らばっておりちょっと探しづらい印象でした。
「あの曲、誰のチャンネルのどこの枠で歌ってたっけ？」
「歌枠の中のこの曲だけ聞きてぇ」
「いちいちYoutubeのページやアプリ開くのもめんどい、今すぐ聞きたい」
このようなニーズが私の中にあり、「じゃあそれを満たせる物を作ろう」と思ったのが発端です。
あと、社長のことをまだよく知らない人が「こんな歌も歌ってたの！？」という発掘も出来たらいいなと思って作りました。
なお、「切り抜き動画作ればいいじゃん」と思うかもしれませんが、音楽は著作権的に問題が発生しやすいのと、ご本家の再生数に貢献したいので今回は元動画を活かす仕組みにしています。
その他の機能についても「これあったら便利だなor便利じゃね？」という私利私欲の為です。「検索で絞り込んだり眺めたりしつつお気に入り追加→お気に入りだけ表示にしてシャッフル再生」が特に楽しいのでやってみてね。
サイトの仕組み
※ここからプログラム的な話が入りますが、よく分からん人は「ふーんなるほどね」と知ったような顔しといてください。
静的HTML＋ほぼピュアJavascriptで作成しています。最初のファイルのロード以外の通信は（Youtube再生や外部へのリンクを除き）全く行っていない、超ミニマムな構成です。
（普段濃い目の感想を書いているブログではfirebaseを利用しているのですが、このページはそのpublicフォルダに配置した完全静的ページとなっています。だってこっちの方が実装楽そうだったし）
サイト内再生については、Youtubeの動画埋め込み機能とそれに関するJavascript API （Youtube Player API）を使っています。これで「指定の動画を指定の時間から再生」を実現しています。ぶっちゃけこれだけです。
ちなみに以下は開発中にあった謎仕様？についてです。同内容で困った人がいるかもなので書いておきますが、関係無い人は読み飛ばしていいです。
開発中「再生開始時間の指定が効かない（効くやつと効かないやつがある）」という謎の不具合がありました。
これ、バグなのか仕様なのか分からないのですが、「そのブラウザでYoutubeにログイン済みで、そのユーザーが対象動画を途中まで再生済みで、対象動画がライブ配信のアーカイブだった場合」に発生すると突き止めました。配信アーカイブじゃない普通の動画だと発生しないのなんでやねん。
とにかくこれを掻い潜る為に「loadVideoById等で再生開始→onStateChangeで再生開始したことをキャッチ→seekToで指定位置まで移動」という実装にしています。勝手に続きから再生されるなら再生されてから目的の場所に飛べばいいじゃないというアントワネット式力技解決。
なおこの為に一瞬楽曲と関係無い音が流れてしまうことがありますが致し方無いものとしてスルーします。
リスト表示についてはJavascriptのライブラリ『list.js』を使用しています。
データの配列を渡すだけでリスト表示してくれるしソートやフィルタもしてくれる優れもの。こいつが無ければこのサイトは完成しなかった。
特に各項目の表示部分のカスタマイズ性の自由度が超高い……というか全部こっちで決められたのが大変助かりました。気になる方はソースコード覗いてgetItemHtmlメソッドをご覧ください。
なお書き方が相当雑ですまない。どうせ自分用だしという気持ち。
データ構造について
テキスト検索やフィルタリングの機能自体はlist.jsに全投げしてるのでいいとして。
問題は「どんなデータを保持するか」です。
なんせこれでサイトの使い勝手や見え方が変わるもんで、私も試行錯誤の途中です。多分同じような物作りたい人はここが気になるんじゃなかろうか。逆にどうでもいい人は案の定読み飛ばしていいです。
まずデータ構造はこうなってます。
id：このサイトでのID。最初に自動で通し番号が振られる。
videoId：Youtubeの動画ID。Youtube以外の場合はURLを記載。
startSeconds：再生開始位置（秒単位）。
endSeconds：再生終了位置（秒単位）。現在不使用。
title：曲名。
artist：アーティスト名。
waku：サイト上に表示する配信枠名（動画名）。短縮あり。
waku_full：サイト上に表示する配信枠名（動画名）全文。
date：動画が配信された日付。
kasi：歌詞サイトへのURL。（ある曲のみ）
link：サブスク等配信サイトへのURL。（ある曲のみ）
collabo：コラボライバー名。（カンマ区切り）
keyword：検索用のタグ。（カンマ区切り）
これをオブジェクト形式でJSファイルに直記入してあります。完成してからスプレッドシート→JSONでも良かったんじゃないか？と気付きましたがまぁいいとしよう。ちなみに同じ枠で複数曲がある場合には記入を楽にする仕組み（別途枠リストから情報マージ）も入れてます。
多分このサイトを使う人が主に知りたい・調べたいのは、曲名・アーティスト名・枠名で、あとコラボライバーぐらいかなと思います。
後は機能実装の為のデータ類（歌詞やサブスクサイトへのURL）ですね。まぁ言う程こだわりがある訳ではなかった。
なお枠名が2つあるのは、例えば社長の配信だと【にじさんじ/加賀美ハヤト】とかが大体の枠名には付いているんですが、このサイト上では概ね必要無いと判断。また、にじロック等ぱっと見ではいつの配信か分かりにくい枠には年を記入するなど、サイト上に表示された時に分かりやすいようにしています。
ただ、Xでの投稿時には本来の正確な枠名を使用したいのでわざわざ2つ用意しました。面倒臭い大変なんですがまぁ仕方無し。
また、タグについては割とフィーリングです。
本当は楽曲の雰囲気というかジャンルも入れようか考えたのですが、ポップスだのロックだの音楽における分類が分かりにくすぎて自分には無理だとなりました。そっち分野の有識者居たら助けてください。
結果的に現状だとライバーやユニットでの絞り込みがしやすくなっているかと思います。同枠での絞り込みもあったら便利かもしれないけど今の所は枠名をコピペしてくださいということでひとつ。
デザインについて
今回一番の強敵だったかもしれない。
ブログの方で使っている角丸カードデザインに社長のテーマカラーを組み合わせ……たのはいいんですが、そこから先をどうすべきかとめっちゃ悩みました。
出来るだけシンプルに。かつ見やすく使いやすく。理想は、眺めているだけでも楽しくなるリストにしたい。
要求だけは一丁前です。実装するのは自分なんやぞ。
最初は各動画のサムネイルも入ってなかったんですが、そういやYoutubeのサムネイルって動画IDが分かってれば取得簡単だったなと思って試しに表示させてみたところ、これいいじゃん！となりました。やっぱ画像の力はでかい。一気に見栄えが良くなった気がします。
その後も現在再生中の動画はスクロールしても固定表示にして、スマホサイズでも崩れないようにして……と、CSSパワーをフル動員。
途中でスマホだとレイアウトガッタガタになったり特定条件下で超ガクブル状態になるバグを出したりと色々ありましたが、終わってみれば結構綺麗にまとまったのでは……
いやでもフォントサイズとかカラーリングとか余白とかユーザビリティとかUXとか、デザインのプロに見られたら怒られそうだな……「メインユーザーは私なんだから細けぇこたぁいいんだよ」で突き進んだからな（ここで最初のハードル上げの帳尻が合う）……と今更ちょっと冷や冷やしてます。
すまない昔ちょこっとデザイン習ったけどセンスも技術も乏しいんだ。これが精一杯なんだ。
今後の展望
本当はお気に入り機能がもっと時間が掛かるかと思いますが、意外とサクッと実装出来てしまいました。（localStorageを使用し、idの羅列をカンマ区切りで保持しているだけ）
なので次の機能としては、やっぱり自動再生（勝手に次の動画に進む）が欲しいよね。そう、実は現状、各曲の頭出ししか出来ないからね。
経過時間カウントしてendSecondsと照らし合わせれば自動で停止したり次の動画へ進むように出来ることは分かっているのですが……
何がネックかって、そのendSecondsのデータ収集が超めんどい。
開始時間は非公式Wikiなりタイムスタンプなりにあるけど、終了時間は無い。だから自力で全曲聞いて保持していく必要がある。（ちなみに楽曲データ総数は現状214）
まぁ社長の歌だし？ 動画の場合は多分要らんし？ 最悪途中飛ばしてもいいし？ 全部聞き直すぐらい出来るっしょと言われればその通りなんですが、気が向いたらやります。予定は未定です。
ちなみにどちらかというと、社長のやったゲームのタイトルもこんな風に検索出来るようにしたいなという思いもちょっとあります。
そっちは再生機能要らないしジャンル分けが明確だしコード流用すれば結構サクッと出来る筈……
……現状データ数202（非公式Wiki参照）かぁ……このページでよくね？という気持ちもあれど「ポップ」「ダーク」とかでも検索したいよな……どうしようかな……
と迷い中でありますが、今後もマイペースに何か作れたらなと思ってます。そんな気持ちだけはあります。予定は（以下略）
終わりに
私は絵が描けません。小説は多少書けるけど大体物騒になるので出し場所を選びます。たまにはっちゃけた感想文を書きますが出来るのはそれぐらいです。切り抜き動画編集もチョットデキルものの気紛れです。あとは今回のように簡単なプログラムが書けるぐらいです。
推しの為に何かしてぇ！という気持ちがあってもやる気があんまり続かないし、今回のように短期決戦（当社比）しないとなかなか出来上がりません。
でも逆に言えば、そういう人でもちょっとコードが書けてデータ成形する根気があればこれぐらいのことが出来るよ、ということでもあります。
他のライバーさんだともっと素敵でデザインも凝ったサイトを作っている方もいます。
でもそのレベルまで行かずとも、最悪使用者が自分1人でも、何かしら行動すればもしかしたら他の誰かの助けになるかもという気持ちで作っています。
サイトや社長の紹介という他に、「みんなもこれぐらいズボラ気軽にやってみようぜ！」という意味でのダイマ記事でもあります。
もしこれを見た方で「同じような物作りてぇ！」となった方はXのDMでご連絡ください。その上でソースコード持って行って構いません。自由に改変して素敵なサイトを作ってください。（注意点があるので先にご連絡をお願いします）
前述の通り静的なので動作サーバーは問わない筈です。わざわざサーバーを借りずとも、それこそfirebaseとかGithubで公開も可能ではないかと思います。
ファンアートや小説といった二次創作が出来なくても、やれることはある。
あるいはもっとシンプルに、「社長こんな歌歌ってたんかスゲー！」という糸口にこのサイトやこの記事がなれたならば幸いです。
最後になりますが、宜しければ社長のチャンネル登録やXのフォローも何卒お願いします。加賀美ハヤトはいいぞ。
この記事が気に入ったらサポートをしてみませんか？