JavaScript | Web API：クリップボード・共有 － Share API

Share API は「このページいい感じだから誰かに送ろう」をボタン一発にする仕組み

スマホでブラウザを見ていると、「共有」ボタンから
LINE やメール、Twitter などに URL を送れますよね。

Share API は、その「共有ダイアログ」を
JavaScript から呼び出すための Web API です。

「このページを友だちに送りたい」
「この記事を SNS に投げたい」

そういう“人に渡す”動きを、
あなたの Web アプリの中から自然に呼び出せるようになります。

主役になるのは navigator.share() という関数です。

基本の形：navigator.share で共有ダイアログを開く

一番シンプルな「共有」ボタン

まずは最小の例からいきます。

HTML:

<button id="shareBtn">このページを共有</button>
<div id="status"></div>

JavaScript:

const shareBtn = document.querySelector("#shareBtn");
const status = document.querySelector("#status");

shareBtn.addEventListener("click", async () => {
  if (!navigator.share) {
    status.textContent = "このブラウザは Share API に対応していません";
    return;
  }

  try {
    await navigator.share({
      title: document.title,
      text: "このページ、よかったら見てみて！",
      url: location.href
    });
    status.textContent = "共有を実行しました";
  } catch (err) {
    status.textContent = "共有がキャンセルされたか、失敗しました";
  }
});

const shareBtn = document.querySelector("#shareBtn");
const status = document.querySelector("#status");

shareBtn.addEventListener("click", async () => {
  if (!navigator.share) {
    status.textContent = "このブラウザは Share API に対応していません";
    return;
  }

  try {
    await navigator.share({
      title: document.title,
      text: "このページ、よかったら見てみて！",
      url: location.href
    });
    status.textContent = "共有を実行しました";
  } catch (err) {
    status.textContent = "共有がキャンセルされたか、失敗しました";
  }
});

ここで押さえてほしいポイントがいくつかあります。

ひとつめ。navigator.share が存在するかを最初にチェックしていること。
Share API は、特に PC ブラウザでは未対応のものもあるので、「使えないときのメッセージ」を用意しておくのが大事です。

ふたつめ。navigator.share に渡しているオブジェクトの中身。
title は共有先で表示されるタイトル、text は説明文、url は実際に共有されるリンクです。
スマホの共有ダイアログに渡す“素材”をまとめて渡しているイメージです。

みっつめ。await navigator.share(...) を try...catch で囲んでいること。
ユーザーが共有ダイアログを開いたあと、送らずに閉じることもあります。
その場合も例外として扱われるので、「キャンセルも普通に起こるもの」として扱うのが自然です。

Share API が特に“映える”のはスマホブラウザ

なぜスマホと相性がいいのか

スマホには、OS レベルで「共有シート」「共有ダイアログ」があります。
LINE、メール、メモ、Twitter、Slack…など、
ユーザーが普段使っているアプリがずらっと並ぶ、あの画面です。

navigator.share を呼ぶと、
まさにその「いつもの共有画面」が立ち上がります。

つまり、あなたの Web アプリから見れば、

「共有先を自分で全部用意しなくていい」
「ユーザーが普段使っているアプリに、そのまま渡せる」

という、かなりおいしい状況になります。

逆に PC ブラウザでは、
Share API 非対応だったり、挙動が限定的だったりします。
なので、実務では

スマホなら Share API を使う
PC なら「URL をコピーするボタン」を出す

といった切り替えをすることが多いです。

例題：記事ページに「この記事を共有」ボタンを付ける

記事タイトルと URL をそのまま共有する

ブログ記事やお知らせページに、
「この記事を共有」というボタンを付けるイメージで書いてみます。

HTML:

<article>
  <h1 id="articleTitle">JavaScript 入門：Share API 編</h1>
  <p>この記事では Share API の基本を解説します…</p>
</article>

<button id="shareArticleBtn">この記事を共有</button>
<div id="shareStatus"></div>

JavaScript:

const shareArticleBtn = document.querySelector("#shareArticleBtn");
const shareStatus = document.querySelector("#shareStatus");
const articleTitle = document.querySelector("#articleTitle");

