ASP.NET の概要

作成者: Tom FitzMacken

新しい Web アプリの開発には、 Blazor をお勧めします。

Note

WebMatrix は、ASP.NET Web ページの統合開発環境としては推奨されなくなりました。 Visual Studio または Visual Studio Code をお使いください。

このガイダンスとアプリケーションでは、動的な Web サイトを作成するための軽量フレームワークである ASP.NET Web ページ (バージョン 2 以降) と Razor 構文の概要を説明します。 また、ページとサイトを作成するためのツールである WebMatrix も紹介します。

レベル: ASP.NET Web ページの初級者。
想定されるスキル: HTML、基本的なカスケード スタイル シート (CSS)。

このセットの最初のチュートリアルで学習する内容:

• ASP.NET Web ページとはどのようなテクノロジで、その目的は何か。
• WebMatrix とはどのようなものか。
• すべてのものをインストールする方法。
• WebMatrix を使って Web サイトを作成する方法。

対象となる機能またはテクノロジ:

• Microsoft Web Platform Installer。
• WebMatrix。
• .cshtml ページ

このチュートリアルの元の作成者は Mike Pope です。 Tom FitzMacken が Microsoft WebMatrix 3 用に更新しました。

チュートリアルで使用するソフトウェアのバージョン

• ASP.NET Web ページ (Razor) 2
• WebMatrix 3

知っておくべきこと

ここでは、次のことに慣れていることが想定されています。

• HTML。 詳細な専門知識は必要ありません。 HTML については説明しませんが、複雑なものを使うこともありません。 役に立つと思われる HTML チュートリアルへのリンクを提供します。
• カスケード スタイル シート (CSS)。 HTML と同じです。
• 基本的なデータベースのアイデア。 データにスプレッドシートを使用し、データの並べ替えとフィルター処理を行っている場合、それがこのチュートリアル セットで一般的に想定されている専門知識のレベルです。

また、基本的なプログラミングの学習に関心があることも想定されています。 ASP.NET Web ページでは、C# と呼ばれるプログラミング言語を使います。 プログラミングの経験はなくてもかまいません。それに興味があれば十分です。 これまでに Web ページで JavaScript を書いたことがあれば、十分な経験をお持ちです。

このチュートリアル セットでは、最初にプログラミング初心者のために基本的な情報を説明しており、その間、プログラミングに慣れている方には進み方が遅く感じるかもしれません。 しかし、最初のいくつかのチュートリアルが済めば、基本的なプログラミングについての説明は減って、速く進むようになります。

必要なもの

次のものが必要です。

• Windows 8、Windows 7、Windows Server 2008、または Windows Server 2012 を実行しているコンピューター。
• ライブ インターネット接続。
• 管理者特権 (インストール プロセスに必要)。

ASP.NET Web ページとは

ASP.NET Web ページは、動的な Web ページの作成に使用できるフレームワークです。 単純な HTML Web ページは静的です。その内容は、ページ内の固定の HTML マークアップによって決まります。 ASP.NET Web ページで作成するもののような動的ページを使うと、コードを使って、その場でページ コンテンツを作成できます。

動的ページを使うと、どのようなことでもできます。 フォームを使ってユーザーに入力を求めてから、ページの表示内容や表示方法を変更できます。 ユーザーから情報を取得し、データベースに保存して、後で一覧表示することができます。 サイトからメールを送信できます。 Web 上の他のサービス (地図作製サービスなど) と対話し、それらのソースからの情報を統合するページを生成できます。

WebMatrix とは

WebMatrix は、Web ページ エディター、データベース ユーティリティ、ページをテストするための Web サーバー、Web サイトをインターネットに発行するための機能が統合されているツールです。 WebMatrix は無料であり、簡単にインストールして使用できます。 (また、プレーンな HTML ページだけでなく、PHP などの他のテクノロジでも機能します)。

実際には、ASP.NET Web ページの作業をするために、WebMatrix を使用する必要があるわけではありません。 たとえば、テキスト エディターを使ってページを作成し、アクセスできる Web サーバーを使ってページをテストできます。 ただし、WebMatrix を使うとすべてがとても簡単になるので、これらのチュートリアル全体を通して WebMatrix を使います。

これらのチュートリアルについて

