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

Web開発の最新トレンド
～１から知るASP.NET～
矢後比呂加
2013/09/07 13:00～

アジェンダ
１．Web 開発の魅力
２．Web 開発の最新トレンド
３．ASP.NET とは
Web のキソ

セッションのゴール
Web 開発の最新トレンドを知る
ASP.NET について知る
今日、家に帰ったら、
Visual Studio（or WebMatrix）で
ASP.NET を触る
★

対象者
・Web 開発を初めてみたい方
・ASP.NET を初めて知る方

１． Web 開発の魅力
～Web といえば？～

Web とは
世界に広がる情報の網

そんな Web を利用したアプリケーション開発の魅力
• デバイスとネットがあれば、誰でもすぐにアクセスできる
• Web は、登場から20年経った今もなお、必須の技術である
• 数人のコミュニティから、世界規模まで
サービスを展開できる
• HTML5、CSS3、JavaScript 等、数多くの技術に触れられ
る特に SignalR はおもしろい！

SignalR を使った HTML プレゼン

1.5 Web のキソ
～学習タイム～
最新トレンドへ移る前に
知っておきたいこと

1.5 Web のキソ 1/3
Web を構成する３つの規格
• URI（情報の名前）
• HTTP（通信方法の約束）
• HTML（情報を表すための書式）
これらの３つが、Web の普及に大きく貢献している

クライアントとサーバー
• 実行環境は、クライアントとサーバーの２つに分かれる。
• 基本、クライアントからのリクエストを受けて、
サーバーはレスポンスを返す。
クライアントサーバー

クライアント側とサーバー側で動作する技術の区別
• JavaScript
• CSS
• HTML
• …
• ASP.NET
• PHP
• …
クライアントサーバー

２． Web 開発の最新トレンド

2．Web 開発の最新トレンド
昔は
• 一般が利用する Web といえば、
パソコンを使って、ブラウザより Web サイトを閲覧する。
が大半だった。
http://homepage3.nifty.com/abe-hiroshi/阿部寛さんのHP

Web の進化
需要に合わせて、Web が進化
http://evolutionofweb.appspot.com/ウェブの進化

2．Web 開発の最新のトレンド
ブラウザ
▼iOS
▼Windows ストアアプリ
▼Android アプリ
▼Desktop アプリ
サーバー
HTML5
CSS3
JavaScript
ネイティブアプリ
今

2．Web 開発の最新のトレンド
ブラウザ
▼iOS
▼Windows ストアアプリ
▼Android アプリ
▼Desktop アプリ
サーバー
HTML5
CSS3
JavaScript
Web 標準技術
（Web API）
デバイスが数多く
登場
ブラウザの進化
ネイティブアプリ
プラットフォーム
の多様化
今

デバイスが数多く登場
• デバイス毎の対応が必要となる
• タッチとマウスとキーボード
• 異なる画面サイズ
• レスポンシブデザイン
• Windows http://windows.microsoft.com/ja-jp/windows/home
• サーバー側でビュー（表示するHTML）の切り替え

ネイティブアプリのオンラインコンテンツ化
• Web API の普及
• マルチプラットフォームの対応
• Web 標準技術の活用（RESTful Web API）

ブラウザ、Web の進化
• ブラウザでもデバイス毎に違う
• リッチな UI
• HTML5, CSS3, JavaScript（Ajax）
• 位置情報、カメラ、傾き等の情報
• リアルタイム性
ブラウザに対して、あらゆる機能が求められるように。
→ブラウザの進化
→ブラウザも、数あるデバイスの内の１つに。

益々重要になる Web 標準技術
• Web 標準技術を生かした Web API
• → REST
• RIA（Flash, Silverlight 等）の対応が遅れる
• HTML5, CSS3 の登場
• JavaScript への注目
• Web 開発では、Web の知識が益々重要に

つまり…
• 様々な環境に対応する必要がある。
• 多くの技術が登場。
• それでもなお、必要不可欠な Web 標準技術。
取捨選択で、各技術を組み合わせた Web開発を
行う必要がある

一枚岩から、
各技術と併用する Web 開発へ

• 動的なWebアプリケーションを構築するための
フレームワーク、実行基盤。
• Webアプリケーション（またはサービス）に必要な機能を
備える。
• Visual Studio、または WebMatrix を用いて開発を行う。
• .NET Framework に対応。
• 開発言語は、主にC#, Visual Basic
• Azure 対応
Microsoft が提供する Web 開発技術

