31
Learn from the Expert UWP アプリを JavaScript で作る 3つの方法 BluewaterSoft biac Microsoft MVP for Windows Development

UWP アプリを JavaScript で作る 3つの方法

Embed Size (px)

Citation preview

Page 1: UWP アプリを JavaScript で作る 3つの方法

Learn from the Expert

UWP アプリを JavaScript で作る3つの方法

BluewaterSoft biac

Microsoft MVP for Windows Development

Page 2: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

スピーカー紹介 (1/2)

• BluewaterSoft 山本康彦 / @biac

• UWP アプリを開発したり

• UWP アプリ開発の講師とか

• UWP アプリ開発の記事とか

2

@IT WinRT/Metro TIPS (連載) @IT特集記事 Build Insider 特集記事

Page 3: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

スピーカー紹介 (2/2)

• 近刊予告❢

3

☆ 今どきの .NET には欠かせない!☆ Xp を「卒業」した開発者に!

2016年 2月4月頃 発売予定300ページ以上

Page 4: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法4

コミュニティ紹介: わんくま同盟

•勉強会 http://wankuma.com/seminar/東京・大阪・名古屋・福岡・横浜・マニラ、ほかほぼ毎週どこかで勉強会。次回の名古屋は 5月❢

•ブログ http://blogs.wankuma.com/主に開発系だけど、ノンジャンル

•掲示板 http://bbs.wankuma.com/C#とVB.NETの掲示板

Page 5: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

agenda

•JavaScriptでアプリを作るメリットとは?

•UWPアプリとは?

•UWPアプリをJavaScriptで作る 3つの方法

5

Page 6: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

JavaScript

•今どきの開発者なら、誰でも使っている❢

.NET開発者でも、ASP.NETのクライアントサイドやWebBrowserコントロールの中では、JavaScriptを使っている

•豊富なOSSライブラリーが使える❢

6

Page 7: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

JavaScript用OSSライブラリーの例 (1/2)

• jQueryこれ無しでDOMの操作ってどうやるんだっけ!? …というくらいに、使うのが当たり前になっている。合わせて使うと便利なプラグイン: jQuery UI、Slidebars、Chart.js、Share Button、etc.

•AngularJSHTMLを拡張し、クライアント側でMVCモデルを実現。ようは、Webサーバーからデータだけをもらってきて、あとはJavaScriptで画面を制御!合わせて使うと便利なプラグイン: UI Bootstrap、AngularUI、etc.

7

Page 8: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

JavaScript用OSSライブラリーの例 (2/2)

• .NETな世界からも、JavaScript用ライブラリー

• linq.js.NETからLINQを移植 by @neuecc

•RxJSRx (Reactive Extensions)を移植 by MS Open Tech

•WinJSUWPアプリを作るためのライブラリー。FirefoxやChromeでも動作する

8

Page 9: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

agenda

•JavaScriptでアプリを作るメリットとは?

•UWPアプリとは?

•UWPアプリをJavaScriptで作る 3つの方法

9

Page 10: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

UWPアプリとは?

• UWP (Universal Windows Platform) 上で動くアプリ

• UWPとは?Windows 10に共通するアプリケーション プラットフォーム

