【Procom開発日記】OGP地獄と推しボタンの誕生──SNSに強くなる1日

プロコム開発チーム

こんにちは、Procom開発チームのものです。

2025年7月5日。今日は“影のアップデート”が大量に積み重なった一日でした。一見地味な修正ばかりに見えて、実は「SNSでシェアしたときの顔（OGP画像）」や「ユーザーの愛を可視化する機能（推しボタン）」など、Procomというサービスの“第一印象”を大きく変える要素に向き合っていました。

この記事では、Procomの開発裏側や導入した機能、解決したバグなどをリアルな開発日記形式で振り返ります。

Contents

1 🌀 朝からつまずいたOGP画像──“虫眼鏡地獄”の正体
2 🧠 原因その1：「画像URLのドメイン不一致」
3 🔁 原因その2：「リダイレクトの罠」
4 ✅ 解決策：画像とmetaタグの見直し
5 ❤️ 「推し」機能の追加──感情を届けるボタン
- 5.1 💡 背景：ただのリンク集ではないProcomへ
- 5.2 🎨 実装：ハートが跳ねる“推し”アニメーション
6 🐞 細かなバグ対応もいくつか
7 🚀 今後の展望とTODO
8 ✨ まとめ

🌀 朝からつまずいたOGP画像──“虫眼鏡地獄”の正体

まず朝一で気づいたのが、「ProcomのURLをX（旧Twitter）やFacebookでシェアしても、意図した画像が表示されない」という致命的な問題でした。

症状としては以下の通り：

https://procom-next.onrender.com/top をTwitterのカードバリデータで検証すると、なぜか虫眼鏡のようなダミー画像が表示される。
Facebookのシェアデバッガーでも同様に、画像が正しく反映されていない。
metaタグは確かに書いてあるのに、何が悪いのか分からない。

このような現象に直面し、さっそく原因究明に乗り出しました。

🧠 原因その1：「画像URLのドメイン不一致」

当初設定していた og:image のURLは https://procom.jp/ogp-image.jpg。しかし本番URLは https://procom-next.onrender.com/ です。

Render（無料プラン）でホスティングしている今の環境では、別ドメインの画像を正しく取得できないケースがあります。結果として、SNS側でOGP画像が“取得不能”と判定されていたようです。

🔁 原因その2：「リダイレクトの罠」

さらにやっかいだったのが、「トップページにリダイレクト処理が入っていること」。

https://procom-next.onrender.com/ にアクセスすると、実際には https://procom-next.onrender.com/top にリダイレクトされる構成です。

この「301または307リダイレクト」が、SNSのクローラーがOGP画像を取得できない原因となることがあります。クローラーは、metaタグを読む前にURL遷移に戸惑って離脱してしまうことがあるからです。

✅ 解決策：画像とmetaタグの見直し

最終的に以下の対処を行いました。

画像ファイルを public/ogp-image.jpg に配置
→ これでRender上のパスとして https://procom-next.onrender.com/ogp-image.jpg が成立。
Head内のmetaタグを修正 tsxコピーする編集する<meta property="og:image" content="https://procom-next.onrender.com/ogp-image.jpg" />
Twitter Card ValidatorとFacebook Debuggerで検証
→ 正しく画像が読み込まれ、「虫眼鏡問題」は無事解決されました。

このようにOGP画像の設定ひとつ取っても、URLの正確さ、ファイル配置、リダイレクトの有無など複数の要素が絡んでくるのです。Web開発は本当に細かいところに“魔物”が潜んでいます。

❤️ 「推し」機能の追加──感情を届けるボタン

OGP画像修正と並行して、今日は新しい体験の追加にも取り組みました。

それが、「推し」ボタンの導入です。

💡 背景：ただのリンク集ではないProcomへ

Procomは、YouTube・X・Instagram・TikTokなどを1ページにまとめられるプロフィールサービスです。

しかし、それだけでは“便利”で止まってしまう。Procomを感情が動くプラットフォームにしたい。

そこで考えたのが、「この人、好きだな」「応援してる」という気持ちをボタン一つで伝えられる仕組み。

🎨 実装：ハートが跳ねる“推し”アニメーション

❤️ ボタンはハートアイコン（FontAwesome）を使用
🔁 押すとCSSアニメーションで跳ねるように拡大→縮小
💾 状態は一時的にローカルで記録（将来的にはFirestoreで推し数を集計）

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.heart {
  animation: pop 0.3s ease;
}

押したときにほんの少し跳ねるだけで、ユーザーの心理的な“気持ちが伝わった感”が生まれます。この小さなUXの工夫が、Procomの温かさにつながっていくと信じています。