More Related Content Similar to .Net技術でこれからも食べていくための技術戦略 (20) More from Yuya Yamaki (18) .Net技術でこれからも食べていくための技術戦略2. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
ビジネスアプリケーション向け.NETテクノロジガイド
Microsoft .NET ホーム
http://www.microsoft.com/ja-jp/net/
3. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
Established(従来型)とEmerging(次世代型)
Establishedアプリケーションパターン
クライアント/サーバー方式などのテクノロジパターンを使用して
開発されたアプリケーションや、デスクトップブラウザーに
最適化された Webアプリケーションの開発に用いる技術パターン。
基盤アプリケーションとして機能するもので、既存のビジネス
プロセスに大きな比重を置いて設計されています。
Emergingアプリケーションパターン
マルチデバイスやクラウドといった新しいテクノロジで実現される
アプリケーション。アプリケーションをエンドユーザー中心に
拡張することで、Establishedパターンを補完します。
4. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
『英和辞書 - goo辞書』より
established【形】
1. 〈秩序・慣習などが〉確立した[された], 既定
の;(慣習的に)認められた;立証済みの;〈法
律などが〉制定された
2. 〈地位・人が〉常設の, 常勤の.
3. 〈宗教・教会が〉国教の.
4. 〈人・動植物が〉(新しい土地に)定住[定着]
した.
emerging【形】
発展段階の;新出現の
6. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
.NET開発者中心 読者調査レポート
0% 10% 20% 30% 40% 50% 60% 70%
Silverlight
ASP.NET MVC
ASP.NET Webフォーム
WPF
Windowsフォーム
2011年9月 2012年9月
7. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
EmergingとEstablishedの関係
モダンビジネスアプリケーション
従来型のアプリケーション パターン
8. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
モダンな業務アプリへ
現行の開発技術はestablishedパターンに深く依存して
いるため、モダンなアプリに必要とされるemergingパ
ターンとの統合は簡単ではありません。
マイクロソフトプラットフォームは既存アプリケーショ
ンに基づいて構築されており、emergingアプリケー
ションパターンへの拡張を可能にします。また、複数の
開発テクノロジがサポートされるため、開発者のスキル
や、既存アプリケーションで使用されているテクノロジ
に応じ、最適な方法を選ぶことができます。
9. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
本日ご紹介する技術トピック
ポータブルクラスライブラリ
ASP.NET Web API
シングルページアプリケーション
ディスプレイモード
11. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
.NET
Framework
Silverlight Windows Phone
Windows ストア
アプリ用 .NET
Xbox 360 Xamarin.Android Xamarin.iOS
ポータブルクラスライブラリ
上記のプラットフォームで参照できるマネージアセンブリ
コードを最大限に再利用し、必要なプロジェクトの数を削減
同じコードベースを共有するマルチターゲットアプリで効果的
12. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
サポートされている機能
機能
.NET
Framework
Windows ストア Silverlight Windows Phone Xamarin
コア ✅ ✅ ✅ ✅ ✅
LINQ ✅ ✅ ✅ ✅ ✅
IQueryable ✅ ✅ ✅ 7.5以上 ✅
Dynamic キーワード 4.5 のみ ✅ ✅ ✅
MEF (Managed Extensibility Framework) ✅ ✅ ✅ ✅
Network Class Library (NCL) ✅ ✅ ✅ ✅ ✅
シリアル化 ✅ ✅ ✅ ✅ ✅
WCF
✅ ✅ ✅ ✅ ✅
Model-View-View Model (MVVM) 4.5 のみ ✅ ✅ ✅ ✅
データ アノテーション 4.0.3以上 ✅ ✅ ✅
XLINQ 4.0.3以上 ✅ ✅ ✅ ✅
System.Numerics ✅ ✅ ✅ ✅
13. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
Demo1
MSDNライブラリ
Model-View-View Model を利用した汎用性のあるクラス ライブラリの使用
16. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
ASP.NET Web API
RESTfulなサービスを提供するのに適した
HTTPサービス構築用のフレームワーク
HTTPメソッドの「GET」「POST」「DELETE」「PUT」
を使ってリソースを操作
リソースとは「Web上に存在する名前を持った
ありとあらゆる情報」
リソースはそれぞれ固有のURIを持つ
メソッド 役割
GET リソースの取得
POST リソースの新規作成
PUT 既存のリソースのアップデート
DELETE リソースの削除
19. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
振り返り
デスクトップ
アプリ(WPF)
Windowsストア
アプリ
ViewModelと
Model
(ポータブル
クラスライブラリ)
XAML C#/VisualBasic
クライアント側 サーバー側
27. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
シングルページアプリケーション(SPA)
クライアントサイドのアーキテクチャに重点をおいた
設計アプローチ
その名の通り、 1つのページで完全に動作する
Webアプリ
ページ全体の更新や再読み込みなし
アプリケーションプログラムのほとんどは
クライアントサイドで実行され、Webブラウザーと
サーバーのやり取りは必要なデータの交換のみ
30. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
ASP.NETシングルページアプリケーション構成
JSON/XML
クライアント サーバー
Knockout
31. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
Knockout
UIに必要なのは ViewModel (シンプルなモデルオブジェ
クト) とデータバインドだけ。ややこしいDOM操作なし
で、動的なインターフェイスを作ることができます。
ViewModel のプロパティが変更されると、自動的にUI
の関連付けられた部分を更新します。
データの結合や変換を実現するためのデータ間の関係
チェーンを暗黙的に設定します。
幾重にもネストされたテンプレートも、バインドされた
ViewModel を用いて素早くUIを生成します。
宣言型バインディング
UIの自動更新
依存関係のトラッキング
UIテンプレート
オープンソースのJavaScript MVVMライブラリ
Knockout.jsの概要 // Speaker Deck
https://speakerdeck.com/mayuki/knockout-dot-jsfalsegai-yao
32. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
Knockoutjs.com - Hello World
Example - jsFiddle
34. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
振り返り
デスクトップ
アプリ(WPF)
Windowsストア
アプリ
PC向け
Webアプリ
ViewModelと
Model
(ポータブル
クラスライブラリ)
ViewModelと
Model
HTML/CSS
XAML C#/VisualBasic
JavaScript
クライアント側 サーバー側
37. jQuery UIベースのUIウィジェット集
40種類以上のウィジェットであらゆるUIをカバー
20種類以上のテーマが用意され、ThemeRoller サポート
ブラウザはjQuery 1.xとjQuery Mobileのサポートに準拠
日本語のドキュメント、日本語による技術サポートを提供
GNU GPLv3と商用ライセンスのデュアルライセンス
Knockout統合ライブラリを収録し、
Knockoutとシームレスに統合
ウ ィ ジ モ
38. ウ ェ ブ グ イ Windowsフォームと同様の開発手法で、
モダンなWebアプリを開発する
(シングルページアプリケーション)
ASP.NETベースのフレームワーク
40. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
ディスプレイモード
ブラウザからやってくるリクエストを見て、
対応するテンプレートファイルの切り替えを
行う機能
デスクトップブラウザから「/Home」へアクセス
→「ViewsHomeIndex.cshtml」が使用される
モバイルブラウザから「/Home」へアクセス
→「ViewsHomeIndex.Mobile.cshtml」が使用される
41. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
デフォルトで”Mobile”はサポート
“Mobile”のディスプレイモードは
デフォルトで入っている
IsMobileDeviceプロパティがTrueのブラウザは
”Mobile”が使用される
C:WindowsMicrosoft.NETFramework[.NET version]ConfigBrowsers
カスタムのディスプレイモードを定義したい場合
は、DisplayModeProviderクラスにモードを追加
44. アダプティブウィジェット
モバイル Web アプリケーションと非モバイル Web アプリケーションの
両方で使用できる
jQuery UI 参照ではなく jQuery Mobile 参照を使用する
スクリプトでウィジェットを初期化する代わりに、
マークアップで data-role 属性を使用して
ウィジェットを作成する
ウ ィ ジ モ
45. ウ ェ ブ グ イ
サービスパック1で
モバイル向けページの作成に対応予定
46. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
まとめ
デスクトップ
アプリ(WPF)
Windowsストア
アプリ
PC向け
Webアプリ
モバイル向け
Webアプリ
ViewModelと
Model
(ポータブル
クラスライブラリ)
ViewModelと
Model
HTML/CSS
XAML C#/VisualBasic
JavaScript
クライアント側 サーバー側
47. エフスタ!!SENDAI 2 (MVP Community Camp 2014 – Tohoku)
まとめ
MVVM
Java
Script
jQuery
Knock
out
ASP.NET
Web API
PCL