１１．地図操作画面

初めに

 地図操作画面は、 Web Form プログラムで作成したものを MVC でもほぼ流用して利用しています。そのため、そのクラスの拡張子は aspx となります。
 地図操作画面には、次の４つがあります。

• 緯度経度指定画面
  地図を表示し、任意の位置でマウスクリックすることで、その位置の緯度経度を指定することができます
• エリア指定画面
  地図を表示し、三回以上のマウスクリックにより、閉多角形－これを、エリアと呼びます－を指定することができます
• マーカ表示画面
  地図上にフィールドワークデータの緯度経度にマーカを表示する、表示専用の画面です
  マーカは大分類で決まる色ごとのマーカになります
  マーカをクリックすると、詳細説明とイメージファイルを個別に確認できるダイアログが表示されます
• 路線表示画面
  地図上に、出発地点から目標地点までの路線図を表示する、表示専用の画面です

 上記の地図操作画面が機能するために、 Web サービスを１つ利用しています。その Web サービスである汎用ハンドラの説明から始めます。

汎用ハンドラ

 汎用ハンドラがなぜ必要なのかを議論しましょう。次のような操作手順を考えてください。

• 緯度経度が必要な画面－親画面－があります（下記画面１）
• 親画面の「Map」ボタンで、緯度経度指定画面－子画面－を表示します
• 子画面で、マウスクリックにより緯度経度を指定します（下記画面２）
• 子画面で、　OK　ボタンのクリックにより緯度経度を確定します
• 子画面で確定した緯度経度が、親画面に反映されます（下記画面３）

 子画面で、 OK ボタンがクリックされたとき、以下のような処理を行ったとしても、上記の処理手順を満たすことができます。

					
1     <script>
2         $(function () {
3             $('#mapOkButton').click(function () {
4                 if (親画面が表示されているか)
5                 {
6                     親画面の緯度の項目 = 子画面の緯度の項目値;
7                     親画面の経度の項目 = 子画面の経度の項目値;
8                 }

9                 子画面を閉じる;

10                return true;
11            });
12        });
13    </script>
					

 ここで問題です。

					
      この状態で、親画面の「Map」ボタンをクリックしたとき、子画面はどうなっているべきか？
					
					

 親画面には、すでに緯度経度の値が表示されています。そこで、子画面が表示されたときには親画面の緯度経度が示す位置にマーカが表示されている 状態から始まるのが望ましい動きになります。
 その動きを実現するためには、上記の処理ではできません。なぜなら、親画面の緯度経度の値はブラウザに表示されているだけです。 Web サーバでは今どのような 値がブラウザに表示されているかは分からないからです。そこで、次のような処理にする必要があります。

					
1     <script>
2         $(function () {
3             $('#mapOkButton').click(function () {
4                 子画面の緯度経度を Web サーバに送信する;

5                 if (親画面が表示されているか)
6                 {
7                     親画面の緯度の項目 = 子画面の緯度の項目値;
8                     親画面の経度の項目 = 子画面の経度の項目値;
9                 }

10                子画面を閉じる;

11                return true;
12            });
13        });
14    </script>
					
					

 子画面で入力した緯度経度の値を Web サーバに送るために、４行目の処理が必要になります。 Web サーバでは送られてきた緯度経度の値を受信し、 最後に受信したその値を利用者ごとに記憶しておく必要があります。
 この Web サーバの処理を Web サービス－汎用ハンドラ－として用意しました。値を記憶するにはセッション変数を利用しています。
 この汎用ハンドラは SessionHandler のクラス名で作成しました。そのプログラムを以下に示します。豊富なコメントが付いていますから、理解は容易と思います。

					
