http://pronama.azurewebsites.net/2015/04/11/asp-net-beginner-seminar-slide/

1. はじめての ASP.NET MVC
2015/4/11
ASP.NET 初心者勉強会
@jz5（プロ生）

2. 自己紹介
• @jz5
• プロ生ちゃんP
• ASP.NET 初心者
• 運営
– プログラミング生放送
– IT 勉強会スタンプラリー

3. 今回の内容
• 扱うこと
– ASP.NET MVC で Web サイトを作る
– ○○すれば□□ができるみたいな
• 扱わないこと
– MVC とはみたいな
– ○○すればどういう仕組みで□□が実現できているみたいな

4. 対象
• 環境
– Visual Studio 2013/2015 CTP 5
• 対象者
– ASP.NET MVC でサイトを作ったことないひと
– プログラミングある程度できるひと

5. 注意
• 実際にサイトを作って理解したことを書いています。細
かな定義や意味合いは異なるかも。
• 次期 ASP.NET MVC はどうなるか知りません

6. ASP.NET MVC で作ったサイト紹介
• IT 勉強会スタンプ
• パスワードを平文で送ってくるっぽいサイトまとめ
• リツイート直後のツイートを表示するやつ
• timg: Twitter 画像検索・画像一覧
• その他 画像ジェネレーター系や
プレゼント応募フォームなど

7. IT勉強会スタンプ
• Git リポジトリ
– https://github.com/jz5/it-stamp
• 関連技術
– SQL Server
– Azure Web アプリ
• ASP.NET 機能
– ユーザー認証
– Facebook/Twitter/Google サインイン
– Role 機能
– メール機能
– （ツイート機能）※ ASP.NET の仕組みとは直接関係なし

8. プロジェクトの作成

9. プロジェクト新規作成
1. Visual Basic/C# → Web
→ ASP.NET Webアプリケーションプロジェクト
2. 「MVC」選択
3. 「認証の変更」
– 「認証なし」
– 「個人ユーザー アカウント」： SQL Server を使ったユーザー情
報を保存する仕組みが使える。Twitter/Facebook/Google など
のサインイン機能も使える。
※ SNS サインイン機能だけ使って情報を保存しない場合は「認証な
し」から始めた方が良いかも

10. プロジェクトを作成したら
• NuGet パッケージの管理からプログラムを更新しておく
ちなみにプロジェクトサイズは80MBぐらい

11. プロジェクトの構成
• ルーティング
• コントローラー
• ビュー

12. ルーティング
• App_Start/RouteConfig.cs で URL の構成を決める
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index",
id = UrlParameter.Optional }
);
デフォルト
http://localhost/Account/Login?returnUrl=/Home
{コントローラー名} {アクション名} {オプションのパラメーター}
→ アクセスすると AccountController クラスの
Login メソッドを実行

13. ルーティング
• http://localhost/Event/1 のようにアクセスしたい
routes.MapRoute(
name:"Events",
url:"Events/{id}",
defaults:new {controller = "Events", action = "Details"},
constraints: new {id = "¥¥d+"}
);
Events/{id} のアクセスは
コントローラーとアクションを固定
追記

14. コントローラー
• HTTP リクエストを処理して表示するビューを決める
• Controllers フォルダーにある
– AccountController.cs
– HomeController.cs
– ManageController.cs
※ 「個人ユーザー アカウント」で作成した場合

15. コントローラー
• AccountController.cs
[AllowAnonymous]
public ActionResult Login(string returnUrl)
{
ViewBag.ReturnUrl = returnUrl;
return View();
}
Account/Login に GET アクセスしたときに実行される
Account/Login?returnUrl=/Home のようなアクセスは
引数 returnUrl に /Home が入っている

16. コントローラー
• AccountController.cs
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{
...
}
Account/Login に POST アクセスしたときはこっちが実行される
[HttpPost] 属性で POST アクセスを指定

17. コントローラー
• ビューを返す
public ActionResult Login(string returnUrl)
{
ViewBag.ReturnUrl = returnUrl;
return View();
}
return View("Error");
return RedirectToAction("Index", "Home");
→ Account/Login ビューを表示
→ Account/Error ビューを表示
→ Home/Index にリダイレクト

18. ビュー
• 表示する ページ（HTML + α）
• コントローラーからデータを受け取る
（コントローラでビューにデータを指定していた場合）
• Views フォルダーにある
– Account/Login.cshtml など
• コントローラーで Account/Login ビューを返すと
このファイルの内容が表示/実行される
• Razor 記法で記述
– HTML の中にロジックなどを埋め込める

