Visual Studio 2008を使って簡単なWebアプリを作ってみる

Visual Studio 2008がもう既にリリースされている。

http://www.microsoft.com/japan/msdn/vstudio/express/

上記のページから、

Visual Basic 2008 Express Edition
Visual C# 2008 Express Edition
Visual C++ 2008 Express Edition
Visual Web Developer 2008 Express Edition

が無償でダウンロードできる。MS製開発ツールが無償なのは、今ではもう当たり前のこと。

Visual Web Developer 2008 Express Editionで掲示板を作ってみる

とりあえず練習としてASP.NETによるWebアプリを作ってみることにした。練習で作るWebアプリといえば、やっぱり掲示板だ。

Visual Studioの製品群でWebアプリを作るときに使うのは、Visual Web Developerだ。バージョン2003までしか知らない人には意外かも知れないけど、バージョン2005からはそういう事になってる。

Visual Web Developerは、VBとC#のどちらかを使ってASP.NETによるWebアプリを作るための開発ツールであるということ。

逆に言うと、Visual BasicやVisual C#といったツールはexeやdllを作るためのもの、と考えるといい。

用意するもの

Visual Web Developer 2008 Express Edition
SQL Server 2005 Express Edition

SQL ServerはVisual Web Developerをインストールするときに一緒に入れることができる。

新しい Web サイト

Visual Web Developerを起動
メニューから「ファイル」「新しい Web サイト」を選択
テンプレートは「ASP.NET Web サイト」を選択
場所は「ファイルシステム」を選び、ファイルを保存するディレクトリを指定
言語は「Visual Basic」
「OK」をクリック

これで空っぽのWebサイトが作られる。言語は本当はC#の方が得意だけど、なんとなくVBにしてみた。

データベースの作成

まずはデータを格納するDBを用意する。

ソリューションエクスプローラの「App_Data」の上で右クリック
「新しい項目の追加」を選択
テンプレートは「SQL Server データベース」を選択
名前は「Database.mdf」のままで良い
言語は「Visual Basic」のままで良い
「追加」をクリック

App_Dataは、このWebアプリで使うためのデータ関係を格納する場所と決まっている。データベースもこのフォルダに作る。

「データベースをファイルとして作る」という感覚は、OracleとかMySQLとPostgreSQLをやってる人には新鮮かも知れない。これは簡単に言うと、Accessのmdbの考え方を取り入れているってこと。

データベースをファイルとして作るので、テスト用のDBに差し替えたり、データベースのバックアップを取ったり、新しい開発環境を作ったりするのが超簡単だ。この機能は神だと思う。もちろん、全てはSQL Serverエンジンで動くので、mdbのようなガタガタな信頼性ではない。

テーブルの作成

DBを準備したら、次はテーブルの作成。今回は以下のようなテーブル設計にした。

列名	型	PK	Null
id	int	○	Not Null
subject	text	-	-
name	text	-	-
body	text	-	-
timestamp	datetime	-	Not Null

テーブル名「Bbs」としてこれを作成する。

メニューから「表示」「データベースエクスプローラ」を選択
「Database.mdf」の中の「テーブル」の上で右クリック
「新しいテーブルの作成」を選択
テーブル定義を記入
Ctrl + Sを押す
テーブル名「Bbs」を入力して「OK」

create文とかは特に書かなくて良い。

これでテーブルが完成。

テストデータの投入

このテーブルに、とりあえずテストデータを何件か入れておく。

データベースエクスプローラの「Bbs」テーブルの上で右クリック
「テーブルデータの表示」を選択
開いた画面にデータを入れる

Visual Studioさえあれば、よくあるDB管理ツール(CSEとかOracle SQL Developerなど)みたいな感じでデータを作ったりできる。

データセットの作成

コードからこのテーブルにアクセスするために、データセットを作る。データセットってのは、いわゆるデータアクセス層のことだ。SQLを発行する機能と、データを格納するエンティティ。

ソリューションエクスプローラのWebサイトの上で右クリック
「ASP.NET フォルダの追加」「App_Code」を選択
App_Codeが作成されるので、その上で右クリック
「新しい項目の追加」を選択
テンプレートは「データセット」を選択
名前は「DataSet.xsd」とする
言語は「Visual Basic」のままで良い
「追加」をクリック

データセットができたので、この中にエンティティを作る。

ソリューションエクスプローラの「DataSet.xsd」をダブルクリックして開く
データベースエクスプローラの「Bbs」テーブルを、開いた画面の中にドラッグ & ドロップ

これで、テーブル定義をそのまま持つエンティティ(DataTable)と、これにデータを詰め込む機能(DataAdapter)が生成される。

画面の作成

いよいよ画面を作成。Visual Web Developerにはなかなか優秀な画面デザイナが入っているが、やっぱりまだまだキレイなhtmlが書けるほどではない。自分は凝り性なので、手書きで書いてしまう。

といっても今回は練習なので、できるだけシンプルに。もともとある「Default.aspx」の内容を以下のように修正した。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>掲示板</title>
    </head>
    <body>
        <h1>掲示板</h1>
        <hr />
        <asp:Repeater ID="BbsRepeater" runat="server">
            <ItemTemplate>
                <h2><%#HttpUtility.HtmlEncode(DataBinder.Eval(Container.DataItem, "subject").ToString())%></h2>
                <p>
                    <%#HttpUtility.HtmlEncode(DataBinder.Eval(Container.DataItem, "name").ToString())%>
                    <%#HttpUtility.HtmlEncode(DataBinder.Eval(Container.DataItem, "timestamp").ToString())%>
                </p>
                <p>
                    <%#HttpUtility.HtmlEncode(DataBinder.Eval(Container.DataItem, "body").ToString())%>
                </p>
            </ItemTemplate>
            <SeparatorTemplate>
                <hr />
            </SeparatorTemplate>
        </asp:Repeater>
    </body>
</html>

コードビハインドの作成

画面の裏にコードあり。これがWebアプリ。Default.aspx.vbに、以下のコードを書く。

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

        Dim da As New DataSetTableAdapters.BbsTableAdapter()
        Dim dt As DataSet.BbsDataTable = da.GetData()
        BbsRepeater.DataSource = dt

        Me.DataBind()

    End Sub

End Class

PageのPreRenderイベントの中にコードを書く。

さっき作ったDataSetの中に自動生成されたBbsTableAdapterをインスタンス化
BbsTableAdapterの中に自動生成されたGetDataメソッドを呼び出して、BbsDataTable(エンティティ)に格納
そのBbsDataTableを画面のBbsRepeaterのデータソースに割り当てる
データバインド実行

こんな感じのことをやってる。

実行

これで終わり。F5キーを押して、ブラウザから画面を見てみる。

やった。うまく表示された。

とりあえずここまで

実質VBのコードは4行しか書いてない(画面のhtmlは書いたけど)。テーブル設計は画面で簡単にできるし、データアクセス関連はテーブルをドラッグ & ドロップするだけだし、かなり簡単なのがわかると思う。この文章を書いたり画面キャプチャを取りながら、だいたい1時間30分くらいでここまで作った。

なんか周囲でみんなが大掃除してるので、今日はここまで。次はデータ登録をやる。

追記

続きを書いた。

Visual Studio 2008を使って簡単なWebアプリを作ってみる(2) - 今日覚えたこと