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

第1回 プログラミングはこんなに楽しい！

Webページ上に配置されるテキストボックスや、ボタン、チェックボックスなどの部品のことを総称して「コントロール」と呼びます。コントロールは［ツールボックス］の中に用意されています。

　プロジェクトの新規作成直後は、中央の編集画面にHTMLのコードが見えますよね。編集画面の下部を見ると［ソース］が選択されているのが分かります。つまり、この表示モードはコード・エディタです。

　このコード・エディタの編集画面でコードを直接編集してもコントロールを配置できますが、VS 2008による開発ではより視覚的に簡単に操作するための表示モードが用意されているので、通常はそちらを使います。表示モードを［ソース］から［デザイン］へ変えてみましょう。

　［デザイン］タブをクリックしてください。これで真っ白な編集画面に切り替わったはずです。この表示モードがWebフォーム・デザイナです。Webフォーム・デザイナは、ブラウザを通してWebページを見るのに近いため、直感的・視覚的にページを作成・確認できます。

　編集画面の左側に［ツールボックス］があります。ここから必要なコントロールをWebフォーム・デザイナ上にドラッグ＆ドロップするだけでコントロールを配置できます。

　まずはちょっとだけ練習をしてみましょう。

• Labelコントロールを1つ配置する

　［ツールボックス］から「Label」をWebフォーム・デザイナ上にドラッグ＆ドロップします。すると、「Label」という部品がWebフォーム・デザイナに配置されます。

ドラッグ＆ドロップによるLabelコントロールの配置

　Labelコントロールは、文字を表示させるためのものです。次はいま配置した「Label」に、文字列を表示させてみましょう。

• Labelコントロールに文字を表示する

　配置したLabelコントロール「Label」を右クリックしてください。コンテキスト・メニューが表示されるので、［プロパティ］を選択します。すると、編集画面の右側に［プロパティ］ウィンドウが表示されますので、［Text］というプロパティ項目の内容を「Label」から「おぎゃー！」に変更しましょう。

Labelコントロールのプロパティ項目の変更

　ここまでできたら、ブラウザ上ではどんなふうに見えるのか試してみましょう。

• ブラウザで作成したWebページを確認する

　VWD 2008のメニュー・バーより［デバッグ］−［デバッグ開始］をクリックします。ここでは「デバッグ」という言葉は気にしないでください。後で説明します。

Webページをブラウザで実行

　初めての実行のときだけですが、このとき［デバッグが無効です］というダイアログが表示されます。チェックを変えないまま［OK］ボタンを押してください。

［デバッグが無効です］ダイアログ

　実行されると、ブラウザが立ち上がり、「おぎゃー」と書かれたWebページが表示されます。

ブラウザ上でのWebページの実行

さぁ、これで練習はおしまいです。いよいよWebアプリを作成しますよ。題して「昼飯侍」！

　通常ならば、練習で行ったようにコントロールを配置してWebページを作成していきますが、今回はあらかじめコントロールを配置済みのWebページを準備してあります。あとはWebアプリの動きの部分を作成すれば、完成です。

• Webページのダウンロード

　上のリンクからダウンロードした.zipファイルを解凍して、展開されたフォルダ内のすべてのファイルをプロジェクトの中に保存して、使ってみましょう。

　編集画面の上部にある［Default.aspx］タブを右クリックして、表示されるコンテキスト・メニューから［含んでいるフォルダを開く］を選択してください。

準備されたWebページのファイル群の保存

　Windowsによってフォルダが開かれるので、そこにダウンロードしたファイルをコピーしてください。

　コピーするファイル（3点）は次のとおりです。

• imageフォルダ
• hirumeshi.aspx
• hirumeshi.aspx.cs

　保存したファイルを、VWD 2008で開きましょう。

　[ソリューション エクスプローラ]を選択した状態で、メニュー・バーより［表示］−［最新の情報に更新］を選択しましょう。すると、［ソリューション エクスプローラ］に先ほど保存したファイルが表示されるので、「hirumeshi.aspx」をダブルクリックして開きます。

ダブルクリックで開いた「hirumeshi.aspx」

　準備完了です。それでは、Webアプリのキモである「イベント」を記述してみましょう。

人がたくさん集まるようなイベントとはちょっと違いますが、プログラミングのイベントもなかなか楽しいですよ。

　ここでいうイベントとはあるタイミングでアプリケーションが起こす動作を指します。今回は、ページを読み込む（＝ロードする）タイミング（Page_Load）とボタンを押した（＝クリックした）タイミング（Button_Click）で起こす動作（＝イベント）を設計します。

　ではさっそくイベントの内容を書いてみましょう。

　Webフォーム・デザイナ上に配置されたButtonコントロール（＝ボタン）をダブルクリックしてください。すると、コード・エディタに切り替わります。その編集画面の上部を見ると、これが「hirumeshi.aspx.cs」ファイルだと分かりますね。ボタンなどのコントロールを設置してあるのが隣のタブにある「hirumeshi.aspx」です。外観のデザインを作成する.aspxファイルと中身の動作を作成する.csファイルの2つが必ずセットになっていますよ。

　{ }内に動作させたい処理内容を下記のように記述します。今回編集するのはこの2つの{ }の中だけです。

C#でイベントを記述する場所

　ページ・ロード時の処理内容を最初の{ }の中に記述しましょう。文字の記述を始めると、入力候補が表示されますので、ここから選択して進めましょう。大文字小文字も認識しますよ。

文字の記述を始めると表示される入力候補

　次の画面と同じになるように、18〜20行目のコードをPage_Load（＝ページ・ロード時）のイベントの{ }内に記述してください。

Page_Loadのイベントに記述する内容

コードのテキストはこちらからコピーできます。

※Page_Loadイベントはページにアクセスされたとき（ページ読み込み時）に、必ず呼び出されます。ほかにどんなイベントを設計しても、Page_Load時のイベントが一番初めに呼び出されます。

　いま記述した3行には、配置しているコントロール（ラベルやテキストボックス）に表示させる文字列をセットするという意味があります。

　取りあえず大事なのは、{ }の中の行の最後には必ずセミコロン（;）を付けるというところですね。