このチュートリアル セットは、ASP.NET Web ページの使い方についての入門編です。 この入門チュートリアル セットには、全部で 9 つのチュートリアルがあります。 これは、ASP.NET Web ページの初心者が、実際の本格的な Web サイトを作成できるようになるまでをカバーする、一連のチュートリアル セットの一部です。

この最初のチュートリアル セットでは、ASP.NET Web ページに関する作業方法の基本について集中的に説明します。 これが済んだら、このチュートリアル セットが終了した段階から引き続き Web ページをさらに詳しく調べる、追加のチュートリアル セットに取り組むことができます。

意図的に詳細な説明は省いています。 また、このチュートリアル セットでは、何かを説明するときは常に、最も簡単に理解できると思われる方法を選んでいます。 後のチュートリアル セットでは、さらに詳しく説明し、より効率的またはより柔軟なアプローチ (もっと楽しいものでもあります) を示します。 ただし、それらのチュートリアルのためには、まず基本を理解しておく必要があります。

始めたばかりのこのチュートリアル セットでは、ASP.NET Web ページの次の機能について説明します。

• 概要と、すべてのもののインストール。 (今お読みのチュートリアルで行います)。
• ASP.NET Web ページのプログラミングの基本。
• データベースの作成。
• ユーザー入力フォームの作成と処理。
• データベース内のデータの追加、更新、削除。

作成するもの

このチュートリアル セットおよび以降のものは、好きな映画の一覧を表示できる Web サイトを中心に展開します。 映画を入力し、編集して、一覧表示できるようになります。 このチュートリアル セットでは、次の 2 つのページを作成します。 最初に示すのは、これから作成する映画一覧表示ページです。

次に示すのは、新しい映画情報をサイトに追加できるページです。

以降のチュートリアル セットは、このセットを基にして、画像のアップロード、ユーザーのログイン、メールの送信、ソーシャル メディアとの統合などの機能を追加します。

Azure で動いているこのアプリを見る

完成したサイトがライブ Web アプリとして動いているところを見たいですか。 次のボタンをクリックするだけで、完全なバージョンのアプリをご自分の Azure アカウントにデプロイできます。

このソリューションを Azure にデプロイするには、Azure アカウントが必要です。 アカウントをまだ持っていない場合は、次のオプションがあります。

• 無料でAzure アカウントを開く - Azure の有料サービスを試用できるクレジットが提供されます。このクレジットを使い切ってもアカウントは維持されるため、無料の Azure サービスをご利用になれます。
• MSDN サブスクライバーの特典を有効にする - MSDN サブスクリプションにより、有料の Azure のサービスを使用できるクレジットが毎月与えられます。

すべてのインストール

Microsoft の Web Platform Installer を使って、すべてのものをインストールできます。 実際には、インストーラをインストールしてから、それを使って他のすべてのものをインストールします。

Web ページを使うには、少なくてSP3 がインストールされている Windows XP または Windows Server 2008 以降が必要です。

ASP.NET Web サイトの Web ページのページで、[インストール] をクリックします。

WebMatrix をインストールする前に、ライセンス条項とプライバシーに関する声明への同意を求められます。

[実行] をクリックしてインストールを始めます。 (インストーラを保存したい場合は、[保存] をクリックし、保存したフォルダーからインストーラを実行します)。

Web Platform Installer が表示され、WebMatrix をインストールできる状態になります。 [インストール] をクリックします。

インストール プロセスによって、お使いのコンピューターにインストールする必要があるものが特定されて、プロセスが開始されます。 インストールする必要がある内容に応じて、プロセスはすぐに終わることもあれば、数分かかる場合もあります。 [同意する] を選んでライセンス条項に同意します。

WebMatrix の使用開始

インストール プロセスは、完了すると WebMatrix を自動的に起動できます。 そうならない場合は、Windows の [スタート] メニューから [Microsoft WebMatrix] を起動します。

WebMatrix を初めて起動したときに、ご自分の Microsoft アカウントを使って Microsoft Azure にサインインできます。 サインインすると、Azure 経由で 10 個の無料 Web アプリを受け取ります。 これらの無料 Web アプリは、アプリをテストするのに便利です。 Azure アカウントをまだお持ちでなくても、MSDN のサブスクリプションがあれば、MSDN サブスクリプションのベネフィットをアクティブにすることができます。 それ以外の場合は、数分で無料試用版のアカウントを作成することができます。 詳細については、「Azure の無料試用版サイト」を参照してください。

