ダメダメWebアプリからの脱却を目指せ

習うより慣れろ！ASP.NETでWebアプリを作る

2010年06月04日 09時00分更新

文● 有川榮一、TECH.ASCII.jp　イラスト●野崎昌子

アズルトラベルはオンラインでのパックの予約サービスを大手に先駆けて投入した旅行会社。そんな同社のWebサイト開発を手がけているのが、AMWソフトウェアだ。前回は最新のASP.NETの3つのキーワードを抑えてきたが、今回はいよいよASP.NETでのWebアプリケーション開発を体験してもらおう。

登場人物

岩崎課長：Web技術課長。今回のWebサイトのリニューアルを統括する。プログラマーあがりだが、知識がやや古いかも。

坂本：別のシステム会社から転職してきたプログラマーで、技術チームの現場をまとめている。個人でサイトも運営しているため、Web技術に明るい

オープニングトーク

坂本：課長！　ASP.NETでWebアプリケーションを作ってみましたので、ちょっと見ていただけますか？　私が個人でやっているサイトを、ASP.NETで拡張してみたんです。

岩崎課長：おっ。坂本のサイトは確かに本のレビューを投稿できるサイトをJavaScriptで作ったんだよなあ。

坂本：はい。読んだ小説のレビューを投稿するサイトを公開していたら、けっこうユーザーも増えてきちゃって。荒らしも多いので、そろそろ会員制にしようと思っていたんです。

岩崎課長：以前見たときは、ちょっと前の掲示板みたいな感じで、古めかしい感じだったよな。

坂本：はい。今回、Visual Web Developer 2010 Expressを用いて、ASP.NETでほぼ同じ機能のサイトを作ってみたんです。ほらこんな感じ。

岩崎課長：おおっ！けっこうすごいじゃないか。ちゃんとユーザー認証のフォームもあるな。書籍のリストがくるくる回ったり、拡大できたり、まさにリッチな感じになったな。こりゃ、驚いた。実は3日間徹夜したってことはないよな。

坂本：それが、Visual Web Developer 2010 Express というやつで試して、30分くらいでできたんですよ。コードもほとんど書いていないくらいです。

岩崎課長：じゃあ、さっそくどんな感じで作ったのか見させてもらおうか。

開発の流れと
Webフォームでの開発例

　では、無償で提供されているVisual Web Developer 2010 Expressを使って、ASP.NETによるWebアプリケーション開発の流れを見ていこう。

　ASP.NETにおいて Webアプリケーションを作成する場合は、ASP.NETが提供する[Webフォーム]を使用する。今回は、Webフォームを使って、ユーザー認証を行なうWebアプリケーションを作成していこう。フォームにユーザー名とパスワードを入力すると、サーバー側で認証を行なうという簡単なものだ。

Webページに部品を貼り付けるイメージのWebフォームでの開発を試してみるぞ

　Webアプリケーションは、[Ctrl + F5] キーを押すか、[デバッグ] メニューから実行できる。この際、ASP.NET開発サーバーが使用するポートは、ランダムに設定されている。実行するとWebブラウザーが自動的に起動して、作成したWeb ページが表示される。Visual Web Developer 2010 Expressの既定の構成では、試験用のWebサーバーとして「ASP.NET開発サーバー」が自動的に起動し、そのサーバーの上でWebアプリケーションが実行される。

Webサイトを作成する

　Visual Web Developer 2010 Expressの［ファイル］メニューをクリックし、リストから[新しいWeb サイト]をクリックする。すると、［新しい Web サイト］ダイアログボックスが表示される。

画面1　[新しい Web サイト]ダイアログボックス

　ここでは、言語としてVisual C#を選択し、テンプレートとして［ASP.NET Web サイト］を選択する。［Web の場所］では、ドロップダウンリストで［ファイルシステム］が選択されていることを確認した後、[OK]をクリックする。Webサイト作成後は、Default.aspx のソースビューで開かれる。これでWebサイトが作成され、Webアプリケーション開発の準備が完了する。