到達と遷移
ある条件で URL を開いたとき、どの画面に着地し応答が何になるかを、1 遷移 = 1 本の線で示したものです。
図
見どころ
URL を持つ 67 の画面(転送だけのページを除く)を、2 つのドメインと 8 つのルートグループ(認証レベルの区画)に分けて並べています。
図で見る画面ごとに「誰が開けるか」「どう描画されるか」「検索エンジンに載せるか」を付け、公開範囲の設計を読めるようにしています。
図で見る未認証で開ける画面は 16 あり、検索エンジンに載せるのはそのうち 4 つだけと、2 つの判断を分けています。
図で見る開けないときの断り方(リダイレクト・404・503・200 のまま表示)が層ごとに違うことを遷移の線で示します。
セッションが切れたときは専用の経路を 1 回挟んで Cookie を直してからサインインへ戻し、戻り先でループしません。
ページ
- 1全ページ構成
URL を持つ画面の全量を、ドメインとルートグループで区切り、アクセス・描画方式・検索エンジンへの掲載の区分を付けたものです。
- 2到達と遷移
ある条件で URL を開いたとき、どの画面に着地し応答が何になるかを、1 遷移 = 1 本の線で示したものです。
あわせて読む図
- セキュリティ・認可アーキテクチャ図
着地先を決める認可の仕組みの側の図です。
- 設計ルール図
ルートグループの規約を、フロントエンドの設計ルールとして示す図です。
ダウンロード
- draw.io の原本(全ページ)0.6 MB
- PNG(このページ)0.5 MB
- SVG(このページ)0.4 MB
操作方法
- マウス
ドラッグで移動できます。Ctrl(Mac は ⌘)を押しながらのホイールと、トラックパッドのピンチで拡大・縮小できます。図をクリックした後は、ホイール(トラックパッドは指 2 本)で拡大した図を動かせます。
ダブルクリックでその位置を原寸にし、原寸以上ではさらに拡大します。
- タッチ
指 2 本でピンチと移動ができます。指 1 本は画面のスクロールです。
全画面にすると、指 1 本で移動できます。
- キーボード
- ←↑→↓移動(Shift で大きく)
- +-拡大・縮小
- 0全体表示
- 1原寸
- F全画面
- PageUpPageDown前後のページ
- ?操作方法
- Esc全画面を閉じる(全画面でないときは操作を終える)