このチュートリアルを続けるために、今すぐサインインする必要はありません。 今すぐサインインしなくても、後でサインインできます。 このチュートリアル シリーズの最後のトピックに、Web サイトを Azure にデプロイする方法の説明があります。そのため、そのトピックを完了するにはサインインする必要があります。

ここでは、Microsoft アカウントでサインインするか、右下隅にある [今はしない] を選びます。

最初に、空の Web サイトを作成して、ページを追加します。 このセットの後のチュートリアルでは、組み込みの Web サイト テンプレートのいずれかを使います。

開始ウィンドウで、[新規] をクリックします。

テンプレートは、さまざまな種類の Web サイト用に事前に構築されているファイルとページです。 既定で利用できるすべてのテンプレートを見るには、[テンプレート ギャラリー] オプションを選びます。

[クイック スタート] ウィンドウで、[ASP.NET] グループから [空のサイト] 選んで、新しいサイトに "WebPagesMovies" という名前を付けます。

次へ をクリックします。

Microsoft アカウントにサインインしている場合は、Azure でサイトを作成できます。 サイトの名前に基づく既定の名前 WebPagesMovies.azurewebsites.net が提案されます。ただし、感嘆符は、この名前が Windows Azure では使用できないことを示します。 わかりやすくするため、今は、[スキップ] を選んで Azure での Web サイトの作成をバイパスします。 このシリーズで後ほど、サイトを Azure に発行します。

WebMatrix によってサイトが作成されて開かれます。

上部には、クイック アクセス ツール バーとリボンがあります。 左下には、タスクを切り替えるワークスペース セレクターがあります ([サイト]、[ファイル]、[データベース]、[レポート])。 右側には、エディターとレポートのためのコンテンツ ペインがあります。 下部には、メッセージの通知バーが表示されることがあります。

WebMatrix とその機能については、これらのチュートリアルを進めながら詳しく学習します。

Web ページの作成

WebMatrix と ASP.NET Web ページに慣れるために、簡単なページを作成します。

ワークスペース セレクターで、[ファイル] ワークスペースを選びます。 このワークスペースでは、ファイルとフォルダーを操作できます。 左側のペインに、サイトのファイル構造が表示されます。 リボンが変化して、ファイル関連のタスクが表示されます。

リボンで、[新規] の下の矢印をクリックしてから、[新しいファイル] をクリックします。

WebMatrix にファイルの種類の一覧が表示されます。 [CSHTML] を選んで、[名前] ボックスに「HelloWorld」と入力します。 CSHTML ページは、ASP.NET Web ページのページです。

OK をクリックします。

WebMatrix によってページが作成され、エディターで開かれます。

ご覧のように、ページに含まれる HTML マークアップはほとんどが通常のものです。ただし、上部のブロックは次のようになっています。

@{ 

}

これは、後で説明するように、コードを追加するためのものです。

ページのさまざまな部分 (要素名、属性、テキスト、上部のブロック) がすべて異なる色になっていることに注意してください。 これは、"構文の強調表示" と呼ばれるもので、簡単にすべてのものを明確に保つことができます。 これは、WebMatrix での Web ページの操作を簡単にする機能の 1 つです。

次の例のように、<head> と <body> 要素の内容を追加します。 (必要に応じて、次のブロックをコピーし、既存のページ全体をこのコードに置き換えるだけでもかまいません)。

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

クイック アクセス ツール バーまたは [ファイル] メニューで、[保存] をクリックします。

ページのテスト

[ファイル] ワークスペースで、HelloWorld.cshtml ページを右クリックして、[ブラウザーで起動] をクリックします。

WebMatrix は、コンピューターでページをテストするために使用できる組み込みの Web サーバー (IIS Express) を起動します。 (WebMatrix の IIS Express がない場合は、テストする前に、Web サーバーにページを発行する必要があります)。ページが既定のブラウザーに表示されます。

