YouTubeトップ100｜サビだけメドレーで楽しむ最新ヒットサービス作成

普段はテレビもニュースも株価も見てないが、音楽のトレンドだけは追いかけたい。

子供が運動会で踊るダンス曲や紅白歌合戦の選曲を知らないと時代に置いていかれた老害な気分になるから。

2007年のブログでも書いたね。

娘の友達の名前が全部言えること。
娘に負けないぐらい友達がいること。

娘と同じ歌がうたえること。
自分だけのドライブミュージックがあること。

娘のいちばんの親友でいること。
いつまでも娘の憧れであり続けること。

【引用】日産プレサージュ TV-CM

2006年CM　日産　プレサージュ　桐島かれん

初「鎌倉」観光で大仏に入れず

2007年01月14日(日)　イイクニ作ろう鎌倉幕府！土日には、引きこもり生活ばかりなので、観光に「鎌倉」に行ってきました。拝観した名所は「円覚寺」「明月院」「建長寺」「鶴岡八幡宮」「長谷寺」「高徳院」「小町...

学生時代はTSUTAYAのレンタルでCD借りてリッピングして……を毎月繰り返していたけれど、社会人からはYouTubeを活用してる。

例えば「Aqua Music JP」チャンネルで毎週のように15分ぐらいのTop100のランキングを作成してくれていた。

ただし、2024年でなぜか配信が中止となっている。

他にも、多くの人が流行曲を集めたYouTubeも上げてくれてるが、殆どが本人の声じゃ無いから萎えてしまった。

だったら著作権違反のない範囲で自分で作ってみるかー。

Youtubeメドレーサイト構造説明
実現機能と今後の拡張
おわりに

同じコンセプトで2009年頃にサイトを作ったことがある。

仕組み的にはオリコンチャートからXMLを持ってきて、ランキングTop10のYouTubeのURLをGoogleから探し、埋め込みYouTubeを表示する。

数週間かけて作成したがUXが悪くいつの間にか使わなくなった。

同じコンセプトで優秀なサイトがあったし、そもそもオリコンのランキングが時代遅れ。

で、今年に入って偶然「YouTube music charts」というサイトを見つけた。

プレイリストも提供されてるので多くの人はこれで十分かもしれない。

でも僕はフルで聞くのではなくCDカウントダウンのようにサビだけを聞き流したい。

一曲3分×100曲なら300分（5時間）かかるので通勤中に聴き終わらないし「タイパ（タイムパフォーマンス）」重要。

だったら、「死ぬまでに作りたい100」にも入ってる念願のサイトを作ってみよう。残り99は知らないけれど。

Youtubeメドレーサイト構造説明

「YouTube music charts」はTop100のCSVを公開しておりYouTube URLも提供してくれてる。

まず上記「youtube-charts-top-songs-jp-weekly-yyyymmdd」をダウンロードする（邦楽の場合）。

それをJSで読み込み順番にYouTube再生をする。

最後にChatGPT-4o様より御神託ごしんたくを賜たまわる

ほんとにありがてぇ……ありがたいこった！

デザインまで全てをChatGPT様がやってくれる。

完成。

YouTube邦楽トップ100｜サビだけメドレーで楽しむ最新ヒット

YouTubeで話題の邦楽トップ100を厳選！サビだけをつなげたメドレーで、最新ヒット曲を手軽に楽しめるページです。

少なくとも僕には、JavaScriptとCSSでこれだけの要件を短期間で満たす技術力はない。

実現機能と今後の拡張

連続部分再生だけでなく次のような機能がある。

[済] 曲を戻したり進めるボタン
[済] 任意の位置から再生開始（例：10番目からスタート）
[済] シーク時間の任意指定（例：30秒）
[済] レスポンシブデザイン対応
[済] 100曲の一覧表示
[済] 100曲再生後に1曲目から再度ループ再生
[済] サムネイル表示
[済] 上昇順 or 人気順 or 新曲順の切り替えトグルボタン
[済] サイドメニュークリックで曲ジャンプ
[済] 再生中の曲が視覚的に分かるようにサイドバー色付け
[済] 最大再生数の指定機能（例：50曲）
[済] 再生中の曲名がサイドバーの先頭に表示されるように自動スクロール
[済] 日本・米国・韓国の切り替えトグルボタン追加（邦楽、洋楽、K-POP）
[済] リリース日、作詞・作曲表示
[済] 過去ランキングの選択（履歴）

これでBraveブラウザを使えばバックグラウンド再生を実現してるので、聞き流しプレイヤーの出来上がり。

最後に未実装、気を付ける部分を記載しておく。

[済] 年齢制限が設けてある動画スキップ

YOASOBI「夜に駆ける」が「この動画には年齢制限が設けられており、YouTube でのみご視聴いただけます」と表示されて見れない。

このような場合には「onErrorイベント」を使用してエラーを検知し、次の動画に移るようにする。

function onYouTubeIframeAPIReady() {
    if (videoIds.length > 0) {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: videoIds[currentIndex],
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError // エラーハンドリングを追加
            }
        });
        updateVideoInfo();
    } else {
        console.error('No video IDs found.');
    }
}

// 年齢制限付き動画や再生できない動画を検知
function onPlayerError(event) {
    console.error('動画が再生できません。次の動画に移ります。エラーコード:', event.data);
    nextVideo();
}