【Procom開発レポート】YouTube・TikTok対応強化、ついに編集＆削除機能も実装完了！今日のアップデートが熱い🔥
こんにちは、Procom開発チームです！
今日は、**クリエイターが自分のSNS活動をもっと自由に、もっとかっこよく発信できる場所「Procom」**に大きな進化をもたらすアップデートが完了しました。
今回のブログでは、特に進捗の大きかった以下の5つの機能改修と実装について、技術の裏側も交えてたっぷり語ります👇
Contents
✅ 1. YouTube埋め込み機能の進化：最新動画 or お気に入り、選べるって神じゃない？
まずはYouTube表示機能の超強化から。
これまでは「最新動画」しか表示できなかったのですが、今日はついに：
- 最新動画（チャンネルIDから自動取得）
- お気に入り動画（URLで手動登録）
この2パターンを自由に切り替え可能にしました！！
tsxコピーする編集する<input type="radio" name="youtubeMode" value="latest" /> 最新動画
<input type="radio" name="youtubeMode" value="manual" /> お気に入り動画
クリエイターの「自分のベスト動画を見てほしい！」という想いに応えるべく、お気に入り動画も最大4本まで表示可能にしています。
さらに2列×2行のグリッド表示に変更したことで、スマホでもPCでも美しく表示されるように調整済み。実際のUIはこんな感じ👇
□ □
□ □
デザインも気持ちも、映える方向へ全振り中。
✅ 2. 動画の削除ができない？そんなのもう過去の話。
お気に入り動画にURLを追加していったはいいけど、「やっぱりこの動画消したいな…」と思ったことありませんか？
今日のアップデートでは、ついに × ボタンで任意の動画を削除できるようにしました！
tsxコピーする編集する<button onClick={() => deleteManualVideo(index)}>×</button>
このように、1クリックでお気に入り動画リストから削除できるので、編集も直感的。しかも、保存するとFirestoreにもちゃんと反映される安心設計。
自由に追加して、自由に消せる。それがProcomのポリシーです。
✅ 3. TikTokの埋め込みも×で削除可能に！最高すぎる改善
次に着手したのは、TikTok埋め込み機能の編集性向上。
これまでは「追加」するだけで、間違えたURLを入力しても消せないという不便さがありました。しかし今日、×ボタンをすべてのTikTok入力欄に追加しました！
tsxコピーする編集する<button onClick={() => deleteTikTokUrl(i)}>×</button>
これにより、最大3件までのTikTok動画を自由自在に追加・削除できます。
また、間違えたURLを入れても即修正が可能になり、UXが飛躍的に向上しました。
✅ 4. カレンダーの保存・読み込みバグを撃退！裏で動いてたのに見えなかった問題に決着
カレンダー機能でも大きな問題が起きていました。
「予定を追加しても表示されない…」
「実は裏で動いてたけど、画面に反映されなかった…」
そんなバグを1つずつ検証し、原因を追跡。
結果、セッション取得に失敗して非ログイン扱いになるなど、地味だけど致命的な問題を修正しました。
今では：
- 予定の追加→即表示
- Firestoreに保存されているか確認
- 月を移動してもデータが反映される
このようにスムーズなカレンダー表示が実現されています。
もちろん、予定を削除する「×ボタン」も健在。細部までこだわるProcomの姿勢が見えますね。
✅ 5. 技術者向け：APIルート /api/youtube/[channelId] をサクッと実装
YouTubeの「最新動画」表示を可能にするため、今日はNext.jsのApp Routerで /api/youtube/[channelId] を新規実装しました。
tsコピーする編集するexport async function GET(req: NextRequest, { params }: { params: { channelId: string } }) {
const { channelId } = params;
const apiKey = process.env.YOUTUBE_API_KEY!;
const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet&order=date&type=video&maxResults=2`;
const res = await fetch(url);
const data = await res.json();
return NextResponse.json(data);
}
このルートを通じて、最新動画の情報を取得し、埋め込みに反映。
キャッシュやAPI制限の対策も今後進めていく予定です。
🎯 今日のProcomまとめ：理想のSNSリンク集、さらに進化中
今日だけで、以下の点が改善・実装されました👇
| 機能 | 実装内容 |
|---|---|
| YouTube表示 | 最新/お気に入り切替、2×2表示、削除機能 |
| TikTok表示 | 入力欄に削除ボタン追加 |
| カレンダー | 保存バグ修正、予定の即時反映 |
| API | /api/youtube/[channelId] の新設 |
| UI調整 | レスポンシブ対応、編集性向上 |
💡 次のステップは？
- Instagram埋め込みの安定化
- カレンダーの色分け表示
- 「お気に入りユーザー」機能の強化
- Procomのデザイン全面リニューアル
- 投稿機能の導入（note風）
などを予定しています。
最後に：Procomは「あなたの活動のハブ」になる
Procomは、単なるプロフィールページではありません。
- あなたの活動を魅力的に伝える
- あなたのSNS更新を一括表示する
- あなたのファンとつながる場所になる
そのために、私たちは今日もコードを書いています。
もしこの記事が少しでも気になったら、ぜひ「Procom」で検索してみてください。
🛠 開発者・エンジニアの皆さんへ：
ProcomはNext.js + Firebaseで構築しています。GitHub連携やVercelデプロイも可能。コントリビューションも歓迎中！
🎨 クリエイターの皆さんへ：
SNSまとめサービスとは一味違う、「個性が伝わるリンク集」を作りたいなら、Procomをチェックしてみてください！
📣 最後まで読んでくれてありがとう！
あなたのSNS活動が、もっと楽しく、もっと輝きますように。