WebMatrix でページをテストすると、ブラウザーの URL が http://localhost:33651/HelloWorld.cshtml. のようになることに注意してください。localhost という名前はローカル サーバーを指します。つまり、ページは自分のコンピューター上にある Web サーバーによって提供されます。 なお、WebMatrix には IIS Express という名前の Web サーバー プログラムが含まれており、ページを起動すると実行されます。

localhost の後の番号 (例: localhost:33651) は、コンピューター上の "ポート番号" を表します。 これは、IIS Express がこの特定の Web サイトに使用する "チャネル" の番号です。 ポート番号は、サイトの作成時に 1024 から 65536 の範囲からランダムに選ばれ、作成するサイトごとに異なります。 (独自のサイトをテストする場合、ポート番号はほぼ確実に 33561 とは異なる番号になります)。Web サイトごとに異なるポートを使うことで、IIS Express は通信相手のサイトを識別できます。

後でサイトをパブリック Web サーバーに発行すると、URL に localhost が表示されなくなります。 その時点で、ページの http://myhostingsite/mywebsite/HelloWorld.cshtml といったより一般的な URL が表示されます。 サイトの発行については、このチュートリアル シリーズで後ほどさらに詳しく説明します。

サーバー側コードの追加

ブラウザーを閉じて、WebMatrix のページに戻ります。

次のようなコードになるように、コード ブロックに行を追加します。

@{
   var currentDateTime = DateTime.Now;
}

これはちょっとした Razor コードです。 現在の日時を取得し、その値を currentDateTime という名前の "変数" に格納することは明らかです。 Razor の構文については、次のチュートリアルで詳しく説明します。

ページの本体で、<p>Hello World!</p> 要素の後に以下を追加します。

<p>Right now it's @currentDateTime</p>

このコードは、先頭で currentDateTime 変数に格納した値を取得して、ページのマークアップに挿入します。 @ 文字は、ページ内で ASP.NET Web ページのコードをマークします。

ページをもう一度実行します (WebMatrix は、ページを実行する前に変更を自動的に保存します)。 今回は、ページに日付と時刻が表示されます。

しばらく待ってから、ブラウザーのページを最新の情報に更新します。 日付と時刻の表示が更新されます。

ブラウザーで、ページのソースを見てください。 次のようなマークアップになります。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

先頭の @{ } ブロックがなくなっていることがわかります。 また、日付と時刻の表示で、.cshtml ページにあったような @currentDateTime ではなく、実際の文字列 (1/18/2012 2:49:50 PM など) が示されていることにも注意してください。 何が起きたかというと、ページを実行した時点で、@ でマークされたすべてのコード (この例ではほんの少し) が、ASP.NET によって処理されたのです。 コードによって出力が生成され、その出力がページに挿入されました。

これが ASP.NET Web ページというものです

"ASP.NET Web ページが動的な Web コンテンツを生成する" とは、ここで見てきたようなアイデアのことです。 先ほど作成したページには、以前に見たことがあるものと同じ HTML マークアップが含まれています。 また、あらゆる種類のタスクを実行できるコードを含めることもできます。 この例では、現在の日付と時刻を取得する簡単なタスクを実行しました。 ご覧のように、HTML を含むコードを配置して、ページに出力を生成できます。 誰かがブラウザーで .cshtml ページを要求すると、ASP.NET は Web サーバーの範囲内でページを処理します。 ASP.NET は、コードの出力 (ある場合) を HTML としてページに挿入します。 コードの処理が終わると、ASP.NET は結果のページをブラウザーに送信します。 ブラウザーが受け取るものはすべて HTML です。 次に示すのはその図です。

アイデアは単純ですが、コードで実行できる多くの興味深いタスクがあり、多くの興味深い方法で HTML コンテンツをページに動的に追加できます。 また、ASP.NET の .cshtml ページは、HTML ページと同様に、ブラウザー自体で実行されるコード (JavaScript と jQuery のコード) を含むこともできます。 このチュートリアル セットとその後のもので、これらのことをすべて調べていきます。

この後の内容

このシリーズの次のチュートリアルでは、ASP.NET Web ページのプログラミングについてもう少し調べます。

その他のリソース

ASP.NET の Web サイトを一から作成します。 これは、(ASP.NET Web ページではなく) 特に WebMatrix の使用に関するチュートリアルです。 このチュートリアル セットでは取り上げない WebMatrix の追加機能の一部について、もう少し詳しく説明します。