こんにちは。ここでは、私がYouTubeの代替版をデザインし、その後制作した（プログラミングはAIのGeminiによるものです）冒険の物語をお伝えします。私の考えでは、ショート動画や低品質なコンテンツを排除することで、より良いものになる可能性を秘めています。まずアイデアを説明し、その後に制作プロセス、その後の改善、そして将来の可能性のあるフェーズについてお話しします。
ぜひご覧ください： https://tubewell.keruanima.com/
お時間がない方のために、ここで話す内容をまとめたYouTube動画も作りました：
この動画について：脚本、組み立て、編集は私が担当し、声は自分の声を使わないようにAIで合成しました。サムネイルも自分でデザインしたものです。ですから、この小さなプロジェクトは、デザイナーや編集者としての私のさまざまな能力を働かせる機会だったと言えるでしょう。ただ、動画についてはそれほど楽しめたとは言えません。すでに多くの時間を費やしていましたし、正直なところ、私は時間に余裕があるほうの人間ではありません。
アイデア
私はYouTubeのアルゴリズムの仕組みに疲れていましたし、TikTokのような短くて中毒性があり、たいていは質の高い内容に乏しい動画へと向かおうとする方向性にも疲れていました。例外はわずかです。コンテンツの高速な消費は私たちの脳を疲弊させていますし、何か具体的なものを探したいときに興味のないもののランダムな提案が出てくるのも助けになりません。
だからこそ、本当に解決策があり得るのかと自問し始めました。別のプラットフォームを作ってYouTubeと競争してもうまくいかないことは明らかです。
- プラットフォームをコンテンツで満たす必要があります
- そして、それほど多くのデータを保存して表示できるサーバーも必要です。
安くも簡単でもありません。すでにVimeoとDailymotionという2つの企業があり、それぞれが独自にYouTubeの競合として一定期間存在してきました。ただし、そのモデルはますます特定のニッチに焦点を当てるようになっており、たとえばVimeoは現在、高品質でカスタマイズオプションの多い動画を見せたい企業やプロフェッショナルによって主に使われています。
さらに、私はYouTubeを見るのをやめたくありません。コンテンツを見つけるのが難しいことや、質の高いコンテンツを覆い隠すほど多くのくだらないコンテンツがあるにもかかわらず、見る価値のある動画を作るクリエイターは依然として存在します。ですから解決策はYouTubeと競争することではなく、むしろ好まないものを取り除いてYouTubeのコンテンツを消費する方法を作ることであるべきです。
そこで考えました。登録や動画のアップロードを必要とせず、人が高品質だと思う動画を追加できるウェブサイトを作れるのではないかと。YouTubeのリンクを貼るだけで、ページがそれを追加します。これは法的にも私たちを守ります。YouTubeのコンテンツをダウンロードして別のプラットフォームにアップロードすることは合法ではないからです。さらに、この方法ならコンテンツのホスティング問題も忘れられます。プレーヤーは依然としてYouTubeのものであり、動画をホストして提供するのもYouTubeのままです。私たちが持つのは、基本的に各YouTube動画へのiframe、つまり窓です。
そして私は民主的な仕組みのファンなので、誰でもYouTube動画を追加できる仕組みと同時に、そのコンテンツが質の高いものかどうかを一般の人が決められる方法があるべきだと考えました。こうして、カルマが非常に低い動画は削除され、ブロックされるという論理を作りました。
カルマは、YouTubeとは独立した、このサイト独自の動画の採点システムです。動画は0から始まり、人が高評価または低評価を押すと、カルマが1点ずつ上がったり下がったりします。カルマのポイントが非常に低い動画は消え、誰かが再アップロードしようとしても、サイトがそのURLを覚えてブロックするためできません。これが、このサイトを質の高いとされる動画を見つけられる場所にする鍵です。もちろん完璧ではありません。多数に好まれるコンテンツである以上、多数が常に正しいとは限らないことは私もわかっています。しかし残念ながら、今のところ多くの訪問者を満足させるコンテンツを得るために最も的確だと私が思えた唯一の方法です。純粋に統計です。
カルマシステムに加えて、サイトは自動的に並び替えられ、カルマの高い動画が上位に表示されます。ですから、たとえばチュートリアルの動画を探すとき、人々の役に最も立ったものが常に上位に来ることが保証されます。
仕組みは説明しましたが、ではどうやって作ったのでしょうか。
デザインと開発
デザインについては、Figmaで画面を作成し、それを画像として書き出して、Geminiが参照できるようにしました。そして、ウェブサイトがどう動くべきかの私の説明と合わせて、コードを書いてもらいました。テストを重ね、結果に満足するまでこのバイブコーディングを続けました。その時点でGitHubに行って新しいリポジトリを作成し、Codespacesにコードを貼り付けました。リポジトリにプロジェクトができた後、Netlifyに行ってそこでプロジェクトを作成し、デプロイして動作するようになりました。
FigmaのデザインはYouTubeを思い起こさせ、何よりもわかりやすいインターフェースを目指しています。YouTubeの主に明るいインターフェースに対抗するため、ダークテーマを使いました。画面も多くは望んでおらず、ミニマルなデザインがUIだけでなくUXにも必要でした。ユーザーがホーム以外で訪れる画面は、動画アップロード用のフォームと各動画のページの2つだけです。ホームはすでに動的な検索として機能しており、非常にシンプルなカテゴリ絞り込みシステムを備え、関心のあるカテゴリを探しやすくするための独自の検索ボックスもあります。
動画アップロードフォームでは、ユーザーの登録やログインは必要ありません。先ほども言ったように、誰にでも開かれたシンプルで民主的な仕組みを目指しており、ログインという障壁を設けるのはこの場合適切ではありません。また、フォームで求めるのはURLとカテゴリの割り当てだけです。カテゴリを含めたのは、ユーザーが動画を複数のカテゴリに入れるべきだと考えるかもしれないからです。当然、ある程度のモデレーションが必要になりますが、必要な追加だと思いました。しかも、このセレクターは使い方が複雑ではなく、リスト全体をスクロールしなくて済むように検索ボックスまで備えています。
言っていなかったことの一つに、サイトにある程度のモデレーション管理を保つために管理パネルも作ったことがあります。フッターからアクセスでき、キーワードを使ってTelegramに一時的な使い捨てパスワードを送ってもらう仕組みで、これにより安全に管理パネルへアクセスできます。アカウントとパスワードのログインを設けてハッカーに総当たり攻撃で侵入されるより、はるかに安全です。
管理パネルには、少しモデレーションするのに役立つ機能があります。コンテンツの削除、ブロック、ブロック解除、そしてカルマのリセットです。
最後にやりたかったことの一つは、Netlifyが無料で提供するURLよりも親しみやすいURLを設定することでした。それが https://tubewell-by-keruanima.netlify.app で、https://tubewell.keruanima.com/ は、私のメインドメインであるkeruanima.comの下に、ホスティングプロバイダーでサブドメインとして作成したものです。こうすることで、より親しみやすいURLになるだけでなく、よりプロフェッショナルに見えると思います。導入のプロセスは複雑ではありませんが、ドメインにCloudflareを使っている場合は、そのサブドメインのCloudflareのIPv4アドレスがNetlifyを指すように必ず設定することをおすすめします。最初は私も気づかず、ホスティングプロバイダーだけで設定したDNSの伝播の問題だと思って数日を費やしました。
次のような無料サービスを利用できます： https://dnschecker.org/all-dns-records-of-domain.php このような問題が起きたときに、どこがうまくいっていないかを確認するためです。スポンサーではありませんので、お好みのサービスをお使いください。
結果
あとはもう少しです。あとは人々がこのウェブサイトを使ってくれるかどうかで、実験がうまくいくかどうかがわかります。今のところ動画をアップロードしているのは私と数人の友人だけで、今の段階ではお気に入り動画の共有ライブラリとしてしか機能していないと言えるでしょう。実際ほぼそのとおりですが、もっと大きな規模になればいいと思っています。
ぜひ訪れて試してみて、どんな具合か見てみてください。このサイトについての感想、アイデアが気に入ったかどうか、どう改善したらよいかなどをコメントで読めたらとてもうれしいです。この動画と私の経験がお役に立ったなら、サイトにはお好きな金額を寄付できるボタンがあります。それはコンテンツが本当に喜ばれているかを知る助けになり、このような、あるいはもっと良いコンテンツを準備するために時間を費やし続ける励みになります。
その後の改善
かなり頻繁に起こっていたことの一つに、データが正しく保存されないことがありました。動画をアップロードしてしばらくサイトに表示されても、数分後にサイトに戻るともうなくなっていることがありました。いいねでも、コンテンツをモデレーションしているときでも同じことが起こりました。Netlify Blobsが関係していることはわかっていて、そのとおりでした。
Netlify Blobsは、多くの現代的なクラウドデータベースシステムと同様に、「結果整合性」というモデルで動作します。
Netlifyが、どこからアクセスされてもウェブサイトがとても速く読み込まれるように、世界中にサーバーを配置していると想像してください。
- 動画をアップロードしたり「いいね」を押したりすると、その情報はあなたに最も近いNetlifyのサーバー（たとえばフランクフルト）に送られます。サーバーはそれを保存し、「完了、保存しました！」と応答します。だからこそ、変更がすぐに反映されるのです。
- 背後では、Netlifyがその変更を世界中の他のサーバー（米国、アジアなど）に「伝え」始めます。この同期プロセスは 伝播 と呼ばれ、非常に速いものの、瞬時ではありません。数秒から1～2分かかることがあります。
- ここで問題が起こります： 動画をアップロードした直後にページを再読み込みすると、「すべての動画をくれ」というリクエストが、別のNetlifyのサーバー（たとえばロンドン）に届く可能性があります。そのサーバーは まだ 新しい動画の知らせを受け取っていません。そのサーバーは古いリストを返すので、動画が消えてしまったように見えます。
同じことが投票でも起こります。投票は保存されますが、すべてのサーバーに伝播する前に再読み込みすると、古いカウンターが表示されることがあります。
解決できるのでしょうか。
完全に取り除くという意味で「解決」することはできません。これは、こうしたシステムをこれほど高速で拡張性のあるものにする特徴だからです。世界中のすべてのサーバーを瞬時に同期させようとすれば、あらゆる操作（投票、アップロード）に膨大な時間がかかるでしょう。
当時のコードは、次のような技法を使っていました。それは 「楽観的更新」（Optimistic UI Update）。何か操作をすると：
- コードはサーバーを待ちません。 即座に反応を返すために、ブラウザのインターフェースをすぐに更新します。だからこそ、投票するとその場で変更が見えるのです。
- その後、情報をサーバーに送信します 永続的に保存されるようにするためです。
別の方法として、読み込みアイコンを表示してデータが伝播するのを待つこともできますが、それでは非常に遅くなります。ですから最善なのは、このデータを保存する方法を変えることです。そこでジレンマが生じます。
代替案はあるのでしょうか。
はい。Google Sheetsを使う選択肢を除けば、主に2つあります。ここではSupabaseとVercel KVです。
選択肢1：Supabase
Supabaseは、Firebaseのより現代的でシンプルな代替手段だと考えてください。本物のPostgreSQLデータベースを提供してくれるので、整合性の問題を根本から解決できます。
- どのように機能するのでしょうか。 データベースを作成する外部サービスです。私たちのNetlify FunctionsからSupabaseに接続し、データを読み書きすることになります。
- 長所：
- 即時の整合性： データを保存すると、すぐに誰でも利用できるようになります。従来型のデータベースなので、伝播の遅れはありません。
- 非常に太っ腹な無料プラン： データベース500MBと月5万回のAPI呼び出しが提供されます。動画の情報（テキストのみ）を保存するなら、数十万本の動画を問題なく保存できるでしょう。
- 優れた管理画面： データを表示・管理するための、表計算ソフトに似た非常に視覚的なインターフェースを提供してくれます。管理作業にとても役立ちます。
- 短所：
- 登録して設定しなければならない外部サービスがもう一つ増えることになります（ただし、そのプロセスは非常に簡単です）。
選択肢2：Vercel KV
VercelはNetlifyの主な競合であり、そのストレージサービス（KV）は非常に高速で整合性があります。
- どのように機能するのでしょうか。 キー・バリュー型のストレージシステム（Blobsに似ていますが、より強力です）で、Vercelの「Serverless Functions」と連携します。
- 長所：
- パフォーマンスと整合性： 非常に高速で、データは瞬時に整合性が取れます。
- 堅実な無料プラン： Vercelの「Hobby」プランは、非商用プロジェクトなら永久無料で、KVの利用も含まれます。
- 短所：
- 移行が必要： プロジェクト全体をNetlifyからVercelへ移す必要があります。プロセスはほぼ同じとはいえ、プラットフォームの変更です。
もともとSupabaseを使う選択肢は除外していました。できるだけ少ない数のサービスで全部を済ませたかったからです。すべてをNetlifyに置けるならそれで十分でした。しかし、すべてをそこに構築し終えた今、Vercelに移るのは、データを保存する場所をSupabaseに変えるよりも手間がかかります。しかもSupabaseは、予期せぬ請求を心配することなく、はるかに堅牢で拡張性のある選択肢です。私は問題に対してその解決策を選ぶことにしました。
今では、サイトが以前よりもうまく機能していることは明らかです。バックエンドからの応答はほぼ即座で、いいねも動画も消えなくなりました。
さらに改善できるのでしょうか。
もちろん、サイトは完璧ではありません。適切な改善点はいくつかあります。
非常に必要な改善は、同じ人が同じ動画に何度もいいねできないようにする仕組みを追加することと、ボット対策の障壁を追加することです。IPアドレスを特定し、何らかのCAPTCHAシステムを追加する必要があるかもしれません。
いずれにせよ、実験と小さなプロジェクトとしてはうまく機能していると思います。試してくれる人たちは小細工をせず、人工的ないいねを作らないと信じています。このような個人的なプロジェクトでそんなことに時間を無駄にしたい人はいないでしょう。
