プロジェクトの作成

作成者 : Erik Reitan

このチュートリアル シリーズでは、ASP.NET 4.5 と Microsoft Visual Studio Express 2013 for Web を使用した ASP.NET Web Forms アプリケーションの構築の基本について説明します。 このチュートリアル シリーズでは、C# ソース コードを含むVisual Studio 2013 プロジェクトを使用できます。

このチュートリアルでは、Visual Studio で既定のプロジェクトを作成、確認、実行します。これにより、ASP.NET の機能について理解できるようになります。 また、Visual Studio 環境を確認します。

ここでは、次の内容について学習します。

• 新しいWeb Forms プロジェクトを作成する方法。
• Web Forms プロジェクトのファイル構造。
• Visual Studio でプロジェクトを実行する方法。
• 既定の Web フォーム アプリケーションのさまざまな機能。
• Visual Studio 環境の使用方法に関するいくつかの基本事項。

プロジェクトの作成

1. Visual Studio を開きます。

2. Visual Studio の [ファイル] メニューから [新しいプロジェクト] を選択します。

   

3. 左側の [ テンプレート ] ->[Visual C# ] -[>Web テンプレート] グループを選択します。

4. 中央の列で [ASP.NET Web アプリケーション] を選択します。
   このチュートリアル シリーズでは、.NET Framework 4.5.2 を使用しています。

5. プロジェクトに WingtipToys という 名前を付け、[OK] ボタンを選択 します 。

   

   注意

   このチュートリアル シリーズのプロジェクトの名前は WingtipToys です。 チュートリアル シリーズ全体で提供されるコードが期待どおりに機能するように、この 正確な プロジェクト名を使用することをお勧めします。

6. [認証の変更] ボタンをクリックします。 [ 個々のユーザー アカウント] を 選択し、[OK] ボタンをクリック します 。

7. Web Forms テンプレートを選択し、[OK] ボタンをクリックします。

   

プロジェクトの作成には少し時間がかかります。 準備ができたら、 Default.aspx ページを開きます。

デザイン ビューとソース ビューを切り替えるには、中央のウィンドウの下部にあるオプションを選択します。 デザイン ビューでは、Web ページ、マスター ページ、コンテンツ ページ、HTML ページ、およびユーザー コントロール ASP.NET、ほぼ WYSIWYG ビューを使用して表示されます。 ソース ビューには、編集できる Web ページの HTML マークアップが表示されます。

ヒント

ASP.NET フレームワークについて

ASP.NET Web フォームを利用すれば、馴染みのあるドラッグアンドドロップ式のイベント駆動型モデルを利用して動的な Web サイトを構築できます。 デザイン サーフェスや数百あるコントロールとコンポーネントを利用し、洗練された強力な UI 駆動型サイトとデータ アクセスを短時間で構築できます。 Wingtip Toy Store は ASP.NET Web Formsに基づいていますが、このチュートリアル シリーズで学習する概念の多くは、すべての ASP.NET に適用できます。

ASP.NET には、次の 4 つの主要な開発フレームワークが用意されています。

• ASP.NET Web フォーム
  Web Forms フレームワークは、Microsoft Windows フォーム (WinForms) や WPF/XAML/Silverlight など、宣言型および制御ベースのプログラミングを好む開発者を対象としています。 WYSIWYG デザイナー駆動開発モデルを提供するため、Web 開発のための迅速なアプリケーション開発 (RAD) 環境を探している開発者に人気があります。 Web プログラミングを初めて使用し、従来の Microsoft RAD クライアント開発ツール (Visual Basic や Visual C# など) に精通している場合は、HTML と JavaScript の経験がなくても、Web アプリケーションをすばやく構築できます。
• ASP.NET MVC
  ASP.NET MVC は、テスト駆動型開発、懸念事項の分離、制御の反転 (IoC)、依存関係の挿入 (DI) などのパターンと原則に関心がある開発者を対象としています。 このフレームワークでは、Web アプリケーションのビジネス ロジック レイヤーをプレゼンテーション 層から分離することをお勧めします。
• ASP.NET Web ページ
  ASP.NET Web ページは、PHP の行に沿って、単純な Web 開発ストーリーを必要とする開発者を対象としています。 Web ページ モデルでは、HTML ページを作成し、そのマークアップのレンダリング方法を動的に制御するために、サーバーベースのコードをページに追加します。 Web ページは、特に軽量フレームワークとして設計されており、HTML を知っていても広範なプログラミング経験がないユーザー (学生や趣味の人など) にとって、ASP.NET への最も簡単なエントリ ポイントです。 また、PHP や同様のフレームワークを知っている Web 開発者が、ASP.NET の使用を開始するのにも適しています。
• ASP.NET シングル ページ アプリケーション
  ASP.NET シングル ページ アプリケーション (SPA) は、HTML 5、CSS 3、JavaScript を使用したクライアント側の重要な対話を含むアプリケーションの構築に役立ちます。 ASP.NET and Web Tools 2012.2 Update には、knockout.js と ASP.NET Web APIを使用してシングル ページ アプリケーションを構築するための新しいテンプレートが付属しています。 新しい SPA テンプレートに加えて、コミュニティで作成された新しい SPA テンプレートもダウンロードできます。

ASP.NET には、4 つのメイン開発フレームワークに加えて、注意して理解することが重要ですが、このチュートリアル シリーズでは取り上げられない追加のテクノロジも用意されています。

• ASP.NET Web API - ブラウザーやモバイル デバイスなど、幅広いクライアントに到達する HTTP サービスを構築するためのフレームワーク。
• ASP.NET SignalR - リアルタイム Web 機能の開発を容易にするライブラリです。

プロジェクトの確認

Visual Studio の [ソリューション エクスプローラー] ウィンドウでは、プロジェクトのファイルを管理できます。 ソリューション エクスプローラーでアプリケーションに追加されたフォルダーを見てみましょう。 Web アプリケーション テンプレートは、基本的なフォルダー構造を追加します。

Visual Studio では、プロジェクトの初期フォルダーとファイルがいくつか作成されます。 このチュートリアルの後半で使用する最初のファイルは次のとおりです。

[最近使ったファイル]	目的
Default.aspx	通常、アプリケーションがブラウザーで実行されるときに表示される最初のページ。
Site.Master	一貫性のあるレイアウトを作成し、アプリケーション内のページに標準の動作を使用できるようにするページ。
Global.asax	ASP.NET または HTTP モジュールによって発生するアプリケーション レベルおよびセッション レベルのイベントに応答するためのコードを含む省略可能なファイル。
Web.config	アプリケーションの構成データ。

既定の Web アプリケーションの実行

既定の Web アプリケーションは、組み込みの機能とサポートに基づいて豊富なエクスペリエンスを提供します。 既定の Web フォーム プロジェクトに変更を加えることなく、アプリケーションをローカル Web ブラウザーで実行する準備が整います。

1. Visual Studio で F5 キーを押します。
   アプリケーションがビルドされ、Web ブラウザーに表示されます。

   

2. 実行中のアプリケーションの確認が完了したら、ブラウザー ウィンドウを閉じます。

この既定の Web アプリケーションには、Default.aspx (ホーム)、About.aspx、Contact.aspxの 3 つのメイン ページがあります。 これらの各ページには、上部のナビゲーション バーからアクセスできます。 アカウント フォルダーには、Register.aspx ページと Login.aspx ページという 2 つのページも追加されています。 これら 2 つのページを使用すると、ASP.NET のメンバーシップ機能を使用して、ユーザーの資格情報を作成、格納、検証できます。

ASP.NET Web Forms背景

ASP.NET Web Formsは、Microsoft ASP.NET テクノロジに基づくページであり、サーバー上で実行されるコードによって、ブラウザーまたはクライアント デバイスへの Web ページ出力が動的に生成されます。 ASP.NET Web Forms ページでは、スタイル、レイアウトなどの機能に適したブラウザー準拠の HTML が自動的にレンダリングされます。 Web Formsは、Microsoft Visual Basic や Microsoft Visual C# など、.NET 共通言語ランタイムでサポートされている任意の言語と互換性があります。 また、Web Formsは Microsoft .NET Framework上に構築されており、マネージド環境、型の安全性、継承などの利点があります。

ASP.NET Web Forms ページを実行すると、ページはライフ サイクルを経て、一連の処理ステップを実行します。 これらの手順には、初期化、コントロールのインスタンス化、状態の復元と維持、イベント ハンドラー コードの実行、レンダリングが含まれます。 ASP.NET Web Formsの機能について理解を深めるにつれて、目的の効果に適したライフ サイクル ステージでコードを記述できるように、ASP.NET ページのライフ サイクルを理解することが重要です。

Web サーバーは、ページの要求を受信すると、ページを検索し、処理し、ブラウザーに送信して、すべてのページ情報を破棄します。 ユーザーが同じページを再度要求すると、サーバーはシーケンス全体を繰り返し、ページを最初から再処理します。 言い換えますが、サーバーには、処理されたページのメモリがなく、ページがステートレスです。 ASP.NET ページ フレームワークは、ページとそのコントロールの状態を維持するタスクを自動的に処理し、アプリケーション固有の情報の状態を明示的に維持する方法を提供します。

ヒント

Web Forms アプリケーション テンプレートの Web アプリケーション機能

ASP.NET Web Forms アプリケーション テンプレートには、組み込み機能の豊富なセットが用意されています。 Home.aspx ページ、About.aspx ページ、Contact.aspx ページだけでなく、ユーザーを登録して資格情報を保存して Web サイトにログインできるようにするメンバーシップ機能も含まれています。 この概要では、ASP.NET Web Forms アプリケーション テンプレートに含まれる機能の一部と、Wingtip Toys アプリケーションでの機能の使用方法について詳しく説明します。

メンバーシップ

ASP.NET ID は、アプリケーションによって作成されたデータベースにユーザーの資格情報を格納します。 ユーザーがログインすると、アプリケーションはデータベースを読み取って資格情報を検証します。 プロジェクトの Account フォルダーには、メンバーシップのさまざまな部分 (登録、ログイン、パスワードの変更、アクセスの承認) を実装するファイルが含まれています。 さらに、ASP.NET Web Formsでは OAuth と OpenID がサポートされます。 これらの認証の強化により、ユーザーは、Facebook、Twitter、Windows Live、Google などのアカウントから、既存の資格情報を使用してサイトにログインできます。

既定では、テンプレートは、SQL Server Express LocalDB のインスタンス (web 用Visual Studio Express 2013 に付属する開発データベース サーバー) に既定のデータベース名を使用してメンバーシップ データベースを作成します。

SQL Server Express LocalDB

SQL Server Express LocalDB は、SQL Server データベースの多くのプログラミング機能を備えた軽量バージョンのSQL Serverです。 SQL Server Express LocalDB はユーザー モードで実行され、インストールの前提条件の短い一覧を含む高速でゼロ構成のインストールがあります。 Microsoft SQL Serverでは、アップグレード手順なしで、データベースまたは Transact-SQL コードを SQL Server Express LocalDB から SQL Server に移動し、SQL Azureできます。 そのため、SQL Server Express LocalDB は、SQL Serverのすべてのエディションを対象とするアプリケーションの開発環境として使用できます。 SQL Server Express LocalDB を使用すると、ストアド プロシージャ、ユーザー定義関数と集計、.NET Framework統合、空間型などの機能がSQL Server Compactで使用できません。

マスター ページ

ASP.NET マスター ページは、アプリケーション内のすべてのページに対して一貫した外観と動作を定義します。 マスター ページのレイアウトが個々のコンテンツ ページのコンテンツとマージされ、ユーザーに表示される最終的なページが生成されます。 Wingtip Toys アプリケーションでは、Wingtip Toys Web サイト内のすべてのページが同じロゴとナビゲーション バーを共有するように Site.master マスター ページを変更します。

HTML5

ASP.NET Web Forms アプリケーション テンプレートは、HTML マークアップ言語の最新バージョンである HTML5 をサポートしています。 HTML5 では、Web サイトの作成を容易にする新しい要素と機能がサポートされています。

Modernizr

HTML5 をサポートしていないブラウザーの場合は、 Modernizr を使用できます。 Modernizr は、ブラウザーが HTML5 機能をサポートしているかどうかを検出し、サポートされていない場合は有効にできるオープンソースの JavaScript ライブラリです。 ASP.NET Web Forms アプリケーション テンプレートでは、Modernizr が NuGet パッケージとしてインストールされます。

ブートストラップ

Visual Studio 2013 プロジェクト テンプレートでは、Twitter によって作成されたレイアウトとテーマフレームワークである Bootstrap が使用されます。 Bootstrap は CSS3 を使用して応答性の高いデザインを提供します。つまり、レイアウトはさまざまなブラウザー ウィンドウ サイズに動的に適応できます。 Bootstrap のテーマ機能を使用して、アプリケーションの外観の変更を簡単に行うこともできます。 既定では、Visual Studio 2013 の ASP.NET Web アプリケーション テンプレートには、NuGet パッケージとして Bootstrap が含まれます。

NuGet パッケージ

ASP.NET Web Forms アプリケーション テンプレートには、一連の NuGet パッケージが含まれています。 これらのパッケージは、オープンソースライブラリとツールの形式でコンポーネント化された機能を提供します。 アプリケーションの作成とテストに役立つさまざまなパッケージがあります。 Visual Studio を使用すると、NuGet パッケージを簡単に追加、削除、更新できます。 開発者は、NuGet にパッケージを作成して追加することもできます。

パッケージをインストールすると、NuGet によってソリューションにファイルがコピーされ、参照の追加や Web アプリケーションに関連付けられている構成の変更など、必要な変更が自動的に行われます。 ライブラリを削除する場合、NuGet はファイルを削除し、プロジェクトで行われた変更を元に戻して、煩雑さが残ないようにします。 NuGet は、Visual Studio の [ツール ] メニューから使用できます。

jQuery

jQuery は、HTML ドキュメントの走査、イベント処理、アニメーション化、および Ajax 操作を簡略化して迅速な Web 開発を実現する、高速で簡潔な JavaScript ライブラリです。 jQuery JavaScript ライブラリは、nuGet パッケージとして ASP.NET Web Forms アプリケーション テンプレートに含まれています。

目立たない検証

組み込みの検証コントロールは、クライアント側の検証ロジックに目立たない JavaScript を使用するように構成されています。 これにより、ページ マークアップでインラインでレンダリングされる JavaScript の量が大幅に削減され、ページ全体のサイズが縮小されます。 目立たない検証は、アプリケーションのルートにあるWeb.configファイルの appSettings> 要素の<設定に基づいて、ASP.NET Web Forms アプリケーション テンプレートにグローバルに追加されます。

Entity Framework Code First

ASP.NET Web Forms アプリケーション テンプレートの機能に加えて、Wingtip Toys アプリケーションでは Entity Framework Code First が使用されます。これは、データを操作するときにコード中心の開発を可能にする NuGet ライブラリです。 簡単に言うと、記述したコードに基づいて、アプリケーションのデータベース部分が自動的に作成されます。 Entity Framework を使用すると、厳密に型指定されたオブジェクトとしてデータを取得および操作できます。 これにより、データへのアクセス方法の詳細ではなく、アプリケーションのビジネス ロジックに集中できます。

ASP.NET Web Forms テンプレートに含まれるインストール済みのライブラリとパッケージの詳細については、インストールされている NuGet パッケージの一覧を参照してください。 これを行うには、Visual Studio で新しいWeb Forms プロジェクトを作成し、[ツール>] [NuGet パッケージ マネージャー>] [ソリューションの NuGet パッケージの管理] の順に選択し、[NuGet パッケージの管理] ダイアログ ボックスで [インストール済みパッケージ] を選択します。

Visual Studio のツアー

Visual Studio のプライマリ ウィンドウには、ソリューション エクスプローラー、サーバー エクスプローラー (Express のデータベース エクスプローラー)、プロパティ ウィンドウ、ツールボックス、ツール バー、およびドキュメント ウィンドウが含まれます。

Visual Studio の詳細については、「Visual Web Developer のビジュアル ガイド」を参照してください。

まとめ

このチュートリアルでは、既定のWeb Forms アプリケーションを作成、確認、実行しました。 既定の Web フォーム アプリケーションのさまざまな機能を確認し、Visual Studio 環境の使用方法に関するいくつかの基本を学習しました。 次のチュートリアルでは、データ アクセス層を作成します。

その他のリソース

Web アプリケーション プロジェクトと Web サイト プロジェクト
ASP.NET Web Forms ページの概要

前へ次へ