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

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

• 1.
  Learn from theExpert 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 (UniversalWindows 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たる要素 devicefamily 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) • VS2015の新規作成で 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 WebApp という作り方 別名 "Windows Bridge for Web Apps" (code name: "Project Westminster") •WebページをUWPアプリとして動かす❢ 19
• 20.
  UWPアプリをJavaScriptで作る3つの方法 【2】手抜き(?)で作る Hosted WebApp (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) • VisualStudio Tools for Apache Cordova の注意事項 • 「Visual StudioのNode.jsツール」のインストールが別途必要 かも • ソースコードのパスに日本語が入ってるとアウト! orz • NuGetで.jsをインストールすると、アプリから参照できないフォル ダーに入るので、手動でwww配下にコピーする 26
• 27.
  UWPアプリをJavaScriptで作る3つの方法 【3】Cordovaで作る (5/6) • VS2015の新規作成 ダイアログで JavaScriptの Apache Cordova Appsを選ぶ • HTML/CSSと JavaScriptを使って コーディング 27
• 28.
  UWPアプリをJavaScriptで作る3つの方法 【3】Cordovaで作る (6/6) •Win10で動く •iPhoneで動く ※ 画像はRipple エミュレーター onChrome •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 ご清聴 ありがとうございました