ウェブでの共有: `Navigator.share()` を使いこなすためのヒント

はじめに

この記事では、Navigator.share()を利用したウェブページからの共有について、問題とその解決策を示します。

Instagram に画像を共有したいがリールに限定される問題

Navigator.share()を使って Instagram に画像を共有することができれば、Web ページから「Instagram に画像を渡してストーリーズを作成する！」ことができます。
例えば、Web　ページ上で画像を生成したり編集できるようなサービスで便利です。

以下は、MDNのサンプルコードを一部修正したものですが、このコードでは「リール」作成画面しか開きません。なぜかは分かりません。

await navigator.share({
  files: images,
  title: 'Images',
  text: 'Beautiful images',
});

仕様では次のように URL を渡すこともできますが、こちらも同様に「リール」作成画面しか開きません。なぜかは分かりません。

await navigator.share({
  files: images,
　　　　url: 'https://example.com',
});

解決案

この問題を解決するには、title に空の文字列を渡します。すると、ストーリーズやメッセージといった選択肢が出現します。
（もちろん、なぜかは分かりません）

しかし、 text や url を指定したり、title: 'hello' のように文字列を渡すと、これは効果がありません。
以下でなくてはなりません。

await navigator.share({
  files: images,
　　　　title: '',
});