（2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした）
Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremoteStorage.jsを使ってゴリゴリJSを書いたりしますが、正直開発コストが掛かるし、仕様変更に追従してくれるか不安もあります。
目次
つい先日iOS版safari 12.2にも実装された「Web Share API Level 1」はOSネイティブのシェア機能をブラウザから呼び出すことが出来るW3Cで提案されているブラウザ標準機能。
近い将来、ライブラリを使わなくてもnavigator.share()を呼び出すだけでOSネイティブのSNS選択ダイアログが出せるようになります。
- ネイティブのシェア機能を使うのでインストールされているアプリのみをシェア先として候補に出すことが出来る。
- 使ってないSNSまで候補に出す必要が無いので製造コストが下がる。
- SNSログインする為のOAuth2ログイン画面を出す必要がない。（ネイティブアプリ側でログインしていればOK）
Level1とLevel2の違い
Web Share API仕様にはLevel1と2があり、 Level1ではテキストやURLをSNS共有することが出来ます。 Level1は既にモバイル版safari、chromeで実装済み。
Level2が実装されるとファイルも共有出来るようになります。
先日リリースされたChrome for Android 75でLevel2が実装されました。
実装
Chrome for Android 75でファイル共有を試してみます。
ブラウザからカメラを起動し、撮影した画像をGoogleドライブにアップロードする一枚っぺらのindex.html。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function share(image) {
console.log("name", image.name);
const shareData = { files: [image] };
if (navigator.canShare && navigator.canShare(shareData)) {
console.log("シェア可能！");
navigator.share({
files: [image]
}).then(() => {
console.log('Share was successful.')
}).catch((error) => {
console.log('Sharing failed', error)
});
} else {
console.log('Your system doesn\'t support sharing files.');
}
}
</script>
</head>
<body>
<input type="file" accept="image/*" capture onchange="share(this.files[0])"></input>
</body>
</html>Node.jsのhttp-serverコマンドでHTTPサーバを立ち上げ、AndroidのChrome75から上記のindex.htmlにアクセスします。
navigator.share()はHTTPS環境化でないと動かない為、ngrokを経由させ、HTTPSにして動作を確認します。ngrokが初見の場合は以下の記事をご覧ください。
動作確認
カメラ撮影するとシェアダイアログが表示されます。Googleドライブを選び、アップロードが出来ました。
次にPDFをアップロードしようとしたところ、DOMExceptionが発生してアップロード出来ません。
どうも現時点ではシェア出来るファイルの種類が限られているようです。対応フォーマットを確認すると、画像、動画、音声などのマルチメディアファイルしかまだシェア出来ないとのことです。
https://docs.google.com/document/d/1tKPkHA5nnJtmh2TgqWmGSREUzXgMUFDL6yMdVZHqUsg/edit
使用して分かったこと
- HTTPS環境下でないと使えない。（navigator.share()が居ない）
- 対応している画像でも結構な頻度でDOMExceptionが発生してシェア出来ない。
- ファイルシェアの場合は「ファイルをシェア出来るアプリ」のみシェア先ダイアログに表示される。（Google Drive、Dropbox、LINEとか）
- シェアするファイル名をプログラムから設定できない。（share19283759191.jpgとかになってしまう）
- シェア出来るファイルに制限がある。拡張子を変えてもMimeタイプチェックが走るのかDOMExceptionが発生する。
他ブラウザの仕様実装が追いつくまで待っても遅くない
現状ではPDFやOfficeファイルのようなビジネスユースのファイルはアップロード出来ないことが分かりました。
今後、対応するファイルタイプは増えていくと先のgoogleブログにも書いてあるので、safariや他ブラウザでのLevel 2実装と併せて期待したいところです。
ファイル名はLevel1では決められる（Fileオブジェクトを使わずにテキスト内容をtext/plainで指定してアップロードする場合）のでLevel2もその内そうなるんじゃないか、というかそうして欲しい、と願っています。
sharer.js、remoteStorage.jsでゴリゴリJSを書かなくてもファイルをSNSシェア出来る時代が早く来てほしいです。
