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

.NET技術でこれからも食べていくための技術戦略