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

1,713 views

Published on

NAGOYA ComCamp 2016

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,713
On SlideShare
0
From Embeds
0
Number of Embeds
180
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 ご清聴 ありがとうございました

×