Webアプリ開発事始 第17回

ASP.NET入門
~Visual Studio .NETでWebアプリケーションを作る
長谷川裕行
有限会社 手國堂

ASP.NETによるWebアプリケーションの開発

非常に簡単なWebアプリケーションを例に、Visual Studio .NETによる開発手順を紹介しておきましょう。


- プロジェクトの作成 -

Visual Studio .NETでは、すべてのプログラム開発工程をプロジェクトとして管理します。Webアプリケーションを開発する場合も、アプリケーションごと、または複数のアプリケーションを束ねたソリューションという形でプロジェクト管理されます。

Visual Studio .NETを起動すると、ウィンドウの中央にスタートページが表示されます。ここで、既存の――現在開発中、または過去に開発済みの――プロジェクトを選択するか、新規プロジェクトを作成します。

言語とテンプレートの選択

「新しいプロジェクト」ボタンをクリックすると、作成するプロジェクトの種類を選択するダイアログボックスがオープンします。

「プロジェクトの種類」で、一覧から使用する言語を選択します。

その後、「テンプレート」から作成するアプリケーションの種類を選択します。

テンプレートは、開発するアプリケーションの骨格となります。選択した項目(プログラムの種類)によって、開発に必要なファイルの土台が準備されます。「空のプロジェクト」を選択し、必要なソースファイルをすべて自分で作成することも可能ですが、非常に面倒な作業となります。既存のテンプレートを使い、必要に応じて内容を修正していくのがよいでしょう。

対応する言語とテンプレートの数が増えて、守備範囲が広がりましたが、基本的には、Visual Studio 6.0のプロジェクト作成と同じ要領です。

ここでは「言語にVisual Basicを使って、Webアプリケーション」を作成することにします。

  プロジェクトの種類:Visual Basicプロジェクト
  テンプレート:ASP.NET Webアプリケーション



配置場所の指定

作成するアプリケーションの配置場所を指定します。

Webアプリケーションのプロジェクトでは、ファイルの配置場所がサーバーとなるため、サーバーで直接開発する場合は“http://localhost/”を指定します。プロジェクト名とサブフォルダには、既定の名前が使われます。

ASP.NETによるWebアプリケーションでは、IISの管理するWebパブリッシュディレクトリ下にアプリケーションを配置しなければなりません。IIS 5.0以降が正常にインストールされている必要があります。

他のURLを指定して、リモートのサーバーにファイルを配置することもできます。その場合、Webサーバーに .NET Frameworkがインストールされている必要があります。 .NETアプリケーションを実行するには、 .NET Frameworkが必須です。


- Webフォームをデザインする -

[OK]ボタンをクリックすると、ウィンドウ中央にWebフォームデザイナがオープンし、Webフォームがデザインできるようになります。

Webフォームには“WebForm1”という名前のタブが付いています。ファイル名の拡張子は.aspxです。

WebフォームのデザインはVisual Basicのフォームデザインと同じ要領で、左に表示されているツールボックスからコントロールを選択し、フォーム上でドラッグして貼り付けていきます。

右側には、選択したコントロールのプロパティが表示され、ラベルやテキストボックス内の文字列や、コマンドボタンのキャプションを設定できます。

コントロールには、サーバー側で動作を制御できるWebフォーム・コントロールと、通常のHTMLタグとしてソースコードを記述されるHTMLコントロールの2種類があります。HTMLコントロールをフォーム上に貼り付け、コンテキストメニューから「サーバーコントロールとして実行」のチェックをONにすると、ユーザーの入力やクリックなどの操作をイベントとしてサーバーが感知し、サーバー側でイベント処理を行えるようになります。

ここでは、HTMLコントロールのLabelとButton、Text Fieldの3つのコントロールを貼り付けてみます。




- コードを記述する -

Labelコントロールは、枠線内に表示された“Label1”などの文字列を削除し、そこに直接文字列を入力します。入力したテキストは、「書式設定」ツールバーからフォントやサイズ、太字、書体などを設定できます。



Button(ボタン)のキャプションは、“value”プロパティで設定します。ここでは「クリック!」と設定しています。

Button(ボタン)とText Field(テキストボックス)は、コンテキストメニューから「サーバーコントロールとして実行」のチェックをONにし、サーバーで制御できるように設定します。



サーバーコントロールをダブルクリックすると、“WebForm1.aspx.vb”というウィンドウがオープンし、そのコントロールのイベントに対する振る舞いをコードで記述できるようになります。Visual Basicのフォームウィンドウとコードウィンドウの関係と同じです。

ここでは、Button(ボタン)をダブルクリックし、イベントプロシージャ“Button1_ServerClick”に以下の1行を記述します。

  Text1.Value = "Welcome to ASP.NET world!"

オブジェクト名Button1のクリックイベントは“Button1_ServerClick”で処理されます。Visual Basicのイベント処理とまったく同じ要領です。プロシージャは、以下のようになります(画面表示の都合で折り返していますが、“Private Sub...”は1行で表示されます)。

  Private Sub Button1_ServerClick
    (ByVal sender As System.Object,
     ByVal e As System.EventArgs) Handles Button1.ServerClick
     Text1.Value = "Welcome to ASP.NET world!"
  End Sub

Text Field(テキストボックス)のValueプロパティ(プロパティウィンドウでは先頭が小文字ですが、Visual Basicのコード中では先頭が大文字になります)は、テキストボックスに表示する文字列を指定します。
 したがってこの処理は、
  ボタンをクリックすると、テキストボックスに
  “Welcome to ASP.NET world!”と表示される
という至って単純なものとなります。



コードを記述した“WebForm1.aspx.vb”はWebフォームのデザインを記述した.aspxファイルとは別のテキストファイルで、Webフォームでデザインしたページのコード部分を記録しています。使用する言語によって最後の拡張子が異なり、Visual Basicではvb、C#ならcsとなります。


- ビルドと実行 -

できあがったWebフォームは、ビルド処理を行うことで実際に動作するWebアプリケーションのページとなります。ビルドには、メニューから「ビルド」→「WebApplicationのビルド」を選択するだけです。“WebApplication”の箇所には、作成中のプロジェクト名が入ります。

統合環境から動作を試す場合は、「デバッグ」→「デバッグなしで開始」を選択します。自動的にビルドされ、ブラウザ(Internet Explorer)が起動してWebページが表示されます。

メニューの「ファイル」→「ブラウザで表示」を選択すれば、統合環境の中からブラウザが起動し、Webフォームが表示されます。

作成したWebアプリケーションを実際にブラウザで実行するには、ブラウザでアプリケーションのURLを指定します。ここの例なら、“http://localhost/WebApplication1/WebForm1.aspx”とします。



Visual Studio .NETを使えば、このように非常に簡単にWebアプリケーションが作成できます。特にVisual Basicのフォームデザイン~コード入力と同じ要領で、Webページをデザインできることが大きな利点です。

リスト1とリスト2は、自動生成されたWebフォームのHTMLとVisual Basicのソースコードです。コードを直接書き直すことも可能です。

リスト1:生成されたWebフォームのHTML~WebForm1.aspx
リスト2:生成されたVisual Basicのコード~WebForm1.aspx.vb


トップページ
ASP.NETとVisual Studio .NET
ASP.NETによるWebアプリケーションの開発
プロジェクトの作成
Webフォームをデザインする
コードを記述する
ビルドと実行
コントロールとイベント処理
あとがき

Copyright © GrapeCity inc. All rights reserved.