FileSaver.jsの拡張版のStreamSaver.jsならダウンロードのファイルサイズの制限を気にせずで良い模様

gigazine.net

スマートフォンのディスプレイやPCのモニターから出るブルーライトは波長が短く高いエネルギーを持つため、視力に悪影響が出るという説が唱えられています。そんなブルーライトに「老化の促進」という懸念すべき効果があるという研究を、オレゴン州立大学の研究チームが発表しました。

スマホやPCモニターから出るブルーライトは老化を加速させる可能性 - GIGAZINE

⇧ デジタル化の促進で老化も促進される機会が増える可能性があるとは...

FileSaver.jsとは?

ドキュメントによると、

www.npmjs.com

FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client, However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatiblity.

https://www.npmjs.com/package/file-saver

⇧ クライアントサイドでファイル保存できるということらしい。

クロスブラウザの互換性の問題とかの前に、クロスブラウザはと言うと、

techterms.com

When a software program is developed for multiple computer platforms, it is called a crossplatform program. Similarly, when a website is developed for multiple browsers, it is called a cross-browser website.

https://techterms.com/definition/crossbrowser

⇧ 複数のブラウザを考慮した開発ってことらしい。

JavaScriptのファイルのダウンロード処理でファイル保存が行われる

そもそも、クライアントサイドでのファイル保存ってどういうことなのか?

JavaScriptによるファイルダウンロード処理の情報を見てみると、

qiita.com

  1. リンクのHTML5のdownload属性を使用してダウンロードファイル名を設定
  2. File APIのBlobを使用してデータを作成
  3. window.URL.createObjectURLでBlobからURLを生成しそれをリンク先に設定

JavaScriptでファイルダウンロード処理を実現する - Qiita

⇧ となっており、

qiita.com

  • Blob = Binary Large OBjectの略、バイナリデータを表すオブジェクト,格納するための型
    • Blob は “タイプを持つバイナリデータ” を表す。
  • 巨大な画像、音声ファイル、動画ファイルなどを扱うことができる
  • immutable = 不変
    • blob を直接変更できないけれど、blobから値を切り出したり新しい blob を作ることは可能
  • ECMA で規定された標準規格であり, html5 File API で定義されている

※ File API とは、JavaScript からクライアント側のファイルにアクセスするための API 

blob & createObjectURL について - Qiita

URL.createObjectURL を使って クライアント(ブラウザ) のメモリに保存された blobに アクセス可能な一意のURLを生成可能

blob & createObjectURL について - Qiita

⇧ とあることから、JavaScriptでBlobを生成した時点で、ブラウザのメモリにBlobが保存されるらしく、

URL.createObjectURL(object※)

オブジェクト URL を生成するための FileBlobMediaSource の何れかのオブジェクトです。

developer.mozilla.org

⇧ で生成されるURLをクリックすると、Blobがファイルとして保存されながらダウンロードされるということらしい。

StreamSaver.jsとは?

FileSaver.jsの上位互換ってことかと。

www.npmjs.com

StreamSaver.js takes a different approach. Instead of saving data in client-side storage or in memory you could now actually create a writable stream directly to the file system (I'm not talking about chromes sandboxed file system or any other web storage). This is accomplish by emulating how a server would instruct the browser to save a file using some response header + service worker

https://www.npmjs.com/package/streamsaver

StreamSaver.js is the solution to saving streams on the client-side. It is perfect for webapps that need to save really large amounts of data created on the client-side, where the RAM is really limited, like on mobile devices.

https://www.npmjs.com/package/streamsaver

⇧ う~む、最終的にダウンロードする時は、ファイルの形になるとは思うんだけど。

実際に利用してる人がおられて、

zenn.dev

⇧ ファイルでダウンロードしてらっしゃるので。

ダウンロードできるファイルサイズの上限が異なるようで、

 FileSaver.js \lt 2GB

 StreamSaver.js \geqq 2GB

ってことらしい。

動画のダウンロードとかするなら、StreamSaver.jsが便利ってことなんかな。

BrowserとHTML5のFile APIで生成されたBlobの行方

Chromeのドキュメントによると、

developer.chrome.com

⇧ おそらく、Storage Processってのが、html5 File APIで生成されたBlobデータとかをメモリに保存する役割を担ってるんかな?

結局のところ、Blobデータが保存される場所が分からんけども...

毎度モヤモヤ感が半端ない...

今回はこのへんで。