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

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

適当な行に入力カーソルを移動して、メニュー・バーから［デバッグ］−［ブレークポイントの設定/解除］を選択します。そうすると、該当行の左端に赤い●が表示されます。これがブレークポイントです。ブレークポイントを設定したい行の左端を直接クリックすることでもブレークポイントは設定できます。●をクリックすると、ブレークポイントは解除されます。

ブレークポイントを設定したところ

　ではさっそくデバッグを実行してみましょう。デバッグを実行すると、ブレークポイントのところで、処理がいったん止まります。そこからは［F10］を押して、1行ずつ確認しながら進めましょう。黄色くなっているところがいまの位置ですね。変数に値を入れている行を通過したところで、マウス・カーソルを変数のところに合わせてみましょう。

デバッグ中に変数の中身を見る

　すると、上の画面のように、「いま、その変数にどんな値が入っているか？」が表示されます。

　地味な作業ですが、このようにデバッグを進めていくと、入っていてほしい値が入っていないことに気が付いたり、自分が思っている順番で処理が行われなかったりすることに気が付くのです。複雑なプログラムになるほど、この作業はとっても大切なのです。

デバッグで正しく実行されているかを確認したところで、初めの方でシグマクンから質問された「（GridViewコントロールで）［データ フィールド］に入力した列名って、一体どこから来てるの？」について確認しましょう。先に触れた「データセットの中身を見る方法」というのもここで説明します。

　事前に説明したように、ぐるなびから取得したXMLデータには、複数のテーブル・データが含まれています。まずは、取得したデータセット（＝XMLデータ）の中にある複数のテーブル・データの内容を実際に目で確認してみましょう。

　下の画面のように、「DataSet dsResult = new DataSet();」の行にブレークポイントを設定して、デバッグを開始してください。ブレークポイントでデバッグが止まった状態で「dsResult」の部分にマウス・カーソルを合わせ、表示される虫メガネのマークをクリックしてみてください。別ウィンドウが立ち上がります。上部のドロップダウンリストの中身を表示してみると、たくさんのテーブル名が表示されます。このように複数のテーブル・データがあるのが確認できますね。

虫めがねマークをクリックする

ぐるなびから取得したXMLデータがセットされているデータセットの中身

　繰り返しになりますが、複数のテーブル・データがあると、GridViewコントロールのデータソースとして指定することができません。1つのテーブル・データに必要な情報をまとめる必要があります。その処理を行っているのが「Button1_Clickイベント・ハンドラに記述する内容（2）」にある「setResultDataFromDataSet(DataSet dsResult)」メソッドです。先ほども紹介しましたが、これはあらかじめhirumeshi3.aspx.csファイル内に用意しておいたメソッドです。setResultDataFromDataSetメソッドは、パラメータに指定されたdsResult（データセット＝複数のデータ・テーブルを含むXMLデータ）から、必要な項目のみを抽出して単一のテーブル・データのみのdtResult（データテーブル）を作成します。

　止まっているブレークポイントから［F10］キーを1回ずつ押しながら「Button1_Clickイベント・ハンドラに記述する内容（2）」の「dtResult = setResultDataFromDataSet(dsResult);」の行まで進めてみてください。この行を通過した瞬間が、dtResult（データテーブル）に単一のテーブル・データが格納された瞬間です。

　ここで先ほどのdsResultと同じように虫メガネをクリックして、dtResult（データテーブル）の中身を見てみてください。1つのデータテーブルにデータが集約されているのが確認できましたか？

必要項目だけを合わせて作ったdtResult（データテーブル）の中身

　この表の上部にある、列名はGridViewコントロールの［データ フィールド］として指定したものと一致しています。

ではこの状態で一度デバッグをしてみましょう。思ったとおりの見栄えになっているでしょうか？

うーん。ちょっと写真が大きすぎるな。それに、URLをクリックしたら新しい画面を開きたいんだけどなー。できる？

もちろんできます。ほかにも、文字サイズや、フィールド（枠内）のサイズも設定することができます。好みの表示になるように設定してみましょう。デザインの設定は.aspxファイルで行うのでしたね。

　GridViewコントロールの［GridView タスク］メニューから［列の編集］をクリックします。［選択されたフィールド］で編集したい列を選択すると、右側にプロパティが表示されます。ここでさまざまな設定ができますので、いろいろと設定を変えてみましょう。シグマクンが行いたい設定は、こんな感じですか？

• 「写真」列の「幅」：
  　 →左下にある［選択されたフィールド］一覧の中から「写真」フィールドを選択して、右側の［プロパティ］設定から［ControlStyle］−［Width］プロパティでサイズを指定（px：ピクセル単位）する。

• 「写真」列の「高さ」：
  　 →「写真」フィールドを選択して［ControlStyle］−［Height］プロパティでサイズを指定（px：ピクセル単位）する。

• 「URL」列で「ハイパーリンクを新しい画面で開く」：
  　 →「URL」フィールドを選択して［Target］プロパティで「_blank」を指定する。

先輩！ 理想的な写真になりました。ビューティフルであります！

どれどれ。試してみるか。おお、すごいね。まぁまぁ気に入ったよ。ま、この調子でこれからも頼むよ（思ったよりあっさり出来上がっちゃったな）。

ネモトサンを満足させられたようで、よかったね、シグマクン。

インターネットで公開すれば、お友達や会ったことのない人にもアプリを使ってもらえます。

　インターネット上にファイルを置くには、まずその場所を確保しなくてはなりませんが、ASP.NETが動く環境のサーバをレンタルしてくれるところがあります。

• レンタルサーバリスト

　無料のサービス登録をして、場所を確保できたら、FTPソフトなどを使ってサーバにアップしてみましょう。