ホーム ライブラリ ラーニング ダウンロード サポート コミュニティ
サインイン | United States - English | |
このトピックはまだ評価されていません このトピックを評価する

チュートリアル : 新しい ASP.NET Web サイトの作成

このチュートリアルでは、Microsoft Visual Web Developer Express および Microsoft Microsoft Visual Studio 2010 の Web 開発機能の概要について説明します。 ここでは、簡単なページを作成する手順を示します。 さらに、WYSIWYG 形式のビジュアルなデザイナーも紹介します。

このチュートリアルでは、以下のタスクを行います。

このチュートリアルを実行するには、以下が必要です。

前半では、既定のページを使用した ASP.NET Web サイトを作成します。 この Web サイトは、Microsoft Internet Information Services (IIS) を必要としないファイル システム Web サイトです。 この Web サイトでは、コンピューターのローカル ファイル システムでページを作成し、実行できます。

ファイル システム Web サイトは、ユーザーのローカル コンピューター上にある任意のフォルダーに、ページやその他のファイルを格納する Web サイトです。 他の Web サイト オプションには、ローカル IIS Web サイトがあります。この場合は、ローカル IIS ルート (通常は \Inetpub\wwwroot\) のサブフォルダーにファイルが格納されます。 FTP サイトは、ファイル転送プロトコル (FTP: File Transfer Protocol) を使用してアクセスするリモート サーバー上にファイルを格納します。 リモート サイトは、ローカル ネットワーク経由でアクセスできるリモート サーバー上にファイルを格納します。 詳細については、「チュートリアル : Visual Web Developer での FTP による Web サイトの編集」を参照してください。

メモ メモ

Web サイトは、Web アプリケーション プロジェクトを使用する方法でも作成できます。 詳細については、「ASP.NET Web アプリケーション プロジェクト」を参照してください。

