今時の画面遷移って

JSPを使ったWebアプリケーションを作る場合、HTML+CSSで画面を作って、それをJSPに変換しなければいけません（ASPやPHPも同様です）。

そもそも、HTML+CSS（最近では+SVGとか）という、史上最強と言っても過言ではないデザインツールがあり、それを自由に操作できるDOM（等の）APIが揃っているのに、なぜJSPのようなHTMLとJava（や、その他もろもろ）の混合物を作らなければいけないのでしょうか。

Webブラウザとサーバ間の通信に、XMLHttpRequestが当たり前に使える昨今の状況では、Webアプリケーションの画面遷移に関する考え方にも変化があって当然です。

考え方其の壱

複数のページを1つのHTMLで記述し、イベントによりその一部だけを表示することで、画面が遷移しているように見せます。

この考え方では、全てのページが1つのHTMLにまとめられるため、スクリプトやデータも一括管理できるというメリットがありますが、画面のレイアウト変更や遷移順の変更を行うためには、大きな修正を必要とする可能性があります。

考え方其の弐

各々の画面は、画面個別のスクリプトやスタイル指定も含めて、それぞれ1つのHTMLで記述し、独立した形で完成させます。

全体を管理するページを用意し、そこに必要なページ数分のIFRAME要素を用意（または動的に作成）し、各ページのHTMLをロードします。

どのイベントで、どのページ（IFRAME）を表示するかを定義で指定できるようにすれば、使えるものになるでしょう。

「考え方其の弐」の考え方に沿って作成したのが、最初にお見せしたサンプルです。

もう少し詳細な考え方とサンプル

ここでは、ある程度実用性も考慮したサンプルプログラムを例に考えます。記述されている仕様は、サンプルプログラムの仕様となります。

全てのIFRAMEにはユニークな名前を付け、これを元に処理を行います。この名前は、定義に設定するものとします。画面IDと紐付くような体系とすると良いでしょう。

特定の名前のIFRAMEには管理ページを読み込みます。管理ページには、ページの読み込みやページの遷移を司る機能を実装し、各ページからはこのページの関数を呼び出すことで、各機能を実行するものとします。

また、全ての画面から共有できる値を管理する機能も提供します。

コントロールページは、各画面のロード完了を検知した時点で、下記関数を各画面のdocumentに設定します。

項番	関数名	機能
1	`getControlPage`	コントロールページを返します。コントロールページに実装された機能（関数）を呼び出す場合は、以下のようになります。 getControlPage().xxxxx();
2	`transitionScreen`	指定画面にページを遷移します。 transitionScreen(NAME); NAMEは、`IFRAME`に指定したユニークな名前です。
3	`getSharedValue`	全ての画面で共有するデータから、KEYに該当する内容を取得します。 getSharedValue(KEY);
4	`setSharedValue`	全ての画面で共有するデータのKEYに、VALUEの内容を設定します。 setSharedValue(KEY, VALUE);
5	`clearSharedValues`	全ての画面で共有するデータを、定義の内容に従って初期値にクリアします。 clearSharedValues();

画面を遷移するいじょう、遷移する前に何らかのチェック処理が必要となることは、明らかです。また、画面が表示される前に、何らかの初期処理も必要となります。

そこで、transitionScreenを呼び出した時点で各ページのHTML内に下記の関数が定義されていた場合、特定のタイミングで呼び出すようにします。

項番	関数名	呼び出しタイミング	備考
1	`loadSuccess`	全てのページの読み込みが成功した直後に呼び出されます。	この関数の呼び出しは、`onload`イベントよりも遅くなります。画面固有の初期化処理は、`onload`イベント等で行なってください。この関数が呼ばれたタイミングでは、まだ他の画面のこの関数が呼ばれた保証はありません。この関数の中で何らかの初期化処理を行なっている場合は、この関数の中で他の画面へアクセスをしないでください。
2	`pageCloseBefore`	当該ページが閉じられる直前に呼び出されます。	この関数が名前を返した場合、その名前に該当する画面に遷移します。何も返さなかった場合は、`transitionScreen`の引数に該当する画面に遷移します。例外をスローした場合、ページの遷移はキャンセルされます。入力チェック等で使用することを想定しています。
3	`pageCloseAfter`	当該ページが閉じられた直後に呼び出されます。	入力内容のクリア等に使用することを想定しています。
4	`pageOpenBefore`	当該ページが開かれる直前に呼び出されます。	この関数が例外をスローした場合、ページの遷移はキャンセルされます。画面で初期表示する内容を設定することを想定しています。
5	`pageOpenAfter`	当該ページが開かれた直後に呼び出されます。
6	`setErrorMessage`	pageCloseBefore関数が例外を投げた時に、例外のメッセージを引き数に呼び出されます。	入力チェックエラーのメッセージを、画面に表示する場合に使用します。

画面Aから画面Bへの画面遷移では、以下の順に呼び出されます。

画面Aの`pageCloseBefore`
↓
画面Bの`pageOpenBefore`
↓
画面Aを非表示とし、画面Bを表示する
↓
画面Aの`pageCloseAfter`
↓
画面Bの`pageOpenAfter`

ここまでの考え方を取り入れたサンプルです。9画面で以下のように画面遷移します。四角の中が画面IDになります。

SID0001
↓	（次へ）
SID0002
↓	（次へ）	↑	（戻る）
SID0003
↓	（次へ）	↑	（戻る）
SID0004
↓	（次へ）	↑	（戻る）
SID0005
｜	（次へ）	↑		↓	（その他）	↑	（戻る）
｜		｜		SID0006
↓		｜	（戻る）	↓	（次へ）
SID0007
↓	（次へ）	↑	（戻る）
SID0008
↓	（次へ）	↑	（戻る）
SID0009
↓	（次へ）
SID0001

各画面の左上に画面IDが表示されます。SID0005・SID0006・SID0007・SID0008はイレギュラな遷移となています。また、SID0008には、各編集画面へジャンプするボタンも用意されています。

入力や選択を行う画面では、入力や選択が必須となっているので、何かを入力または選択してください。

あくまでもサンプルなので、実用に耐えるようなレベルのものではありません。画面に表示する内容と、画面間の共有データとして保持する内容がリンクされていないので、終了画面から先頭画面に移動したあと、以前に入力した内容が残ってしまいます。

このサンプルの全てのコードは、ここからダウンロードしてください。

アーカイブを解凍してできるディレクトリの、load.htmlをWebブラウザで開いてください。但し、Google Chromeでローカルファイルからロードした場合、（セキュリティ上の制限のため）正しく動作しません。Google Chromeで実行する場合は、Webサーバを使用してください。

動的な画面遷移の変更

柔軟性を誇示するために（笑）、動的な画面遷移のサンプルを用意しました。

下の表の遷移先を変更すると、その内容に合わせて画面が遷移します。

このサンプルの全てのコードは、上のサンプルと同じアーカイブに格納されています。

アーカイブを解凍してできるディレクトリの、load2.htmlをWebブラウザで開いてください。

オーバーラップ

一般的なHTMLを使用した画面遷移では、なかなか難しいオーバラップですが、このタイプの画面遷移では可能です。

簡単なオーバラップのサンプルです。あまり気の利いたものはありませんが、とりあえずサンプルということで。

このサンプルの全てのコードは、上のサンプルと同じアーカイブに格納されています。

アーカイブを解凍してできるディレクトリの、load3.htmlをWebブラウザで開いてください。