Webアプリケーションの画面遷移

通常、Webアプリケーションでは、画面を遷移する場合、サーバから次画面のHTMLを全てロードし、表示します。

この方法では、次画面を表示するための情報が既に存在するような場合でも、サーバへのアクセスが必須となり、ユーザビリティの低下を招きます。

特に、一覧表示←→詳細表示のように、相互の画面を行き来するような場合で、一覧に表示している内容が、非常に件数の多い時や、複雑な検索処理の結果である時は、サーバ側でのキャッシュを活用しなければ、とても使い物にならないアプリケーションを、顧客に提供することになります（こうなってからの性能向上といったら・・・）。

この問題を解決するには、Webアプリケーションのクライアントが、全ての一覧情報を保持し、詳細画面への画面遷移とデータ引き渡しを行うようにします。Javaアプレットを使えば、解決するのですが、この場合もっと多くの問題が発生する可能性があります(Javaのバージョンの問題や、起動時のパフォーマンス。そもそもアプレットを作成するお金や期間の問題など等・・・しつこい？Javaは別に嫌いじゃない、というより得意分野だけど、クライアントで使うのはいろいろ苦労が（笑）)。

一番スマートな解決策は、嬉しいことに現在のWebブラウザの実装レベルで実現できます。一つのHTMLドキュメントに複数画面（必要最低限の数）分記述し、これをDOMにより表示を切り替えるようにします。

切替のタイミングで、たとえば一覧中のデータ項目を、詳細画面の項目にコピーしてやれば良いわけです。詳細画面で内容を変更できるような場合は、変更してサーバへ登録（現在の画面を書き換えないでサーバにアクセスする方法は、Webアプリケーションのサーバ通信を参照してください）したら、詳細に表示中のデータを一覧画面にコピーし直します。

但し、一覧画面には再表示機能（またはこれに類する機能）を、必ず付けましょう。どこかの誰かが、表示中のデータを他のクライアントから書き換えている可能性が、必ず存在するからです。

実現方法は至って簡単です。以下のようなHTMLとスクリプトがあれば、完成です。

画面を切り替えるスクリプト

var currentIndex;
var listTitle = '登録者一覧';

function init() {
    document.getElementById('detail').style.display = 'none';
    document.title = listTitle;
}

function toDetail(index) {
    currentIndex = index;
    document.getElementById('name').value =
        document.getElementById('name_'+index).value;
    document.getElementById('yomi').value =
        document.getElementById('yomi_'+index).value;
    document.getElementById('seibetu').value =
        document.getElementById('seibetu_'+index).value;
    document.getElementById('job').value =
        document.getElementById('job_'+index).value;
    document.getElementById('hobby').value =
        document.getElementById('hobby_'+index).value;
    document.getElementById('list').style.display = 'none';
    document.getElementById('detail').style.display = '';
    document.title = document.getElementById('name').value;
}

function toList() {
    document.getElementById('name_'+currentIndex).value =
        document.getElementById('name').value;
    document.getElementById('yomi_'+currentIndex).value =
        document.getElementById('yomi').value;
    document.getElementById('seibetu_'+currentIndex).value =
        document.getElementById('seibetu').value;
    document.getElementById('job_'+currentIndex).value =
        document.getElementById('job').value;
    document.getElementById('hobby_'+currentIndex).value =
        document.getElementById('hobby').value;
    document.getElementById('detail').style.display = 'none';
    document.getElementById('list').style.display = '';
    document.title = listTitle;
}

アプリケーション画面のHTML

<html>
  <head>
    <title>登録者一覧</title>
    <script type="text/javascript" src="listtodetail.js"></script>
  </head>
  <body onLoad="init()">
    <div id="list">
      <table border="1">
        <tr>
          <th></th>
          <th>名前</th>
          <th>読み</th>
          <th>性別</th>
        </tr>
        <tr id="line_1">
          <td><button onClick="toDetald(1)">詳細</button></td>
          <td><input id="name_1" type="text" value="廣井手香奈" /></td>
          <td><input id="yomi_1" type="text" value="ひろいでかな" /></td>
          <td><input id="seibetu_1" type="text" value="女" />
            <input id="job_1" type="hidden" value="デザイナ" />
            <input id="hobby_1" type="hidden" value="ペン画" /></td>
        </tr>
        <tr id="line_2">
          <td><button onClick="toDetald(2)">詳細</button></td>
          <td><input id="name_2" type="text" value="深山明" /></td>
          <td><input id="yomi_2" type="text" value="みやまあきら" /></td>
          <td><input id="seibetu_2" type="text" value="男" />
            <input id="job_2" type="hidden" value="プログラマ" />
            <input id="hobby_2" type="hidden" value="鉄道模型" /></td>
        </tr>
        <tr id="line_3">
          <td><button onClick="toDetald(3)">詳細</button></td>
          <td><input id="name_3" type="text" value="科元みか" /></td>
          <td><input id="yomi_3" type="text" value="しなもとみか" /></td>
          <td><input id="seibetu_3" type="text" value="女" />
            <input id="job_3" type="hidden" value="陶芸家" />
            <input id="hobby_3" type="hidden" value="バス釣り" /></td>
        </tr>
      </table>
    </div>
    <div id="detail">
      <table>
        <tr>
          <th>名前</th><td><input id="name" type="text" value="" /></td>
        </th>
        <tr>
          <th>読み</th><td><input id="yomi" type="text" value="" /></td>
        </th>
        <tr>
          <th>性別</th><td><input id="seibetu" type="text" value="" /></td>
        </th>
        <tr>
          <th>仕事</th><td><input id="job" type="text" value="" /></td>
        </th>
        <tr>
          <th>趣味</th><td><input id="hobby" type="text" value="" /></td>
        </th>
        <tr><td><button onClick="toList()">一覧</button></td></tr>
      </table>
    </div>
  </body>
</html>

要は、一覧画面をidがlistのdiv要素で、詳細画面をidがdetailのdiv要素でそれぞれ囲み、画面を切り替えるスクリプトの中で、片方を非表示にしてもう片方を表示させているだけです。

DOMによるスタイルシートの変更は、あくまで該当要素のインラインスタイルを変更しているので、ベースとなるHTML上ではインラインスタイルの使用は、できるだけさけた方が無難でしょう。

上記のスクリプトでは、画面の切替時に画面のタイトルも変更しています。このような、ドキュメントの属性変更は、DOMを利用すれば簡単にできます。

上のサンプルの実装です。効果のほどを確認してください。

※一部Webブラウザでは、上記サンプルの動作が不安定で、不要な罫線が残ったりします。Webブラウザのバグによるものですので、いかんともしがたいのですが、ウィンドウのサイズを変更すると、正しく表示されるようです。

	名前	読み	性別

名前
読み
性別
仕事
趣味