Native File System API の紹介と Zip を作る Web サービスを作った話

PWA Night OSAKA vol.6

Transcript

1. Native File System API の紹介 と Zip を作る Web サービスを 作った話 2020/09/30 PWA Night OSAKA vol.6 ⼩原 ⼀哉
2. ⾃⼰紹介 ⼩原 ⼀哉 (こはら かず や) ウェブエンジニア フェンリル株式会社 @KoharaKazuya 2 2
3. 以前の発表 https://speakerdeck.com/koharakazuya/gurahuikaruni- url-wobian-ji-dekirusabisuwozuo-tuta より 3 3
4. Native File System API とは Web からファイルの読み書きができる ダウンロード＆アップロードではなく直接 特定ディレクトリ以下をフルにコントロール 参考: The Native File System API: simplifying access to local files 4 4
5. 対応状況は？ Chrome 86 (2020/10/6) から！ 他はまだ。仕様の標準化もされていない。 参考: Can I use... Support tables for HTML5, CSS3, etc 5 5
6. ⾯⽩そう！ → なんか作ろう！ 6 6
7. 作ったものの紹介 (デモ) https://zipweb.koharakazuya.net/ 7 7
8. 使ったもの Native File System API の Ponyfill として Browser- NativeFS というライブラリがある Native File System API がサポートされていない場合は、 <input webkitdirectory> , <a download> などを 使って代替する 参考: Reading and writing files and directories with the browser-nativefs library 8 8
9. つまづいた 9 9
10. つまづいて気付いた あれ、Zip の作成だとアップロード＆ダウンロードでいいから Native File Sytem API いらないじゃん……。 → Browser-NativeFS の代替実装部分だけを利⽤するように 10 10
11. その他 今回は 5 分の LT なので、話しきれなかった細かい部分は記事 としてまとめた。 ↓ Zip を作る Web サービスを作った | Zenn 11 11
12. まとめ Native File System API を紹介した Browser-NativeFS を紹介した Zip Web というサービスを作った Zip Web が Native File System API の利⽤例として不適切 だとわかった 12 12