Xに画像とテキストを一緒に渡すシェアボタンの作り方【Web Share API】

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>画像とテキストの共有サンプル</title>
<style>
  body { font: 16px/1.7 system-ui; max-width: 640px; margin: 32px auto; padding: 16px; }
  img { display: block; max-width: 100%; height: auto; margin: 16px 0; }
  img[hidden], a[hidden] { display: none; }
  button, a { margin: 8px 12px 8px 0; }
</style>
<h1>画像とテキストを共有する</h1>
<button id="prepare" type="button">プレビューを作る</button>
<img id="preview" alt="共有するスコア画像" hidden>
<button id="share" type="button" disabled>画像とテキストを共有</button>
<a id="save" download="result.png" hidden>画像を保存</a>
<a id="intent" target="_blank" rel="noopener noreferrer">Xの投稿画面を開く（本文のみ）</a>
<p id="status" role="status">先にプレビューを作ってください。</p>
<script type="module">
const prepare = document.querySelector('#prepare');
const preview = document.querySelector('#preview');
const share = document.querySelector('#share');
const save = document.querySelector('#save');
const status = document.querySelector('#status');
const pageUrl = 'https://yuua-drop.push.tokyo/';
const text = '12345点でした！ #ゆうあどろっぷ';
const params = new URLSearchParams({ text, url: pageUrl });
document.querySelector('#intent').href = `https://x.com/intent/tweet?${params}`;
let file = null;
let objectUrl = null;

prepare.addEventListener('click', async () => {
  prepare.disabled = share.disabled = true;
  status.textContent = '画像を作成しています。';
  try {
    const canvas = document.createElement('canvas');
    canvas.width = 1080;
    canvas.height = 1350;
    const ctx = canvas.getContext('2d');
    if (!ctx) throw new Error('Canvas 2D unavailable');
    ctx.fillStyle = '#27134f';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 72px sans-serif';
    ctx.fillText('SCORE 12345', 80, 220);
    const blob = await new Promise((resolve, reject) => {
      canvas.toBlob(b => b ? resolve(b) : reject(new Error('PNG failed')), 'image/png');
    });
    file = new File([blob], 'result.png', { type: 'image/png' });
    if (objectUrl) URL.revokeObjectURL(objectUrl);
    objectUrl = URL.createObjectURL(blob);
    preview.src = save.href = objectUrl;
    preview.hidden = save.hidden = false;
    canvas.width = canvas.height = 0;
    share.disabled = false;
    status.textContent = '画像を確認して、共有ボタンを押してください。';
  } catch (error) {
    console.error(error);
    status.textContent = '画像を作成できませんでした。もう一度お試しください。';
  } finally {
    prepare.disabled = false;
  }
});

share.addEventListener('click', async () => {
  if (!file) return;
  share.disabled = prepare.disabled = true;
  try {
    if (!navigator.share || !navigator.canShare?.({ files: [file] })) {
      status.textContent = '画像付き共有に対応していません。画像を保存して、投稿に添付してください。';
      return;
    }
    // このクリック処理では、share()の前に画像生成や通信をしない。
    await navigator.share({ files: [file], text: `${text}\n${pageUrl}` });
    status.textContent = '共有先で投稿内容を確認してください。';
  } catch (error) {
    if (error.name === 'AbortError') {
      status.textContent = '共有が中止されたか、共有先がありませんでした。';
      return;
    }
    console.error(error);
    status.textContent = '共有できませんでした。画像を保存して、投稿に添付できます。';
  } finally {
    share.disabled = prepare.disabled = false;
  }
});
window.addEventListener('pagehide', () => {
  if (objectUrl) URL.revokeObjectURL(objectUrl);
});
window.addEventListener('pageshow', event => {
  if (event.persisted && file) {
    objectUrl = URL.createObjectURL(file);
    preview.src = save.href = objectUrl;
  }
});
</script>
</html>