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 PhoneWindows ストアアプリ用 .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 APIRESTfulなサービスを提供するのに適した

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）

クライアントサイドのアーキテクチャに重点をおいた設計アプローチ

その名の通り、１つのページで完全に動作する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 属性を使用してウィジェットを作成する

ウ ィ ジ モ

ウ ェ ブ グ イ

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

まとめ

デスクトップアプリ（WPF）

Windowsストアアプリ

デスクトップ向けWebアプリ

モバイル向けWebアプリ

ViewModelとModel

（ポータブルクラスライブラリ）

ViewModelとModel

HTML/CSS

XAML C#/VisualBasic

JavaScript

クライアント側 サーバー側

まとめ

MVVM

JavaScript

jQuery

Knockout

ASP.NET Web API

PCL シングルページアプリケーション