Web開発の最新トレンド ~1から知るASP.NET~

5,468 views

Published on

Webのトレンドを知ろう!
http://atnd.org/event/webtrend

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,468
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
24
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Web開発の最新トレンド ~1から知るASP.NET~

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

×