Changes between Version 5 and Version 6 of HowTo/VisualStudioWeb2013Tutorial

Timestamp:

Aug 30, 2014, 11:02:53 PM (10 years ago)

Author:

村山 俊之

Comment:

--

HowTo/VisualStudioWeb2013Tutorial

@@ -86 +86 @@
 [[Image(fig-default-index.PNG, 640px, align=center)]]
 
-実行するブラウザを選んで実行することもできます。ツールバーにブラウザ名 (最初はおそらく「Internet Explorer」となっているでしょう) が表示されている箇所がありますよね? その右端の小さい「▼」印をクリックすると、ブラウザの選択肢がドロップされます。
+ブラウザを選んで実行することもできます。ツールバーにブラウザ名 (最初はおそらく「Internet Explorer」となっているでしょう) が表示されている箇所がありますよね? その右端の小さい「▼」印をクリックすると、ブラウザの選択肢がドロップされます。
 
 [[Image(fig-select-browser.PNG, align=center)]]
 
+=== 共通レイアウト ===
+
+ブラウザを見てみましょう。 ASP.NET について色々と書かれたページが表示されています。ページの最上部に「アプリケーション名」、「ホーム」、「詳細」、「連絡先」と書かれたリンクボタンがあります。「アプリケーション」と「ホーム」は今表示しているページヘのリンクですが、のこり 2つは別のページヘのリンクです。それぞれクリックしてみましょう。「詳細」からは About ページに、「連絡先」からは「Contact.」ページに遷移します。
+
+これら 3つのページで見た目が共通している部分があるのがわかるでしょうか? そう、ページ最上部のリンクボタンが並んでいる黒い部分と、ページ末尾の「©2014」から始まる表示の部分です。これらは基本的にはサイト全体で共通するレイアウトとして使われている部分です。
+
+Visual Studio を見てみましょう。ソリューションエクスプローラーのツリーが表示されていますね。 Web ブラウザー上での見た目の部分を定義しているファイルは、この中の「Views」フォルダーの中に収められています。その中の、「Shared」フォルダーを展開すると、中に「_Layout.cshtml」というファイルがあるので、ダブルクリックして開いてみましょう。このファイルが、共通レイアウトファイルで、この中のとある箇所に、そのページで実際に表示したい内容が挿入されたものが、 Web ブラウザーに送られて表示されるようになっています。
+
+=== ページを追加する ===
+
+とりあえず共通レイアウトはそのまま放っておいて、まずは「Hello, World」を表示するためのページをこのサイトに追加してみましょう。それには以下の 2つの操作が必要です。
+
+ 1. View のファイルを追加する
+ 1. 該当する Controller メソッドを追加する
+
+==== View の追加 ====
+
+まず、View にファイルを追加します。ソリューションエクスプローラーにて、ツリーの「View」→「Home」フォルダを右クリックしてみてください。
+
+[[Image(fig-append-view-01.PNG), 640px, align=center)]]
+
+コンテキストメニューにて、「追加」→「ビュー」を選択します。
+
+[[Image(fig-append-view-02.PNG), align=center)]]
+
+ビュー名は「Hello」とでもしておきましょう。
+
+テンプレートは「Empty (モデルなし)」のままで ok です。
+
+オプションの「部分ビューとして作成」はチェックを外しておきます。このオプションは、このビューを他のビューの一部分として使用する場合に使用します。単独のページとして使用する場合はチェックを入れません。
+
+「レイアウトページの使用」は、まさに先ほど紹介した「_Layout.cshtml」を使用するかどうかということです。これはチェックを入れておきます。その下の空欄はレイアウトページに使用するファイルを指定するものですが、そのさらに下にある但し書きの条件にまさに合致するケースになりますので、ここは空欄にしておきます。
+
+「追加」ボタンを押すと、 View/Home フォルダの下に、 Hello.cshtml というファイルが追加され、そのファイルがエディタで開いた状態になります。コードは以下の様な内容になっているはずです。
+
+{{{#!text/html
+@{
+    ViewBag.Title = "Hello";
+}
+
+<h2>Hello</h2>
+}}}
+
+"@{" ～ "}" の中には、サーバーサイドで実行する C# のコードを書きます。ここでは、変数 ViewBag が持つオブジェクトの Title フィールドに、文字列 "Hello" を代入しています。実はこの ViewBag.Title は、先に見た共通レイアウトファイル「_Layout.cshtml」の中で参照していて、そのままページのタイトルとして使用されています。
+
+つまり、この部分を、
+
+{{{#!text/html
+@{
+    ViewBag.Title = "Hello, World";
+}
+}}}
+
+に置き換えてしまえば、そのままページのタイトルも「Hello, World」に置き換わるというわけです。
+
+そのあとの HTML っぽく書かれた行は、まさにこのページに出力する HTML そのものです。なのでここも、
+
+{{{#!text/html
+<h2>Hello, World</h2>
+}}}
+
+としてしまえば、ページにもそのまま「Hello, World」が表示される、というわけです。
+
+==== Controller メソッドの追加 ====
+
+次の段階に進みましょう。ページを追加する際、そのページに相当する View を追加したら、その View に対応する Controller メソッドを追加して上げる必要があります。 Controller は何をするところかというと、ページに表示すべき情報を View が扱いやすいように直したり、ユーザー操作によって追加または変化する情報 (フォーム入力とかクッキーとか) に応じて何らかの処理を行ったり、といったようなことを行います。
+
+今回、 View は Home フォルダの下に Hello という名前で追加したので、対応する Controller メソッドは !HomeController クラスの Hello メソッドということになります。まず、 !HomeController クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 HomeController.cs ファイルが存在するので、このファイルをダブルクリックしてエディターにて開きます。
+
+[[Image(fig-home-controller.PNG, align=center)]]
+
+ファイルの内容は以下のようになっているはずです。
+
+{{{#!cs
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Mvc;
+
+namespace HelloWorld.Controllers
+{
+    public class HomeController : Controller
+    {
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        public ActionResult About()
+        {
+            ViewBag.Message = "Your application description page.";
+
+            return View();
+        }
+
+        public ActionResult Contact()
+        {
+            ViewBag.Message = "Your contact page.";
+
+            return View();
+        }
+    }
+}
+}}}
+
+純然たる C# プログラムです。 C# 自体の経験がない方のために解説すると、最初の "using" で始まる行は、ライブラリを使用しやすくするために名前空間を展開する宣言です。例えば、ここに
+
+{{{#!cs
+using System.Text;
+}}}
+
+という行を加えると (今回は加えなくてもいいですよ)、文字列を少しずつ繋いで生成していくためのライブラリクラス [http://msdn.microsoft.com/ja-jp/library/system.text.stringbuilder%28v=vs.110%29.aspx System.Text.StringBuilder] を、単に "!StringBuilder" と書くだけで使用できるようになります。次に "namespace" で始まる行は、こういう名前の名前空間を作るよ、という宣言です。つまり、この後定義されている !HomeController クラスの本当の名前は、ここで宣言した名前空間の名前を手前につないだ "!HelloWorld.Controllers.!HomeController" ですよ、ということになるわけです。
+
+名前空間という言葉がここまでに何回か出てきましたが、この概念の存在意義については自分で調べてみましょう。大雑把に言ってしまえば、要するに名前の衝突を防ぐための仕組みであるということになります。
+
+"public class" で始まる行が、ここで作ろうとしているクラスの宣言です。 "!HomeController" がこのクラスの名前で、コロン ":" を挟んで後ろにある "Controller" というのは、このクラスが継承する基底クラスになります。これはつまり、 !HomeController クラスは、 Controller クラスが持つ機能をそのまま継承して実装されるよ、というような意味合いになります[[FootNote(この Controller というクラスがどんな機能を提供してくれているのかについては、 MSDN Library では[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.controller%28v=vs.118%29.aspx この辺]に記述されています。)]]。
+
+"public !ActionResult" で始まる行は、このクラスに所属するメソッドです。 ASP.NET MVC の Controller クラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応する Controller メソッドを追加したいので、ここにある "Index" メソッドの実装を参考に、以下のように "Hello" メソッドを追加してみてください。
+
+{{{#!cs
+        // これの真似をして
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        // こんなふうに書く
+        public ActionResult Hello()
+        {
+            return View();
+        }
+}}}
+
+[[FootNote]]
+
+==== 動かしてみる ====
+
+とりあえずここまでで準備は完了です。それでは、エディタのタブを切り替えて、ビューのファイル Hello.cshtml を表示した状態にした上で、 Ctrl + F5 キーを押して実行してみましょう。ビルドが実行され、下の図のような画面がブラウザ上で表示されたならば、成功です。
+
+[[Image(fig-hello-page-01.PNG, 640px, align=center)]]
+