Procomに「Xでシェアする」ボタンを導入しました！

プロコム開発チーム

推しのプロフィールをみんなに届けよう！SNS時代の自己発信強化機能

Contents

1 はじめに：Procomの新機能「Xでシェアする」とは？
2 なぜ「Xシェアボタン」を導入したのか？
3 実際のコード：Xシェア用ボタンの実装方法
4 ユーザー側のメリットは？
5 今後の展望：「SNS拡散系機能」をさらに拡充予定！
6 おわりに：あなたの自己発信をもっと自由に

はじめに：Procomの新機能「Xでシェアする」とは？

Procomは、YouTuberやインフルエンサー、パフォーマー、ダンサーなど「自己発信をしたいすべての人」のためのプロフィール統合プラットフォームです。
1ページに自分の SNSリンク（YouTube・X・Instagram・TikTok・Facebook） や スライド写真、カレンダー、紹介文 をまとめて表示できるため、ファンや依頼主に「見せたい情報を一発で伝える」ことができます。

そんなProcomに、今回 「X（旧Twitter）でプロフィールをシェアする」 機能を追加しました！

この機能を使えば、あなたのプロフィールページを一瞬でポストにして発信できます。
また、他のユーザーを応援する「推し活」の一環として、推しのProcomページをXで紹介する ことも可能です。

なぜ「Xシェアボタン」を導入したのか？

SNSとの親和性が高いProcomにとって、「他の人に見てもらう」導線はとても重要です。
とくにX（旧Twitter）は、クリエイターやファンの情報流通が最も活発に行われているSNSのひとつ。
そこで、次のようなユースケースを想定し、今回の導入に踏み切りました。

📣 自分のプロフィールを告知したいとき
→「出演情報・SNSまとめ・自分の写真」を一度にシェアできる！
❤️ 推しを応援したいとき
→「この人すごい！」と思ったら、そのままXで拡散できる！
📩 仕事の依頼先として紹介したいとき
→「この人に頼むといいよ」とURLつきで推薦できる！

実際のコード：Xシェア用ボタンの実装方法

それでは、実際にProcomに実装したコードを紹介します。
Next.js（App Router構成）を前提とした app/user/[uid]/page.tsx に追記した形です。

🔧 1. まずはシェア用関数を定義

const shareOnX = (uid: string) => {
  const text = encodeURIComponent('Procomでプロフィールを公開しました！ぜひ見てください！');
  const url = encodeURIComponent(`https://procom-next.onrender.com/user/${uid}`);
  const hashtags = 'Procom,自己発信';
  const xShareUrl = `https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=${hashtags}`;
  window.open(xShareUrl, '_blank');
};

text：ツイート文（事前にエンコード）
url：ProcomのプロフィールページURL
hashtags：Procomに関連したハッシュタグ（自由にカスタマイズ可）
window.open()：別タブでシェアURLを開く

🧩 2. JSX側にボタンを追加

プロフィールページの上部や推しボタンの近くに、次のようにボタンを追加しました。

<button
  type="button"
  onClick={() => shareOnX(uid)}
  style={{
    margin: '10px auto',
    display: 'block',
    background: '#1DA1F2',
    color: 'white',
    border: 'none',
    borderRadius: '6px',
    padding: '8px 16px',
    fontWeight: 'bold',
    cursor: 'pointer',
  }}
>
  Xでシェアする
</button>