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 開発の魅力

そんな Web を利用したアプリケーション開発の魅力

• デバイスとネットがあれば、誰でもすぐにアクセスできる

• Web は、登場から20年経った今もなお、必須の技術である

• 数人のコミュニティから、世界規模まで サービスを展開できる

• HTML5、CSS3、JavaScript 等、数多くの技術に触れられる 特に SignalR はおもしろい！

１．Web 開発の魅力

SignalR を使った HTML プレゼン

アジェンダ

１．Web 開発の魅力

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

３．ASP.NET とは

Web のキソ

1.5 Web のキソ

～学習タイム～ 最新トレンドへ移る前に

知っておきたいこと

1.5 Web のキソ 1/3

Web を構成する３つの規格

• URI（情報の名前）

• HTTP（通信方法の約束）

• HTML（情報を表すための書式）

これらの３つが、Web の普及に大きく貢献している

1.5 Web のキソ 2/3

クライアントとサーバー

• 実行環境は、クライアントとサーバーの２つに分かれる。

• 基本、クライアントからのリクエストを受けて、 サーバーはレスポンスを返す。

クライアント サーバー

1.5 Web のキソ 3/3

クライアント側とサーバー側で動作する技術の区別

• JavaScript

• CSS

• HTML

• …

• ASP.NET

• PHP

• …

クライアント サーバー

アジェンダ

１．Web 開発の魅力

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

３．ASP.NET とは

Web のキソ

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

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

昔は

• 一般が利用する Web といえば、 パソコンを使って、ブラウザより Web サイトを閲覧する。 が大半だった。

http://homepage3.nifty.com/abe-hiroshi/

阿部寛さんのHP

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

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）

デバイスが数多く 登場

ブラウザの進化

ネイティブアプリ

プラットフォーム の多様化

今

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

デバイスが数多く登場

• デバイス毎の対応が必要となる

• タッチとマウスとキーボード

• 異なる画面サイズ

• レスポンシブデザイン

• Windows http://windows.microsoft.com/ja-jp/windows/home

• サーバー側でビュー（表示するHTML）の切り替え

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

ネイティブアプリのオンラインコンテンツ化

• Web API の普及

• マルチプラットフォームの対応

• Web 標準技術の活用（RESTful Web API）

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

ブラウザ、Web の進化

• ブラウザでもデバイス毎に違う

• リッチな UI

• HTML5, CSS3, JavaScript（Ajax）

• 位置情報、カメラ、傾き等の情報

• リアルタイム性

ブラウザに対して、あらゆる機能が求められるように。

→ブラウザの進化

→ブラウザも、数あるデバイスの内の１つに。

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

益々重要になる Web 標準技術

• Web 標準技術を生かした Web API

• → REST

• RIA（Flash, Silverlight 等） の対応が遅れる

• HTML5, CSS3 の登場

• JavaScript への注目

• Web 開発では、Web の知識が益々重要に

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

つまり…

• 様々な環境に対応する必要がある。

• 多くの技術が登場。

• それでもなお、必要不可欠な Web 標準技術。

取捨選択で、各技術を組み合わせた Web開発を

行う必要がある

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

一枚岩から、

各技術と併用する Web 開発へ

アジェンダ

１．Web 開発の魅力

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

３．ASP.NET とは

Web のキソ

３．ASP.NET とは

３．ASP.NET とは

• 動的なWebアプリケーションを構築するための フレームワーク、実行基盤。

• Webアプリケーション（またはサービス）に必要な機能を備える。

• Visual Studio、または WebMatrix を用いて開発を行う。

• .NET Framework に対応。

• 開発言語は、主にC#, Visual Basic

• Azure 対応

Microsoft が提供する Web 開発技術

３．ASP.NET とは

ASP.NET も昔は一枚岩だった

HTML, JavaScript まで

すべてカバー

Web 技術や他ライブラリと

併用できる Web 開発へ

３．ASP.NET とは

ASP.NET の今 ～One ASP.NET～

Web Forms

Web Pages

Single Page Apps

MVC Web API

SignalR

ASP.NET

Web サイト サービス

主に６つのフレームワークがある。

３．ASP.NET とは

ASP.NET の今 ～One ASP.NET～

Web Forms

Web Pages

Single Page Apps

MVC Web API

SignalR

ASP.NET

Web サイト サービス

同じ目的(Webサイト構築)を

果たすためのフレームワーク

３．ASP.NET とは

• Web サイト構築のためのフレームワーク

• Web Forms

• MVC

• Web Pages

• Web Pages は、WebMatrix でのみ開発可能

• Web Forms, MVC は、Visual Studio のみ開発可能。

Web サイト

３．ASP.NET とは

• サービスを構築するためのフレームワーク

• （※サービス…Web 通信を利用して、なんらかの処理を行う。）

• Web API

• SignalR

サービス

例

・Web API を利用して、サーバーと通信するモバイルアプリを開発する。

・Web API を利用して、Ajax を使ってリッチな Web サイトを構築する。

・SignalR を利用して、リアルタイム機能を備えた Web サイトを構築する

３．ASP.NET とは

• ASP.NET とクライアントサイドの技術を生かした Web アプリケーションを構築するためのパターンやサンプルのことを表す。

• フレームワークというよりも、サンプル的な位置付け。

Single Page Application

３．ASP.NET とは

• 開発を行うための統合開発環境

• WebMatrix http://www.microsoft.com/japan/web/webmatrix/

• 無償

• Webサイト構築ツール

• ASP.NET 以外にも対応

Visual Studio と WebMatrix

３．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

３．ASP.NET とは

• Webアプリケーションを作成・勉強したい

• ASP.NET MVC がおすすめ。言語は C#。

• Web の基礎を学ぶことができる。

• HTML 等の制御が行いやすく、クライアントサイドと相性が良い。

• Webアプリケーションと、iOS等、モバイルに対応したアプリを作成したい。

• ASP.NET MVC と、ASP.NET Web API を利用。

ASP.NET 選択例

３．ASP.NET とは

• なんでもいいので面白いことを試したい！

• SignalR!! と、ASP.NET Web Forms（または Web Pages）

• クライアントサイドである HTML5 や CSS3 等を試したい

• ASP.NET Web Forms（または Web Pages）

ASP.NET 選択例

３．ASP.NET とは

Web Pages

動的にページを生成するための軽量なフレームワーク

Web Forms

コントロールを用いて、 イベント駆動型の開発を行う

MVC MVCスタイルを用いて、 Web標準技術を意識して開発を行う

Single Page

Application

ASP.NET MVC, ASP.NET Web API, JavaScript フレームワークを組み合わせ、 クライアントサイドの技術を生かした アプリのサンプル。

Web サイト

３．ASP.NET とは

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 の場合

• →Visual Studio (2012) を起動

• →「ファイル」→「新しいプロジェクト」

• →「ASP.NET MVC 4 Web アプリケーション」で「OK」ボタン

• →「インターネット アプリケーション」

• → 「デバッグ」→「実行」

• Web Forms と同じ、ログイン機能と、他数ページが用意されている。

とりあえず触ってみる方法

• Single Page Application の場合

• →Visual Studio (2012) を起動

• →「ファイル」→「新しいプロジェクト」

• →「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

の「サンプル・アプリを実行してみる」の章を参考。