Webアプリでデータを保存するとき、.json ファイルとしてエクスポートする方法はよく使われます。
今回は少し変えて、
JSONファイルの代わりにJSON本体を入れたHTMLファイルを保存し、そのHTMLを開くとインポート方法の説明ページへ移動する
という方法を紹介します。
アプリケーション側で「インポート時にHTMLファイルを解析して、JSON部分を抽出する仕組み」を実装する必要があります。
👇 出力するJSONの代わりのHTMLのサンプル(index14.html?...に飛びます)
保存HTMLの例
<!doctype html><template>--- jsonstart GkTdJFqxKFnRFiZicQbArXXb7o8TYQcd ---{"name":"サンプルプロジェクト","text":"これはJSONの代わりにHTMLへ保存したサンプルデータです。","count":3,"items":["りんご","みかん","ぶどう"]}
--- jsonend GkTdJFqxKFnRFiZicQbArXXb7o8TYQcd ---</template><script>location.replace("https://uni928.github.io/Uni928PublicHTMLs2/index14.html?"+Date.now())</script>
HTML内には、
- JSON本体
- JSONの開始・終了位置を示すマーカー
- 説明ページへ移動するJavaScript
だけを入れています。
アプリ側ではマーカー間だけ読む
インポートするアプリ側では、ファイル全体を文字列として読み込み、
const start="--- jsonstart GkTdJFqxKFnRFiZicQbArXXb7o8TYQcd ---";
const end="--- jsonend GkTdJFqxKFnRFiZicQbArXXb7o8TYQcd ---";
const startPos=text.indexOf(start);
const endPos=text.lastIndexOf(end);
if(startPos===-1||endPos===-1||endPos<=startPos){
throw new Error("JSON領域が見つかりません");
}
const jsonText=text
.slice(startPos+start.length,endPos)
.trim();
const data=JSON.parse(jsonText);
のように、マーカー間だけをJSONとして読み取ります。
マーカー間にはJSON以外を入れないのがポイントです。
容量が多くなっても良いならば、json部分はBase64にすると安全です。
この場合は
GkTdJFqxKFnRFiZicQbArXXb7o8TYQcd部分はBase64外の文字を足して下さい。
HTMLにするメリット
通常のJSONファイルは、ユーザーが直接開いても「どう使えばよいか」が分かりにくいことがあります。
HTMLにすると、開いた瞬間に
保存ファイルを開く
↓
インポート方法の説明ページへ移動して使い方を理解
↓
元のアプリでこのHTMLを選択
↓
JSON部分を読み取って復元
という流れを案内できます。
JSON本体は保存HTML内に残るため、説明ページはあくまで使い方を案内する役割です。
容量も小さくできる
保存HTML側に「説明サイト本体」を含める必要はありません。
そのため追加されるのは、
- 最小限のHTML
- 開始・終了マーカー
- リダイレクト用JavaScript
程度です。
JSON自体を圧縮せずそのまま保存する場合でも、通常のJSON保存と比較して追加容量をかなり小さくできます。
まとめ
この方法なら、
- JSONとして扱いやすい
- HTMLを開けば使い方を案内できる
- 既存のJSONインポート処理へ組み込みやすい
- 保存ファイルの容量も大きく増えにくい
という特徴があります。
「JSON保存の扱いやすさ」と「HTMLを開いたときに案内できる便利さ」を組み合わせる方法として使えると思います。