Navigator.share()でスマホの共有メニューをHTMLから操作する

公開日|2021.02.16
サンプルの説明
・スマホの場合は「共有メニュー」を開く
・PCの場合は「指定したURL」をコピーし、「指定した文言」にテキストを入れ替える


HTML
<a type="button" class="share-button" disabled=""
data-share-title="ここにタイトルを入れる"
data-share-text="ここにテキストを入れる"
data-share-url="ここに指定したいURLを入れる"
data-share-done="ここに指定したい文言を入れる">
このボタンを押してみて!
</a>


Javascript
navigatorShare();

// navigatorShare
function navigatorShare() {
document.addEventListener('DOMContentLoaded', () => {
for (const shareButtonElement of document.querySelectorAll('.share-button')) { // class="share-button"内で回す
shareButtonElement.disabled = false;
shareButtonElement.addEventListener('click', () => { // class="share-button"をクリックして発火
const shareTitle = shareButtonElement.dataset.shareTitle; // class="share-button"内の「data-share-title」で指定した値を「shareTitle」という変数に格納
const shareText = shareButtonElement.dataset.shareText; // class="share-button"内の「data-share-text」で指定した値を「shareText」という変数に格納
const shareUrl = shareButtonElement.dataset.shareUrl; // class="share-button"内の「data-share-url」で指定した値を「shareUrl」という変数に格納
const shareDone = shareButtonElement.dataset.shareDone; // class="share-button"内の「data-share-done」で指定した値を「shareDone」という変数に格納
try {
if (navigator.share !== undefined) { // 共有メニューを持つデバイスだったら
navigator.share({// 共有メニューを起動
title: shareTitle !== undefined ? shareTitle : document.title, // 「shareTitle」が入る
text: shareText, // 「shareText」が入る
url: shareUrl !== undefined ? shareUrl : document.URL, // 「shareUrl」が入る
});
} else { // 共有メニューを持たないデバイスだったら
const textArea = document.createElement("textarea"); // textareaを作成して「textArea」という変数に格納
textArea.textContent = shareUrl; // 「shareUrl」を上で作成した「textArea」という変数内にこっそりコピペ
document.body.appendChild(textArea); // 上の処理でコピペした情報が入った「textArea」をこっそりHTML内に作成
textArea.select();// そのテキストエリア内をこっそり全選択
document.execCommand("copy"); // そしてそれをコピー
document.body.removeChild(textArea); // コピーが終わったらもうテキストエリアはいらないのでこっそり削除
shareButtonElement.innerHTML = '<span class="donetxt">' + shareDone + '</span>'; // 「shareDone」を入れた要素を.share-buttonの要素内に作成して追加
shareButtonElement.setAttribute("disabled", true); // クリック禁止処理
shareButtonElement.style.cursor = "none"; // クリック禁止処理
}
} catch (e) {
console.error('Share failed', e);
}
});
}
});
}


サンプルとダウンロード
Git Hub

参考にしたサイト
Web Share API によるシェアボタン
Navigator.share() - Web API | MDN