shareArticleBtn.addEventListener("click", async () => {
  if (!navigator.share) {
    shareStatus.textContent = "共有機能はこのブラウザでは利用できません";
    return;
  }

  try {
    await navigator.share({
      title: articleTitle.textContent,
      text: "この記事、参考になりそうだったので共有します。",
      url: location.href
    });
    shareStatus.textContent = "共有ダイアログを開きました";
  } catch {
    shareStatus.textContent = "共有はキャンセルされました";
  }
});

const shareArticleBtn = document.querySelector("#shareArticleBtn");
const shareStatus = document.querySelector("#shareStatus");
const articleTitle = document.querySelector("#articleTitle");

shareArticleBtn.addEventListener("click", async () => {
  if (!navigator.share) {
    shareStatus.textContent = "共有機能はこのブラウザでは利用できません";
    return;
  }

  try {
    await navigator.share({
      title: articleTitle.textContent,
      text: "この記事、参考になりそうだったので共有します。",
      url: location.href
    });
    shareStatus.textContent = "共有ダイアログを開きました";
  } catch {
    shareStatus.textContent = "共有はキャンセルされました";
  }
});

ここで大事なのは、「何を共有するか」をちゃんと設計していることです。

タイトルは記事の見出しから取る。
テキストは「どういう文脈で送るか」を短く書く。
URL は今開いているページの location.href を使う。

この三つを丁寧に決めるだけで、
ユーザーが共有したときの見え方がぐっと良くなります。

Share API の制約と“ちゃんとした向き合い方”

1. HTTPS（安全なコンテキスト）が前提

Clipboard API と同じく、Share API も
基本的に HTTPS でないと動きません。

http://localhost での開発は特別扱いで OK ですが、
本番は必ず https:// で提供する前提で考えましょう。

もし navigator.share が undefined なら、

ブラウザがそもそも未対応
または安全なコンテキストではない

という可能性が高いです。

2. ユーザー操作に紐づいている必要がある

navigator.share も、
ユーザー操作に紐づいていないと基本的に拒否されます。

ページ読み込み直後に勝手に共有ダイアログを開く、
というのは UX 的にもセキュリティ的にもアウトなので、
ブラウザ側でブロックされると考えてください。

ボタンのクリック、リンクのタップなど、
「ユーザーが今共有したい」と意思表示した瞬間にだけ呼ぶ、
というのが正しい使い方です。

3. 失敗やキャンセルは“普通に起こるもの”として扱う

ユーザーが共有ダイアログを開いたあと、
「やっぱりやめた」と閉じるのはごく自然な行動です。

navigator.share は、その場合も例外を投げることがあります。

なので、成功したかどうかでアプリのロジックを分岐させる、
というよりは、

共有ダイアログを開くこと自体が目的
成功／キャンセルはユーザーの自由

くらいの感覚で扱うのがちょうどいいです。

もう一歩先：ファイルも共有できるが、まずはテキストと URL からで十分

Share API は、対応しているブラウザでは
ファイル（画像など）も共有できます。

navigator.share に files プロパティを渡す形です。

ただし、ここは一気に難易度が上がります。

File オブジェクトを用意する必要がある
ブラウザごとの対応状況を気にする必要がある
モバイル OS 側の挙動も絡んでくる

初心者のうちは、まず

タイトル
テキスト
URL

この三つだけをしっかり扱えるようになれば十分です。

「この記事を友だちに送る」
「このツールの URL をチームに共有する」

そういう“テキスト＋リンク”の共有だけでも、
アプリの使い勝手はかなり良くなります。

初心者として Share API で本当に掴んでほしいこと

Share API の本質は、とてもシンプルです。

「ユーザーが普段使っている“共有”の仕組みを、
あなたの Web アプリからそのまま呼び出せるようにする」

ということです。

そのために、次の感覚を持っておいてください。

navigator.share は「共有ダイアログを開くお願い」をブラウザにする関数。
渡すのは title・text・url の三つが基本。
HTTPS とユーザー操作（クリックなど）が前提条件。
成功／キャンセルはユーザーの自由なので、try…catch で穏やかに扱う。

まずは、自分のページに

「このページを共有」ボタン
「この記事を共有」ボタン

を実装してみてください。

スマホで試してみると、
いつも見慣れた共有シートが自分のコードから立ち上がる感覚に、
ちょっとワクワクするはずです。