API	概要	確認ダイアログ
showOpenFilePicker()	ファイルを開く（読）	上書き時に出る
showSaveFilePicker()	ファイルを開く（読書）	（なし）
showDirectoryPicker()	ディレクトリを開く	開くときに出る

開く

　ファイルを開くときは以下のようなUIで開かねばならない。ファイルパスを文字列で指定して開くことはできない。

上書き

　上書きはFileSystemFileHandle.createWritable()で行う。showOpenFilePicker()で開いたファイルを上書きする。

　showOpenFilePicker()で開いたファイルは書込許可がない。もし上書き保存しようとしたら以下の確認ダイアログでパーミッションを与えねばならない。この手続きは省略できないようだ。

パーミッションのライフ期間

　パーミッションはブラウザを閉じるまで保存される。ブラウザを閉じたあとでページを開くと、再びダイアログでパーミッションを与えねばならない。

　IndexedDBでパーミッションを保存できる。

最後に書き込んだファイルハンドラをIndexedDBで書き込む
ページ読込時にIndexedDBに保存されたファイルハンドラを読み込む
以後、上書き保存しても確認ダイアログが出ない

　ユーザは上書きするとき、1度だけ確認ダイアログで許可を出す。その後はIndexedDBで保存されているかぎり、ブラウザを閉じても確認ダイアログが出ない。その動きは以下で確認できる。

6/index.html

別名で保存する

　別名で保存する。このときも開くとき同様だ。ファイル選択ダイアログでファイルを指定せねばならない。タイトルがファイルを保存となっている点が異なる。

　showSaveFilePicker()で開いたファイルハンドラは書込許可がついた状態である。上書き保存するときに確認ダイアログは出ない。

ディレクトリを開く

　showDirectoryPicker()を使う。ファイルを開くときと同様だ。タイトルがフォルダを選択となっている点が異なる。

　開くとき、以下の確認ダイアログが表示される。これも回避する手段はなさそう。未確認だが、上書き時に用いたIndexedDBにファイルハンドルを保存する方法で二回目以降の確認ダイアログを省略できると思われる。

所感

すごい！

　嬉しい。ついにブラウザからローカルファイルを操作できるようになった。これをもうずっと前からやりたかった。APIを実装してくれた偉い人たちに感謝。

セキュリティのせいで面倒

　あらゆる手順が面倒くさい。electronとか使ったほうが楽かも？　未調査のため不明。

ファイル選択がウザい

　超うざい。手動での操作が必須って……。クソすぎ。

パス取得が超めんどう

ディレクトリを選択: showDirectoryPicker()
ファイルを選択: showOpenFilePicker()
1のハンドラで2のハンドラとの相対パスを取得: 7/main.js#L19

　ファイルからフルパスが見れたら楽だったのに。

対象環境

2021-01-15
Raspbierry pi 4 Model B
Raspberry Pi OS buster 10.0 2020-08-20 ※
bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

JSのFile System Access APIを使う

成果物

やったこと

課題

情報源

API

名前

動作環境

類似品

File System Access API

開く

上書き