web開発の最新トレンド ~1から知るasp.net~
TRANSCRIPT
![Page 1: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/1.jpg)
Web開発の最新トレンド ~1から知るASP.NET~
矢後 比呂加
2013/09/07 13:00~
![Page 2: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/2.jpg)
アジェンダ
1.Web 開発の魅力
2.Web 開発の最新トレンド
3.ASP.NET とは
Web のキソ
![Page 3: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/3.jpg)
セッションのゴール
Web 開発の最新トレンドを知る
ASP.NET について知る
今日、家に帰ったら、 Visual Studio(or WebMatrix)で ASP.NET を触る
★
![Page 4: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/4.jpg)
対象者
・Web 開発を初めてみたい方 ・ASP.NET を初めて知る方
![Page 5: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/5.jpg)
1. Web 開発の魅力 ~Web といえば?~
![Page 6: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/6.jpg)
1.Web 開発の魅力
Web とは
世界に広がる情報の網
![Page 7: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/7.jpg)
1.Web 開発の魅力
そんな Web を利用したアプリケーション開発の魅力
• デバイスとネットがあれば、誰でもすぐにアクセスできる
• Web は、登場から20年経った今もなお、必須の技術である
• 数人のコミュニティから、世界規模まで サービスを展開できる
• HTML5、CSS3、JavaScript 等、数多くの技術に触れられる 特に SignalR はおもしろい!
![Page 8: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/8.jpg)
1.Web 開発の魅力
SignalR を使った HTML プレゼン
![Page 9: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/9.jpg)
アジェンダ
1.Web 開発の魅力
2.Web 開発の最新トレンド
3.ASP.NET とは
Web のキソ
![Page 10: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/10.jpg)
1.5 Web のキソ
~学習タイム~ 最新トレンドへ移る前に
知っておきたいこと
![Page 11: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/11.jpg)
1.5 Web のキソ 1/3
Web を構成する3つの規格
• URI(情報の名前)
• HTTP(通信方法の約束)
• HTML(情報を表すための書式)
これらの3つが、Web の普及に大きく貢献している
![Page 12: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/12.jpg)
1.5 Web のキソ 2/3
クライアントとサーバー
• 実行環境は、クライアントとサーバーの2つに分かれる。
• 基本、クライアントからのリクエストを受けて、 サーバーはレスポンスを返す。
クライアント サーバー
![Page 13: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/13.jpg)
1.5 Web のキソ 3/3
クライアント側とサーバー側で動作する技術の区別
• JavaScript
• CSS
• HTML
• …
• ASP.NET
• PHP
• …
クライアント サーバー
![Page 14: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/14.jpg)
アジェンダ
1.Web 開発の魅力
2.Web 開発の最新トレンド
3.ASP.NET とは
Web のキソ
![Page 15: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/15.jpg)
2. Web 開発の最新トレンド
![Page 16: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/16.jpg)
2.Web 開発の最新トレンド
昔は
• 一般が利用する Web といえば、 パソコンを使って、ブラウザより Web サイトを閲覧する。 が大半だった。
http://homepage3.nifty.com/abe-hiroshi/
阿部寛さんのHP
![Page 17: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/17.jpg)
2.Web 開発の最新トレンド
Web の進化
需要に合わせて、Web が進化
http://evolutionofweb.appspot.com/ ウェブの進化
![Page 18: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/18.jpg)
2.Web 開発の最新のトレンド
ブラウザ
▼iOS ▼Windows ストアアプリ ▼Android アプリ ▼Desktop アプリ
サーバー
HTML5 CSS3 JavaScript
ネイティブアプリ
今
![Page 19: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/19.jpg)
2.Web 開発の最新のトレンド
ブラウザ
▼iOS ▼Windows ストアアプリ ▼Android アプリ ▼Desktop アプリ
サーバー
HTML5 CSS3 JavaScript
Web 標準技術 (Web API)
デバイスが数多く 登場
ブラウザの進化
ネイティブアプリ
プラットフォーム の多様化
今
![Page 20: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/20.jpg)
2.Web 開発の最新トレンド
デバイスが数多く登場
• デバイス毎の対応が必要となる
• タッチとマウスとキーボード
• 異なる画面サイズ
• レスポンシブデザイン
• Windows http://windows.microsoft.com/ja-jp/windows/home
• サーバー側でビュー(表示するHTML)の切り替え
![Page 21: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/21.jpg)
2.Web 開発の最新トレンド
ネイティブアプリのオンラインコンテンツ化
• Web API の普及
• マルチプラットフォームの対応
• Web 標準技術の活用(RESTful Web API)
![Page 22: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/22.jpg)
2.Web 開発の最新トレンド
ブラウザ、Web の進化
• ブラウザでもデバイス毎に違う
• リッチな UI
• HTML5, CSS3, JavaScript(Ajax)
• 位置情報、カメラ、傾き等の情報
• リアルタイム性
ブラウザに対して、あらゆる機能が求められるように。
→ブラウザの進化
→ブラウザも、数あるデバイスの内の1つに。
![Page 23: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/23.jpg)
2.Web 開発の最新トレンド
益々重要になる Web 標準技術
• Web 標準技術を生かした Web API
• → REST
• RIA(Flash, Silverlight 等) の対応が遅れる
• HTML5, CSS3 の登場
• JavaScript への注目
• Web 開発では、Web の知識が益々重要に
![Page 24: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/24.jpg)
2.Web 開発の最新トレンド
つまり…
• 様々な環境に対応する必要がある。
• 多くの技術が登場。
• それでもなお、必要不可欠な Web 標準技術。
取捨選択で、各技術を組み合わせた Web開発を
行う必要がある
![Page 25: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/25.jpg)
2.Web 開発の最新トレンド
一枚岩から、
各技術と併用する Web 開発へ
![Page 26: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/26.jpg)
アジェンダ
1.Web 開発の魅力
2.Web 開発の最新トレンド
3.ASP.NET とは
Web のキソ
![Page 27: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/27.jpg)
3.ASP.NET とは
![Page 28: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/28.jpg)
3.ASP.NET とは
• 動的なWebアプリケーションを構築するための フレームワーク、実行基盤。
• Webアプリケーション(またはサービス)に必要な機能を備える。
• Visual Studio、または WebMatrix を用いて開発を行う。
• .NET Framework に対応。
• 開発言語は、主にC#, Visual Basic
• Azure 対応
Microsoft が提供する Web 開発技術
![Page 29: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/29.jpg)
3.ASP.NET とは
ASP.NET も昔は一枚岩だった
HTML, JavaScript まで
すべてカバー
Web 技術や他ライブラリと
併用できる Web 開発へ
![Page 30: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/30.jpg)
3.ASP.NET とは
ASP.NET の今 ~One ASP.NET~
Web Forms
Web Pages
Single Page Apps
MVC Web API
SignalR
ASP.NET
Web サイト サービス
主に6つのフレームワークがある。
![Page 31: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/31.jpg)
3.ASP.NET とは
ASP.NET の今 ~One ASP.NET~
Web Forms
Web Pages
Single Page Apps
MVC Web API
SignalR
ASP.NET
Web サイト サービス
同じ目的(Webサイト構築)を
果たすためのフレームワーク
![Page 32: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/32.jpg)
3.ASP.NET とは
• Web サイト構築のためのフレームワーク
• Web Forms
• MVC
• Web Pages
• Web Pages は、WebMatrix でのみ開発可能
• Web Forms, MVC は、Visual Studio のみ開発可能。
Web サイト
![Page 33: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/33.jpg)
3.ASP.NET とは
• サービスを構築するためのフレームワーク
• (※サービス…Web 通信を利用して、なんらかの処理を行う。)
• Web API
• SignalR
サービス
例
・Web API を利用して、サーバーと通信するモバイルアプリを開発する。
・Web API を利用して、Ajax を使ってリッチな Web サイトを構築する。
・SignalR を利用して、リアルタイム機能を備えた Web サイトを構築する
![Page 34: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/34.jpg)
3.ASP.NET とは
• ASP.NET とクライアントサイドの技術を生かした Web アプリケーションを構築するためのパターンやサンプルのことを表す。
• フレームワークというよりも、サンプル的な位置付け。
Single Page Application
![Page 35: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/35.jpg)
3.ASP.NET とは
• 開発を行うための統合開発環境
• WebMatrix http://www.microsoft.com/japan/web/webmatrix/
• 無償
• Webサイト構築ツール
• ASP.NET 以外にも対応
Visual Studio と WebMatrix
![Page 36: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/36.jpg)
3.ASP.NET とは
• Visual Studio http://www.microsoft.com/visualstudio/jpn/downloads
• 無償版と有償版(試用版)がある。
• Visual Studio 2012
• 有償、90日間試用版がある
• 学生の場合、DreamSpark に登録することで無償
• Visual Studio Express 2012 for Web
• 無償
• Visual Studio の Web 関連機能限定。最初はこれでOK.
Visual Studio と WebMatrix
![Page 37: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/37.jpg)
3.ASP.NET とは
• Webアプリケーションを作成・勉強したい
• ASP.NET MVC がおすすめ。言語は C#。
• Web の基礎を学ぶことができる。
• HTML 等の制御が行いやすく、クライアントサイドと相性が良い。
• Webアプリケーションと、iOS等、モバイルに対応したアプリを作成したい。
• ASP.NET MVC と、ASP.NET Web API を利用。
ASP.NET 選択例
![Page 38: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/38.jpg)
3.ASP.NET とは
• なんでもいいので面白いことを試したい!
• SignalR!! と、ASP.NET Web Forms(または Web Pages)
• クライアントサイドである HTML5 や CSS3 等を試したい
• ASP.NET Web Forms(または Web Pages)
ASP.NET 選択例
![Page 39: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/39.jpg)
3.ASP.NET とは
Web Pages
動的にページを生成するための軽量なフレームワーク
Web Forms
コントロールを用いて、 イベント駆動型の開発を行う
MVC MVCスタイルを用いて、 Web標準技術を意識して開発を行う
Single Page
Application
ASP.NET MVC, ASP.NET Web API, JavaScript フレームワークを組み合わせ、 クライアントサイドの技術を生かした アプリのサンプル。
Web サイト
![Page 40: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/40.jpg)
3.ASP.NET とは
Web API RESTful な HTTPサービスを 提供する
SignalR リアルタイムかつ双方向通信を 提供する
サービス
![Page 41: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/41.jpg)
Web 開発の最新トレンドを知る
ASP.NET について知る
今日、家に帰ったら、 Visual Studio(or WebMatrix)で ASP.NET を触る
★
![Page 42: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/42.jpg)
ありがとうございました
![Page 43: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/43.jpg)
とりあえず触ってみる方法
• Web Pages の場合
• →WebMatrix を起動
• →「新規」→「テンプレートギャラリー」
• →「ASP.NET」の「フォト ギャラリー」
• →用意されたら、左上の「実行」ボタン
![Page 44: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/44.jpg)
とりあえず触ってみる方法
• Web Forms の場合
• →Visual Studio (2012) を起動
• →「ファイル」→「新しいプロジェクト」
• →「ASP.NET Web フォームアプリケーション」で「OK」ボタン
• → 「デバッグ」→「実行」
• ログイン機能と、他数ページが用意されている。
![Page 45: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/45.jpg)
とりあえず触ってみる方法
• MVC の場合
• →Visual Studio (2012) を起動
• →「ファイル」→「新しいプロジェクト」
• →「ASP.NET MVC 4 Web アプリケーション」で「OK」ボタン
• →「インターネット アプリケーション」
• → 「デバッグ」→「実行」
• Web Forms と同じ、ログイン機能と、他数ページが用意されている。
![Page 46: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/46.jpg)
とりあえず触ってみる方法
• Single Page Application の場合
• →Visual Studio (2012) を起動
• →「ファイル」→「新しいプロジェクト」
• →「ASP.NET MVC 4 Web アプリケーション」で「OK」ボタン
• →「シングルページ アプリケーション」
• → 「デバッグ」→「実行」
• ログイン機能と、Todo機能が用意されている。
![Page 47: Web開発の最新トレンド ~1から知るASP.NET~](https://reader035.vdocuments.pub/reader035/viewer/2022062310/58ed0e4c1a28ab90658b45eb/html5/thumbnails/47.jpg)
とりあえず触ってみる方法
• Web API の場合
• Web API は、体感し辛いので省略。
• SignalR の場合
• ASP.NET SignalRを知る http://www.atmarkit.co.jp/ait/articles/1303/19/news099.html
の「サンプル・アプリを実行してみる」の章を参考。