zipっぽい（拡張子をzipに変えればunzip可能な）ファイルの中身をWebブラウザ上で閲覧するためのビュワーを作りました。
https://zipish-lens.muno92.dev/
(命名: Claudeさん)
Appleウォレットのパスの実体であるpkpassファイルやOffice 2007形式のファイル (docx, xlsxなど)、あと教えて貰って知ったのですがKeynoteファイルなどzipとして展開可能なファイルの中身を閲覧できます。
背景
ここ1年ほどAppleウォレットのパスをWebアプリケーションから発行するための開発をしていたのですが、デバッグ時に中身を確認したい・また(半分以上ただの好奇心で)他のシステムが発行したパスの中身を見たいと思うことが何度かありました。
Appleウォレットのパスの実体であるpkpassファイルはzipで固めた後に拡張子を変えただけのファイルなので簡単に中身を見れるのですが、都度
- (元ファイルを残しておきたい場合はコピーして)
- 拡張子をzipに変えて
- 解凍して
- jsonが1行にminifyされていたら見やすいようにフォーマットして
- マルチバイト文字がUnicodeエスケープシーケンスにエスケープされていたらそれも元に戻して
と作業をするのが地味に面倒・・・
同様に実態がzipであるxlsxファイルの中身をデバッグで確認したい場面もたまにあり、ファイルをアップするだけで一連の処理を実行してくれるツールが欲しいな、と作ってみました。
実装
このツールはBlazor WebAssemblyで作成したアプリケーションをCloudflare Pagesにデプロイして動かしています。
C#でフロントエンド側も実装する技術にBlazorがあり、その実行形態の一種としてBlazor WebAssemblyがあります。
個人的にこの手のWebツールを使う時はデータがサーバーに送信されるか気になるので、出来るだけフロント側で処理を完結させたいと考えました。
それだけなら他にも選択肢はありますが、Blazor WebAssemblyを選んだのは久しぶりにC#を触ってみたかったからです。(なのでただの趣味)
Blazor WebAssemblyは静的サイトを動かせるサービスならどこにでも展開でき、GitHub Pagesへのデプロイはやってみたことがあったので今回はCloudflare Pagesを使ってみました。
(Cloudflare Pages、GitHub Actionsからもwrangler-actionで簡単にデプロイできましたし、ちょっと触っただけでもアナリティクスやプレビューなどの機能が備わっていて便利だなと思いました)
内部実装は単純で下記のことを実行しているだけです。
- アップされたファイルをzipとして保存
- zipを解凍
- 展開されたファイルを一覧表示
- 選択したら画像はimgタグにData URL形式で表示
- パス指定できるように公開ディレクトリに画像を移すのも面倒なので
- テキストはそのまま表示 (jsonとxmlはフォーマット)
Blazor WebAssemblyのビルドツールはWebAssemblyへのビルドでよく使われるEmscriptenがベースになっており、Emscriptenは仮想ファイルシステムを提供しています。
(仮想ファイルシステムはデフォルトではメモリ上に構築されます)
試してみたらBlazor WebAssemblyでもファイルシステムを使えそうだったので、難なくzipの保存・解凍ができました。
(メモリ上にファイルが保存されるのでリロードによる揮発やファイルサイズには気をつける必要があると思いますが、今回のケースでは特に問題にならず)
デシリアライズ→シリアライズでフォーマットできるかは実装してみるまで未知数でしたが、上手くいってくれました。
終わりに
- 拡張子ベタ書きで表示可能なファイル形式を指定している所をファイルの中身で判定できるようにしたい
- 最低限プレーンテキストだけでも
- 広めのドラッグ＆ドロップ領域を追加してアップしやすくしたい
とか色々と調整したい点はありますが、最低限使えるものは作れたかなと思います。
久しぶりにBlazor WebAssemblyを使ってみてだいぶ書き方を忘れてしまっていましたが、C#のメソッドやプロパティをフロント側と共有できるのは楽だな〜と思いました。
あと、やっぱり型としてどんな情報を持っていて何を実行できるのか分かるのは良い。
ただ、Blazor WebAssemblyはWebAssemblyの部分がラップされていて何も理解していなくても使えてしまうので、ある程度作り込んだら見た目はそのままに別の言語のWebAssemblyに載せ替えてみるのもありかな〜とか考えてます。
(単純に面白そうですし)
「自分の困りごとが解決できた時点で勝ち」の精神で作ったニーズがあるのかどうかよく分からないツールではありますが、「使えそう」と思った方は使っていただけると嬉しいです。
