レビュー:無償のWebアプリケーション開発ツール「ASP.NET Web Matrix 日本語版」dev .NET(2/3 ページ)

» 2004年06月04日 23時00分 公開
[サイモン☆嘉門,ITmedia]

サンプル作成手順で感じ取ろう−Webフォームの開発

 Web Matrixの実力を体験するために、ここでは簡単なWebアプリケーションを作成してみよう。テキストボックス、ラベル、ボタンを配置し、テキストボックスに入力した文字列をボタンがクリックされるとラベルに表示する、という要件のアプリケーション構築だ。

 まず最初は、新しいWebページを開く。「ファイル」メニューから「新規作成」を選択しよう。「新しいファイルの追加」ダイアログが表示されるので、その中から「ASP.NETページ」を選択する。ここでのプログラミング言語には、「Visual Basic.NET」を使用する。

画面9■ページレイアウト画面

 まっさらなWebページが表示されたら、続いてツールボックスからWebコントロールをドラッグ&ドロップ配置しよう。ここで気がつくのは画面9の通り、ページのレイアウトが絶対座標ではないという点。いわゆる「FlowLayout」と呼ばれるものであり、自由なページレイアウトができないモードだ。つまり、純粋なHTMLと同様に<p>や<br>などのタグで改行するか、<Table>タグなどによる工夫が必要になる。今回は、<p>タグで改行を行おう。「デザイナ」上で<p>を挿入するには、「Enter」キーを入力すればよい(画面10)。「Shift」+「Enter」キーを入力すると<br>タグが挿入される。

画面10■pタグ改行には「Enter」キーを押すだけ

 次にボタンクリックイベントのソースコードを追加する。「デザイナ」上でボタンをダブルクリックすると、「Button1_Click」イベントのコードが挿入される。その際、Webコントロールとコードの関連付けが必要になるが、Web Matrixは自動で「asp:Button」タグにイベント属性(太字部分)を追加する。


<asp:Button id="Button1" onclick="Button1_Click" 
runat="server" Text="Button">
</asp:Button>

 上の太字部分に次のコードを記述する。


Sub Button1_Click(sender As Object, e As EventArgs)
    Label1.Text = TextBox1.Text
End Sub

 これでアプリケーションが完成した。

アプリケーションの実行

 開発したアプリケーションの実行には、「F5」キー、または「表示」メニューの「実行」を選択する。Web Matrixでは開発環境でWebアプリケーションの動作を確認できるようにWebサーバ「Microsoft ASP.NET Web Matrix Server」(以下、Web Matrix Server)が付属している。操作後には、画面11のダイアログが表示されてIIS、もしくはWeb Matrix Serverどちらで実行するかが問われる。今回は、Web Matrix Serverを使用するが、その際はTCP/IPのポート番号を指定することが可能だ。標準のポート番号は、8080になっている。

画面11■実行サーバの選択

 Web Matrix Serverが起動するとInternet Explorerに実行結果が表示される(画面12)。なお、Web Matrix Serverは開発環境でのテスト用として提供されているため、外部からのリクエストにはレスポンスを返さないため注意が必要だ。

画面12■IE上で確認できた実行結果

絶対座標でのレイアウト

 サンプルとして簡単なアプリケーションを作成することで、大まかな開発手法とWeb Matrixの機能が分かったと思う。Visual Studio.NETでWebアプリケーションを開発したことがある人であれば、コントロールが絶対座標で配置できないことに不便さを感じたのではないだろうか。

 Web Matrixでは、このような要望にもコントロール単位で絶対座標の位置指定をすることが可能だ。コントロールをWebフォーム上に配置した後でそのコントロールを選択し、「レイアウト」メニューの「絶対位置指定」を選択する。これでコントロールは絶対座標で自由な位置に配置することが可能だ。次のHTMLは、絶対位置指定する前と後のコードの違いとなる。絶対位置指定をした後は、次のようにstyle属性へ「POSITION:absolute」が追加される。

相対位置
<asp:TextBoxid="TextBox1"runat="server"></asp:TextBox>

絶対位置
<asp:TextBox id="TextBox1" style="Z-INDEX: 104; POSITION: absolute" runat="server" Font-Size="Large"></asp:TextBox>

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