PRODUCTION NOTE
不要なデータ収集を増やさない
静的Webアプリ設計
作成日:
最終更新日:
執筆: YNT Works
目的は「静的にすること」ではない
静的なHTML、CSS、JavaScriptだけで構成すると、サーバー処理がないこと自体は分かりやすくなります。しかし、外部スクリプト、分析タグ、フォーム、ブラウザ保存を後から足せば、データの流れはすぐに増えます。
YNT Worksでは、静的という技術名を目標にせず、利用者が目的を達成するために必要な処理とデータだけを残すことを目標にします。そのため、画面を作る前に「端末内で処理できること」「通信が必要なこと」「保存が本当に必要なこと」を分けます。
処理・通信・保存を別々に決める
処理場所
文字列の整形、計算、画面状態の更新など、端末内で完結できる処理はブラウザ内で行います。サーバーへ送る理由がなければ、送信経路そのものを作りません。
外部通信
画像、フォント、スクリプトを同一サイト内に置き、不要な外部読み込みを避けます。ネットワーク照会が機能の本体である場合は、接続先と用途を限定し、ローカル処理と同じものとして扱いません。
ブラウザ保存
CookieやStorageは、便利そうだからという理由では追加しません。画面を閉じた後にも残す必要があるか、利用者が消去や再設定を理解できるかを確認し、不要なら保存しません。
入力
問い合わせフォームやアカウント機能を置かなければ、入力データの受信、保管、削除、権限管理も増えません。必要な連絡は、現在の公開Contact境界へ分離します。
公開中の体験での使い分け
YNT Works rootは、公開アプリと方針を案内する静的サイトです。フォーム、独自のアクセス解析、Cookie、ブラウザ保存、外部API通信を持たず、同一サイト内のCSS、JavaScript、画像だけを配信します。
Toolish Utilityでは、計算や整形の多くをブラウザ内で行います。一方、名前解決のようにネットワーク照会自体が目的の機能は外部通信が必要です。ローカルで完結する機能と、限定した接続先を使う機能を同じ表現で説明しないことが重要です。
そらほしポータルとそらほしナビでも、遊び、学習、観察準備という目的ごとに必要な機能を分けています。位置情報やセンサーを扱う機能がある場合も、サイト全体が常時データを必要とするという意味にはしません。
公開中のアプリを確認する攻撃面を減らすことと、絶対安全は違う
不要なサーバー処理、外部通信、権限、依存関係を置かないことは、攻撃面と運用上の確認箇所を減らします。一方で、ブラウザ、配信基盤、設定、残したコードに問題が起きないことを保証するものではありません。静的構成であることを、完全な安全性の証明として扱わないことが重要です。
利用者ごとのアカウント、複数端末で共有するデータ、サーバー側の権限判定、第三者から受け取る入力、常に更新される共有状態が機能の中心なら、バックエンドが必要です。その場合は、認証、保存期間、削除、監視、更新、障害対応という追加の運用責任を含めて設計します。機能の目的に必要な複雑さは隠さず、ローカル処理だけで代用できるようには見せません。
小ささを、検証できる契約にする
「使っていないつもり」だけでは、公開後の変更で境界が崩れても気づけません。YNT Works rootでは、次の項目をリポジトリの検証対象にしています。
- 公開対象が所定のディレクトリ内に限られていること
- 外部スクリプト、外部画像、外部フォント、フォームがないこと
- Cookie、Storage、追跡、広告runtimeの実装がないこと
- Content Security Policyが不要な通信や埋め込みを許可していないこと
- canonical、sitemap、404、内部リンクが同じ公開URLを示すこと
- プライバシー説明が実際のruntimeと一致していること
制限は機能を減らすためだけに置くのではありません。変更点を小さくし、レビューと復旧をしやすくし、説明と実装のずれを見つけるために置きます。
配信事業者の処理まで消えるわけではない
サイト独自の収集を置かなくても、配信に必要な接続情報やセキュリティログをホスティング事業者が扱う場合があります。また、リンク先のアプリにはrootと異なる機能があります。
そのため「何も処理されない」とは説明せず、サイト自身のruntime、配信の境界、リンク先の境界を分けて案内します。実装が変わったときは、検証だけでなく説明も同時に更新します。
現在のプライバシー境界を確認する