【ソースコード全公開】すきなものを集めたボードを作ろう【クソアプリアドベントカレンダー2025】
この記事はクソアプリ Advent Calendar 2025の5日目の記事です。
はじめに
はじめまして！もひこ(@andmohiko)と申します。
個人開発がすきなエンジニアです。
作ったもの
今回は「18個のマス目（6行3列）に好きなものを配置してボードを作成できるアプリ」を作りました。
↓RTお願いします🙏
キュレーションリンクです。サービス名がそのままドメインにもなっています。
コードはこちらのリポジトリですべて公開しています。
今回はアドベントカレンダーに急に参加したのもあり、思いついてからリリースまで3日間でつくりました。過去のコードの資産があったからこそ、AIとコードを書きながらこの開発スピードを出せたと思います。
モチベーション
このアプリを作ろうと思ったきっかけは、Xで「好きなポケモンをタイプごとにまとめたボード」を見かけたことでした。
大人になると仕事の話ばかりしてしまい、意外と共通の趣味があることを知らずに過ごしている人も多いと思います。
「わざわざ人に言うほどではないけど、もし同じものがすきな人がいれば話したい」という気持ちがあり、会話のきっかけになる自分のすきなものを書ける場所が欲しいと思ったので、このアプリをつくりました。
ベンチマークはlit.linkです。
アプリの使い方
ログイン
Googleアカウントでログインします。
プロフィールの設定
名前、ID、アイコンを設定します。
テンプレート選択
公式テンプレート（「エンタメ好き向け」「グルメ好き向け」「エンジニア版」など）から選択することもできますし、まっさらな状態から始めることもできます。
ボード編集
各マス目にテーマに沿った内容を入力します。
ボードの背景画像や文字色をカスタマイズすることもできます。
ボードをシェア
ボードを保存してSNSでシェアすることができます。
使った技術
Next.js+Vercel+Firebaseの組み合わせで作りました。
Next.js
筆者が使い慣れているのでReactのフレームワークを使いたかったのですが、OGP画像の設定しやすさを重視して今回はNext.jsを選びました。
Vercel
Next.jsのデプロイがしやすいので使用しました。
今回はドメインの取得もVercelで行いました。ドメインの購入からアプリへの設定の体験がよかったです。
Firebase
認証にはFirebase Authentication、データベースにはFirestore、オブジェクトストレージにはCloud Storage for Firebaseを使用しています。
実装で工夫したところ
リアルタイムプレビュー
ボード編集画面では、編集内容をリアルタイムでプレビューできるようにしました。背景色や文字色を変更すると、即座にプレビューに反映されることで、ユーザーが直感的にデザインを調整できるようにしています。
画像のクロップ
具体的な実装は過去のエントリで解説しています。昨年の自分のアウトプットを使うことができ、再利用できる形に作っておいてよかったと思いました。
ここまで読んでくれた方へ
以上、キュレーションリンクを作った話でした。
ここまで読んでくださりありがとうございます。
よかったらツイッター(@andmohiko)フォローしてください。
さいごに
明日はtomorrowです。
Discussion