Procomに「カスタムSNSリンクボタン機能」を追加しました！導入の背景と実装の全記録

プロコム開発チーム

こんにちは、Procom開発チームです！
本日は、ユーザーからのリクエストが特に多かった「自由に追加できるリンクボタン機能（カスタムSNSリンク機能）」の正式実装についてご報告します。

この機能によって、TwitchやThreads、noteやブログなど、既存のSNS以外にも自由にリンクを追加できるようになりました。Procom上のプロフィールを、さらに自分らしく、さらに便利にカスタマイズできます。

Contents

1 🔧 なぜこの機能を追加したのか？
2 ✨ 機能概要
3 🛠️ 技術的な実装ポイント
4 🖱️ 使い方ガイド（ユーザー向け）
5 🔐 セキュリティ面の考慮
6 🌍 実装後のメリット
7 🧩 今後の展望
8 🎉 まとめ
9 🔗 さっそく使ってみる

🔧 なぜこの機能を追加したのか？

これまでのProcomでは、YouTube・X（旧Twitter）・Instagram・TikTok・Facebook といったメジャーなSNSに特化した埋め込み・リンク機能を提供してきました。しかし、多くのユーザーから以下のような声をいただいていました：

「Twitchのリンクも載せたい」
「Threadsやnoteも使ってる」
「SNSじゃないけど、自分のポートフォリオサイトも入れたい」

この要望に応えるべく、**ユーザーが自由にラベル・URL・アイコン・色を設定できる「カスタムリンクボタン」**機能を設計しました。

✨ 機能概要

✅ ボタンを最大 5つまで追加可能
✅ それぞれに ラベル名・URL・アイコン名（FontAwesome）・ボタン色 を指定可能
✅ 編集はマイページからのみ。閲覧ユーザーには美しく表示されます
✅ 保存後、Firestoreに即時反映され、再読み込みでも保持されます

🛠️ 技術的な実装ポイント

今回の実装では、以下のような技術的な工夫を行いました。

1. Firestoreの保存形式（customLinks）

Firestoreの profile ドキュメントの中に、以下のような形式でカスタムリンク情報を保存しています。

{
  "customLinks": [
    {
      "label": "Twitch",
      "url": "https://twitch.tv/yourname",
      "icon": "fa-twitch",
      "color": "#9146FF"
    },
    {
      "label": "note",
      "url": "https://note.com/yourname",
      "icon": "fa-note-sticky",
      "color": "#00B488"
    }
  ]
}

2. コンポーネント設計（Next.js + TypeScript）

SNSButtonBlock.tsx：表示および編集機能
SNSButtonBlockClientWrapper.tsx：状態管理＋Firestore保存処理
UserPageClient.tsx：Firestoreから取得し、SNSButtonBlockClientWrapper にデータを渡す
app/user/[uid]/page.tsx：必要なデータをサーバーから取得して渡す

3. UIコンポーネント構成（Tailwind CSS）

各ボタンは Tailwind CSS を活用して、text-white rounded-full py-2 px-4 font-bold な外観に統一
編集モードでは入力欄＋プレビュー、表示モードでは美しいボタン表示

🖱️ 使い方ガイド（ユーザー向け）

ログイン後、自分のプロフィールページへアクセス
「リンクボタン編集」セクションにアクセス
+ ボタンを追加 を押すと、新しいリンクが追加されます
ラベル名（例：Twitch）、URL（https://...）、アイコン名（FontAwesome準拠）、色を選択
「保存」ボタンを押せば完了！
他のユーザーがあなたのページを見ると、登録されたボタンが美しく表示されます

🔐 セキュリティ面の考慮

URLには https:// が含まれているかをフロント側でチェック
無効な文字列や javascript: のようなスキームは入力できないよう制御
Firestore保存時には、Cloud Function または API でさらにバリデーションを行う予定

🌍 実装後のメリット

Procomはこれまで、動画やSNSをまとめて見せるための「プロフィールポータル」として進化してきましたが、この「カスタムリンク」機能により、以下のような柔軟性が加わりました：

シーン	これまで	今回の改善
Twitch配信者のリンク紹介	手動でテキスト	ボタンでワンクリックアクセス
noteやブログの紹介	SNS枠にない	任意のラベルと色で自由に表示可能
コミュニティ・ECサイトの紹介	不可	「SHOP」ボタンや「公式サイト」ボタンが作れる