JavaScript | Web API：クリップボード・共有 － ネイティブ共有

JavaScript JavaScript
スポンサーリンク

「ネイティブ共有」は“ブラウザの外の世界”に渡すための出口

Web アプリの中だけなら、
URL をコピーしたり、画面に何か表示したりすれば完結します。

でも実際のユーザーは、

このページを LINE で送りたい
この記事を Twitter に投げたい
メモアプリに URL を保存したい

みたいに、「ブラウザの外」に情報を渡したくなります。

このときに使えるのが ネイティブ共有 です。
スマホの「共有シート」「共有ダイアログ」をそのまま呼び出して、
ユーザーが普段使っているアプリに渡してもらう仕組みです。

JavaScript からは、基本的に Share API（navigator.share） を使って実現します。

ネイティブ共有の正体は「OS の共有ダイアログ」を呼び出すこと

スマホで見慣れている“あの画面”を Web から呼ぶ

スマホでブラウザを使っていると、
どこかに「共有」ボタンがあって、
タップすると

LINE
メール
メモ
Twitter
Slack

などが並んだ画面が出てきますよね。

あれは OS が用意している ネイティブの共有 UI です。

navigator.share を呼ぶと、
まさにその画面を Web ページ側からお願いして開いてもらう ことができます。

つまり、Web アプリから見れば、

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

という、かなりおいしい出口になります。

ネイティブ共有と「自前の SNS ボタン」の違い

よくある「Twitter で共有」「LINE で共有」ボタンは、
それぞれのサービスの URL を開いているだけです。

Twitter なら https://twitter.com/intent/tweet?...
LINE なら専用の URL スキーム…といった具合に、
サービスごとに個別対応が必要になります。

一方、ネイティブ共有（Share API）は、

「共有先は OS に任せる」
「ユーザーが選んだアプリに渡す」

というスタイルです。

Web 側は「タイトル・テキスト・URL」を渡すだけ。
あとは OS とユーザーがいい感じにやってくれます。

基本の書き方：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 = "このブラウザはネイティブ共有に対応していません";
    return;
  }

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

ここで重要なポイントを整理します。

まず、navigator.share が存在するかを必ずチェックしています。
PC ブラウザや一部環境では未対応なので、「使えないときのメッセージ」を用意しておくのが現実的です。

次に、navigator.share に渡しているオブジェクト。
title は共有先で表示されるタイトル、text は説明文、url は実際に共有されるリンクです。
「共有シートに渡す素材」をまとめて渡しているイメージです。

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

ネイティブ共有が“ちゃんと映える”状況を意識する

スマホ前提で考えると設計がしやすい

ネイティブ共有は、特に スマホブラウザ との相性が抜群です。

スマホには OS レベルの共有シートがあり、
ユーザーはそれを日常的に使っています。

あなたの Web アプリから navigator.share を呼ぶと、
その「いつもの共有シート」がそのまま立ち上がります。

だから設計としては、

スマホ：ネイティブ共有（Share API）
PC：URL コピーや SNS ボタン

という切り分けをするのが現実的です。

JavaScript では、単純に

if (navigator.share) {
  // ネイティブ共有ボタンを表示
} else {
  // 「URL をコピー」ボタンなどを表示
}
JavaScript

のように分岐させれば OK です。

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

HTML:

<article>
  <h1 id="articleTitle">JavaScript 入門：ネイティブ共有編</h1>
  <p>この記事ではネイティブ共有の基本を解説します…</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 = "共有はキャンセルされました";
  }
});
JavaScript

ここでのポイントは、「何を共有するか」をちゃんと設計していることです。

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

これだけで、ユーザーが共有したときの見え方がかなり整います。

ネイティブ共有にもある“セキュリティと制限”

HTTPS とユーザー操作が前提条件

ネイティブ共有（Share API）も、Clipboard API と同じく

HTTPS（安全なコンテキスト）
ユーザー操作（クリックなど）に紐づいていること

が前提です。

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

必ず「ユーザーが共有したいと意思表示した瞬間」にだけ呼ぶ、
というルールを自分の中でも徹底しておくといいです。

失敗やキャンセルは“普通のこと”として扱う

navigator.share は、ユーザーが共有ダイアログを開いたあと、

そのまま送る
アプリを選び直す
やっぱり閉じる

など、いろんな行動を取れます。

キャンセルされたからといって、
それは「エラー」ではなく「ユーザーの選択」です。

コード側では try...catch で受けつつも、

「共有ダイアログを開くこと自体が目的」
「その先はユーザーの自由」

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

初心者として「ネイティブ共有」で本当に掴んでほしいこと

ネイティブ共有の本質は、こうです。

「Web アプリの中の情報を、
ユーザーが普段使っている“外のアプリ”に、
一番自然な形で渡してあげる」

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

ネイティブ共有は navigator.share で呼び出す。
渡すのは title・text・url の 3 つが基本。
スマホとの相性が良く、PC ではフォールバック（URL コピーなど）を用意する。
HTTPS とユーザー操作が前提で、成功／キャンセルはユーザーの自由。

まずは、自分のページに

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

を実装して、スマホで実際に押してみてください。

自分の書いたコードから、
いつも見慣れた共有シートが立ち上がって、
LINE やメールに URL がそのまま渡っていく——

その感覚が一度つかめると、
「ネイティブ共有」はただの API ではなく、
“Web と現実のコミュニケーションをつなぐ出口” として
かなり頼もしく見えてくるはずです。

スポンサーリンク
タイトルとURLをコピーしました