はじめましての方ははじめまして。
当ブログ管理人のDAsanです。
毎年楽しみにしているマイクラ肝試し企画を快適に視聴するため、最大6枠の動画を同時表示できるYouTube視聴アプリをClaude CodeとChatGPT、Claudeを活用して作りました。AIだけでは70点の作品を、人の手で100点に近づける開発プロセスを体験。17個の変更依頼書を使った試行錯誤の開発記録です。
ないなら作ればいいだろ！
作ろうと思った直接のきっかけは、毎年楽しみにしているマイクラ肝試し企画を快適に見たかったから。
複数の配信者が同じワールドに入って肝試しをする企画で、僕は2014年から毎年楽しみにしていて、いつもたくさんウィンドウを開いてそれぞれの視点を同時に開いて、いろんな参加者さんの視点を見るのが楽しみなのですが。
ブラウザでたくさんのウィンドウを開いて並べるのもけっこう手間がかかる。
既存の公開されているマルチビューアーもいくつかあるけど、個人的にもう少しこうしたい。というのがあって「これが完璧！」というものがなかった。
コラボ配信を見るときに絶対便利になるしいつか作ろうかなぁと思ってた。
あと今、個人で大きなプロジェクトを作ってるんだけど、そのためにClaude Code（AIがコードを書いてくれるツール）を使いこなせるようになりたかった。比較的簡単に作れるアプリで練習して、実際に公開するまでの経験を積んでおきたいっていう狙いもあって、
ないなら今作ればいいだろ！ということで始まった。
今のAIはよくて70点の仕事しかできない。
個人的にいろいろなAIを使ったソフトを触ってみて、AIがかなり使いやすく便利になったとはいえ、AIだけでは70点くらいの作品しか作れないと思ってる。
結局それを100点に近づけるのは人の仕事だなって思ってます。
AIとアイデアを練っていても、やっぱり今までにあるものを学習してきているAIはすでにあるものをの中からしか提案してきません。
新しい物のアイデアは結局人で、そのアイデアを思いつくために会話しながら情報を整理する便利な話し相手として活用しています。
今回もその前提で考えて、AIと人間でうまく役割分担しながら作ってみようって考えた。
仕様書作りから始める
まずはもともとChatGPTのPlusプランを利用していて、ChatGPTでアイデアをまとめていたのですが、GPT5になってからどうにも使いにくくなったので、ClaudeのProプランに移行して、あらためてClaudeとやり取りしながら、やりたいことを全部まとめて仕様書を作った。
「こんな機能が欲しい」「技術的に実装可能？」みたいな相談を重ねて、最初の設計を固めた。
最初に決めた仕様
- 最大9枠（3×3の格子状）で動画とチャットを同時表示
- 各動画の音量を個別に調整
- ソロ機能（1つの動画だけ音声を再生）
- ミュート機能（個別に音を消す）
- VUメーター（音量レベルを視覚表示）
- 動画とチャットの横並び表示
YouTubeの利用規約に従って、自動再生は使わない。複数動画の同時再生機能も規約上NGだから実装しない。
音楽に関わってきて、音楽制作もしているものとして、音量調整はミキサー形式が使いやすいと思っていた。
だから、ミュートボタンだけでなく、その配信の音声だけにするソロボタンも必要だろうと思って実装したかった。
また、たくさんの音を聞きながら音量調整するときにVUメーターがあったほうが視覚的にわかりやすく、調整しやすいと思っていたので実装したかった。
既存のマルチビューアーにはチャット表示がなかったり、ソロボタンや、VUメーターがなかったので、個人的にあったほうがいいだろうという機能を仕様に入れた。
Claude Codeを使えるようになりたい
今、もっと大きなプロジェクトを個人的に作っていて、それを作るためにもClaude Codeを使えるようになっておきたかった。
Claude Codeというコードを書くのに現状最強と言われている機能があり、それを使えるようになりたかったのでChatGPTからClaudeに乗り換えたというのもあり、それがProプランでも使えるので活用したかった。
こういったものって調べてもエンジニア向けの解説しかないからAIに聞きながら実装して、普段使っているコードエディターのVScodeに連携した。
Claude Codeでの実装体験
実際にClaude Codeを使ってみたら、確かに最初の仕様書を見せただけで仕様書通りに動くものを作ってくれた。
それが1分もかからない。
ChatGPTやClaudeもコードを書かせたら書いてくれるが、Claude Codeの場合、これはHTMLファイルだけだが、複数のファイルにまたいで作る場合も指定のフォルダ内にその構成の全部を作ってくれて、そのファイル構成を全部見てその後の作業をしてくれるのがとても快適でした。
でも予想通り、細かいところや「仕様書に書かれてないけど、こうしたほうがいいよね？」っていう配慮はされない。やっぱり70点以下の出来だった。
そこから自分で内容を理解しながら、どういう設計にしたらいいか、どういう順番で動かしたらいいか、見た目のデザインはどうするかを考えて、変更依頼書を作ってClaude Codeに見せては変更してもらうというのを繰り返した。
変更依頼書での試行錯誤
Claudeで問題点を洗い出して、そう修正依頼をしたらいいかをまとめて変更依頼書を作って、それをClaude Codeに見せて修正してもらう。
ただ、まとめて変更をするときに問題があった。確かにその変更依頼書通りにはしてくれるんだけど、もともとちゃんと動いていた部分が動かなくなったりする。
結局「そういうところは変更しないで」って明確に書くべきだったんだけど、そういった経験で使い方が分かってきた。
最終的に変更依頼書は17個も使うことになった。前半は大きな機能追加や設計変更、後半はちょっとした修正や細かい機能追加って感じ。
ClaudeはProプランでも5時間制限で作業中断
Claudeは一定の利用で5時間つかえなくなり、5時間後にリセットという仕様があり、Proプランでも無料よりはたくさん使えるものの、無制限で使えるわけではないです。
ClaudeのProプランでClaude Codeを使っていましたが、やはりコードを書いてもらうと、Proプランではあっというまに制限に引っかかります。
そこから5時間使えなくなるので、作業は5時間中断です。
最初は細かい調整も全部変更依頼書にまとめてClaude Codeに見せて変更していたのですが、この使い方だとすぐに制限になってしまっていました。
途中から、ちょっとした変更は手作業でするようになり、大掛かりな変更だけを変更依頼書にまとめてするようにしました。
それでもコードをもっと大量に書くようなアプリを作ろうと思ったら、Claude Proプランでは足りないだろうなって感じました。
実装できなかった機能
ChatGPTとClaudeで実装可能性を相談しながら最初の仕様書を作ったけど、実際にやってみると実装できない機能もあった。
VUメーターの挫折
個人的に音楽制作をやってるから、視覚的に音量レベルが分かるVUメーター（音量の大きさを縦棒で表示する機能）を付けたかった。
最後まで粘って実装を試みたんだけど、YouTubeの動画から音声データを取得する部分でブラウザのセキュリティの制限の問題があるようで、結局断念することになった。
チャット表示の問題
最初は動画とチャットを横並びで表示する予定だったけど、チャット幅を広げると動画が小さくなりすぎるし、かといってチャットが狭すぎると文字が読めない。
結局、メイン画面は動画のみにして、チャットは各動画ごとにポップアウトして別ウィンドウで開く方式に変更した。
アーカイブとプレミア公開のチャット表示は、URLの取得方法ライブ配信と違いYoutube側で動画IDとは別の番号が公開されてない仕様で組み込まれていて、どうしても表示できなかった。
ほかのマルチビューアーでもアーカイブとプレミア公開のチャットに対応してないのはこのせいかと思った。
しかし、ChatGPTやClaudeに相談してできるって言ってたやんけ！ってなったけど、まぁしょうがないね。
開発中に変わったこと
仕様を変更しながら進めていくうちに、最初の案からかなり変わった。
最大枠数を9個から6個に変更
実際に作ってみると、9個も表示すると再生が安定しない。
これは既存のアプリのTwitchtheaterというものでもテストした画面。
自分で作ったアプリだけじゃなくて、Twitchtheaterでも同じように9個表示したら再生が止まったりする。
使っているPCでの実測で下り2.5G近く出ているのでこれは通信の問題ではなく、ブラウザの問題だと思い、安定して再生できる枠数を模索して、6枠にすることにした。
メニュー画面の統合
最初はURL入力部分と音量調整部分を別々の場所に作ってたけど、メニューのシステムが複雑になりすぎた。
というのも、いろんなところに入れた動画を好きに削除をしたときに枠数によってレイアウトを崩さずに問題なく追加削除できるようにするのにはもともとのレイアウトでは手間がかかりすぎると考えた。
VUメーターが実装できない時点で、ミキサー型にするメリットはあまりなくなったので、全部を動画ごとにまとめて、動画と同じようにレイアウトが動くように仕様を変えた。
これはこれでシンプルになってよかったと思う。
HTMLだけの仕様から、スタイルとJavaScriptを分けることに
作るものはシンプルで技術的にも簡単なものだから、HTMLファイル一つで完結するようにしようと思って始めたのですが、使いやすくいろいろ変更していくうちにコード量が多くなってきて、Claude codeが一度に処理できる限界を超えてしまった。
そこで、HTML、CSS、JSとそれぞれファイルを分けて作ることにした。
こうしたことで、Claude codeは問題なく処理できるようになった。
それに、自分で修正するときにも見た目ならCSS、レイアウトならHTML、システムならJSと、見るところが分かれたので、作業はしやすくなった。
最後のちょっとした修正や機能追加は人の手で
終盤はちょっとした見た目の修正や、便利そうな機能追加だったので、Claudeで相談しながら自分の手で修正や追加をしていった。その都度Claudeにチェックしてもらって、動作確認をするって流れ。
この段階になると、AIに全部任せるより自分で理解しながら直した方が早いし確実だった。
それに、途中の変更依頼書で修正していた時に、もともと動いていたところが動かなくなったりしたので、それを避けるためにも完成に近づくほど手作業が増えた。
YTコラボビューアー完成
マルチモニターで上下2画面での配置です。チャットはポップアウト表示なので好きなところに置けます。
画面はその時にライブ配信していたチャンネル登録している配信を適当に並べています。
メニュー画面表示時
メニュー画面非表示
基本機能
- 最大6個の動画を同時表示
- ドラッグ&ドロップでYouTube URLを簡単追加
- 各動画の個別音量調整
- チャットボタンでチャットをポップアウト表示
音声制御
- 横スライダーで音量調整（マウスホイール対応）
- Sボタンでソロ再生（その動画だけ音声オン、他は自動ミュート）
- Mボタンで個別ミュート
チャット機能
- 各動画のチャットを別ウィンドウで表示
- ライブ配信のみ対応
- チャットボタンで開閉をワンクリック操作
- アプリのタブを閉じたり、ブラウザを閉じるとポップアウトのチャットも閉じる
操作性
- メニューは画面右端の視聴時にじゃまにならない小さなボタンから開く
- URL入力後にチェックマークボタンで動画読み込み
- ×ボタンで動画削除
- URL追加で最大6枠まで利用可能
- 全画面ボタンでブラウザをモニター全画面表示
開発期間と公開まで
最初にChatGPTに相談したときは「1日でできますよ」って言われて、Claudeに相談したら「3日くらいでできます」って言われたから3日くらいで公開できる予定だった。
Claude Codeの練習も兼ねてるし、シンプルなアプリだから簡単にできるだろうって思ってた。
でも実際に作り始めると「公開するなら他の人にも使いやすいように」「バグができるだけ出ないように」って考えることになって、設計を何度も見直すことになった。
UI（操作画面）も最初の案から大幅に変更したし、エラー対策もしっかり作り込んだ結果、結局1週間かかってしまった。
個人用ツールで終わらせるなら動けば十分だったけど、せっかく作るなら他の人にも使ってもらったほうがいいし、公開用のアプリって作ったことがなかったから経験しておきたかった。
誰でもフリーで使えます。
このブログのサブドメインにおいて公開しました。
個人製作なのでバグが出ることもあると思いますが、コラボ配信を見るのに便利だと思うので使ってみてください。
一度ページを読み込んだら、動画の再生や音声制御は全部ブラウザ内で処理されるので、サーバーには追加の負荷がかかりません。
最初のHTMLファイルをダウンロードするだけで、あとはYouTubeと直接やり取りします。
個人的に初公開のアプリを完成まで作れた。
AIを使って個人的にいろいろやってきて、今回この開発を通して、また一段階AIの活用の幅が広がった気がします。
小学生の時に初めてパソコンに触れて、当時は黒い画面にBASICというプログラム言語でLINE（ｘ、ｙ）って書いてた時から、高校の時にCOBOL一級をとったけど当時は高卒でそれらを扱える僕を理解して雇ってくれる企業に出会えなくて、
毎回面接で「実務経験がないと」って断れられていて、しまいには「どこもそれじゃあ僕はどこで実務経験を詰めばいいんですか！」って声を荒げた若かりし頃にパソコン業界が嫌いになってそれをさけるようになり、それ以来プログラムで何か作るということをやっておらず、仕事でVBAを書いてたくらいでした。
結局小さいころにやっていたプログラムで絵を書いて動かしたりゲームをカスタムしたり、音楽を鳴らしたりしたことを何も生かせずに来たわけですが、まさかそこから20年たってからやっとこの程度のものを公開することになるとは思いませんでした。
全然大したものではないですが、今どきのプログラムを扱って初めて公開したアプリということでいい年でありながら感慨深い思いでいます。
今は、Claude codeのような便利はツールがたくさんあります。知識はそれを使うことで説明を受けながら覚えられるので、作りたいものがあるならだれでもある程度のものは作れると思います。
僕もいまこれよりも大掛かりなものを作っているので、この経験を生かしてどうにか完成させたいと思います。
それではまた次の記事でお会いしましょう。
この記事がためになったと感じましたら下のボタンからSNSで紹介してください☺️