19. Razor 記法
• 「ASP.NET Razor」で検索
• ポイント的なところ
– @model LoginViewModel
• コントローラーから受け取った LoginViewModel クラスのオブジェクト
– 親レイアウトなどテンプレート化できる（されている）
• Shared/_Layout.cshtml（@RenderBody() に子のビューを表示）
– Html ヘルパーで HTML を短く書ける
<input class="form-control" data-val="true" data-val-email="電子メール フィールドは有効な電子メール
アドレスではありません。" data-val-required="電子メール フィールドが必要です。" id="Email"
name="Email" type="text" value="" />
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
→

20. ここまでのまとめ
• ルーティングで指定したコントローラーのアクション（メソッ
ド）が実行される
• コントローラーは要求を処理して表示するビューを決める
– 要求をもとにデータベースにアクセスしてなんやらしたりする
• ビューはコントローラーのデータを受け取って Web ページを表
示する

21. モデルを操作する
• モデルと Code First
• モデルを作成
• Code First で DB のテーブル作成
• モデルを操作する
コントローラーとビューの作成

22. モデル
• Web アプリで扱うデータ（DB に格納するデータ）
– ユーザー情報など

23. Code First
• DB のテーブルをコードから作る方法
– 特別な専用のコードではなく通常のクラスを記述する
– 記述したクラスはアプリでそのまま使える

24. モデル作成
• 例：イベント情報
• Models/Events.cs
public class Event
{
[Key]
public int Id { get; set; }
[Required]
public string Name { get; set; }
public DateTime StartDateTime { get; set; }
}

25. モデル作成
• DB に格納するモデルは ApplicationDbContext クラ
スで操作する
• Models/IdentityModels.cs の
ApplicationDbContext クラスに追記
public DbSet<Event> Events { get; set; }

26. DB のテーブル作成
1. プロジェクトのビルド
2. パッケージマネージャー コンソール表示
– [ツール]-[NuGet パッケージマネージャー] から
3. Enable-Migrations コマンド実行
– メッセージ「Code First Migrations がプロジェクト○○で
有効になりました。」
– Migrations/Configuration.cs ができている

27. DB のテーブル作成
4. Configuration.cs
– AutomaticMigrationsEnabled = true; に修正
5. Update-Database コマンド実行
– DB の構成変更完了

28. Configuration.csとUpdate-Database
• Configuration クラスの Seed メソッド
– Update-Database 実行時に処理する内容を記述できる
• 初期ユーザーの生成など
• Update-Database
– モデルを修正するたびに実行
– DB のデータ内容を維持してテーブル構造をモデルに合わせる
– データ内容を維持できない場合は –force パラメーターを付けて実
行（必要なときは実行時にメッセージが表示される）
– App_Data フォルダーにある .mdf ファイルを削除して作り直すの
もアリ

29. コントローラーとビューの作成
1. ソリューションエクスプローラー Contollers コンテキストメ
ニュー [追加]-[コントローラー]
2. 「Entity Framework を使用した、ビューがある MVC 5 コン
トローラー」を「追加」
3. データコンテキスト クラスで「ApplicationDbContext」選択
4. モデル クラスで「Event」選択して「追加」
→ Contollers/EventContoller.cs と Views/Events が生成
Event の一覧・表示・作成・編集・削除が可能なコードが
生成されているので，これを元にアプリに必要な処理を実装していく

30. Events/Index 一覧表示
• コントローラー： DB の内容をビューに渡す
public ActionResult Index()
{
return View(db.Events.ToList());
} ※ db: new ApplicationDbContext
• ビュー
– @model IEnumerable<Models.Event> 扱うモデルの型を指定
– @foreach (var item in Model) { ... } 一覧表示
• 「Model」で参照できる

