ブラウザからローカルのディレクトリを読み取ってpngとjpgをwebpに変換するツールを作った

概要

ブラウザからローカルのディレクトリを読み取ってpngとjpgをwebpに変換するツールを作った。

対象読者

• 画像ファイルのwebpへの変換が毎回面倒くさいと思っている人

背景

Webサイトを作ってるとpngとかjpgのロードが遅くてムカつくことが多々ある。

そんな時、人はwebpに変換するということを思いつくのだが、変換するためにはgoogleが出してるCLIツールをインストールしたり、広告がベタベタと貼られまくっている怪しいWebツールを使わねばならなかったりする。

エンジニアならCLIツールをインストールして使うのは簡単だろうが、大体数カ月に一回くらいしか使わないのでどんなコマンドだったか忘れてしまう。

もしもブラウザがローカルのディレクトリを読み書きすることができて、pngをwebpに一括変換できるのであれば、コマンドを覚える必要もなくて便利なのではないかと思った。

可能なのかどうか

ブラウザはローカルのファイルシステムにアクセスできるのか

できるらしい。

File System Access APIを使ってローカルファイルの読み書きを試してみる - Qiita

はじめに File System Access API（旧名：Native File System API）はファイルシステムをWebブラウザ上で再現したAPIで、特筆すべきはユーザー端末のローカルファイルを直接扱うことができる点です。一応、以前よりHTML5 File ...

Qiita

https://qiita.com/pentamania/items/ada07c45d4e5cc139c03

File System Access APIの使い方

Zenn

https://zenn.dev/itte/articles/c7056293259dda

ただ、PC版Chrome（かEdge, Opera）でしか使えないという制限がある。まあ9割がChromium系を使っている世の中なので良いのではと思う。

ブラウザだけでpngをwebpに変換できるのか

できるらしい。

canvasで画像をwebpに変換する

以前にcanvasの内容を画像に変換する記事を投稿しましたが、変換時のファイル形式でwebpを指定することもできるので、ローカルの画像をwebp形式に変換する仕

cly7796.net

https://cly7796.net/blog/javascript/convert-image-to-webp-with-canvas/

webpをjpgかpngに変換するブックマークレット - Qiita

あったら良いなと思って勉強がてら作ってみました。Chromeで動きました。 新しいタブで画像を開いた時に使えます。末尾を弄ると保存する時の名前とか形式とかを変えられるようにしてみました。 javascript:(({quality, fileName, format}) =...

Qiita

https://qiita.com/kozuno/items/7b9f5fc563fdb21d687e

Canvasを使うらしい。なるほど確かにという感じ。

できたもの

Codexに書かせたら一発。

FS WebP Converter

File System Access API と Canvas で PNG / JPG / WebP を相互変換するローカルツール。

https://webp.umigame.app/

感想

ものすごく便利で作業が捗る。