このページの本文へ

前へ 1 2 3 次へ

マイクロソフトのWeb開発ツールで中身も見た目もクールに第3回

ダメダメ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アプリケーション開発の準備が完了する。

画面2 Webサイト作成後の画面

Webフォームを作成する

 Webサイトが作成できたら、Webフォームを追加する。Visual Web Developer 2010 Expressの[Webサイト]メニューをクリックし、リストから[新しい項目の追加]をクリックする。すると、[新しい項目の追加]ダイアログボックスが表示される。

画面3 [新しい項目の追加]ダイアログボックス

 ここでも言語はVisual C#を選択し、テンプレートとして[Webフォーム]を選択する。[名前]欄では、Webフォームをここでは、LogonForm.aspxと入力して、[追加]をクリックする。すると、LogonForm.aspxが、ソースを編集するためのソースビューで開かれる。

画面4 Web フォーム作成後の画面

(次ページ、コンポーネントを配置する)


 

前へ 1 2 3 次へ

この特集の記事
ピックアップ