• …ぇえっと?? どうどう巡り???まぁ、「Windows 10で共通に動くアプリ」ってことで f(^^;

※ Windows Phone 7.x/8.x用のアプリをWindows 10 Mobileで動かしているのはUWPか? とか、従来のアプリをUWP上で動かすProject Centennialとか、細かいことを言い出すとUWPの定義は謎だらけ

10

Page 11: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

UWPはWindows 10のWindows 10たる要素

device family Desktop Mobile IoT Xbox Team HoloLens(仮)

製品形態

・デスクトップPC・ノートPC・タブレットPC

・スマートフォン・タブレット

組み込み Xbox One Surface Hub HoloLens

UWP搭載(●はUWPのみ)

○ ○ ● ○ ● ●

付加機能

従来のWindowsデスクトップ用アプリ

Windows Phone 7.x/8.x用アプリ

― Xboxゲーム ― ―

11

Page 12: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

Surface Hub と HoloLens

12

Surface Hub の公式ページより

Build 2015、1日目のキーノート動画より

Page 13: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

UWPアプリの開発方法 (開発言語別)

•C#, VB + XAMLWindows Runtime (UWP API)と.NET Frameworkの一部

•C++/CX + XAML, DirectX上記に加えて、Win32 APIやDirectXの一部

•JavaScript, TypeScript + HTML/CSSWinJS※ Windows Runtime等は、C#/VB/C++でDLLを作って利用する

13

Page 14: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

Windowsストア

• UWPアプリの配布は、原則としてWindowsストア

• 【ユーザーのメリット】マルウェアの心配がない

• 【ユーザーのメリット】アプリを自動更新できる

• 【開発者のメリット】アプリの配布やマネタイズのインフラを個別に構築/維持する必要がない

• 【開発者のメリット】インストール/アンインストール プログラムを開発しなくてよい

14

Page 15: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

agenda

•JavaScriptでアプリを作るメリットとは?

•UWPアプリとは?

•UWPアプリをJavaScriptで作る 3つの方法

15

Page 16: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【1】普通に作る (1/3)

• VS 2015の新規作成でJavaScriptを選ぶ

• HTML/CSSとJavaScriptを使ってコーディング

16

Page 17: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【1】普通に作る (2/3)

17

メイン画面メイン画面

NuGetから入れたライブラリーをここに置いた (jQueryとRxJS)※置き場所の決まりはない

NuGetから入れたライブラリーの管理ファイル

開発者ライセンスから生成されたデジタル署名

Page 18: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【1】普通に作る (3/3)

•Win10で動くデスクトップWin10 phone…etc.

18

Page 19: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【2】手抜き(?)で作る (1/4)

•Hosted Web App という作り方別名 "Windows Bridge for Web Apps" (code name: "Project Westminster")

•WebページをUWPアプリとして動かす❢

19

Page 20: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【2】手抜き(?)で作る Hosted Web App (2/4)

•Hosted Web App のメリット「Webページへのショートカット(タイル)でいいじゃん!?」それ以上のメリットがある

•WinJSがフルに使える❢

•Webサイトを更新すればアプリに反映❢

•Windowsストアのマネタイジングと分析機能

20

Page 21: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【2】Hosted Web App (3/4)

• VS 2015の新規作成でJavaScriptを選ぶ…のは【1】と同じ

• 後は⇩この作り方を見て!Create your Hosted Web App

不要なファイルを消して、URLを何か所か設定するだけ

21

Page 22: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【2】Hosted Web App (4/4)

•Win10で動くデスクトップWin10 phone…etc.

•WinJSをフルに活用この画像では、右下にWindowsのトーストが出ている(青い矢印)

22

Page 23: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【3】サードパーティ ツールで作る (1/6)

• UWPアプリ開発用のサードパーティ ツールにはいくつかある。でもJavaScriptでの開発となれば、⇩これ♪

•Apache CordovaNitobi Softwareが開発(PhoneGap) ⇨ Adobe が買収してApache Software Foundationに寄贈

PhoneGapベースの開発ツールはCordovaの他に次のようなものがある: Monaca、ViziApps、 MobileFirst Platform (旧名Worklight) 、Convertigo、appMobi

23

Page 24: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【3】Cordovaで作る (2/6)

•Cordovaはクロスプラット フォーム開発環境Cordovaのドキュメント サイトより Platform Support

24

Page 25: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【3】Cordovaで作る (3/6)

• CordovaでUWPアプリを作る準備

• その1: Windows 10テスト用にエミュレーターを使いたければ、Hyper-Vが動く64bitのPro版

• その2: Visual Studio 2015無償のCommunity EditionでOK♪

• その3: Visual Studio Tools for Apache CordovaVS2015 Communityでは、標準インストールで入らない。インストール時にカスタマイズが必要。

25

Page 26: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【3】Cordovaで作る (4/6)

• Visual Studio Tools for Apache Cordova の注意事項

• 「Visual StudioのNode.jsツール」のインストールが別途必要かも

• ソースコードのパスに日本語が入ってるとアウト! orz

• NuGetで.jsをインストールすると、アプリから参照できないフォルダーに入るので、手動でwww配下にコピーする

26

Page 27: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【3】Cordovaで作る (5/6)

• VS 2015の新規作成ダイアログでJavaScriptのApache CordovaAppsを選ぶ

• HTML/CSSとJavaScriptを使ってコーディング

27

Page 28: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

【3】Cordovaで作る (6/6)

•Win10で動く

• iPhoneで動く※ 画像はRipple

エミュレーターon Chrome

•Androidで動く

28

Page 29: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

agenda

•JavaScriptでアプリを作るメリットとは?

•UWPアプリとは?

•UWPアプリをJavaScriptで作る 3つの方法

29

Page 30: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法

wrap up

• JavaScript でクライアント用アプリが作れる

•Cordova で作れば、Windows 10 でも動くよ♪

•スマホ アプリは Cordova で作ろう❢

30

Page 31: UWP アプリを JavaScript で作る 3つの方法

UWPアプリをJavaScriptで作る3つの方法31

ご清聴 ありがとうございました