見出し画像

AIを活用してテクノロジー特化のソーシャルサイトを構築・公開した話

komz

最新のテクノロジーに特化したオープンな議論の場を提供する「GironGo」というWebアプリケーションをベータ版でリリースしました。

現在、GironGo は「OpenSocial」に名前を変え、オープンソースになりました。ソースコードは GitHub で公開しています。

何が「オープン」なのか？

OpenSocial は、ログイン不要で誰でもコンテンツを閲覧できます。また、Discord のようにそれぞれのチャンネルに入らなくてはいけないといった煩わしさもありません。本当に有益な情報はオープンであるべきだと私は思います。

なぜ「議論」することが重要なのか？

現代の日本人は、議論（ディスカッション）を避ける傾向にあるため、どうしても情報を発信する人、受け取るだけの人に分かれてしまいます。イノベーションを促進し、問題・課題を解決し、より良い技術を発展させていくためには、議論を交わすことこそが重要であると私は信じています。

元々、Next.js 14、Auth.js v5、Drizzle ORM の実装実験として Hacker News 的なアプリでも作ってみようというところから始まったわけですが、思いの外出来が良かったので、機能を追加して作り込みました。

もちろん、まだ機能は十分ではありませんが、投稿、コメント/返信、投票（評価）、ブックマーク等の基本機能は使用できます。本文は、Markdown記法で書くこともできます。

上記の機能を使用するにはログインする必要がありますが、先述の通り、投稿やコメントの閲覧はログイン不要です。認証には、GitHubログインとマジックリンクによるログインを採用しており、パスワード不要で簡単にログインできます。

開発情報

OpenSocial の開発には Cursor エディタを使用し、GPT-4/4o、Claude 3/3.5 Sonnet、Gemini 1.5 などを状況に応じて使い分けました。AI のおかげで複雑な機能の実装や、デバッグがとんでもなく楽になりましたね。もう開発に AI は欠かせません。

本当はオープンソースにしてたくさんの開発者の方と意見を交換したりしたいのですが、セキュリティの都合上それは難しそうです。なので、もし GironGo をお使いいただいて「この機能はどうやって実装しているの？」といった質問があれば、是非 GironGo に投稿してください。GironGo では、「質問」カテゴリを選択して投稿できます。

現在はオープンソースになっているので、使い心地や改善点などをお知らせください！X/Twitter (@komzweb)

OpenSocial 構成

フレームワーク

Next.js 14 の新しい機能をたくさん使って構築しています。Server Actions のエラーハンドリングなど、まだ使い勝手が良くない部分もあり少々手こずりましたが、AI と対話を重ねることでクリアできました。

UI

v0 (by Vercel) は、ログインフォームなどの一部に使用しました。UI デザインの下地をいい感じに作ってくれるので助かります。デフォルトで Tailwind と shadcn を使って生成してくれるのが個人的には嬉しい。Claude 3.5 Sonnet もかなりいい UI を生成してくれるので、使い分けてみるのも良いかと。

認証

Auth.js (NextAuth) v5 はまだベータ版ですが、特に目立った問題点はなく、スムーズに実装できました。使用するプロバイダやアダプタによっては、エラーが出る場合があるかもです。元々 Next.js 用の認証ツールなので、Next.js との相性はやはり良いです。

認証メールの送信には Resend を使用しています。開発者に大人気のツールです。

ORM

Drizzle ORM は今回初めて使用しましたが、TypeScript ORM ということで個人的には好きです。Drizzle Studio などの便利なツールを使えるのもありがたい。まだ比較的新しい ORM ということもあり、機能や使い方が頻繁に変わることがあるので、そこだけ注意。

ちょっと前まで、GPT も Claude も「Drizzle ORM？知らん」という感じだったのですが、現行モデルはどちらも理解しており、特に Claude 3.5 Sonnet は良い回答をくれるのでおすすめです。

DB

リレーショナルDBは Vercel Postgres、Redis DB は Vercel KV を使用。それぞれのパートナーである Neon と Upstash を使うメリットもありますが、ホスティングが Vercel なので、Vercel でまとめると何かと楽です。

Redis を使用せずに リレーショナルDB のみで構築することも可能ですが、アクション制限（レート制限）も Postgres でやろうとすると、負荷の増加でパフォーマンスが低下する可能性があります。なので、結局 Redis は必須です。

ホスティング

Next.js を使用しているので当然のごとく Vercel です。というか今のところ、Vercel 以上に優れたホスティングサービスを私は知りません。

OpenSocial では Cron Jobs（反復的なタスクを自動化するために使用される時間ベースのスケジュールツールのこと）を使用していますが、Vercel はこのツールをサポートしているので、プログラムさえ用意してしまえば、設定はとても簡単です。

たくさんの方々にご利用いただけると嬉しいです！お使いいただいた感想や質問など、是非お知らせください。X/Twitter (@komzweb)

この記事が気に入ったらサポートをしてみませんか？