フレッシュマン企画連載
初めてでも安心！ 1日で作れるWebアプリ講座

最終回 それでもやっぱり「プログラミングは楽しい！」

では、今度はイベントの設計です。イベントの設計は.aspx.csファイルでしたね。hirumeshi3.aspx.csファイルを開いてください。Page_Loadイベント・ハンドラは第2回とほぼ同内容ですので、内容の説明は省きます。復習しながら記述してください。

Page_Loadイベント・ハンドラに記述する内容

コードのテキストはこちらからコピーできます。 「//」で始まる行はプログラムとして実行されないコメント文ですので入力しなくても構いません。

さて、今回はテキストボックスに入力した住所から、お店を検索します。そのために利用するのがGeocoding（ジオコーディング）です。

• Geocoding（利用上の注意）

　Geocodingは住所や駅名などの文字列から緯度／経度を検索してくれるWebサービスです。ぐるなびWebサービスと同様に、XMLデータの取得のリクエストはURLで行います。

　例えば「http://www.geocoding.jp/api/?v=1.1&q=二子玉川」のようなURLを準備すればよいのですが、このURL例を見ると「二子玉川」という部分が日本語の全角の文字になっています。しかしインターネット上のURLに、このような全角文字や、空白文字（＝スペース）、一部の記号（「$」「#」など）を含んでいると、正しく処理されない可能性があります。

　そのため、全角、空白、記号などをURLで利用できる文字に変換する必要があります。この変換を「URLエンコード」と呼びます。URLエンコードを行うには「HttpUtility.UrlEncode(文字列)」というものを使います。使い方の説明は割愛しますが、実際にこれを使ってURLエンコードを行った結果は次のとおりです。

　緯度／経度情報を取得するコードを記述する前に、「コード記述の方法」と「クラスとインスタンス」について勉強しておきましょう。これらを知ると、今回のコード内容がもっとよく理解できるようになりますよ。

だんだんと1つのファイル内のコードが長くなってきましたが、これからさらにコードを追加していけばファイル内全体の見通しがどんどん悪くなっていきますよね？ こういう場合には、ひと固まりにしたいコードを、リージョン（region。コードの1領域）として指定すると便利です。一部分のコードにリージョンを指定すると、次のように折りたたんでコード全体を見やすくすることができます。

リージョンを折りたたんだ状態

　折りたたまれた状態で左の［+］マークをクリックすると、次のように展開されます。

リージョンを展開した状態

　リージョンを指定するには、上の図のように、ひとまとまりのコードを「#region」と「#endregion」で挟むだけです。「#region」の後には、半角スペースを空けて、そのひとまとまりのコードの処理内容を簡潔に書きましょう。

続いて、クラスとインスタンスを説明します。

　クラスは「設計図だ」とよく例えられます。が、ここではもっと身近なもので説明してみます。

　クラス……といって思い付くのは学校の「クラス（組）」でしょう。その組が何で成り立っているか分解すると、メンバーや、決まり事（プロパティ）などの要素が挙げられます。例えばこんな感じでしょう。

　このような構成を考え出す作業が、プログラミングにおける「クラスの作成」です。先ほどの「クラス（組）」をコードで表すと、次のようになります。

　「KUMI」（クラス）の内部には、さまざまな要素（変数）があります。つまり、クラスとは変数の集まりなんですね。

　これで、クラスが作成できました。だけどよく見ると、「先生」や「生徒」という肩書き／役割はありますが、それが一体誰なのか決まっていません。何組になるかも未定という状態です。枠があるだけで、そこには何も存在していないのです。

　そこで次に、クラスを実際に存在させましょう。これを「インスタンス化（実体化）」するといいます。春に向けて、A組・B組・C組を発足させることが決まりました。

　これをコードに表すと下記のようになります。

KUMI A_kumi = new KUMI();

　ポイントは、「組（クラス）の構成」を示す“KUMI”が、ここでは「変数の型」となっているところです。「new KUMI()」の部分は、まさに「新しく、A組が発足！」という意味です。

　次にA組の構成要素を決めていきます。VWD 2008で「KUMI.」まで入力すると、入力候補に先ほど設定した要素が出てきますよ。ここが作成したクラスを実感できる瞬間ですね。ここで例えば次のように入力していきます。

KUMI.homeroom_teacher = "マツノ先生";
KUMI.assistant_teacher = "イシヤマ先生";
KUMI.student_1 = "タナカさん";
KUMI.student_2 = "コンドウさん";
KUMI.symbol_color = "RED";
KUMI.numbers = 25;

これでA組の完成です。

　同じように、B組・C組もKUMIクラスを使って作成することができます。

　少し難しかったかもしれませんが、何度か使うと理解できると思います。では、緯度／経度情報を取得する説明をしていきましょう。

緯度／経度情報を取得する部分はPage_Loadイベント・ハンドラとButton1_Clickイベント・ハンドラの外に、独立して記述してみます。こうすることで、Page_Loadイベント・ハンドラからでもButton1_Clickイベント・ハンドラからでも使うことができるようになります（つまり、使い回しができるんです！）。とはいっても、今回はButton1_Clickイベント・ハンドラ内でしか使用しませんが……、「このようなこともできる」と学ぶために作成してみましょう。

　ではこれから学んだばかりのクラスを使ってみますよ。Geocodingによる緯度／経度用クラスは、最初にダウンロードしたhirumeshi3.aspx.csファイルの中にあらかじめ用意しました。「GeoResult」クラスです。「GEOコーディング用クラス」というリージョンの中にあります。GeoResultクラスを見てください。住所／緯度（lat）／経度（lng）という構成要素で成り立っていることを理解できますか？

　Geocoding（緯度／経度情報）の値を取得するメソッドを記述してみましょう。メソッドとは、一連の処理をひとまとめにしたもののことです。GeoResultクラスの下に下記の記述をしてください。

Geocoding（緯度／経度情報）の値を取得する内容

コードのテキストはこちらからコピーできます。 各番号については以下で説明します。

メソッド名（パラメータ）となります。カッコ中は、このメソッドを使用するときに、パラメータである「address」を用意する必要があることを示しています。

GeoResultクラスをインスタンス化（＝実在化）します。名前は「result」となりました。

緯度／経度情報を取得するためのURLを準備します。URLには、URLエンコーディングした文字列も含まれているのが分かりますね。

取得したデータセットの項目とresult内の項目（＝緯度／経度情報）を結び付けます。

これで、GetCodingというメソッドが誕生しました。今回は、GeoResultクラスと同様に、Page_Loadイベント・ハンドラやButton1_Clickイベント・ハンドラの外に緯度／経度情報を取得するメソッドを記述しましたが、外に書くと何ができるのでしたっけ？