制作ノート: 個人データを外部送信しないローカルファースト設計

ローカルファーストを選んだ範囲The scope of the local-first approach

ここでいうローカルファーストは、入力したデータを利用中のブラウザへ保存し、通常の利用で外部サーバーへ送らない構成を指します。ASSET MANAGEMENTでは口座残高、収支、カード利用、予定を、PANTRYでは食品名、数量、保存場所、期限などを扱います。どちらもアカウント登録やクラウド同期を前提にしていません。Here, local-first means a structure that saves entered data in the browser in use and does not send it to an external server during normal use. ASSET MANAGEMENT handles account balances, income and expenses, card use, and plans. PANTRY handles food names, quantities, storage locations, expiration dates, and similar information. Neither assumes account registration or cloud synchronization.

Webアプリ本体は配信元から読み込みますが、利用者が入力した内容はLocal Storageに残ります。「Webだからデータも運営者のサーバーにある」と思われやすいため、保存先、通信の有無、削除条件を紹介ページで明示することも設計の一部です。The web application itself is loaded from its distribution source, but content entered by the user remains in Local Storage. Because people may assume that data from a web application also resides on the operator's server, clearly stating the storage location, whether communication occurs, and the conditions for deletion on the introduction page is part of the design.

採用理由は機能との釣り合いBalancing the approach with the feature set

サーバーへ保存するなら、ログイン、本人確認、通信の暗号化、アクセス制御、データベースのバックアップ、退会時の削除などが必要です。それらは複数端末での同期や共同編集には有効ですが、一人が一台の端末で使う小規模な記録ツールには運用負担が大きくなります。Storing data on a server requires login, identity verification, encrypted communication, access control, database backups, deletion when an account is closed, and other measures. These are useful for synchronization across devices and collaborative editing, but impose a substantial operational burden on a small record-keeping tool used by one person on one device.

Local Storageなら、入力直後に端末内へ保存でき、サーバー側に個人データの保管場所を作らずに済みます。アカウントもパスワードも不要です。通信状態に左右されにくく、画面の再読み込み後も同じブラウザで記録を続けられます。ただし、この簡潔さは「クラウドと同じ安全性」や「永久保存」を意味しません。With Local Storage, data can be saved on the device immediately after entry, without creating a server-side repository for personal data. No account or password is needed. It is less affected by network conditions, and records remain available in the same browser after the page is reloaded. This simplicity, however, does not mean cloud-equivalent security or permanent storage.

外部送信しないことの利点Benefits of not sending data externally

運営者側に入力データが集まらず、サーバーからまとめて漏れる対象を作らない。Entered data does not accumulate with the operator, so there is no server-side collection that could be exposed at once.
登録用のメールアドレスやパスワードを追加で預からない。No additional email address or password is collected for registration.
入力のたびにネットワーク応答を待たず、軽い操作感を保ちやすい。Each entry does not have to wait for a network response, helping the interface remain responsive.
保存の仕組みを「このブラウザ内」と短く説明できる。The storage mechanism can be explained simply as “in this browser.”

特に家計データは、残高や支出の内容だけでも生活状況を推測できる情報です。便利だから収集するのではなく、機能に不要なら最初から受け取らない方が管理対象を減らせます。ASSET MANAGEMENTのアプリ内には広告やアクセス解析を置かず、CSPで通信自体を禁止する構成にしています。PANTRYも外部通信を禁止し、独立したoriginで他のHub作品のブラウザ保存領域から分けています。Household finance data in particular can reveal aspects of a person's circumstances from balances and spending alone. Rather than collecting it because doing so is convenient, not receiving data that a feature does not need reduces what must be managed. ASSET MANAGEMENT contains no advertising or access analytics and uses CSP to prohibit communication itself. PANTRY also prohibits external communication and uses an independent origin to separate its browser storage from that of other Hub works.

Local Storageの限界Limitations of Local Storage

端末間で同期されないNo synchronization between devices

パソコンで入力した記録がスマートフォンへ自動で現れることはありません。同じ端末でも、ChromeとEdge、通常プロフィールと別プロフィールでは保存領域が異なります。家族との同時共有にも向きません。複数端末で同じ記録を使うには、JSONを書き出して明示的に移す必要があります。Records entered on a computer do not automatically appear on a smartphone. Even on the same device, Chrome and Edge, or a regular profile and a separate profile, have different storage areas. It is not suited to simultaneous sharing with family members. To use the same records on multiple devices, JSON must be exported and moved explicitly.

サイトデータの削除で消えるClearing site data removes it