1     /// <summary>
2     /// 起動時の POST パラメータでセッション変数を更新するハンドラである
3     /// 起動方法は、以下の形式である
4     /// SessionHandler.ashx?key1=keyValue1&value1=valueValue1&…
5     /// ここで、keyN と valueN はペアであり、どちらも英小文字、番号は１からの連番であること
6     /// keyN valueN どちらかが存在しない時点で処理を終了する
7     /// セッションの更新は、以下のどちらかとなる
8     /// 直接更新法
9     /// 　　キー keyN の値 keyValueN は必ず、「d_」（ダイレクトの意味）で始まる文字列であること
10    /// 　　この場合、以下の方法で更新する
11    /// 　　　　session[keyValueN.Substring(2)] = valueValueN
12    /// 　　例：
13    /// 　　    SessionHandler.ashx?key1=d_ID&value1=123456   // の場合
14    /// 　　    sessin["ID"] = "123456";                      // と更新する（キーから d_ を除く）
15    /// 間接更新法
16    /// 　　キー keyN の値 keyValueN が「d_」で始まらないこと
17    /// 　　この場合、以下の方法で更新する
18    /// 　　　　session[keyValueN] = Request.Params[valueValueN]
19    /// 　　例：
20    /// 　　　　SessionHandler.ashx?key1=ID&value1=inputID    // の場合で、以下のタグが POST にあった場合
21    /// 　　　　<input id="inputID" value="123456" />
22    /// 　　　　sessin["ID"] = "123456";                      // と更新する
23    /// 　　
24    /// ２つの方法の使い分け方
25    /// 　　GET パラメータとして引き渡すのに十分短い場合は、どちらの方法でもよい
26    /// 　　パラメータが長くて、POST として引き渡す必要がある場合に、間接更新法を使用する
27    /// 　　この場合、valueValueN は POST で渡される、例えば <input> タグの id 属性値を意味する
28    /// </summary>
29    public class SessionHandler : IHttpHandler, IRequiresSessionState
30    {
31        public void ProcessRequest(HttpContext context)
32        {
33            string key, value, val;
34            for (int i = 1; ; ++i)
35            {
36                key = context.Request.Params["key" + i];
37                value = context.Request.Params["value" + i];

38                if (key == null || value == null)
39                    break;

40                if (key.StartsWith("d_"))
41                {
42                    key = key.Substring(2);
43                    val = value;
44                }
45                else
46                {
47                    val = context.Request.Params[value];
48                    if (val == null)
49                        break;
50                }

51                context.Session[key] = val;
52            }

53            context.Response.ContentType = "text/plain";
54            context.Response.Write("OK");
55        }

56        public bool IsReusable
57        {
58            get
59            {
60                return false;
61            }
62        }
63    }
					

 ２９行目： IRequiresSessionState インターフェースを継承しないと、セッションの共有ができませんので注意が必要です

 ソースをご覧いただけはお分かりのように、このハンドラは常に成功して　"OK" の文字列を返します。書式の不正を検査する必要があるようでしたら、 その結果に応じたステータスコードを返す必要があります。
 ブラウザからは Ajax を使用して Web サーバと通信しています。

 ここでは、緯度経度指定画面に限定して汎用ハンドラが必要なことを説明しました。実は、４つの地図画面すべてで使用していることがあります。  Google MAP API を使用して地図を表示するためには、地図を表示するエリアとして <div> タグを用意する必要があります。 そして、そのタグの表示幅と高さを指定する必要があります。表示幅は利用可能な幅100%で利用していますが、幅と高さの両方を相対値にはできないので、高さは絶対値を指定する必要があります。 そこで困ったのが、ブラウザの表示高は使用しているモニタ機器の解像度によりさまざまなため、固定値を使用することができないということです。
 そこで、一番最初に画面を表示したときに、使用している機器のモニタの解像度を Web サーバに送信することにしました。地図操作画面では ブラウザをフルスクリーン表示したときに、地図が目いっぱい表示されるように、かつ余計なスクロールバーが付かないように工夫してあります。

 ブラウザから表示機器の解像度を Web サーバに送信する Ajax プログラムを示します。参考にしてください。

					
1     <script>
2         function initializeCheck() {
3             var url = "/Fieldwork/Ajax/SessionHandler.ashx?key1=d_ScreenHeight&value1=" + screen.availHeight;
4             url = url + "&key2=d_OuterHeight&value2=" + window.outerHeight;
5             url = url + "&key3=d_InnerHeight&value3=" + window.innerHeight;

6             var request = $.ajax({
7                 type: "POST",
8                 url: url,
9             });
10        }
11    </script>
					
					

 ３行目：モニタの物理的な解像度です
 ４行目：ブラウザのウインドウの高さの解像度です
 ５行目：ブラウザのウインドウのメニューなどを含まない高さの解像度です
 ６～９行目： Ajax 送信の本体です

緯度経度指定画面

緯度経度指定画面

 初期状態の画面（下記画面４）とマウスをクリックした後の画面（下記画面５）を示します。（画像をクリックすると、拡大表示します）

エリア指定画面

 画面要素とコード要素は、緯度経度指定画面と同様の内容ですから省略します。

エリア指定画面

 初期状態の画面（下記画面６）、エリアの定義を開始した後の画面（下記画面７）、エリア入力の途中の画面（下記画面８）、 エリア定義の完了後の画面（下記画面９）を示します。（画像をクリックすると、拡大表示します）

マーカ表示画面

 画面要素とコード要素は、緯度経度指定画面と同様の内容ですから省略します。

マーカ表示画面

 初期状態の画面（下記画面１０）とマーカをクリックした後の画面（下記画面１１）を示します。（画像をクリックすると、拡大表示します）

路線表示画面

 画面要素とコード要素は、緯度経度指定画面と同様の内容ですから省略します。

路線表示画面

 路線表示画面を示します。（画像をクリックすると、拡大表示します）