31. Events/Create 作成（ビュー側）
• ビュー
– @model Models.Event：扱うモデルの型
– フォームの作成
@using (Html.BeginForm())
{
...
@Html.EditorFor(model => model.Name, ...)
@Html.ValidationMessageFor(model => model.Name, "“, ...)
...
}

32. Events/Create 作成（コントローラー側）
• コントローラー
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Event @event)
{
if (ModelState.IsValid)
{
db.Events.Add(@event);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(@event);
}
<input id="Name" name="Name" type="text" value="勉強会" />
input の値がプロパティに設定された
event オブジェクトとして受け取れる
モデルバインディング

33. モデルバインディング
• 「ASP.NET モデルバインディング」で検索
• Events/Createでは ビュー側の @model とコントロー
ラー側のメソッドの引数 events の型が一致していたが，
一致している必要はない
– リクエストデータは，一致する引数名やクラスのプロパティ名
の値に設定される

34. ユーザー認証（サインイン機能）
ASP.NET Identity

35. ASP.NET Identity
• 「ASP.NET Identity」で検索
• ASP.NET の認証や資格管理のシステム
• いろいろな仕組みを提供してカスタマイズや独自実装が可能

36. ユーザー認証の機能（1/2）
• ユーザー認証の仕組みが実装されている
– デフォルトはメールアドレスを一意なユーザー名として使用
– DB にユーザー情報を格納（AspNet から始まるテーブル名）

37. ユーザー認証の機能（2/2）
• 枠組みだけ用意されている機能
– メールによるパスワードリセットなど
• メールを送信する部分は要実装
– 2段階認証（使ったことないけど）
• SMS 部分は要実装
– Facebook/Twitter/Google アカウントによるログイン
• 各サービスの ID/Secret key を指定すれば使える
– Role の実装（管理者ユーザー権限などを付けたい場合）
• 生成されるコードにサンプルコードは記述されていない
– ApplicationRoleManager, RoleManager などで検索
– IT 勉強会スタンプは実装している

38. 枠組みだけ用意されている機能の実装
• App_Start/IdentityConfig.cs の編集
– EmailService クラスの実装など
• App_Start/Startup.Auth.cs の編集
– Facebook/Twitter/Google ID, Secret key 指定など

39. ユーザー情報のカスタマイズ
• ApplicationUser クラス（IdentifyModels.cs）に
プロパティを追加して Update-Database 実行
– AspNetUsers テーブルに追加される

40. ユーザー認証のカスタマイズ
• ユーザー名の設定やメールアドレスまたはユーザー名で
サインイン可能にするなど
• AccountContoller などの編集（自分で実装）
– ユーザーの登録処理などは AccountContoller に記述されて
いる。デフォルトのユーザー認証の機能を確認して、少しずつ
修正していくといいと思う。

41. Azure Web アプリで公開

42. Azure Web アプリ（旧 Azure Websites ）
• 「Azure Web アプリ」で検索
• 使うポイント
– Visual Studio から簡単に Web アプリとして公開可能
• データベースの新規作成，Code First 実行（DB 構造の変更）なども
可能
– Visual Studio でリモートデバッグ可能

43. 発行
• ソリューションエクスプローラーのプロジェクト コンテキストメ
ニュー[発行]
• 「Microsoft Azure Websites」から「新規」を選択

44. いろいろなトピック
細かなことはサイト参照や
検索してください

45. 複雑なモデル
• プロパティがクラス（プリミティブ型でない）
– virtual 修飾子が必要
• 多対多の関係
– マッピングの記述が必要
• 参考「コード・ファースト開発の基本」
– http://blog.shibayan.jp/entry/20101014/1287061553

46. .mdf を削除したら再度作れなくなった
• LocalDb インスタンスを終了させるコマンド
– sqllocaldb stop v11.0
– sqllocaldb delete v11.0
• http://adamstephensen.com/2014/03/06/entity-framework-code-first-
delete-a-localdb-instance/

47. HTTPS にする
1. プロジェクトのプロパティウィンドウ「開発サーバー」
1. 「SSL 有効」を True
2. 「SSL URL」をコピー
2. プロジェクトのプロパティ「Web」の「プロジェクトの
URL」にペースト
3. コントローラー クラスまたはそのメソッドに
[RequireHttps] 属性を付け HTTPS のみ許可する

48. CSRF 対策
• 生成されるコードは既にされている
• ビュー側
– form 内に @Html.AntiForgeryToken() 記述
• コントローラー側
– メソッドに [ValidateAntiForgeryToken] 属性

49. アクセス許可設定
• コントローラーのクラスやメソッドに属性を指定
– 誰でもアクセスできる
• [AllowAnonymous]
– サインインしたユーザーのみアクセスできる
• [Authorize]
– 「Admin」Role ユーザーのみアクセスできる
• [Authorize(Roles="Admin")]

50. Ajax で POST 処理
• NuGet パッケージ
「Microsoft.jQuery.Unobtrusive.Ajax」追加
• ビュー
– Html.BeginForm → Ajax.BeginForm に変更（パラメー
ターも要修正）
– JavaScript でデータ受け取り，表示反映などの処理が必要
• コントローラー
– ビューではなくJSON データを返すよう修正

51. JSON データを返す
• return Json(object_data);
– 匿名クラスでも通常のクラスのオブジェクトでも JSON に変
換して返す
• Ajax によるアクセスか判定は Request.IsAjaxRequest()

52. ツイート機能をつけたい
• ID/Secret key 指定のみではサインインできるだけ
• ツイートする仕組みなどを実装するにはサインイン時に
アクセストークンなども受け取るよう
TwitterAuthenticationProvider の指定が必要（次
スライド）
– 追加情報は DB に保存される（AspNetUserClaim テーブル）

53. TwitterAuthenticationProvider の指定
app.UseTwitterAuthentication(
new TwitterAuthenticationOptions()
{
ConsumerKey = "**TwitterConsumerKey**",
ConsumerSecret = "**TwitterConsumerSecret**",
Provider = new TwitterAuthenticationProvider()
{
OnAuthenticated = async (context) =>
{
context.Identity.AddClaim(new Claim(
"urn:tokens:twitter:accesstoken", context.AccessToken));
context.Identity.AddClaim(new Claim(
"urn:tokens:twitter:accesstokensecret", context.AccessTokenSecret));
}
}
});
参考： http://blogs.msdn.com/b/tsmatsuz/archive/2014/06/16/asp-net-identity-get-claim-scope-and-access-
token-using-external-login-of-google-facebook-twitter-microsoft-account.aspx

54. Claim 情報の取得
var accsessTokenClaim =
HttpContext.GetOwinContext().GetUserManager<ApplicationUserManager>().GetClaims("use
rId").FirstOrDefault((x) => x.Type == "urn:tokens:twitter:accesstoken");

55. Twitter ライブラリー
• CoreTweet などの NuGet パッケージを追加して
ツイート処理を実装

56. DB なしで Twitter サインイン機能だけ実装
• 「認証なし」のプロジェクトを作成
• 必要な NuGet パッケージを追加
– Microsoft.Owin
– Microsoft.Owin.Host.SystemWeb
– Microsoft.Owin.Security
– Microsoft.Owin.Security.Cookies
– Microsoft.Owin.Security.Twitter
– Owin
• Startup.Auth.cs, Startup.cs, Controller の実装
• 参考「Using Owin External Login without ASP.NET Identity」
– http://coding.abel.nu/2014/11/using-owin-external-login-without-asp-net-identity/
– Global.aspx Application_Start() に AntiForgeryConfig.UniqueClaimTypeIdentifier =
ClaimTypes.Name; 追記

57. Azure Web アプリ関連いろいろトピック

58. 日時と言語
• UTC
• en-US
• web.config で変更不可

59. ログの取得
• アクセスログはデフォルトで保存されていない
• 旧 Portal の Web アプリの「構成」の「サイト診断」の
「Web サーバーのログ記録」で有効化できる

60. 実際にあったこと： 現象と原因
• 現象
• 旧 Azure Portal のダッシュボードで見ると大量の HTTP サーバーエ
ラーが発生
– 原因（アクセスログを確認して判明）
• コントローラーに引数が必要なアクションを用意していた（パラメー
ターが必要な URL）
– 引数なしの場合は HTTP エラーを返していた
• Google のクローラーがパラメーターなしの URL にアクセスしていた

61. リモートデバッグ
• 「Visual Studio で Azure のプロジェクトを Remote
Debug する」
• http://blogs.msdn.com/b/tsmatsuz/archive/2013/01/31/windo
ws-azure-remote-debug-using-visual-studio-2012.aspx

62. オマケ： アプリを完成させるには

63. 細かいことを気にしない
• とりあえず動くものを公開する
• 気になりそうなところ
– 変数名・関数名・クラス構造 その他もろもろ
– JSON でデータ返したら camel case 一致してない
• C#/VB → Upper Camel Case, JSON → snake_case
– Ajax で表示更新を実装したら cshtml と JavaScript コード
に似たような HTML 記述ができている
– コントローラーに async メソッドとそうでないメソッドが混
在

64. コントローラー内の async メソッドの必要性
• メソッド内で IO 処理を並列にするなど await 呼び出し
を使う必要がなければ不要
• by @shibayan（ASP.NET MVP)

65. アプリが完成したら
• ニュースリリースを送る
– 「リツイート直後のツイートを表示するやつは」GIGAZINE と
ねとらぼ に送付
• Web アプリを紹介するサイトに登録

66. まとめ
• プロジェクトの構成
– ルーティング，コントローラー，ビュー
• モデルの操作
– Code First, コントローラーとビューの生成
• ユーザー認証
– 実装・用意されている仕組み，カスタマイズ方法
• Azure Web アプリへ発行
• その他の機能の実装方法など

67. 以上で…
• サインインユーザーだけがイベント情報を登
録/編集できるサイト
• 登録時に情報をツイートする機能
• …というようなサイトは作れるかも

68. ご清聴ありがとうございました
2015/4/11
ASP.NET 初心者勉強会
@jz5（プロ生）