ファイル システム Web サイトを作成するには

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが次の図のように表示されます。

    [新しい Web サイト] ダイアログ ボックス スクリーンショット

  3. [インストールされたテンプレート] の [Visual Basic] または [C#] をクリックし、[ASP.NET Web サイト] をクリックします。

  4. [Web の場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダーの名前を入力します。

    たとえば、フォルダー名として「C:\Tasks」と入力します。

  5. [OK] をクリックします。

    Visual Studio によって、レイアウト (マスター ページ、Default.aspx および About.aspx コンテンツ ページ、カスケード スタイル シート)、Ajax (クライアント スクリプト ファイル)、および認証 (メンバーシップ) のためのビルド済みの機能が含まれる Web プロジェクトが作成されます。 プロジェクト テンプレートの選択方法の詳細については、「Web アプリケーション用の Visual Studio プロジェクト テンプレート」を参照してください。

    新しいページが作成されると、既定で Visual Web Developer のソース ビューにそのページが表示され、そこでそのページの HTML 要素を確認できます。 次の図は、ソース ビューに表示された既定の Web ページを示しています。

    ソース ビューの既定ページ

Visual Web Developer の概要

次の手順に進む前に、Visual Web Developer の開発環境について理解しておくと便利です。 次の図は、Visual Web Developer のウィンドウおよびツールの一部を示しています。

Visual Web Developer 環境のダイアグラム

IDE ウィンドウとツールの概略図

上の図を参照して、図中のテキストと次の一覧とを照合してください。以下は、最もよく使用されるウィンドウとツールの一覧です (ここでは、すべてのウィンドウとツールについて説明しているわけではなく、前の図でマークしたものについてのみ説明しています)。

  • ツール バー。 テキストの書式指定、検索などのコマンドを提供します。 一部のツール バーは、デザイン ビューで作業する場合にのみ表示されます。

  • ソリューション エクスプローラー。 Web サイトのフォルダーとファイルを表示します。

  • ドキュメント ウィンドウ。 タブ付きのウィンドウでの作業時にドキュメントを表示します。 タブをクリックすると、ドキュメント間を移動できます。

  • [表示] タブ。 同じドキュメントのさまざまなビューを表示します。 デザイン ビューは、WYSIWYG に近い表示機能を持った編集サーフェイスです。 ソース ビューは、ページのエディターで、マークアップを表示します。 分割ビューには、ドキュメントのデザイン ビューとソース ビューの両方が表示されます。 デザイン ビューとソース ビューの操作方法は、後でこのチュートリアルで説明します。 Web ページをデザイン ビューで開くには、[ツール] メニューの [オプション] をクリックし、[HTML デザイナー] ノードを選択して、[ページを開始するビュー] オプションを変更します。

  • [プロパティ] ウィンドウ。 ページ、HTML 要素、コントロール、およびその他のオブジェクトの設定を変更できます。

  • [CSS のプロパティ] ウィンドウ。 デザイン ビューがアクティブになっているときに、現在の CSS スタイルを表示します。

  • [スタイルの管理] ウィンドウおよび [スタイルの適用] ウィンドウ。 Web サイトの CSS スタイルを制御できます。

  • ツールボックス。 ここに表示されるコントロールと HTML 要素は、ページにドラッグできます。 ツールボックス内の要素は、共通の機能ごとにグループ化されています。

  • データベース エクスプローラー。 データベース接続を表示します。 Visual Web Developer でデータベース エクスプローラーが表示されていない場合は、[表示] メニューの [その他のウィンドウ] をクリックし、[データベース エクスプローラー] をクリックします。

    メモ メモ

    Visual Web Developer の [データベース エクスプローラー] ウィンドウは、完全版の Visual Studio ではサーバー エクスプローラーという名前になります。

これらのウィンドウは、使いやすいように再整列、サイズ変更、およびドッキングできます。 [表示] メニューからは、追加のウィンドウを表示できます。

開発環境の操作方法を確認するには

  1. [表示] メニューの [ツール バー] をクリックします。

    使用できるツール バーのサブメニューが表示されます。 現在表示されているツール バーの選択項目の横には、チェック ボックスが表示されています。

  2. ツール バーの一覧の一番下へスクロールし、[ユーザー設定] をクリックします。

    [ユーザー設定] ダイアログ ボックスが表示されます。

  3. 使用できるツール バーを確認します。 終了したら、[閉じる] をクリックします。

  4. [表示] メニューの [ソリューション エクスプローラー] をクリックします。

    [ソリューション エクスプローラー] ウィンドウが表示されます。 既定では、このウィンドウは Visual Web Developer 環境の一方の端にドッキングされます。

  5. ソリューション エクスプローラーで、サイトの一覧の一番上にある項目を右クリックします。

    よく使用される Web サイトの操作のショートカット メニューが表示されます。

  6. Esc キーを押してショートカット メニューを閉じます。

  7. ソリューション エクスプローラーで、Web.config ファイルを右クリックし、[開く] をクリックして、このファイルをドキュメント ウィンドウで開きます。

  8. Default.aspx ページをダブルクリックして、このページをドキュメント ウィンドウで開きます。 ファイルをダブルクリックすると、ショートカット メニューの [開く] を使用した場合と同じ操作を実行できます。

    開いている各ページの名前が、ドキュメント ウィンドウの上部にあるタブに表示されます。

  9. ドキュメント ウィンドウの下部にある [分割] をクリックして、ソース ビューとデザイン ビューを同時に表示します。

  10. [表示] メニューの [プロパティ ウィンドウ] をクリックします。

    [プロパティ] ウィンドウが表示されます。

    ドキュメント ウィンドウでオブジェクトを選択すると、選択したオブジェクトのプロパティが [プロパティ] ウィンドウに表示されます。

  11. ソース ビューのペインで最初の a (アンカー) 要素を選択し、[プロパティ] ウィンドウで、使用できるプロパティを確認します。

  12. [表示] メニューの [ツールボックス] をクリックします。

    [ツールボックス] ウィンドウが表示されます。

  13. デザイン ビューで、ツールボックスの [標準] タブから、Button コントロールをドキュメントにドラッグし、Default.aspx ページの下部にドロップします。

    ソース ビューが更新され、該当するマークアップが追加されます。

  14. [表示] メニューの [サーバー エクスプローラー] をクリックします。

    [サーバー エクスプローラー] ウィンドウが表示されます。

    メモ メモ

    完全版の Visual Studio の [サーバー エクスプローラー] ウィンドウは、Visual Web Developer では [データベース エクスプローラー] という名前になります。

  15. [データ接続] を右クリックして、使用できるデータベース オプションを確認します。

ASP.NET Web ページの作成

新しい Web サイトを作成すると、Visual Web Developer によって Default.aspx という ASP.NET Web ページ (Web フォーム ページ) が作成されます。 Default.aspx ページは、Web サイトのホーム ページとして使用できます。 ただし、このチュートリアルでは、別に新しいページを作成して作業します。

Web サイトに新しいページを追加するには

  1. ドキュメント ウィンドウで、Default.aspx ページのタブを右クリックし、[閉じる] をクリックします。

  2. 変更を保存するかどうかを確認するメッセージが表示された場合は、[いいえ] をクリックします。

  3. ソリューション エクスプローラーで、Web サイト ([C:\Tasks] など) を右クリックし、[新しい項目の追加] をクリックします。

    [新しい項目の追加] ダイアログ ボックスが表示されます。

  4. テンプレートの一覧で、[Web フォーム] をクリックします。

  5. [名前] ボックスに「Home.aspx」と入力します。

  6. [別のファイルにコードを書き込む] チェック ボックスをオフにします。

    このチュートリアルでは、新しいページをマスター ページにリンクしません。

    次の図は、[新しい項目の追加] ダイアログ ボックスを示しています。

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

  7. [追加] をクリックします。

    Visual Web Developer によって新しいページが作成されます。 既定では、ページはソース ビューで表示されます。

ページへの HTML の追加

ここでは、新しい静的テキストをページに追加する方法を説明します。

テキストをページに追加するには

  1. ドキュメント ウィンドウの下部にある [デザイン] タブをクリックして、デザイン ビューに切り替えます。

  2. ページに「To-Do List」と入力します。

ページの実行

次の手順に進む前に、テストを行うことができます。 ページを実行するには、Web サーバーが必要です。 実際に使用する Web サイトでは、IIS を Web サーバーとして使用します。 ただし、ページをテストするときには、ローカルで実行している ASP.NET 開発サーバーを使用するので、IIS は必要ありません。 ファイル システム Web サイトの場合、Visual Web Developer の既定の Web サーバーは ASP.NET 開発サーバーです。

ページを実行するには

  1. Ctrl キーを押しながら F5 キーを押してページを実行します。

    Visual Web Developer によって ASP.NET 開発サーバーが起動されます。 Windows ツール バーには、次の図に示すように、Visual Web Developer の Web サーバーが実行中であることを示すアイコンが表示されます。

    開発 Web サーバー アイコン

    ブラウザーにページが表示されます。 作成したページの拡張子は .aspx ですが、通常の HTML ページと同じように表示できます。

    メモ メモ

    ブラウザーにエラー 502、またはページを表示できないことを意味するエラーが表示されたときは、ローカルの要求に対してプロキシ サーバーを使用しないようにブラウザーを構成するとエラーを解決できます。 詳細については、「方法 : ローカル Web 要求に対してプロキシ サーバーをバイパスする」を参照してください。

  2. ブラウザーを閉じます。

このチュートリアルでは、Visual Web Developer の基本的な機能について説明しました。

ファイルをより細かく管理するには、Visual SourceSafe などのソース管理システムに Web サイトのファイルを格納することを検討してください。 詳細については、「ソース管理の概要」を参照してください。

この情報は役に立ちましたか。
(残り 2000 文字)
コミュニティ コンテンツ 追加
注釈 FAQ