NAGOYA ComCamp 2016 パワポのファイルとサンプルコードはOneDriveに ⇨ http://1drv.ms/1XD3B3r

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

2. UWPアプリをJavaScriptで作る3つの方法
スピーカー紹介 (1/2)
• BluewaterSoft 山本康彦 / @biac
• UWP アプリを開発したり
• UWP アプリ開発の講師とか
• UWP アプリ開発の記事とか
2
@IT WinRT/Metro TIPS (連載) @IT 特集記事 Build Insider 特集記事

3. UWPアプリをJavaScriptで作る3つの方法
スピーカー紹介 (2/2)
• 近刊予告❢
3
☆ 今どきの .NET には欠かせない!
☆ Xp を「卒業」した開発者に!
2016年 2月4月頃 発売予定
300ページ以上

4. UWPアプリをJavaScriptで作る3つの方法4
コミュニティ紹介: わんくま同盟
•勉強会 http://wankuma.com/seminar/
東京・大阪・名古屋・福岡・横浜・マニラ、ほか
ほぼ毎週どこかで勉強会。次回の名古屋は 5月❢
•ブログ http://blogs.wankuma.com/
主に開発系だけど、ノンジャンル
•掲示板 http://bbs.wankuma.com/
C#とVB.NETの掲示板

5. UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
5

6. UWPアプリをJavaScriptで作る3つの方法
JavaScript
•今どきの開発者なら、誰でも使っている❢
.NET開発者でも、ASP.NETのクライアントサイドやWebBrowser
コントロールの中では、JavaScriptを使っている
•豊富なOSSライブラリーが使える❢
6

7. UWPアプリをJavaScriptで作る3つの方法
JavaScript用OSSライブラリーの例 (1/2)
•jQuery
これ無しでDOMの操作ってどうやるんだっけ!? …というくらいに、
使うのが当たり前になっている。
合わせて使うと便利なプラグイン: jQuery UI、Slidebars、Chart.js、
Share Button、etc.
•AngularJS
HTMLを拡張し、クライアント側でMVCモデルを実現。ようは、
Webサーバーからデータだけをもらってきて、あとはJavaScriptで
画面を制御!
合わせて使うと便利なプラグイン: UI Bootstrap、AngularUI、etc.
7

8. UWPアプリをJavaScriptで作る3つの方法
JavaScript用OSSライブラリーの例 (2/2)
• .NETな世界からも、JavaScript用ライブラリー
•linq.js
.NETからLINQを移植 by @neuecc
•RxJS
Rx (Reactive Extensions)を移植 by MS Open Tech
•WinJS
UWPアプリを作るためのライブラリー。FirefoxやChrome
でも動作する
8

9. UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
9

10. 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

11. 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

12. UWPアプリをJavaScriptで作る3つの方法
Surface Hub と HoloLens
12
Surface Hub の公式ページより
Build 2015、1日目のキーノート動画より

13. UWPアプリをJavaScriptで作る3つの方法
UWPアプリの開発方法 (開発言語別)
•C#, VB ＋ XAML
Windows Runtime (UWP API)と.NET Frameworkの一部
•C++/CX ＋ XAML, DirectX
上記に加えて、Win32 APIやDirectXの一部
•JavaScript, TypeScript ＋ HTML/CSS
WinJS
※ Windows Runtime等は、C#/VB/C++でDLLを作って利用する
13

14. UWPアプリをJavaScriptで作る3つの方法
Windowsストア
• UWPアプリの配布は、原則としてWindowsストア
• 【ユーザーのメリット】マルウェアの心配がない
• 【ユーザーのメリット】アプリを自動更新できる
• 【開発者のメリット】アプリの配布やマネタイズのインフラを個別
に構築/維持する必要がない
• 【開発者のメリット】インストール/アンインストール プログラム
を開発しなくてよい
14

15. UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
15

