web-dev-qa-db-ja.com

（HTML / JS経由で）スマートフォンで共有メニューをトリガーすることは可能ですか？

HTMLまたはJavaScriptを介してスマートフォンのローカルブラウザーで共有機能をトリガーする可能性はありますか？

もちろん、共有ボタンを提供する多くのサービスがあります。しかし、私が例えばFacebookでWebサイトを共有したいのですが、現在使用しているブラウザでFacebookにログインする必要があります。

ほとんどすべてのブラウザーに独自の共有機能が組み込まれています。これにより、共有に使用するアプリを選択するためのシステムメニューがトリガーされます。

System share menu in Android os

この質問についてです：このメニューをトリガーする方法？

tel:やcallto:のように、リンクのhref属性にプレフィックスを指定して電話をかけることができることは知っています。たぶん、この共有メニューのそのようなショートカットも存在しますか？またはいくつかのJavaScriptコード？それとも、まったく異なる方法で行うのですか？

前もって感謝します。

javascriptandroidhtmliosshare
45
Armin

2013年4月10日回答

私の知る限りでは、モバイルOSの現在のブラウザーにはそのような実装はありません。質問に興味を持ったので-グーグル検索で明らかになったこの方向で行われている作業があります：

すみません-回避策がわかりません。

11
madflow

それは可能です大きなキャッチ付き。現在Chrome for AndroidおよびSafari（デスクトップおよびモバイル）でのみ利用可能） http://caniuse.com/#feat=web -シェア

if (navigator.share) {
  navigator.share({
    title: document.title,
    text: "Hello World",
    url: window.location.href
  }).then(() => console.log('Successful share'))
  .catch(error => console.log('Error sharing:', error));
}

https://developers.google.com/web/updates/2016/10/navigator-share

27
aWebDeveloper

すべての回答が2018-07-16までに古くなっているようなので、これを追加しました。

可能ですが、少数のブラウザ（ MDNリファレンス ）でのみ、navigatorの1つのメソッドAPIを使用して達成できます。

navigator
    .share({
        title: document.title,
        text: 'Hello World',
        url: window.location.href
    })
    .then(() => console.log('Successful share! ????'))
    .catch(err => console.error(err));

Googleのリファレンス： https://developers.google.com/web/updates/2016/10/navigator-share

また、死んだプロジェクトであるWeb Intendsと呼ばれるものがあったので、navigator.share代わりに。

9
Machado

Web Share API で可能になりました！

ただし、現時点では広くサポートされていません。現在、これはSafari（モバイルおよびデスクトップ）でのみ利用可能であり、Chrome。詳細は 使用できます を参照）。

Google Developersの Introducing the Web Share API によると、覚えておくべきことがいくつかあります。

  • あなたのページはHTTPS経由で提供される必要があります
  • クリックなどのユーザーアクションへの応答としてのみnavigator.share(…)を呼び出すことができます（つまり、ページの読み込み時に呼び出すことはできません）。
  • ユーザーのプラットフォームで利用できない場合に備えて、機能を検出する必要があります（例：navigator.share !== undefined）

Google Developersの記事では、Share APIで共有されるURLは、独自のドメイン上にある必要はなく、どのURLでも共有できることに注意しています。

これらすべてをまとめると、使用可能な場合はShare APIを使用し、使用できない場合はメールの送信にフォールバックするこのようなものを使用できます。*：

function createShareButton() {
  const btn = document.createElement("button");

  const title = document.title;
  const text = "Check this out!";
  const url = window.location.href;

  btn.innerText = "share" in navigator ? "Share" : "Share via e-mail";

  btn.onclick = () => {
    if (navigator.share !== undefined) {
      navigator
        .share({
          title,
          text,
          url
        })
        .then(() => console.log("Shared!"))
        .catch(err => console.error(err));
    } else {
      window.location = `mailto:?subject=${title}&body=${text}%0A${url}`;
    }
  };

  return btn;
}

document.title = "Demo";
document.body.appendChild(createShareButton());

*：ユースケースに応じて、より適切なフォールバック（ソーシャルシェアリングなど）の使用を検討してください。

4
grooveplex

Androidでは WebView.addJavascriptInterface（） メソッドを使用できます。

最初に、共有メニューを開くインテントを起動するクラスを作成する必要があります（ こちらをご覧ください ）。次に、addJavascriptInterface（）呼び出しを使用してそのクラスを実装します。その後、Javascriptからメソッドを呼び出すだけです。

0
Ezeke

それは可能であり、非同期の副作用を共有して観察するためのかなりの内容を持つ関数を書きました：

const shareContact = async (title, content) => {
  const text = `${title}

${content}`;

  try {
    await navigator.share({
      text,
    });
  } catch (e) {
    console.log(e);
  }
};
0
AmerllicA