ASP.NET も昔は一枚岩だった
HTML, JavaScript まで
すべてカバー
Web 技術や他ライブラリと
併用できる Web 開発へ

ASP.NET の今～One ASP.NET～
Web
Forms
Web
Pages
Single
Page
Apps
MVC
Web
API
SignalR
ASP.NET
Web サイトサービス
主に６つのフレームワークがある。

ASP.NET の今～One ASP.NET～
Web
Forms
Web
Pages
Single
Page
Apps
MVC
Web
API
SignalR
ASP.NET
Web サイトサービス
同じ目的(Webサイト構築)を
果たすためのフレームワーク

• Web サイト構築のためのフレームワーク
• Web Forms
• MVC
• Web Pages
• Web Pages は、WebMatrix でのみ開発可能
• Web Forms, MVC は、Visual Studio のみ開発可能。
Web サイト

• サービスを構築するためのフレームワーク
• （※サービス…Web 通信を利用して、なんらかの処理を行う。）
• Web API
• SignalR
サービス
例
・Web API を利用して、サーバーと通信するモバイルアプリを開発する。
・Web API を利用して、Ajax を使ってリッチな Web サイトを構築する。
・SignalR を利用して、リアルタイム機能を備えた Web サイトを構築する

• ASP.NET とクライアントサイドの技術を生かした
Web アプリケーションを構築するためのパターンやサンプ
ルのことを表す。
• フレームワークというよりも、サンプル的な位置付け。
Single Page Application

• 開発を行うための統合開発環境
• WebMatrix http://www.microsoft.com/japan/web/webmatrix/
• 無償
• Webサイト構築ツール
• ASP.NET 以外にも対応
Visual Studio と WebMatrix

• 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

• Webアプリケーションを作成・勉強したい
• ASP.NET MVC がおすすめ。言語は C#。
• Web の基礎を学ぶことができる。
• HTML 等の制御が行いやすく、クライアントサイドと相性が良い。
• Webアプリケーションと、iOS等、モバイルに対応したアプリを作
成したい。
• ASP.NET MVC と、ASP.NET Web API を利用。
ASP.NET 選択例

• なんでもいいので面白いことを試したい！
• SignalR!! と、ASP.NET Web Forms（または Web Pages）
• クライアントサイドである HTML5 や CSS3 等を試したい
• ASP.NET Web Forms（または Web Pages）
ASP.NET 選択例

Web
Pages
動的にページを生成するための
軽量なフレームワーク
Web
Forms
コントロールを用いて、
イベント駆動型の開発を行う
MVC
MVCスタイルを用いて、
Web標準技術を意識して開発を行う
Single
Page
Application
ASP.NET MVC, ASP.NET Web API,
JavaScript フレームワークを組み合わせ、
クライアントサイドの技術を生かした
アプリのサンプル。
Web サイト

Web API RESTful な HTTPサービスを
提供する
SignalR リアルタイムかつ双方向通信を
提供する
サービス

Web 開発の最新トレンドを知る
ASP.NET について知る
今日、家に帰ったら、
Visual Studio（or WebMatrix）で
ASP.NET を触る
★

ありがとうございました

とりあえず触ってみる方法
• Web Pages の場合
• →WebMatrix を起動
• →「新規」→「テンプレートギャラリー」
• →「ASP.NET」の「フォトギャラリー」
• →用意されたら、左上の「実行」ボタン

• Web Forms の場合
• →Visual Studio (2012) を起動
• →「ファイル」→「新しいプロジェクト」
• →「ASP.NET Web フォームアプリケーション」で「OK」ボタン
• → 「デバッグ」→「実行」
• ログイン機能と、他数ページが用意されている。

• MVC の場合
• →「ASP.NET MVC 4 Web アプリケーション」で「OK」ボタン
• →「インターネットアプリケーション」
• Web Forms と同じ、ログイン機能と、他数ページが用意されている。

• Single Page Application の場合
• →「ASP.NET MVC 4 Web アプリケーション」で「OK」ボタン
• →「シングルページアプリケーション」
• ログイン機能と、Todo機能が用意されている。

• Web API の場合
• Web API は、体感し辛いので省略。
• SignalR の場合
• ASP.NET SignalRを知る
http://www.atmarkit.co.jp/ait/articles/1303/19/news099.html
の「サンプル・アプリを実行してみる」の章を参考。

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Web開発の最新トレンド～１から知るASP.NET～

Semelhante a Web開発の最新トレンド～１から知るASP.NET～ (20)