One IT Thing

IT業界を楽しむ為の学習系雑記

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
-

執筆者:

関連記事

ブラウザから起動したカメラの撮影画像をjavascriptで圧縮【Compressor.js】

「モバイル用Webアプリで撮影したカメラ画像のファイルサイズが大きすぎる・・・」 そんな悩みは無いですか? 昨今カメラ会社の経営が傾くほどスマホのカメラ性能が向上、それに応じて年々ファイルサイズも増大 …

IndexedDBにストアしたオブジェクトのキー値を部分的に更新する

目次1 はじめに2 課題3 より良い方法4 まとめ5 補足 はじめに IndexedDBは「key : value」でレコードを保存するキーバリューストアです。 バリューには「単値」または「Javas …

B2BスマホアプリをGooglePlay、AppStoreに公開することがお勧め出来ない7つの理由とその対策

商材の性質やシーンに応じてスマホアプリをGooglePlayやAppleStoreのようなストアに公開することがマイナスに働くこともあります。 商材として価値の有る電子データをお持ちの商社さんとアプリ …

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

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

UserAgent判定JSライブラリ「UAParser.js」と「Platform.js」の比較

(私はUAParser.jsを使っています) ネットを探すとUA文字列を解析してブラウザ判定をするコードが一杯出てきます。 でもUA解析プログラムを自前で作ってシステムに組み込むとなると、新しいブラウ …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

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