visual studio with cordova クロスプラットフォーム...

Visual Studio with Cordova

Visual Studio 2015 Apache Cordova

Cordova for Visual StudioMonaca for Visual Studio

Σ ( )=各種アプリをサービス化しクラウドで束ねて付加価値を最大化

モビリティの重要性～業務のスピードを上げ、機会獲得を増やす～

潜在顧客獲得

情報共有 意思決定Speed Up

機会獲得

モビリティを取り巻く状況

MEAP(MADP)

MCAP

• 3つ以上のモバイルアプリ• 3つ以上のモバイル OS• 3つ以上のバックエンド BYOD

BtoB BtoC

BtoE

MDM

mBaaS

BtoCBtoB

BYOD

MDM

MEAP(MADP)

MCAPmBaaS BOID GOIDBOID GOID

Inverse-BYODInverse-BYOD

Web

80% 86%

20% 14%

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

2013 2014

アプリとブラウザーで費やされた時間

Apps Web

Visual Studio

ネイティブ ハイブリッド

ハイブリッド

ネイティブ

• コンテンツを Web ビューでラップ• 手早い開発と展開• 豊富なライブラリ

• 完全にネイティブのバイナリ• 高パフォーマンス• ネイティブ API の直接利用

CordovaJS Web View

ネイティブラッパー

<webview>JavaScript AppCordova プラグイン

JS API

JS

Cordova Windows

Windows 8 Platform対象 Windows 8

ローカルコンテキストの WWA でホスト

Windows Phone 8 PlatformSilverlight アプリは webview

Widows Phone 7.5 Platform非推奨

Windows 7 Platformサポートされない

Windows 8.1 Platform対象 Windows 8.1 & Windows Phone 8.1ローカルコンテキストの WWA でホスト

引き続きWindows 8 も対象Desk

top/

tabl

etPh

one

Xbox

/Hub

Phase 0 Phase 1‘Windows’ Platform

対象 Universal Windows Platformリモート (既定) またはローカルモード

(config.xml で設定) の WWA

Embedded Cordova もサポート

Windows 8, 8.1, とWP8.1 も引き続きターゲットとする

Phase 2Win10 RTMSummer 2014

Windows Phone 8 PlatformCordova コミュニティが使用率が低いと判断するまで

Windows Phone 8 PlatformSilverlight アプリは webview

Visual Studio 2015 Apache Cordova 2

Apache Cordovafor

Visual Studio

Monaca for

Visual Studio

標準機能 プラグイン

Apache Cordova for Visual Studio～Visual Studio 2015 Cordova ～

Black Box

インストーラー シミュレーター プラグインの管理

Apache Cordova for Visual Studioが提供する機能

> 4.4 : 〇

< 4.4 : ×iOS : ×

• Android 2.33+(4.4◎)• iOS 6 , 7 , 8• Windows 8, 8.1• Windows Phone 8, 8.1

iOS : ×: 〇

: 〇iOS : 〇 (Ripple)

iOS アプリのビルドにはMac が必要

(Hyper-V&Ripple)

: 〇

: 〇Store 8, 8,1Phone 8.1

: ×Phone 8

: 〇 (Hyper-V)

“ ”

Monaca for Visual Studio～クラウドを活用したCordova開発環境～

デバイスAPIサービス連携

専用デバッガーによる実機テスト

iOS, Android, Windowsに対応

ビルドデバッグ構成管理

Microsoft Azureとの連携

バックエンド

高パフォーマンスOnsen UI

モバイルUI

Monaca＋Cordovaの主な特徴

• ワンソースで３プラットフォームに対応• セキュリティ対策済みのWebView• HTML5やJSプログラムの暗号化• アプリの自動アップデート機能

• Visual Studioの強力な開発支援機能• Mac不要のiOS開発、デバッグ、ビルド• Microsoft Azure、Git、TFSとの親和性• 日本語ドキュメント / インタフェース

Apache Cordova for Visual Studio とMonaca for Visual Studio

Apache Cordova for Visual Studio Monaca for Visual Studioインストール ローカル クラウド(一部ローカル)コンパイル ローカル クラウドエディタ Visual Studio IDE Visual Studio IDE / Webデバッガ Apache Ripple/Hyper-V (iOS 除く) Monaca デバッガ

パッケージ Android, Windows 8.x, Windows Phone 8.x

Android, iOS,Windows 8.x,

Windows Phone 8.x使用料 無償 一部有償

UI ～HTML5 UI ～

Windows Library for JavaScript (WinJS)～HTML5 アプリケーションを開発するためのフレームワーク～

WinJS

https://github.com/winjs/winjs

WinJS

Promiseモデル (非同期)スケジューラーXHR (HTTP リクエスト) データバインドバインドテンプレートフラグメントナビゲーション

WinJS1 ～ 2.0 3.0 4.0

Preview

• WinJS 2.0 with Windows 8.1• WinJS Xbox 1.0 with Xbox One• WinJS Phone 2.1 with Windows Phone 8.1

2.1

• WinRTとの依存関係解消• Web ブラウザーで動作可能に

• デスクトップとモバイルブラウザー

• モジュール化• 最適化されたMinify

• ユニバーサルコントロール• 既存コントロールの更新• AngularJS ディレクティブ

WinJS 4.0レスポンシブなコントロール

さまざまな入力デバイスに対応

AngularJS 用のラッパー

Try WinJShttp://try.buildwinjs.com/

～アプリ開発に集中するためのHTML5フレームワーク～

Onsen UIの特徴各OSのデザイン基準に適合

アプリ開発フレームワーク

高いカスタマイズ性

Custom Elements～すべてのコンポーネントはタグ化～

Onsen UIを学ぼう

http://ja.onsen.io

その他

HTML5 JavaScript

“hosted”

http://www.manifoldjs.com/

まとめ

♥

場所 ID タイトル9:30 Room D WIN-009 開発者のための Windows 10 アプリプラットフォーム10:50 Room G DEV-011 Xamarin.Forms と Web API による実践的クロスデバイス業務アプリケーション開発13:15 Room B WIN-008 マイクロソフトの Web ブラウザのいままでとこれから14:35 Room F DEV-016 新サービスAzure App Serviceで変わる新しい Web/モバイルアプリケーション開発15:55 Room E MOP-002 ハイブリッドデバイス管理～Microsoft Intune～18:35 Room B WIN-015 Windows 10 for Phone の全て

Day 2

場所 ID タイトル14:45 Room C WIN-001 Windows 10 アプリ開発解説 Part 1 ～基礎編～16:05 Room B DEV-001 Visual Studio 2015 ～広がるアプリ開発の可能性と統合開発環境の進化～17:25 Room A DEV-004 .NET 2015 概要～クロスプラットフォーム対応とオープン化～17:25 Room D WIN-012 Windows 10 アプリ開発解説 Part 1 ～応用編～

Day 1