Webツールの入力内容を保存するとき、JSONファイルとしてエクスポートする方法はよく使われます。
今回は少し違う方法として、
.jsonの代わりに.htmlで保存する事で、ファイルを開いてもインポートして開く事ができる仕組み
を作ってみました。
単一HTMLは、個人用の便利サイトならばAIを使って簡単に作成できますが、便利なサイト作成が可能であるこの手法と相性抜群です。
👇 動作サンプル
仕組み
基本的な流れはシンプルです。
- 入力内容をJSON化
- JSONを圧縮
- 圧縮データをURLのフラグメント
#...に入れる - そのURLへ移動するだけの小さなHTMLをエクスポート
- 保存HTMLを開くと元サイトへ移動
- URL内のデータを読み込み、入力内容を復元
エクスポートしたHTMLには、元のWebアプリ本体を含めません。
そのため、ファイル容量は基本的に入力内容＋少量の復元用データ程度にできます。
また、gzip・deflate-raw・Brotliなど利用可能な圧縮方式を比較し、一番短くなったものを採用することもできます。
Ctrl+Sをエクスポートにする
サンプルでは便利な使い方の例として、Ctrl + S でもエクスポートできるようにしています。
通常のアプリの保存に近い感覚で、
入力する
↓
Ctrl+S
↓
HTMLを保存
↓
後日そのHTMLを開く
↓
その時点から作業再開
という使い方ができます。
複数回保存しておけば、過去の特定時点から作業を再開する簡易的なスナップショットとしても利用できます。
エクスポート時にBase64化しない方法も考えられる
サンプルでは、データを安全にURLへ含めやすくするためBase64系の形式へ変換しています。
ただしBase64化するとデータ容量は増えます。
JSON内の危険な文字列を適切にエスケープ・置換して安全にHTMLへ埋め込めるのであれば、
const savedData = {...};
のようにJSONを直接変数として保存HTMLへ埋め込み、元サイトへ遷移するときだけBase64化する構成も考えられます。
これなら保存ファイル自体をさらに小さくできる可能性があります。
アップデートの影響を受ける
この方式では、保存HTMLにアプリ本体を含めません。
そのため、後から元サイトをアップデートすると、保存済みHTMLを開いた場合も新しいバージョンのサイト上で作業を再開します。
これは「エクスポートした時点のアプリを完全保存する」という意味では欠点ですが、
保存データは残しつつ、アプリ本体は常に最新版を利用する
という意味では、エクスポートとして便利な性質でもあります。
良いと捉えるかどうかは用途次第です。
長いURLについて
この方式では入力内容をURLフラグメントに保持するため、データ量が増えるとURLも長くなります。
ブラウザのアドレスバーへ直接入力・貼り付けできる長さと、JavaScriptから location などで遷移できるURLの長さは同じとは限りません。
主要ブラウザの
- アドレスバーの上限は1万文字以上
- Javascript によるアドレスの上限は100万文字以上
が多いという記事もありました。
この手法の場合、主要ブラウザではかなり長いURLをJavaScript経由で扱える場合があります。
拡張子が異なる点への困惑
ユーザー視点だと、拡張子が異なる点に困惑を覚える可能性があります。
困惑を覚えない説明が必要になる可能性があります。
要点抜粋
この方式を使うと、
- JSONファイルを別途管理しなくてよい
- HTMLを開くだけで作業を再開できる
- アプリ本体を保存HTMLへ含めなくてよい
- Base64で保存しても、1.4倍程度の膨大で済む
- JSONに「Base64化して移動する処理」を加える形式なら容量はほぼ同じ
といった特徴を持つエクスポート機能を作れます。
小規模なブラウザツールの「作業状態を持ち運ぶ仕組み」として、使いやすい方法だと思います。