エフスタ!!SENDAI 2（MVP Community Camp 2014 - Tohoku）

1. .NET技術で
これからも食べていくための
技術戦略
グレープシティ株式会社 製品戦略室 プリンシパルエンジニア
八巻 雄哉
Twitter @yamaki00

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【形】
 発展段階の；新出現の

5. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
.NETエンジニアの状況は？

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
シングルページアプリケーション
ディスプレイモード

10. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
ポータブルクラスライブラリ

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 を利用した汎用性のあるクラス ライブラリの使用

14. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
MVVMのイメージ図
View
ViewModel
Model

15. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
ASP.NET Web API

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 リソースの削除

17. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
Demo2

18. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
Microsoft ASP.NET Web API 2.1 Client

19. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
振り返り
デスクトップ
アプリ（WPF）
Windowsストア
アプリ
ViewModelと
Model
（ポータブル
クラスライブラリ）
XAML C#/VisualBasic
クライアント側 サーバー側

20. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
デスクトップアプリ
（WPF）
Windowsストアアプリ
振り返り

21. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
グレープシティのソリューション

22. Desktop Packシリーズ
44%OFF 42%OFF

23. ComponentOne Studio for WinRT XAML

24. MultTouch for Windows Forms 1.0J

25. 各Windowsフォーム製品でのタッチ対応

26. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
シングルページアプリケーション

27. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
シングルページアプリケーション（SPA）
 クライアントサイドのアーキテクチャに重点をおいた
設計アプローチ
 その名の通り、 １つのページで完全に動作する
Webアプリ
 ページ全体の更新や再読み込みなし
 アプリケーションプログラムのほとんどは
クライアントサイドで実行され、Webブラウザーと
サーバーのやり取りは必要なデータの交換のみ

28. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
One ASP.NET

29. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
Single Page Application テンプレート

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

33. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
Demo3

34. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
振り返り
デスクトップ
アプリ（WPF）
Windowsストア
アプリ
PC向け
Webアプリ
ViewModelと
Model
（ポータブル
クラスライブラリ）
ViewModelと
Model
HTML/CSS
XAML C#/VisualBasic
JavaScript
クライアント側 サーバー側

35. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
グレープシティのソリューション

36. ウ ィ ジ モ

37.  jQuery UIベースのUIウィジェット集
 40種類以上のウィジェットであらゆるUIをカバー
 20種類以上のテーマが用意され、ThemeRoller サポート
 ブラウザはjQuery 1.xとjQuery Mobileのサポートに準拠
 日本語のドキュメント、日本語による技術サポートを提供
 GNU GPLv3と商用ライセンスのデュアルライセンス
 Knockout統合ライブラリを収録し、
Knockoutとシームレスに統合
ウ ィ ジ モ

38. ウ ェ ブ グ イ Windowsフォームと同様の開発手法で、
モダンなWebアプリを開発する
（シングルページアプリケーション）
ASP.NETベースのフレームワーク

39. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
ディスプレイモード

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クラスにモードを追加

42. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
Demo4

43. エフスタ!!SENDAI 2 （MVP Community Camp 2014 – Tohoku）
グレープシティのソリューション

44.  アダプティブウィジェット
 モバイル Web アプリケーションと非モバイル Web アプリケーションの
両方で使用できる
 jQuery UI 参照ではなく jQuery Mobile 参照を使用する
 スクリプトでウィジェットを初期化する代わりに、
マークアップで data-role 属性を使用して
ウィジェットを作成する
ウ ィ ジ モ

45. ウ ェ ブ グ イ
サービスパック１で
モバイル向けページの作成に対応予定

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