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