【Web開発】「子画面」について

子画面には2種類あります。

• モーダル
• モードレス

モーダル

子画面が開いてる間は子画面しか操作ができないことです。子画面の操作が終わったら親画面に戻ります。

メリット

ユーザーの操作を決まったものに制限できる。（複雑なセッション管理が必要ない）

デメリット

親画面を「見れない触れない」点

用途

• 郵便番号から住所を入力させる等の入力補助用途で使う場合
• 一覧画面から1件選んで詳細業務をさせたい場合

レガシーな実装

showModalDialog(JavaScript)

各ブラウザでサポートされなくなっています。

モダンな実装

ウインドウを新しく開くのではなくJavaScriptで疑似的にモーダル子画面を表示する。

というか近年はReactやVueなどのフレームワークなどを使うことが当たり前になっていてMaterialUIなどのCSSフレームワークなども交えてそのモーダル機構を使うということが一般的になってきています。（なので開発者はそれほど意識する必要はないかもです。）

モードレス

子画面が開いている間も親画面を操作できることです。近年はスマホやタブレット等小さな画面で操作することが多くなっているのであまりこちらの方式は採用されなくなってきています。

メリット

親画面も見れたり触れたり、位置調整して子画面と親画面を並べることもできる。

デメリット

複数画面でセッションが共有されてしまうのでセッションの管理をしっかりする必要がある。

セッションの管理の対策

• 同じセッションを共有する画面を複数起動できないようにする。（セッションが上書きされないようにする。）
• そもそも複数画面で別々のセッション項目で実装するようにする。
• hidden方式を採用する。

hidden方式を使う

セッションを使わずに画面のhidden要素に値を持たせて別画面に値を渡す方式です。

メリット

セッションを使わないのでセッション管理をしっかり考得なくてはならないモードレス形式の子画面を楽に実装できる。

デメリット

画面で使わない項目を画面のformに持たせることになるので画面実装や通信量が肥大化してしまう。（ちなみにこの問題はうまく部品化することで解消することが可能。）

複数画面を起動できないようにする対策

子画面起動時に「WindowId」を指定させるようにして後から指定した画面のみが起動されるようにする。

複数画面で別々のセッションを持たせるようにする対策

画面ごとにセッション情報を分けます。その際はサーバのメモリ使用量が増えることになるので気をつけます。