<h2 id="%E3%83%AA%E3%83%B3%E3%82%AF">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> リンク</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ea84cdd8a913e" src="https://embed.zenn.studio/card#zenn-embedded__ea84cdd8a913e" data-content="https%3A%2F%2Fvvave.app" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vvave.app" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vvave.app</a></p>
<h2 id="%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88" aria-hidden="true"></a> スクリーンショット</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/ad3eee872f02-20240117.png" loading="lazy" class="md-img"></p>
<table>
<thead>
<tr>
<th>プロフィール</th>
<th>検索</th>
<th>プレイヤー</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://storage.googleapis.com/zenn-user-upload/c0e097439e2e-20240117.png" loading="lazy" class="md-img"></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/8b252d8f5691-20240117.png" loading="lazy" class="md-img"></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/b68acab13632-20240117.png" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<h2 id="%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E6%A6%82%E8%A6%81" aria-hidden="true"></a> サービス概要</h2>
<p>タイトル通り、<strong>現状はSoundCloudみたいに自分の作った曲を投稿できるサービス</strong>です。</p>
<p>現在実装されている機能は以下の通りです。</p>
<ul>
<li>楽曲投稿</li>
<li>アルバム</li>
<li>ランキング</li>
<li>メッセージ（DM）</li>
<li>フォローとフィード（タイムライン）</li>
<li>いいねとブックマーク</li>
<li>タグ・キーワードによる検索</li>
</ul>
<p>このようにとりあえずSoundCloudのような楽曲投稿サービスとしての機能は最低限備えていますが、<strong>ゆくゆくはミュージシャンの活動拠点になることを目指しています</strong>。というのは、例えばYouTubeへの投稿や各種サブスク配信へのリンク、またライブなどイベントへの参加日程など、活動の実績/予定などがすべて1ページでわかるようにしたいと思っています。</p>
<p>また、<strong>ミュージシャン同士の交流/発見の場にしていきたい</strong>です。バンドメンバーや演奏を依頼する相手を見つけるのに適した場所はあまりありません（いわゆるメン募サイトは機能不全だし、Twitterが現実解かもしれないが検索性は高くない）。</p>
<p>というわけで、<strong>実は目指しているものはSoundCloudというよりも、音楽版の</strong> <a href="https://dribbble.com" target="_blank" rel="nofollow noopener noreferrer">Dribbble</a> <strong>や</strong> <a href="https://behance.net" target="_blank" rel="nofollow noopener noreferrer">Behance</a> <strong>です。</strong> さまざまなミュージシャンの才能を集約して検索可能にすることが最大の目標です。</p>
<p>（もちろんX.comのように各ユーザーのページの閲覧のためにログインを強制するつもりは一切ありません。in/outは完全にオープンにします）</p>
<h2 id="%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90" aria-hidden="true"></a> 技術構成</h2>
<p>まず技術選定の方針としては<strong>可能な限り無料</strong>を原則としました。現状、費用がかかっているのはVercelのProプランのみで、スケールしない限りは$20/月で運用できます（Vercelは他のプロジェクトとも共用しているので立ち上げに際してコストがかかってるという意識はないです）。</p>
<h3 id="next.js-(app-router)-%2B-vercel">
<a class="header-anchor-link" href="#next.js-(app-router)-%2B-vercel" aria-hidden="true"></a> Next.js (App Router) + Vercel</h3>
<p>フレームワークはNext.jsで、Vercelにデプロイしています。</p>
<p>VercelなのでServer ComponentやISR、Server Actionなど最新機能を盛りだくさんで実装しました。それらの使い心地などに関して細かく述べることはしませんが、これによってVercelにロックインされてしまった感はあります。</p>
<p>以前試したときは <a href="https://github.com/cloudflare/next-on-pages" target="_blank" rel="nofollow noopener noreferrer">Next on Cloudflare Pages</a> は（Pages Routerであっても）あまり実用的に動かなかったし、Cloud Runでも全機能が使えるわけではなさそうです。ただ、Vercel Proに含まれている1TBの帯域を超えるほどスケールするには時間がかかるという前提で、とりあえずは最新機能を使ってみました。</p>
<h3 id="css-modules-%2B-camome-ui">
<a class="header-anchor-link" href="#css-modules-%2B-camome-ui" aria-hidden="true"></a> CSS Modules + Camome UI</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9be3ccfbf82a6" src="https://embed.zenn.studio/card#zenn-embedded__9be3ccfbf82a6" data-content="https%3A%2F%2Fcamome.net" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://camome.net" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://camome.net</a></p>
<p>スタイリングにはCSS Modulesを使用しています。また、基本的なコンポーネントの基盤として <a href="https://camome.net" target="_blank" rel="nofollow noopener noreferrer">Camome UI</a> を採用しました（といってもこれは僕が開発したライブラリなので採用もクソもないですが）。</p>
<p>CSS Modulesを選んだ理由は、何よりも<strong>最も生のCSSに近い</strong>からです。Server Componentでも使えるスタイリング方法といえばTailwindもありますが、寿命という意味では個人的にちょっと信頼できないと感じています。</p>
<p>Camome UIのコンポーネントをベースにしつつ、その他のUIも <a href="https://camome.net/ja/docs/design-system/overview" target="_blank" rel="nofollow noopener noreferrer">Camome UIのデザイントークン</a> を使ってスタイリングしています。</p>
<h3 id="radix-ui">
<a class="header-anchor-link" href="#radix-ui" aria-hidden="true"></a> Radix UI</h3>
<p>Camome UIはHTML/CSS以外は提供しないので、モーダルなどの複雑なUIは <a href="https://www.radix-ui.com" target="_blank" rel="nofollow noopener noreferrer">Radix UI</a> を用いて実装しています。</p>
<p>他にも<a href="https://headlessui.com/" target="_blank" rel="nofollow noopener noreferrer">Headless UI</a>も使ったことがありますが、Radixの方が痒いところに手が届くしスタイリングもしやすいと思います。特に <code>data-</code> 属性を使ったアニメーション制御はかなり開発体験がいいです。</p>
<h3 id="prisma">
<a class="header-anchor-link" href="#prisma" aria-hidden="true"></a> Prisma</h3>
<p>ORMには <a href="https://prisma.io" target="_blank" rel="nofollow noopener noreferrer">Prisma</a> を使っています。</p>
<p>有名なライブラリなのでいまさらあまり言及することはないと思います。ひとつだけ不満を述べるとすれば、複雑なクエリを書く際に <code>$queryRaw</code> に頼らざるを得ないことが多いということでしょうか。<a href="https://orm.drizzle.team/" target="_blank" rel="nofollow noopener noreferrer">Drizzle</a> はPrisma式のAPIとクエリビルダーの両方をサポートしているようなので、もしかしたらそのあたりはベターだったりするかもしれません（使ったことはないです）。</p>
<h3 id="supabase">
<a class="header-anchor-link" href="#supabase" aria-hidden="true"></a> Supabase</h3>
<p>データベースは <a href="https://supabase.com" target="_blank" rel="nofollow noopener noreferrer">Supabase</a> を生のPostgresとして利用しています。</p>
<p>無料枠でも500MBまで使わせてもらえるので立ち上げには最適だと思います。それに単なるPostgresとして使うのであればロックインされることもないので安心です（無料枠だけ使って他に移行するのもアレですが）。</p>
<p>（マネージドPostgresとして見た際に、NeonやPlanetScaleなどの有料プランと比較して優位性があるかどうかはまだ検討していません。）</p>
<h3 id="r2">
<a class="header-anchor-link" href="#r2" aria-hidden="true"></a> R2</h3>
<p>画像や音声ファイルのホスティングには <a href="https://www.cloudflare.com/ja-jp/developer-platform/r2/" target="_blank" rel="nofollow noopener noreferrer">Cloudflare R2</a> を採用しました。</p>
<p>楽曲投稿サービスという特性上、静的ファイルの置き場所の選定はコストに大きな影響を与えます。R2の最大の長所は<strong>エグレス料金ゼロ</strong>、すなわち下りの通信帯域に料金が加算されない点です。また、10GBまでは無料枠に含まれるというのも嬉しいです。</p>
<h3 id="nextauth.js">
<a class="header-anchor-link" href="#nextauth.js" aria-hidden="true"></a> NextAuth.js</h3>
<p>認証基盤は <a href="https://next-auth.js.org" target="_blank" rel="nofollow noopener noreferrer">NextAuth.js</a> です。</p>
<p>外部の認証系SaaSに依存しなくても必要十分な機能とDXを提供してくれる優秀なライブラリです。PrismaAdapterを使えばDBへのアカウントやセッションの保存をいい感じにやってくれます。また、Googleなどの外部IDプロバイダとの連携も簡単です。</p>
<p>ただし、新規ユーザー登録を一時的にブロックする (<a href="https://github.com/nextauthjs/next-auth/issues/8272" target="_blank" rel="nofollow noopener noreferrer">issue</a>) ことが現状できないといった難点もあったりします。</p>
<h3 id="tanstack-query">
<a class="header-anchor-link" href="#tanstack-query" aria-hidden="true"></a> TanStack Query</h3>
<p>クライアントサイドでの非同期のデータ取得には <a href="https://tanstack.com/query/latest" target="_blank" rel="nofollow noopener noreferrer">TanStack Query</a> を使っています。</p>
<p>はじめのうちはNext.jsのRoute HandlerでAPIを作成して通信していましたが、途中からServer Actionによる取得に切り替えました。これが用途として正しいのかまだよくわかってないですが、とりあえずフレームワーク組み込みのRPCとして機能しています。</p>
<h2 id="%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> こだわりポイント</h2>
<h3 id="%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC" aria-hidden="true"></a> プレイヤー</h3>
<table>
<thead>
<tr>
<th>デスクトップ</th>
<th>モバイル</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://storage.googleapis.com/zenn-user-upload/021a01c6e7ed-20240117.png" loading="lazy" class="md-img"></td>
<td><img src="https://storage.googleapis.com/zenn-user-upload/b68acab13632-20240117.png" width="300" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<p>楽曲のプレイヤーは <code>&lt;audio&gt;</code> タグをベースに実装しています。再生リストにも対応しているのでアルバムごとの再生などもできます。デスクトップではサイドバーに常時表示し、モバイルではApple MusicやSpotifyのようなモーダルなUIです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/58580c762f25-20240117.jpeg" width="300" loading="lazy" class="md-img"></p>
<p>また <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaSession" target="_blank" rel="nofollow noopener noreferrer">MediaSession API</a> に対応しているので、ホーム画面へのタイトルやアートワークの表示、再生や早送りなどの操作が可能です。</p>
<p>ちなみに、iOSでは <code>audioElm.volume</code> を変更しても音量を絞れないのでUI上のスライダーは効果がありません。WebAudio APIを経由すれば実現できそうですが、とりあえず先送りです。</p>
<h3 id="%E5%85%AC%E9%96%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E9%9D%99%E7%9A%84%E7%94%9F%E6%88%90-%2B-%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AE%E3%83%91%E3%83%BC%E3%82%B8">
<a class="header-anchor-link" href="#%E5%85%AC%E9%96%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E9%9D%99%E7%9A%84%E7%94%9F%E6%88%90-%2B-%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AE%E3%83%91%E3%83%BC%E3%82%B8" aria-hidden="true"></a> 公開ページの静的生成 + キャッシュのパージ</h3>
<p>プロフィールや楽曲などの公開ページはNext.jsの機能を使って静的生成されています。<code>cookies()</code> などの <a href="https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-functions" target="_blank" rel="nofollow noopener noreferrer">Dynamic Functions</a> を使用<strong>しない</strong>ことでリクエストごとにDBへアクセスすることを防ぎ、高速に配信しています。</p>
<p>しかしキャッシュされるということは、ユーザーがコンテンツを更新しても即座に反映されないということです。そこでフォームのPOSTごとに <a href="https://nextjs.org/docs/app/api-reference/functions/revalidatePath" target="_blank" rel="nofollow noopener noreferrer"><code>revalidatePath</code></a> を実行し、オンデマンドでキャッシュのパージをしています。</p>
<p>これで確かにパフォーマンスと即時反映を両立できているのですが、正直どのテーブルの更新がどのページに影響を与えるのかを完全に把握するのは難しいし、面倒です。複数人で開発するならなおさらだと思います。とりあえず今回はNext.js開発チームの思想に沿う形で実装してみましたが、引き続きこれをやりたいかと言えば微妙です。</p>
<p>また、サーバーサイドでログイン状態に応じた動的な応答をしないということは、その部分をクライアントサイドで補う必要があるということです。例えばあるユーザーをフォローしているかどうかをチェックするための非同期通信と状態管理が必要です。このあたりも静的生成を選択する上で混入する複雑性の一部といえるかもしれません。</p>
<h2 id="todo">
<a class="header-anchor-link" href="#todo" aria-hidden="true"></a> TODO</h2>
<ul>
<li>メンバーや依頼の募集</li>
<li>コラボレーション</li>
<li>高度な検索</li>
</ul>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>興味のある方はぜひ登録よろしくお願いします。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c39af165fb91a" src="https://embed.zenn.studio/card#zenn-embedded__c39af165fb91a" data-content="https%3A%2F%2Fvvave.app" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vvave.app" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vvave.app</a></p>


SoundCloudみたいなサービスを個人で開発した

公開ページの静的生成 + キャッシュのパージ

zenn-contents

Discussion