html5

Chrome75に実装された「Web Share API Level 2」を使ってみた

投稿日:2019年6月14日 更新日:

(2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした)

Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremoteStorage.jsを使ってゴリゴリJSを書いたりしますが、正直開発コストが掛かるし、仕様変更に追従してくれるか不安もあります。

Web Share APIとは

つい先日iOS版safari 12.2にも実装された「Web Share API Level 1」はOSネイティブのシェア機能をブラウザから呼び出すことが出来るW3Cで提案されているブラウザ標準機能。

近い将来、ライブラリを使わなくてもnavigator.share()を呼び出すだけでOSネイティブのSNS選択ダイアログが出せるようになります。

Web Share APIのメリット

  • ネイティブのシェア機能を使うのでインストールされているアプリのみをシェア先として候補に出すことが出来る。
  • 使ってない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

使用して分かったこと

  1. HTTPS環境下でないと使えない。(navigator.share()が居ない)
  2. 対応している画像でも結構な頻度でDOMExceptionが発生してシェア出来ない。
  3. ファイルシェアの場合は「ファイルをシェア出来るアプリ」のみシェア先ダイアログに表示される。(Google Drive、Dropbox、LINEとか)
  4. シェアするファイル名をプログラムから設定できない。(share19283759191.jpgとかになってしまう)
  5. シェア出来るファイルに制限がある。拡張子を変えてもMimeタイプチェックが走るのかDOMExceptionが発生する。

他ブラウザの仕様実装が追いつくまで待っても遅くない

現状ではPDFやOfficeファイルのようなビジネスユースのファイルはアップロード出来ないことが分かりました。

今後、対応するファイルタイプは増えていくと先のgoogleブログにも書いてあるので、safariや他ブラウザでのLevel 2実装と併せて期待したいところです。

ファイル名はLevel1では決められる(Fileオブジェクトを使わずにテキスト内容をtext/plainで指定してアップロードする場合)のでLevel2もその内そうなるんじゃないか、というかそうして欲しい、と願っています。

sharer.js、remoteStorage.jsでゴリゴリJSを書かなくてもファイルをSNSシェア出来る時代が早く来てほしいです。

-html5
-

執筆者:

関連記事

ionic3(SPA)のServiceWorkerライブラリをsw-toolboxからWorkboxに切り替える

昨今は閲覧速度向上やオフラインでも使える利便性が求められ、Webアプリ開発とPWAはセットで考えられるようになってきましたね。 PWAは「ServiceWorker API」を使ってキャッシュする資源 …

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示(後編)

目次1 はじめに2 ビューワ機能を提供してくれるnpmモジュールを選別する3 実装開始3.1 ng2-pdfjs-viewerを使えるようにする3.2 PDFビューワコンポーネントを作る3.3 Hom …

Android、iPhoneが向いている方向をWeb地図上で表現してみる(leaflet.js使用)

前回Javascriptでコンパス機能を実装して、Android、iPhoneの背面が向いている方角が数値(0~360:0が北)で分かるようになりました。 One IT Thing  9 P …

Android+ChromeでlocalhostアクセスしてPCサーバへPort Forward(Fwdアプリ使用)

昨今はプライバシーの侵害防止、セキュリティ観点から、HTTPS環境下でないと使えないHTML5 APIが増えました。 反してAndroid7でオレオレ証明書に関する仕様が変わり、Android6だった …

Angular、React、Vueプロジェクトを新規作成した時に生成されるリソース規模比較

アンチウィルスのディスクフルスキャンが日に日に遅くなっていく・・・ 一年後には丸一日掛かっても終わらなくなり、仕事終わりにかけて行ったフルスキャンが翌日まだ頑張っている。 この原因、ちょこちょこ作って …

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。