「VisualStudio 2008」のWeb制作向け機能を試す(前編)

マイクロソフトが、マイコミジャーナル及び、雑誌「Web Designing」と共同で開催した「WebsiteSpark マイクロソフト×マイコミ共同セミナー」。同セミナーでは、「VisualStudio 2008」の機能紹介および、ASP.NETの各フレームワークを紹介。その場で行われたデモでは、VisualStudio 2008の操作紹介とASP.NETの各フレームワークの実装方法の違いを実際に簡単なサンプルをライブコーディングしながら説明を行った。

ASP.NETは、ASP.NET Webフォーム、ASP.NET AJAX、ASP.NET MVCなど様々なフレームワークが存在し、混乱することも多い。そこで、今回はセミナーで行われたデモを参考に再現しつつ、VisualStudio 2008のWeb制作向け機能およびASP.NETのフレームワークの違いについて前編、後編の2回に分けて、紹介していこうと思う。サンプルを実際に入力し、体験してみると理解しやすくなるはずだ。

VisualStudio 2008による静的サイトの作成

VisualStudio 2008は、WindowsアプリケーションやASPのような動的なサイトを制作するためのツールという印象が強いが、実際は静的なサイトの制作も可能だ。静的なサイトの作成ツールといえば、同社の製品である「Expression Web」を思い浮かべる方も多いと思うが、実はVisualStudio 2008も同等もしくはそれ以上の機能を備えているのだ。そのため、VisualStudio 2008をすでに持っている人であれば、VisualStudio 2008一本で静的なサイトの構築も可能なのである。

VisualStudio 2008のスタート画面

さて、VisualStudio 2008での静的サイトの作成方法だが、実に簡単である。まず、通常のASP.NETのプロジェクト同様に、テンプレートは「ASP.NETアプリケーション」を選択。ちなみに今回はVisual C#を用いてサンプルを作ってみる。続いて、自動で生成されるDefault.aspxを削除することで、サーバーサイドの技術を含まない静的サイトの構築を行っていくことができる。Default.aspxの削除は[ソリューションエクスプローラー]パネルで行う。このパネルでは、新しいファイルやフォルダの追加や削除を行うことが可能だ。

ソリューションエクスプローラーパネル

今回は、見出しとひとつの段落だけのシンプルなHTMLとそのCSSの作成を行ってみよう。後々のサンプルのことを考えて、Default.aspxの削除は行わないでおく。まずはHTMLだ。HTMLは見出しと段落のみを作成する。タグを入力すると、インテリセンスという機能によって補完候補が表示される。Expression Webでもおなじみの機能だ。

HTMLのインテリセンス

ソース抜粋

<body>
<h1> マイツイート</h1>
<div class="tweet">
<p> 本日のつぶやきです:</p>
</div>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>

CSSも作成する。CSS外部ファイルの追加は[ソリューションエクスプローラー]パネルより追加することができる。ソリューション名のところで右クリックし、[追加]→[新しい項目]を選ぶことで[新しい項目の追加]パネルが立ち上がり、ここから「スタイルシート」を選択する。

CSSの追加

CSSは見出しと本文へ簡単な装飾を行ってみる。CSSも同様にインテリセンスが機能するのがわかるはずだ。CSSの外部ファイルをHTMLに反映させるのは簡単で、[ソリューションエクスプローラー]パネルよりCSS外部ファイルをソース内の配置したい位置にドラッグ&ドロップするだけでタグが出力される。

CSSのインテリセンス

ソース

h1 {
font-size:120%;
}
.tweet {
border: 1px solid #ccc;
padding: 20px;
}
p {
color: #666;
}

ASP.NET WebフォームおよびASP.NET AJAXの実装スタイル

続いて、先ほど作成したサンプルにフォームに、文字を入力すると「本日のつぶやきです:」と書かれた部分に内容が追加されるというちょっとした機能を追加してみよう。これはASP.NET Webフォームというフレームワークを使って実装してみる。ASP.NET Webフォームは以前より存在している技術で、動的なサイトを構築するのに向いている。フォームなどを送信した際は、現在のURLにポストすることで、画面を切り替え、結果を表示するという特徴をもっている。

まずは、表示エリアをラベルに置き換えるところからはじめよう。VisualStudioではサーバーサイドとからめて操作する部品があらかじめ用意されており、開発者はそれをドラッグ&ドロップで設置することができる。そのために、「ソース表示モード」から「デザイン表示モード」に切り替えよう。

デザイン表示モード

ラベルは[ツールボックス]パネルの[標準]内に入っている。それを「本日のつぶやきです:」の右側へドラッグし、配置しよう。続いてあらかじめラベル内に入力されているテキストを空に設定する。これで表示場所の確保は完了だ。続いて、入力フォームとボタンを配置する。[ツールボックス]パネルの[標準]内にあるTextBoxとButtonを「本日のつぶやきです:」の下へドラッグ&ドロップして配置しよう。これで表示部分は完成だ。

コントロールを配置

あとは、フォームを入力した際にラベルに入力フォームの内容を表示させれば終わりである。デザインビューのボタンをダブルクリックしてみよう。なにやらプログラムのソースが表示されたはずだ。ここに動作を書き込んでいく。今回はLabel1というラベルにTextBox1の内容を反映させるようにしたいので「Label1.Text = TextBox1.Text;」と書く。

ソース

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace mycom_html_css_js_02
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
}
}

あとは、[CTRL]+[F5]キーを押して開始させると、ブラウザが立ち上がり、先ほど作成したページが表示されるはずだ。入力フォームに文字を入力すると、ラベル部分に反映されるのがわかる。

完成版のサンプルアプリケーション

以上が、ASP.NET Webフォームの簡単な使い方である。このサンプルは、ASP.NET AJAXを用いて簡単にAJAX仕様にすることができる。

ASP.NET AJAXでも専用のコントロールが[ツールボックス]パネルに用意されており、ドラッグ&ドロップで機能追加が可能だ。まず[ツールボックス]パネル内の[AJAX Extentions]より[ScriptManager]をデザインビューへドラッグ&ドロップする。ScriptManagerはAJAXに必要なスクリプトを管理してくれるコントロールだ。続いて、[UpdatePanel]をデザインビューへドラッグ&ドロップしよう。UpdatePanelは実にすばらしく、このパネル内に入れた要素は非同期で更新が可能になるのだ。先ほど作ったラベルや入力フォーム、ボタンなどをまとめてUpdatePanel内にドラッグして内包してしまおう。これだけの作業で、ASP.NET AJAXを使ったASP.NET WebフォームのAJAX化が完了である。ブラウザで表示して確認してみよう。

ソース抜粋

<h1> マイツイート</h1>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="tweet">
<p>
本日のつぶやきです:<asp:Label ID="Label1" runat="server" Text=""> </asp:Label>
</p>
</div>
<div>
<asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>