Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Learn from the Expert
UWP アプリを JavaScript で作る
3つの方法
BluewaterSoft biac
Microsoft MVP for Windows Development
UWPアプリをJavaScriptで作る3つの方法
スピーカー紹介 (1/2)
• BluewaterSoft 山本康彦 / @biac
• UWP アプリを開発したり
• UWP アプリ開発の講師とか
• UWP アプリ開発の記事とか
2
@...
UWPアプリをJavaScriptで作る3つの方法
スピーカー紹介 (2/2)
• 近刊予告❢
3
☆ 今どきの .NET には欠かせない!
☆ Xp を「卒業」した開発者に!
2016年 2月4月頃 発売予定
300ページ以上
UWPアプリをJavaScriptで作る3つの方法4
コミュニティ紹介: わんくま同盟
•勉強会 http://wankuma.com/seminar/
東京・大阪・名古屋・福岡・横浜・マニラ、ほか
ほぼ毎週どこかで勉強会。次回の名古屋は 5月...
UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
5
UWPアプリをJavaScriptで作る3つの方法
JavaScript
•今どきの開発者なら、誰でも使っている❢
.NET開発者でも、ASP.NETのクライアントサイドやWebBrowser
コントロールの中では、JavaScriptを使って...
UWPアプリをJavaScriptで作る3つの方法
JavaScript用OSSライブラリーの例 (1/2)
•jQuery
これ無しでDOMの操作ってどうやるんだっけ!? …というくらいに、
使うのが当たり前になっている。
合わせて使うと便利...
UWPアプリをJavaScriptで作る3つの方法
JavaScript用OSSライブラリーの例 (2/2)
• .NETな世界からも、JavaScript用ライブラリー
•linq.js
.NETからLINQを移植 by @neuecc
•R...
UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
9
UWPアプリをJavaScriptで作る3つの方法
UWPアプリとは?
• UWP (Universal Windows Platform) 上で動くアプリ
• UWPとは?
Windows 10に共通するアプリケーション プラットフォーム
•...
UWPアプリをJavaScriptで作る3つの方法
UWPはWindows 10のWindows 10たる要素
device family Desktop Mobile IoT Xbox Team HoloLens(仮)
製品形態
・デスクトッ...
UWPアプリをJavaScriptで作る3つの方法
Surface Hub と HoloLens
12
Surface Hub の公式ページより
Build 2015、1日目のキーノート動画より
UWPアプリをJavaScriptで作る3つの方法
UWPアプリの開発方法 (開発言語別)
•C#, VB + XAML
Windows Runtime (UWP API)と.NET Frameworkの一部
•C++/CX + XAML, D...
UWPアプリをJavaScriptで作る3つの方法
Windowsストア
• UWPアプリの配布は、原則としてWindowsストア
• 【ユーザーのメリット】マルウェアの心配がない
• 【ユーザーのメリット】アプリを自動更新できる
• 【開発者...
UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
15
UWPアプリをJavaScriptで作る3つの方法
【1】普通に作る (1/3)
• VS 2015の新規作成で
JavaScriptを選ぶ
• HTML/CSSと
JavaScriptを使って
コーディング
16
UWPアプリをJavaScriptで作る3つの方法
【1】普通に作る (2/3)
17
メイン画面メイン画面
NuGetから入れたライブラリーを
ここに置いた (jQueryとRxJS)
※置き場所の決まりはない
NuGetから入れたライブラリ...
UWPアプリをJavaScriptで作る3つの方法
【1】普通に作る (3/3)
•Win10で動く
デスクトップ
Win10 phone
…etc.
18
UWPアプリをJavaScriptで作る3つの方法
【2】手抜き(?)で作る (1/4)
•Hosted Web App という作り方
別名 "Windows Bridge for Web Apps" (code name: "Project
...
UWPアプリをJavaScriptで作る3つの方法
【2】手抜き(?)で作る Hosted Web App (2/4)
•Hosted Web App のメリット
「Webページへのショートカット(タイル)でいいじゃん!?」
それ以上のメリット...
UWPアプリをJavaScriptで作る3つの方法
【2】Hosted Web App (3/4)
• VS 2015の新規作成で
JavaScriptを選ぶ
…のは【1】と同じ
• 後は⇩この作り方を見て!
Create your Hoste...
UWPアプリをJavaScriptで作る3つの方法
【2】Hosted Web App (4/4)
•Win10で動く
デスクトップ
Win10 phone
…etc.
•WinJSを
フルに活用
この画像では、右下に
Windowsのトースト...
UWPアプリをJavaScriptで作る3つの方法
【3】サードパーティ ツールで作る (1/6)
• UWPアプリ開発用のサードパーティ ツールにはいくつかある。
でもJavaScriptでの開発となれば、⇩これ♪
•Apache Cordo...
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (2/6)
•Cordovaはクロスプラット フォーム開発環境
Cordovaのドキュメント サイトより Platform Support
24
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (3/6)
• CordovaでUWPアプリを作る準備
• その1: Windows 10
テスト用にエミュレーターを使いたければ、Hyper-Vが動く64bitの...
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (4/6)
• Visual Studio Tools for Apache Cordova の注意事項
• 「Visual StudioのNode.jsツール」の...
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (5/6)
• VS 2015の新規作成
ダイアログで
JavaScriptの
Apache Cordova
Appsを選ぶ
• HTML/CSSと
JavaScr...
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (6/6)
•Win10で動く
•iPhoneで動く
※ 画像はRipple
エミュレーター
on Chrome
•Androidで動く
28
UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
29
UWPアプリをJavaScriptで作る3つの方法
wrap up
•JavaScript でクライアント用アプリが作れる
•Cordova で作れば、Windows 10 でも動くよ♪
•スマホ アプリは Cordova で作ろう❢
30
UWPアプリをJavaScriptで作る3つの方法31
ご清聴 ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

3,717 views

Published on

NAGOYA ComCamp 2016

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

Published in: Technology

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

  1. 1. Learn from the Expert UWP アプリを JavaScript で作る 3つの方法 BluewaterSoft biac Microsoft MVP for Windows Development
  2. 2. UWPアプリをJavaScriptで作る3つの方法 スピーカー紹介 (1/2) • BluewaterSoft 山本康彦 / @biac • UWP アプリを開発したり • UWP アプリ開発の講師とか • UWP アプリ開発の記事とか 2 @IT WinRT/Metro TIPS (連載) @IT 特集記事 Build Insider 特集記事
  3. 3. UWPアプリをJavaScriptで作る3つの方法 スピーカー紹介 (2/2) • 近刊予告❢ 3 ☆ 今どきの .NET には欠かせない! ☆ Xp を「卒業」した開発者に! 2016年 2月4月頃 発売予定 300ページ以上
  4. 4. UWPアプリをJavaScriptで作る3つの方法4 コミュニティ紹介: わんくま同盟 •勉強会 http://wankuma.com/seminar/ 東京・大阪・名古屋・福岡・横浜・マニラ、ほか ほぼ毎週どこかで勉強会。次回の名古屋は 5月❢ •ブログ http://blogs.wankuma.com/ 主に開発系だけど、ノンジャンル •掲示板 http://bbs.wankuma.com/ C#とVB.NETの掲示板
  5. 5. UWPアプリをJavaScriptで作る3つの方法 agenda •JavaScriptでアプリを作るメリットとは? •UWPアプリとは? •UWPアプリをJavaScriptで作る 3つの方法 5
  6. 6. UWPアプリをJavaScriptで作る3つの方法 JavaScript •今どきの開発者なら、誰でも使っている❢ .NET開発者でも、ASP.NETのクライアントサイドやWebBrowser コントロールの中では、JavaScriptを使っている •豊富なOSSライブラリーが使える❢ 6
  7. 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. 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. 9. UWPアプリをJavaScriptで作る3つの方法 agenda •JavaScriptでアプリを作るメリットとは? •UWPアプリとは? •UWPアプリをJavaScriptで作る 3つの方法 9
  10. 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. 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. 12. UWPアプリをJavaScriptで作る3つの方法 Surface Hub と HoloLens 12 Surface Hub の公式ページより Build 2015、1日目のキーノート動画より
  13. 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. 14. UWPアプリをJavaScriptで作る3つの方法 Windowsストア • UWPアプリの配布は、原則としてWindowsストア • 【ユーザーのメリット】マルウェアの心配がない • 【ユーザーのメリット】アプリを自動更新できる • 【開発者のメリット】アプリの配布やマネタイズのインフラを個別 に構築/維持する必要がない • 【開発者のメリット】インストール/アンインストール プログラム を開発しなくてよい 14
  15. 15. UWPアプリをJavaScriptで作る3つの方法 agenda •JavaScriptでアプリを作るメリットとは? •UWPアプリとは? •UWPアプリをJavaScriptで作る 3つの方法 15
  16. 16. UWPアプリをJavaScriptで作る3つの方法 【1】普通に作る (1/3) • VS 2015の新規作成で JavaScriptを選ぶ • HTML/CSSと JavaScriptを使って コーディング 16
  17. 17. UWPアプリをJavaScriptで作る3つの方法 【1】普通に作る (2/3) 17 メイン画面メイン画面 NuGetから入れたライブラリーを ここに置いた (jQueryとRxJS) ※置き場所の決まりはない NuGetから入れたライブラリーの 管理ファイル 開発者ライセンスから生成された デジタル署名
  18. 18. UWPアプリをJavaScriptで作る3つの方法 【1】普通に作る (3/3) •Win10で動く デスクトップ Win10 phone …etc. 18
  19. 19. UWPアプリをJavaScriptで作る3つの方法 【2】手抜き(?)で作る (1/4) •Hosted Web App という作り方 別名 "Windows Bridge for Web Apps" (code name: "Project Westminster") •WebページをUWPアプリとして動かす❢ 19
  20. 20. UWPアプリをJavaScriptで作る3つの方法 【2】手抜き(?)で作る Hosted Web App (2/4) •Hosted Web App のメリット 「Webページへのショートカット(タイル)でいいじゃん!?」 それ以上のメリットがある •WinJSがフルに使える❢ •Webサイトを更新すればアプリに反映❢ •Windowsストアのマネタイジングと分析機能 20
  21. 21. UWPアプリをJavaScriptで作る3つの方法 【2】Hosted Web App (3/4) • VS 2015の新規作成で JavaScriptを選ぶ …のは【1】と同じ • 後は⇩この作り方を見て! Create your Hosted Web App 不要なファイルを消して、 URLを何か所か設定するだけ 21
  22. 22. UWPアプリをJavaScriptで作る3つの方法 【2】Hosted Web App (4/4) •Win10で動く デスクトップ Win10 phone …etc. •WinJSを フルに活用 この画像では、右下に Windowsのトーストが 出ている(青い矢印) 22
  23. 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. 24. UWPアプリをJavaScriptで作る3つの方法 【3】Cordovaで作る (2/6) •Cordovaはクロスプラット フォーム開発環境 Cordovaのドキュメント サイトより Platform Support 24
  25. 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. 26. UWPアプリをJavaScriptで作る3つの方法 【3】Cordovaで作る (4/6) • Visual Studio Tools for Apache Cordova の注意事項 • 「Visual StudioのNode.jsツール」のインストールが別途必要 かも • ソースコードのパスに日本語が入ってるとアウト! orz • NuGetで.jsをインストールすると、アプリから参照できないフォル ダーに入るので、手動でwww配下にコピーする 26
  27. 27. UWPアプリをJavaScriptで作る3つの方法 【3】Cordovaで作る (5/6) • VS 2015の新規作成 ダイアログで JavaScriptの Apache Cordova Appsを選ぶ • HTML/CSSと JavaScriptを使って コーディング 27
  28. 28. UWPアプリをJavaScriptで作る3つの方法 【3】Cordovaで作る (6/6) •Win10で動く •iPhoneで動く ※ 画像はRipple エミュレーター on Chrome •Androidで動く 28
  29. 29. UWPアプリをJavaScriptで作る3つの方法 agenda •JavaScriptでアプリを作るメリットとは? •UWPアプリとは? •UWPアプリをJavaScriptで作る 3つの方法 29
  30. 30. UWPアプリをJavaScriptで作る3つの方法 wrap up •JavaScript でクライアント用アプリが作れる •Cordova で作れば、Windows 10 でも動くよ♪ •スマホ アプリは Cordova で作ろう❢ 30
  31. 31. UWPアプリをJavaScriptで作る3つの方法31 ご清聴 ありがとうございました

×