Download - Aspnet mvc 6の今を紹介
ASP.NET MVC 6 の今を紹介古代魚庵
西村誠
ASP.NET 5 & MVC 6• これまでは WindowsServer(OS) + IIS(Web サーバー ) でのみ動作• ASP.NET 5 は Mac でも Linux でも動く !!
ASP.NET 5 & MVC 6• System.Web とのお別れusing System.Web;using System.Web.Mvc;
ASP.NET 5 & MVC 6• System.Web とのお別れusing System.Web;using System.Web.Mvc;
ASP.NET 5 & MVC 6• こんにちは Microsoft.AspNet
using Microsoft.AspNet;
ASP.NET 5 & MVC 6• OSS 的なツールを取り入れる• 色々新しい用語がでてくるよ( Bower 、 Grunt 、 Gulp )• そもそも ASP.NET 5 の動作基盤となる .NET Core もオープンソース
ASP.NET 5 & MVC 6• 仕組みが色々変わるので用語も色々出てくるよ!!
Entity Framework 7
ASP.NET 5 & MVC 6• 仕組みが色々変わるので用語も色々出てくるよ!!
DNXMicrosoft.AspNet
GitHub
.NET Framework 4.6
.NET Core
mono
Bower
Grunt Unix
Gulp
MVC
pipeline
json kestrel
概要編
基盤
基盤• 従来の .NET Framework とマルチプラットフォームの .NET Core
基盤• ASP.NET 5 は .NET Framework 4.6 、 .NET Core 5 のどちらでも動く
• 新しく追加された .NET Core について.NET Core
• DNX ( .NET Execution Environment )• .NET 実行環境• ビルド & 実行するための SDK およびランタイム• Mac や Linux で動かすには mono が必要
.NET Core
• DNX ( .NET Execution Environment )• dnu(.NET Development Utility)パッケージマネージャー• dnvm(.NET Version Manager)バージョン管理
.NET Core
• DNX ( .NET Execution Environment )• dnu(.NET Development Utility)パッケージマネージャー• dnvm(.NET Version Manager)バージョン管理覚えにくい・・・環境構築する際にまた出てくるよ!!
.NET Core
• GitHub で管理https://github.com/aspnet
.OSS
• Model-View-Controll 構造を踏まえたフレームワーク• Ruby on Rails や CakePHP などほかの言語でも同様のフレームワークがあるから馴染みやすい• View エンジン -HTML の中に動的な値を入れるための仕組み<h2>@ViewData["Title"].</h2>この辺も Rails の ERB や PHP の Twig 、 Smarty など馴染みやすいMVC 5同様 Razor が使える
MVC 6
• MVC5 に関しては、これさえあれば安心!!(特にスポンサードなど無いです)
MVC 6
• 設定は json で管理• ファイル構成はかなり変更されている• Model-Entity Framework 7(EF7)
MVC 6
• Bower JS 、 CSS などのクライアントサイドの依存関係を管理するパッケージマネージャー• NPM サーバーサイド版パッケージマネージャー• Grunt/gulp タスクマネージャーJavaScript 界隈に紛れ込んだ気になるツール群・・・でも .NET の話です
MVC 6
概要編まとめ• .NET Core を追加した二つの実行基盤• Mac 、 Linux でも動かせる• OSS 要素が増えてきた( OSS 化や Bower など)
導入編
• ここからは実際に ASP.NET 5 環境を作成するお話し• Win 、 Mac 、 Unix ( Cent OS )上で構築してみるよ
導入編
• Visual Studio 2015 をインストールすると自動で入る(以上!!)• VS 2015 じゃなくて Porwer Shell とかで入れることもできるけど・・・
Windows
• dnvm list
Windows
• CentOS 6.7 に入れてみる• ようこそ Unix の世界へ!!(コマンドライン成分多め)
Unix 編
• 一行でサクッと導入#curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh
DNVM の導入
• Yum コマンドでサクッと導入#rpm –import http://keyserver.Ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
#yum -y install yum-utils
#yum-config-manager –add-repo http://download.mono-project.com/repo/centos/#yum -y install mono-complete
#yum -y install mono-complete
Mono のインストール
• Yum コマンドでサクッと導入エラー : パッケージ : libgdiplus0-3.12-1.x86_64 (download.mono-project.com_repo_centos_)要求 : libpng15.so.15(PNG15_0)(64bit)エラー : パッケージ : libgdiplus0-3.12-1.x86_64 (download.mono-project.com_repo_centos_)要求 : libpng15.so.15()(64bit)エラー : パッケージ : libgdiplus0-3.12-1.x86_64 (download.mono-project.com_repo_centos_)要求 : libtiff.so.5()(64bit)
Mono のインストール
失敗!!
• これぞ Unix の世界、ビバ依存関係• というわけでソースからインストール・・・
Mono のインストール
• ここまでやってようやく dnx( 実行環境)が入る#dnvm upgrade -r mono
DNX を構築
• Kestrel という Web サーバーを使うので必要なライブラリを入れる#wget http://dist.libuv.org/dist/v1.4.2/libuv-v1.4.2.tar.gz#tar -zxf libuv-v1.4.2.tar.gz#cd libuv-v1.4.2#sh autogen.sh#./configure#make && make install#ln -s /usr/lib64/libdl.so.2 /usr/lib64/libdl#ln -s /usr/local/lib/libuv.so /usr/lib64/libuv.so.1
Web サーバーの kestrel に Libuv が必要
• yum で依存関係が出たのが面倒だったけど、 RTM になったらyum でサクッと入るんじゃないかな(根拠無し)
• コマンドラインで ASP.NET 環境を作る不思議
準備完了
• Mac への導入は mono がパッケージ配布されているから DL してダブルクリックで終わったり、 HomeBrew が不具合なく終わってくれたので楽でした。• 導入してサンプルを実行してみます。環境導入後の作業は Unix と共通。
Mac
• ターミナルで作業#curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh
DNVM 導入
• mono のサイトから Mac 用の pkg を DL してきて導入(簡単!!)• Mac OS X 用のパッケージマネージャー homebrew を導入#ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
mono 、 HomeBrew 導入
• 面倒なのでコマンドをずらー#brew update#brew install icu4c#dnvm upgrade -r coreclr#dnvm upgrade -r mono
導入完了!!
DNX 導入
• GitHub の Aspnet/home からhttps://github.com/aspnet/Home
サンプルを動かす
• サンプルの project.json が配置された位置で#dnu restore
これで dnu こと (.NET Development Utility) がライブラリをずらずら DL してくれます
サンプルを動かす
• ライブラリをそろえたら kestrel という Web サーバーで実行#dnx kestrel
Hosting environment: ProductionNow listening on: http://*:5004Application started. Press Ctrl+C to shut down.
サンプルを動かす
開発編
• 開発環境は色々あれど、やっぱり Visual Studio だよね!!( not Visual Stduio Code )
• Visual Studio 2015( フルオプション ) を例に紹介
開発を始める
• ASP.NET Web アプリケーション
• からの、 ASP.NET 5 プレビューテンプレート
新しいプロジェクト
• Empty – 空のプロジェクトを作成• Web API – アプリや Web 向けの API を作りたいなら• Web Application – MVC のひな型がある程度用意された状態
• ASP.NET 5 ではこの辺が統合されたのでチェックがオフに
新しいプロジェクト
• まずは一番シンプルな構成で・・・Empty プロジェクト
• wwwroot は CSS や画像などを配置するドキュメントルート以下を表す
Empty プロジェクト
• Project.json はプロジェクト全体の設定Empty プロジェクト
• Project.json はプロジェクト全体の設定Empty プロジェクト
• ちなみに Web Application プロジェクトの場合・・・
依存関係が色々
Empty プロジェクト
• リファレンスで実行環境が見れるEmpty プロジェクト
• hosting.ini で実行環境の設定Empty プロジェクト
• Startup.cs がプログラムのエントリポイントEmpty プロジェクト
• Startup.cs がプログラムのエントリポイントEmpty プロジェクト
• プロジェクトのプロパティEmpty プロジェクト
• Web Application – MVC のひな型がある程度用意された状態ここから MVC 登場
• 依存関係色々追加されている
Bower でクライアントサイド JS のバージョン管理
Gulp でタスク管理
• Startup.cs も色々追記されている// app.Use ~で色々な機能を宣言(パイプライン)app.UseMvc(routes =>{ // ルーティングの書き方も前バージョンとちょっと違う routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}");});
色々追加されている
• Model-View-Controllers
MVC
• Controller
public class HomeController : Controller { public IActionResult Index() { return View(); }まぁ、 MVC 5 と似た感覚
MVC
• View – この辺も感覚的には MVC 5 ライク( @await とか拡張もあるけど)• @{• ViewData["Title"] = "Contact";• }• <h2>@ViewData["Title"].</h2>• <h3>@ViewData["Message"]</h3>
• <address>
MVC
• Model – 違いがわからんから使ってみよう
[参考 ]Getting Started on ASP.NET 5http://ef.readthedocs.org/en/latest/getting-started/aspnet5.html#create-a-new-project
↑色々はしょっているので詳しくはここを見てね!!
MVC
• Web Application プロジェクトを作成する•認証はなし(自動で Entity Framework 入っちゃうから)
Models
• ツール→ NuGet パッケージマネージャー→パッケージマネージャーコンソールPM>Install-Package EntityFramework.SqlServer –Pre
project.json にも追記されてる "EntityFramework.SqlServer": "7.0.0-beta8" },
Models
PM>Install-Package EntityFramework.Commands –Pre
以下を追記"ef": "EntityFramework.Commands“
こっちは手動・・・
Models
"commands": { "web": "Microsoft.AspNet.Hosting --config hosting.ini“, "ef": "EntityFramework.Commands" },
Models フォルダーとモデルを追加
・・・色々出たの#dnvm upgrade
Models
が、新しくプロジェクトを作成しても project.json の中身が・・・
"dependencies": { "Microsoft.AspNet.Diagnostics": "1.0.0-beta5", "Microsoft.AspNet.Mvc": "6.0.0-beta5", "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta5", "Microsoft.AspNet.Server.IIS": "1.0.0-beta5",
Models
Microsoft ASP.NET and Web Tools 2015 (Beta8) – Visual Studio 2015これが必要だったhttp://www.microsoft.com/en-us/download/details.aspx?id=49442
よし来た!! "Microsoft.Framework.Logging.Console": "1.0.0-beta8", "Microsoft.Framework.Logging.Debug": "1.0.0-beta8", "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta8"
Models
startup.cs に追記 var connection = @"Server=(localdb)\mssqllocaldb;Database=WebApplication10.AspNet5;Trusted_Connection=True;";
services.AddEntityFramework() .AddSqlServer() .AddDbContext<BloggingContext>(options => options.UseSqlServer(connection));
Models
コマンドラインからマイグレーション プロジェクトのディレクトリに移動#dnvm use 1.0.0-beta8#dnx ef migrations add MyFirstMigration#dnx ef database update
Models
コントローラーを追加class BlogsController : Controller { private BloggingContext _context;
public BlogsController(BloggingContext context) { _context = context; }
public IActionResult Index() { return View(_context.Blogs.ToList()); }
Models
View を追加Models
コードはこんな感じModels
@model WebApplication10.Models.Blog
@{ ViewBag.Title = "New Blog";}
<h2>@ViewData["Title"]</h2>
<form asp-controller="Blogs" asp-action="Create" method="post" class="form-horizontal" role="form"> <div class="form-horizontal"> <div asp-validation-summary="ValidationSummary.All" class="text-danger" /> <div class="form-group"> <label asp-for="Url" class="col-md-2 control-label" /> <div class="col-md-10">
動いた!!Models
Mac の場合 sqlite を使ったりGetting Started on OSXhttp://ef.readthedocs.org/en/latest/getting-started/osx.html#install-asp-net-5
追記
余談おおっ、 GitHub 追加されてる!!
まとめ• OSS 化により Unix 的な雰囲気が出てきた• IIS+ Visual Studio だと、今までとそんなに変わらない• .NET Framework と .NET Core
•ベータ版なので落とし穴注意
宣伝明日発売!!
• ASP.NET 5 Web 開発 ~ランタイム編~https://channel9.msdn.com/Events/de-code/decode-2015/DEV-006
• ASP.NET 5 の紹介http://codezine.jp/article/detail/8537
• ASP.NET 5 Web 開発 ~フレームワーク編~https://channel9.msdn.com/Events/de-code/decode-2015/DEV-007
資料
御清聴ありがとうございました