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

37
Visual Studio with Cordova

Upload: others

Post on 12-Jul-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Visual Studio with Cordova

Page 2: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Visual Studio 2015 Apache Cordova

Cordova for Visual StudioMonaca for Visual Studio

Page 3: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 4: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 5: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

Page 6: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

潜在顧客獲得

情報共有 意思決定Speed Up

機会獲得

Page 7: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

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

Page 8: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Web

80% 86%

20% 14%

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

2013 2014

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

Apps Web

Page 9: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Visual Studio

ネイティブ ハイブリッド

Page 10: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

ハイブリッド

ネイティブ

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

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

Page 11: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 12: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

CordovaJS Web View

ネイティブラッパー

<webview>JavaScript AppCordova プラグイン

JS API

JS

Page 13: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

Page 14: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Visual Studio 2015 Apache Cordova 2

Apache Cordovafor

Visual Studio

Monaca for

Visual Studio

標準機能 プラグイン

Page 15: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Apache Cordova for Visual Studio~Visual Studio 2015 Cordova ~

Black Box

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

Page 16: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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)

“ ”

Page 17: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 18: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

デバイスAPIサービス連携

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

iOS, Android, Windowsに対応

ビルドデバッグ構成管理

Microsoft Azureとの連携

バックエンド

高パフォーマンスOnsen UI

モバイルUI

Page 19: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Monaca+Cordovaの主な特徴

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

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

Page 20: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 21: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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使用料 無償 一部有償

Page 22: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

UI ~HTML5 UI ~

Page 23: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

WinJS

https://github.com/winjs/winjs

Page 24: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

WinJS

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

Page 25: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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 ディレクティブ

Page 26: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

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

AngularJS 用のラッパー

Page 27: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Try WinJShttp://try.buildwinjs.com/

Page 28: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

Page 29: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 30: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

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

高いカスタマイズ性

Page 31: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

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

Page 32: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

Onsen UIを学ぼう

http://ja.onsen.io

Page 33: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

その他

HTML5 JavaScript

“hosted”

http://www.manifoldjs.com/

Page 34: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova
Page 35: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

まとめ

Page 36: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova

場所 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

Page 37: Visual Studio with Cordova クロスプラットフォーム …download.microsoft.com/download/F/F/F/FFF40A16-BFC2-4814...JavaScript App Cordova プラグイン JS API JS Cordova