Upload
yasuhiko-yamamoto
View
1.975
Download
0
Embed Size (px)
Citation preview
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
@IT WinRT/Metro TIPS (連載) @IT特集記事 Build Insider 特集記事
UWPアプリをJavaScriptで作る3つの方法
スピーカー紹介 (2/2)
• 近刊予告❢
3
☆ 今どきの .NET には欠かせない!☆ Xp を「卒業」した開発者に!
2016年 2月4月頃 発売予定300ページ以上
UWPアプリをJavaScriptで作る3つの方法4
コミュニティ紹介: わんくま同盟
•勉強会 http://wankuma.com/seminar/東京・大阪・名古屋・福岡・横浜・マニラ、ほかほぼ毎週どこかで勉強会。次回の名古屋は 5月❢
•ブログ http://blogs.wankuma.com/主に開発系だけど、ノンジャンル
•掲示板 http://bbs.wankuma.com/C#とVB.NETの掲示板
UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
5
UWPアプリをJavaScriptで作る3つの方法
JavaScript
•今どきの開発者なら、誰でも使っている❢
.NET開発者でも、ASP.NETのクライアントサイドやWebBrowserコントロールの中では、JavaScriptを使っている
•豊富なOSSライブラリーが使える❢
6
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
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
UWPアプリをJavaScriptで作る3つの方法
agenda
•JavaScriptでアプリを作るメリットとは?
•UWPアプリとは?
•UWPアプリをJavaScriptで作る 3つの方法
9
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
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
UWPアプリをJavaScriptで作る3つの方法
Surface Hub と HoloLens
12
Surface Hub の公式ページより
Build 2015、1日目のキーノート動画より
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
UWPアプリをJavaScriptで作る3つの方法
Windowsストア
• UWPアプリの配布は、原則としてWindowsストア
• 【ユーザーのメリット】マルウェアの心配がない
• 【ユーザーのメリット】アプリを自動更新できる
• 【開発者のメリット】アプリの配布やマネタイズのインフラを個別に構築/維持する必要がない
• 【開発者のメリット】インストール/アンインストール プログラムを開発しなくてよい
14
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 Westminster")
•WebページをUWPアプリとして動かす❢
19
UWPアプリをJavaScriptで作る3つの方法
【2】手抜き(?)で作る Hosted Web App (2/4)
•Hosted Web App のメリット「Webページへのショートカット(タイル)でいいじゃん!?」それ以上のメリットがある
•WinJSがフルに使える❢
•Webサイトを更新すればアプリに反映❢
•Windowsストアのマネタイジングと分析機能
20
UWPアプリをJavaScriptで作る3つの方法
【2】Hosted Web App (3/4)
• VS 2015の新規作成でJavaScriptを選ぶ…のは【1】と同じ
• 後は⇩この作り方を見て!Create your Hosted Web App
不要なファイルを消して、URLを何か所か設定するだけ
21
UWPアプリをJavaScriptで作る3つの方法
【2】Hosted Web App (4/4)
•Win10で動くデスクトップWin10 phone…etc.
•WinJSをフルに活用この画像では、右下にWindowsのトーストが出ている(青い矢印)
22
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
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のPro版
• その2: Visual Studio 2015無償のCommunity EditionでOK♪
• その3: Visual Studio Tools for Apache CordovaVS2015 Communityでは、標準インストールで入らない。インストール時にカスタマイズが必要。
25
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (4/6)
• Visual Studio Tools for Apache Cordova の注意事項
• 「Visual StudioのNode.jsツール」のインストールが別途必要かも
• ソースコードのパスに日本語が入ってるとアウト! orz
• NuGetで.jsをインストールすると、アプリから参照できないフォルダーに入るので、手動でwww配下にコピーする
26
UWPアプリをJavaScriptで作る3つの方法
【3】Cordovaで作る (5/6)
• VS 2015の新規作成ダイアログでJavaScriptのApache CordovaAppsを選ぶ
• HTML/CSSとJavaScriptを使ってコーディング
27
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
ご清聴 ありがとうございました