0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

localStorageを任意保存にする業務ノート:JSON往復と消失条件を確認する

0
Posted at

小さな業務ノートでも、ブラウザーを閉じたら消えるのか、共有端末に残るのかは利用者にとって大切な仕様です。

大創社の公開デモ「AI試行計画ノート」は、入力内容をページ内で処理し、希望する場合だけブラウザーへ保存します。ここでは、公開実装の保存・読み込み・書き出しを追い、再読込とJSONの往復を確認した結果をまとめます。

対象の版

  • リポジトリ:DAISOSHA/ai-pilot-planner
  • コミット:6e40e7af195f8f6af9845a841d63d08cc93a2cda
  • 確認日:2026年11月8日
  • 対象:app.js、core.js、index.html、core.test.cjs
  • 実行:Node.js v24.22.1による構文・既存テストと、公開版と同じファイルを置いたlocalhost上のブラウザー操作

このデモにAIへの送信や推論を行う機能はありません。時間も利用者が入力します。以下は自作デモの技術解説であり、AI導入効果の実証結果ではありません。

保存は初期状態でオフ

保存処理は app.js、入力値の検証は core.js にあります。初期の saving は false です。

「このブラウザーに自動保存する」をオンにすると、その時点のモデルを localStorage の daisosha-public-pilot-v1 へJSONとして保存します。その後、有効な入力の変更などで保存処理が呼ばれます。

保存されるのは、試行名、目的、担当・役割、データの扱い、4週間の計画、最大200件の時間記録、表示言語です。保存済みのJSONが正常なら、次回の起動時に復元され、保存も有効になります。

チェックを外す操作は、既存の保存項目を削除します。画面に表示中の値まで即座に空にする操作ではありません。値はその画面で編集できますが、再読込後には復元されません。

画面で確認した3つの状態

実際の業務内容を使わず、架空の試行名と数値で試しました。

操作 再読込後の結果
保存オフで試行名を入力 試行名は空欄
JSONを読み込み、保存をオン 読み込んだ試行名が復元され、保存もオン
保存をオフへ戻す 試行名は空欄、保存もオフ

日英切り替えで、入力内容が保たれることも確認しました。別タブとの競合や別端末での動作を試した結果ではありません。

JSONを読む前に、モデルを検証する

JSON読み込みは、ファイル容量を検査し、JSON.parse() と PilotCore.validate() を通してから置き換えの確認を表示します。上限はコード上で 1024 * 1024 バイト、つまり1 MiBです。

検証の主な条件は次のとおりです。

対象 条件
版と言語 version: 1、ja または en
計画 weeks が4件。各項目に文字数の上限
記録 trials が200件以下
時間 空文字列、または0〜100000の有限な数値
日付 空文字列、または実在する YYYY-MM-DD
品質 unchecked、accepted、rework のいずれか

検証は既知の項目から新しいオブジェクトを組み直すため、未知のプロパティは引き継ぎません。数値文字列や負数を都合よく補正せず、形式違反として拒否します。

読み込みを承認すると現在のノートを置き換えます。読み込み操作だけで保存がオンになるわけではありません。現在オンなら保存し、オフならページ内だけで扱います。

JSONとCSVの役割を分ける

JSONの ai-pilot-note.json には、計画と記録の両方が含まれます。ノート全体を戻すための形式です。

CSVの ai-pilot-observations.csv には記録部分だけが含まれます。列は date, task, baseline, prepare, work, review, quality, note です。CSV読み込み機能はありません。

今回、架空の3記録をJSONで読み込み、再度書き出したファイルを両方とも validate() に通して比較しました。入力モデルは一致しました。書き出したCSVも、同じ記録を csv() に渡した出力と一致しました。

CSVはUTF-8 BOM付きで、各フィールドを引用符で囲み、内部の引用符を重ねます。数式として解釈されやすい先頭文字にはアポストロフィを付ける処理もあります。ただし、すべての表計算ソフトでの開き方まで試験したものではありません。CSVは表示上の対策を含む形式で、JSONと同じ完全復元用データではない点も区別します。

「端末内保存」が意味しないこと

保存内容の暗号化や認証、クラウド同期のコードはありません。同じオリジンの別スクリプトや、その端末にアクセスできる人から入力を守る保管庫ではありません。

ブラウザーのサイトデータ削除やプロファイルの変更などで保存内容へアクセスできなくなる可能性があります。localStorageへ書けない場合は、実装上、保存をオフにしてJSON書き出しを案内します。容量不足を意図的に発生させる試験は今回行っていません。

共有端末では保存せず、氏名・相談記録・業務の秘密は入力しない前提です。書き出したファイルも、別の保存先や送信先へ移せば、その場所に応じた管理が必要になります。

再現できる確認と、未実行の範囲

ファイルを取得し、そのフォルダーで次を実行します。

node --check core.js
node --check app.js
node --test core.test.cjs
python -m http.server 8000

ブラウザーでは http://localhost:8000/ を使います。今回、既存7テストはすべて通り、別途、200件の受理・201件と負数の拒否をコア関数で確認しました。画面操作の正常なJSON読み込み・保存切り替え・書き出しも確認しています。

1 MiB超過や不正JSONを画面から拒否する操作、印刷・PDF、モバイル表示、複数ブラウザー、保存容量不足、複数タブ同時編集は今回未実行です。コードで条件を確認したことと、画面で実行したことは分けて扱います。

保存機能を説明するときは、「保存できます」に加えて、保存する操作、何が残るか、何で消えるか、どこまで復元できるかまで示すと、利用者が扱えるデータを判断しやすくなります。

参照

リンク先リポジトリのソースはレビュー・デモ目的で公開されており、再配布・商用再利用の追加ライセンスは付与していません。本記事にはアプリのソースコードを転載していません。本文の整理にはAIを使用し、公開コードと実行結果を照合しました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?