O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

はじめての ASP.NET MVC

7.389 visualizações

Publicada em

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

Publicada em: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

はじめての ASP.NET MVC

  1. 1. はじめての ASP.NET MVC 2015/4/11 ASP.NET 初心者勉強会 @jz5(プロ生)
  2. 2. 自己紹介 • @jz5 • プロ生ちゃんP • ASP.NET 初心者 • 運営 – プログラミング生放送 – IT 勉強会スタンプラリー
  3. 3. 今回の内容 • 扱うこと – ASP.NET MVC で Web サイトを作る – ○○すれば□□ができるみたいな • 扱わないこと – MVC とはみたいな – ○○すればどういう仕組みで□□が実現できているみたいな
  4. 4. 対象 • 環境 – Visual Studio 2013/2015 CTP 5 • 対象者 – ASP.NET MVC でサイトを作ったことないひと – プログラミングある程度できるひと
  5. 5. 注意 • 実際にサイトを作って理解したことを書いています。細 かな定義や意味合いは異なるかも。 • 次期 ASP.NET MVC はどうなるか知りません
  6. 6. ASP.NET MVC で作ったサイト紹介 • IT 勉強会スタンプ • パスワードを平文で送ってくるっぽいサイトまとめ • リツイート直後のツイートを表示するやつ • timg: Twitter 画像検索・画像一覧 • その他 画像ジェネレーター系や プレゼント応募フォームなど
  7. 7. IT勉強会スタンプ • Git リポジトリ – https://github.com/jz5/it-stamp • 関連技術 – SQL Server – Azure Web アプリ • ASP.NET 機能 – ユーザー認証 – Facebook/Twitter/Google サインイン – Role 機能 – メール機能 – (ツイート機能)※ ASP.NET の仕組みとは直接関係なし
  8. 8. プロジェクトの作成
  9. 9. プロジェクト新規作成 1. Visual Basic/C# → Web → ASP.NET Webアプリケーションプロジェクト 2. 「MVC」選択 3. 「認証の変更」 – 「認証なし」 – 「個人ユーザー アカウント」: SQL Server を使ったユーザー情 報を保存する仕組みが使える。Twitter/Facebook/Google など のサインイン機能も使える。 ※ SNS サインイン機能だけ使って情報を保存しない場合は「認証な し」から始めた方が良いかも
  10. 10. プロジェクトを作成したら • NuGet パッケージの管理からプログラムを更新しておく ちなみにプロジェクトサイズは80MBぐらい
  11. 11. プロジェクトの構成 • ルーティング • コントローラー • ビュー
  12. 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. 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. 14. コントローラー • HTTP リクエストを処理して表示するビューを決める • Controllers フォルダーにある – AccountController.cs – HomeController.cs – ManageController.cs ※ 「個人ユーザー アカウント」で作成した場合
  15. 15. コントローラー • AccountController.cs [AllowAnonymous] public ActionResult Login(string returnUrl) { ViewBag.ReturnUrl = returnUrl; return View(); } Account/Login に GET アクセスしたときに実行される Account/Login?returnUrl=/Home のようなアクセスは 引数 returnUrl に /Home が入っている
  16. 16. コントローラー • AccountController.cs [HttpPost] [AllowAnonymous] [ValidateAntiForgeryToken] public async Task<ActionResult> Login(LoginViewModel model, string returnUrl) { ... } Account/Login に POST アクセスしたときはこっちが実行される [HttpPost] 属性で POST アクセスを指定
  17. 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. 18. ビュー • 表示する ページ(HTML + α) • コントローラーからデータを受け取る (コントローラでビューにデータを指定していた場合) • Views フォルダーにある – Account/Login.cshtml など • コントローラーで Account/Login ビューを返すと このファイルの内容が表示/実行される • Razor 記法で記述 – HTML の中にロジックなどを埋め込める
  19. 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. 20. ここまでのまとめ • ルーティングで指定したコントローラーのアクション(メソッ ド)が実行される • コントローラーは要求を処理して表示するビューを決める – 要求をもとにデータベースにアクセスしてなんやらしたりする • ビューはコントローラーのデータを受け取って Web ページを表 示する
  21. 21. モデルを操作する • モデルと Code First • モデルを作成 • Code First で DB のテーブル作成 • モデルを操作する コントローラーとビューの作成
  22. 22. モデル • Web アプリで扱うデータ(DB に格納するデータ) – ユーザー情報など
  23. 23. Code First • DB のテーブルをコードから作る方法 – 特別な専用のコードではなく通常のクラスを記述する – 記述したクラスはアプリでそのまま使える
  24. 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. 25. モデル作成 • DB に格納するモデルは ApplicationDbContext クラ スで操作する • Models/IdentityModels.cs の ApplicationDbContext クラスに追記 public DbSet<Event> Events { get; set; }
  26. 26. DB のテーブル作成 1. プロジェクトのビルド 2. パッケージマネージャー コンソール表示 – [ツール]-[NuGet パッケージマネージャー] から 3. Enable-Migrations コマンド実行 – メッセージ「Code First Migrations がプロジェクト○○で 有効になりました。」 – Migrations/Configuration.cs ができている
  27. 27. DB のテーブル作成 4. Configuration.cs – AutomaticMigrationsEnabled = true; に修正 5. Update-Database コマンド実行 – DB の構成変更完了
  28. 28. Configuration.csとUpdate-Database • Configuration クラスの Seed メソッド – Update-Database 実行時に処理する内容を記述できる • 初期ユーザーの生成など • Update-Database – モデルを修正するたびに実行 – DB のデータ内容を維持してテーブル構造をモデルに合わせる – データ内容を維持できない場合は –force パラメーターを付けて実 行(必要なときは実行時にメッセージが表示される) – App_Data フォルダーにある .mdf ファイルを削除して作り直すの もアリ
  29. 29. コントローラーとビューの作成 1. ソリューションエクスプローラー Contollers コンテキストメ ニュー [追加]-[コントローラー] 2. 「Entity Framework を使用した、ビューがある MVC 5 コン トローラー」を「追加」 3. データコンテキスト クラスで「ApplicationDbContext」選択 4. モデル クラスで「Event」選択して「追加」 → Contollers/EventContoller.cs と Views/Events が生成 Event の一覧・表示・作成・編集・削除が可能なコードが 生成されているので,これを元にアプリに必要な処理を実装していく
  30. 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. 31. Events/Create 作成(ビュー側) • ビュー – @model Models.Event:扱うモデルの型 – フォームの作成 @using (Html.BeginForm()) { ... @Html.EditorFor(model => model.Name, ...) @Html.ValidationMessageFor(model => model.Name, "“, ...) ... }
  32. 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. 33. モデルバインディング • 「ASP.NET モデルバインディング」で検索 • Events/Createでは ビュー側の @model とコントロー ラー側のメソッドの引数 events の型が一致していたが, 一致している必要はない – リクエストデータは,一致する引数名やクラスのプロパティ名 の値に設定される
  34. 34. ユーザー認証(サインイン機能) ASP.NET Identity
  35. 35. ASP.NET Identity • 「ASP.NET Identity」で検索 • ASP.NET の認証や資格管理のシステム • いろいろな仕組みを提供してカスタマイズや独自実装が可能
  36. 36. ユーザー認証の機能(1/2) • ユーザー認証の仕組みが実装されている – デフォルトはメールアドレスを一意なユーザー名として使用 – DB にユーザー情報を格納(AspNet から始まるテーブル名)
  37. 37. ユーザー認証の機能(2/2) • 枠組みだけ用意されている機能 – メールによるパスワードリセットなど • メールを送信する部分は要実装 – 2段階認証(使ったことないけど) • SMS 部分は要実装 – Facebook/Twitter/Google アカウントによるログイン • 各サービスの ID/Secret key を指定すれば使える – Role の実装(管理者ユーザー権限などを付けたい場合) • 生成されるコードにサンプルコードは記述されていない – ApplicationRoleManager, RoleManager などで検索 – IT 勉強会スタンプは実装している
  38. 38. 枠組みだけ用意されている機能の実装 • App_Start/IdentityConfig.cs の編集 – EmailService クラスの実装など • App_Start/Startup.Auth.cs の編集 – Facebook/Twitter/Google ID, Secret key 指定など
  39. 39. ユーザー情報のカスタマイズ • ApplicationUser クラス(IdentifyModels.cs)に プロパティを追加して Update-Database 実行 – AspNetUsers テーブルに追加される
  40. 40. ユーザー認証のカスタマイズ • ユーザー名の設定やメールアドレスまたはユーザー名で サインイン可能にするなど • AccountContoller などの編集(自分で実装) – ユーザーの登録処理などは AccountContoller に記述されて いる。デフォルトのユーザー認証の機能を確認して、少しずつ 修正していくといいと思う。
  41. 41. Azure Web アプリで公開
  42. 42. Azure Web アプリ(旧 Azure Websites ) • 「Azure Web アプリ」で検索 • 使うポイント – Visual Studio から簡単に Web アプリとして公開可能 • データベースの新規作成,Code First 実行(DB 構造の変更)なども 可能 – Visual Studio でリモートデバッグ可能
  43. 43. 発行 • ソリューションエクスプローラーのプロジェクト コンテキストメ ニュー[発行] • 「Microsoft Azure Websites」から「新規」を選択
  44. 44. いろいろなトピック 細かなことはサイト参照や 検索してください
  45. 45. 複雑なモデル • プロパティがクラス(プリミティブ型でない) – virtual 修飾子が必要 • 多対多の関係 – マッピングの記述が必要 • 参考「コード・ファースト開発の基本」 – http://blog.shibayan.jp/entry/20101014/1287061553
  46. 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. 47. HTTPS にする 1. プロジェクトのプロパティウィンドウ「開発サーバー」 1. 「SSL 有効」を True 2. 「SSL URL」をコピー 2. プロジェクトのプロパティ「Web」の「プロジェクトの URL」にペースト 3. コントローラー クラスまたはそのメソッドに [RequireHttps] 属性を付け HTTPS のみ許可する
  48. 48. CSRF 対策 • 生成されるコードは既にされている • ビュー側 – form 内に @Html.AntiForgeryToken() 記述 • コントローラー側 – メソッドに [ValidateAntiForgeryToken] 属性
  49. 49. アクセス許可設定 • コントローラーのクラスやメソッドに属性を指定 – 誰でもアクセスできる • [AllowAnonymous] – サインインしたユーザーのみアクセスできる • [Authorize] – 「Admin」Role ユーザーのみアクセスできる • [Authorize(Roles="Admin")]
  50. 50. Ajax で POST 処理 • NuGet パッケージ 「Microsoft.jQuery.Unobtrusive.Ajax」追加 • ビュー – Html.BeginForm → Ajax.BeginForm に変更(パラメー ターも要修正) – JavaScript でデータ受け取り,表示反映などの処理が必要 • コントローラー – ビューではなくJSON データを返すよう修正
  51. 51. JSON データを返す • return Json(object_data); – 匿名クラスでも通常のクラスのオブジェクトでも JSON に変 換して返す • Ajax によるアクセスか判定は Request.IsAjaxRequest()
  52. 52. ツイート機能をつけたい • ID/Secret key 指定のみではサインインできるだけ • ツイートする仕組みなどを実装するにはサインイン時に アクセストークンなども受け取るよう TwitterAuthenticationProvider の指定が必要(次 スライド) – 追加情報は DB に保存される(AspNetUserClaim テーブル)
  53. 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. 54. Claim 情報の取得 var accsessTokenClaim = HttpContext.GetOwinContext().GetUserManager<ApplicationUserManager>().GetClaims("use rId").FirstOrDefault((x) => x.Type == "urn:tokens:twitter:accesstoken");
  55. 55. Twitter ライブラリー • CoreTweet などの NuGet パッケージを追加して ツイート処理を実装
  56. 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. 57. Azure Web アプリ関連いろいろトピック
  58. 58. 日時と言語 • UTC • en-US • web.config で変更不可
  59. 59. ログの取得 • アクセスログはデフォルトで保存されていない • 旧 Portal の Web アプリの「構成」の「サイト診断」の 「Web サーバーのログ記録」で有効化できる
  60. 60. 実際にあったこと: 現象と原因 • 現象 • 旧 Azure Portal のダッシュボードで見ると大量の HTTP サーバーエ ラーが発生 – 原因(アクセスログを確認して判明) • コントローラーに引数が必要なアクションを用意していた(パラメー ターが必要な URL) – 引数なしの場合は HTTP エラーを返していた • Google のクローラーがパラメーターなしの URL にアクセスしていた
  61. 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. 62. オマケ: アプリを完成させるには
  63. 63. 細かいことを気にしない • とりあえず動くものを公開する • 気になりそうなところ – 変数名・関数名・クラス構造 その他もろもろ – JSON でデータ返したら camel case 一致してない • C#/VB → Upper Camel Case, JSON → snake_case – Ajax で表示更新を実装したら cshtml と JavaScript コード に似たような HTML 記述ができている – コントローラーに async メソッドとそうでないメソッドが混 在
  64. 64. コントローラー内の async メソッドの必要性 • メソッド内で IO 処理を並列にするなど await 呼び出し を使う必要がなければ不要 • by @shibayan(ASP.NET MVP)
  65. 65. アプリが完成したら • ニュースリリースを送る – 「リツイート直後のツイートを表示するやつは」GIGAZINE と ねとらぼ に送付 • Web アプリを紹介するサイトに登録
  66. 66. まとめ • プロジェクトの構成 – ルーティング,コントローラー,ビュー • モデルの操作 – Code First, コントローラーとビューの生成 • ユーザー認証 – 実装・用意されている仕組み,カスタマイズ方法 • Azure Web アプリへ発行 • その他の機能の実装方法など
  67. 67. 以上で… • サインインユーザーだけがイベント情報を登 録/編集できるサイト • 登録時に情報をツイートする機能 • …というようなサイトは作れるかも
  68. 68. ご清聴ありがとうございました 2015/4/11 ASP.NET 初心者勉強会 @jz5(プロ生)

×