16. UWPアプリをJavaScriptで作る3つの方法
【1】普通に作る (1/3)
• VS 2015の新規作成で
JavaScriptを選ぶ
• HTML/CSSと
JavaScriptを使って
コーディング
16

17. UWPアプリをJavaScriptで作る3つの方法
【1】普通に作る (2/3)
17
メイン画面メイン画面
NuGetから入れたライブラリーを
ここに置いた (jQueryとRxJS)
※置き場所の決まりはない
NuGetから入れたライブラリーの
管理ファイル
開発者ライセンスから生成された
デジタル署名

18. UWPアプリをJavaScriptで作る3つの方法
【1】普通に作る (3/3)
•Win10で動く
デスクトップ
Win10 phone
…etc.
18

19. UWPアプリをJavaScriptで作る3つの方法
【2】手抜き(?)で作る (1/4)
•Hosted Web App という作り方
別名 "Windows Bridge for Web Apps" (code name: "Project
Westminster")
•WebページをUWPアプリとして動かす❢
19

20. UWPアプリをJavaScriptで作る3つの方法
【2】手抜き(?)で作る Hosted Web App (2/4)
•Hosted Web App のメリット
「Webページへのショートカット(タイル)でいいじゃん!?」
それ以上のメリットがある
•WinJSがフルに使える❢
•Webサイトを更新すればアプリに反映❢
•Windowsストアのマネタイジングと分析機能
20

21. UWPアプリをJavaScriptで作る3つの方法
【2】Hosted Web App (3/4)
• VS 2015の新規作成で
JavaScriptを選ぶ
…のは【1】と同じ
• 後は⇩この作り方を見て!
Create your Hosted Web App
不要なファイルを消して、
URLを何か所か設定するだけ
21

22. UWPアプリをJavaScriptで作る3つの方法
【2】Hosted Web App (4/4)
•Win10で動く
デスクトップ
Win10 phone
…etc.
•WinJSを
フルに活用
この画像では、右下に
Windowsのトーストが
出ている(青い矢印)
22

23. UWPアプリをJavaScriptで作る3つの方法
【3】サードパーティ ツールで作る (1/6)
• UWPアプリ開発用のサードパーティ ツールにはいくつかある。
でもJavaScriptでの開発となれば、⇩これ♪
•Apache Cordova
Nitobi Softwareが開発(PhoneGap) ⇨ Adobe が買収してApache
Software Foundationに寄贈
PhoneGapベースの開発ツールはCordovaの他に次のようなものがある:
Monaca、ViziApps、 MobileFirst Platform (旧名Worklight) 、Convertigo、
appMobi
23

24. UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (2/6)
•Cordovaはクロスプラット フォーム開発環境
Cordovaのドキュメント サイトより Platform Support
24

25. 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 Cordova
VS2015 Communityでは、標準インストールで入らない。
インストール時にカスタマイズが必要。
25

26. UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (4/6)
• Visual Studio Tools for Apache Cordova の注意事項
• 「Visual StudioのNode.jsツール」のインストールが別途必要
かも
• ソースコードのパスに日本語が入ってるとアウト! orz
• NuGetで.jsをインストールすると、アプリから参照できないフォル
ダーに入るので、手動でwww配下にコピーする
26

27. UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (5/6)
• VS 2015の新規作成
ダイアログで
JavaScriptの
Apache Cordova
Appsを選ぶ
• HTML/CSSと
JavaScriptを使って
コーディング
27

28. UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (6/6)
•Win10で動く
•iPhoneで動く
※ 画像はRipple
エミュレーター
on Chrome
•Androidで動く
28

29. UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
29

30. UWPアプリをJavaScriptで作る3つの方法
wrap up
•JavaScript でクライアント用アプリが作れる
•Cordova で作れば、Windows 10 でも動くよ♪
•スマホ アプリは Cordova で作ろう❢
30

31. UWPアプリをJavaScriptで作る3つの方法31
ご清聴 ありがとうございました