ブラウザの閲覧データ整理、サイトデータ削除、プロフィールの初期化、端末故障などで記録を失う可能性があります。運営者側には複製がないため、問い合わせを受けても復元できません。消えて困る記録には、利用者自身が保管するバックアップが必要です。Records may be lost when browser data is cleared, site data is deleted, a profile is reset, or a device fails. The operator has no copy and cannot restore them in response to an inquiry. Records whose loss would cause a problem need a backup kept by the user.

同じブラウザを使う人から見えるVisible to others who use the same browser

Local Storageは暗号化された金庫ではありません。共有パソコンで同じブラウザプロフィールを開ける人は、アプリ画面から記録を見られる可能性があります。カード番号、暗証番号、口座番号、パスワードのような認証情報は入力対象にしないよう案内しています。Local Storage is not an encrypted vault. Someone who can open the same browser profile on a shared computer may be able to view records through the application. Users are told not to enter authentication information such as card numbers, PINs, account numbers, or passwords.

バックアップを機能の一部にするMaking backup part of the feature set

Local Storageを採用するなら、書き出しだけでなく復元まで一組で用意します。ASSET MANAGEMENTとPANTRYはJSONバックアップの書き出しと復元に対応し、PANTRYでは読み込み時に形式を検証します。ファイル名にはツール名と日付を含めると、どれが新しいか判断しやすくなります。When using Local Storage, provide export and restoration together. ASSET MANAGEMENT and PANTRY support exporting and restoring JSON backups, and PANTRY validates the format on import. Including the tool name and date in the filename makes it easier to identify the newest file.

月末や大きな更新後にJSONを書き出す。Export JSON at the end of the month or after a substantial update.
現在の端末とは別の、自分だけが使える保管先へ複製する。Copy it to storage that only you use and that is separate from the current device.
復元後は件数と代表的な2〜3件を照合する。After restoration, compare the record count and two or three representative entries.
古いバックアップを捨てる前に、最新ファイルが開けることを確認する。Before discarding an old backup, confirm that the newest file can be opened.

JSONは機械が扱いやすい一方、入力内容が平文で入ります。公開リンク付きの共有フォルダ、職場や学校の共用領域、メールへの無期限添付は避けます。ファイルを暗号化して保管する場合も、復号用の情報を同じ場所に置かないなど、利用者の環境に合った方法を選ぶ必要があります。JSON is easy for machines to handle, but stores entered content as plain text. Avoid shared folders with public links, common storage at work or school, and indefinite attachment to email. Even when storing an encrypted file, users need to choose a method suited to their environment, such as keeping decryption information in a different location.

データを分離する設計Designing data separation

ブラウザの保存領域はorigin単位で分かれます。PANTRYを独立したCloudflare Workerドメインで公開するのは、食品データをほかのHub作品と共有しない境界を作るためです。機能が増えたときも、無関係なアプリから同じ保存データへ触れない構成を維持しやすくなります。Browser storage is separated by origin. PANTRY is published on an independent Cloudflare Worker domain to create a boundary that prevents food data from being shared with other Hub works. This also makes it easier to preserve a structure in which unrelated applications cannot access the same stored data as features are added.

一方で、originが変わると以前の保存データは自動で移りません。公開URLの変更はデータ移行に影響するため、安易に行えません。保存キーの形式を変更する更新でも、既存データを読み込む移行処理か、バックアップ経由の手順が必要です。On the other hand, previously stored data does not move automatically when the origin changes. A public URL cannot be changed casually because it affects data migration. An update that changes the format of storage keys also requires either migration logic that reads existing data or a procedure that uses a backup.

向いていない用途も明確にするBeing clear about unsuitable uses

複数人の共同編集、複数端末の常時同期、端末紛失時の遠隔無効化、厳格な監査履歴が必要な用途には、この構成は向きません。医療情報や認証情報など、漏えい時の影響が大きいデータを、単純なLocal Storageだけで扱う設計も避けるべきです。This structure is not suited to uses that require collaborative editing by several people, continuous synchronization across devices, remote invalidation when a device is lost, or a strict audit trail. A design that handles high-impact data such as medical or authentication information with simple Local Storage alone should also be avoided.

ローカルファーストは「サーバーを使わないから安全」と断定するための言葉ではありません。収集しない利点と、端末側で守る責任を分けて説明し、バックアップと共有端末への注意を実際の画面から辿れる場所に置く。その一連の設計によって、利用者が保存先を理解したうえで道具を選べる状態を目指しています。Local-first is not a term for asserting that something is safe because it does not use a server. The benefit of not collecting data and the responsibility for protecting it on the device should be explained separately, with backup guidance and cautions about shared devices placed where users can reach them from the actual interface. This design aims to let users choose a tool after understanding where their data is stored.

制作ノート: 個人データを外部送信しないローカルファースト設計Development Note: Local-First Design Without Sending Personal Data Externally