いつもは C# だけど、今回は…

JavaScript でアプリを作っちゃう話

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪1

無償の Visual Studio で作る❢クライアントアプリ♪

スピーカー紹介 (1/3)

•BluewaterSoft 山本康彦 / @biac

• Windows ストアアプリを開発したり

• Windows ストアアプリ開発の講師とか

• Windows ストアアプリ開発の記事とか

2015/12/12無償の Visual Studio で作る❢クライ

アント アプリ♪2

@IT WinRT/Metro TIPS (連載) @IT 特集記事 (7/19～)

スピーカー紹介 (2/3)

• Microsoft MVP 受賞しました♪ (2年目)

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪3

Microsoft MVP for Windows Platform

Development (2014/10-2016/9)

☆ 勉強会に来てくれた人☆ 記事や本を読んでくれた人皆様のおかげですありがとうございます!!

スピーカー紹介 (3/3)

•近刊予告❢

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪4

☆ 今どきの .NET には欠かせない!

☆ Xp を「卒業」した開発者に!

2016年 2月頃 発売予定300ページ以上

このセッションでやること

•無償のVisual Studio 2015を使うよ♪

• JavaScriptでコーディングするよ.NETのLINQやRxも❢

•クライアントで動かしてみるよ

•Visual Studio 2015 でクロスプラットフォーム開発

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪5

無償で使える♪Visual Studio 2015

Community

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪6

Community と Professional

Community Professional

お値段 無償♪ 6万円くらい (ダウンロード版)

機能 ほぼ同じ(GitHub連携などで部分的に差異あり)

ライセンス 個人利用ならOK♪作ったアプリを販売してもいいよ❢※詳細はここの下の方に

買った人

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪7

準備するよ・プロジェクト作成・ライブラリ導入

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪8

VS2015でプロジェクトを作る

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪9

JavaScript を使うよ♪

NuGetから必要なライブラリを追加

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪10

今どきjQueryを使わないなんて

ありえないよね♪

※ 注意

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪11

•NuGetから入れた .js は、なぜかプロジェクト直下のScriptsフォルダーに! orz

•今回は、それをwww/scripts/lib にコピーして使います。

コードも書いていくよ

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪12

jQueryを使ったコード

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪13

【index.js】

function onDeviceReady() {// Cordova の一時停止を処理し、イベントを再開しますdocument.addEventListener('pause', onPause.bind(this), false);document.addEventListener('resume', onResume.bind(this), false);

//ここに起動時に動かすコードを書くよ

// 従来//document.getElementById("title").innerText = "プロ生…";

// jQuery$("#title").text("プロ生 #38 @名古屋");

};

この書き方はみんな知ってるよね!?

.NET の LINQ

•ループをメソッドチェーンでスマートに書ける❢

•末尾のループがデータを「引っ張る」

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪14

【これは C# のコード】

var results= Enumerable.Range(1, 10)

.Where(n => n % 2 == 0)

.Select(n => n * n)foreach (n in results)Console.WriteLine(n);

linq.js

•LINQをJavaScriptに移植

•作ったのは @neuecc 先生日本人MVP♪

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪15

プレリリース版3.0.4 beta5 以降を使う

linq.js を使ったコード

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪16

【index.js】

function linqSample() {var results= Enumerable

.range(1, 10)

.where(function (n) { return n % 2 == 0 })

.select(function (n) { return n * n })

.toArray();results.forEach(function (n) {$("#content1").append(n.toString() + "<br />")

});}; JavaScriptでは

ラムダ式じゃなくて関数リテラル

.NET の Rx (Reactive Extensions)

•ループをメソッドチェーンでスマートに書ける❢

•先頭がデータを「押し込む」

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪17

【これは C# のコード】

Observable.Timer(TimeSpan.FromSeconds(3.0),TimeSpan.FromSeconds(1.0)

) // 3秒後に動き始め、1秒間隔で連番を押し込み続ける.Subscribe(i => WriteLine(

$"{i} - {DateTimeOffset.Now:HH:mm:ss}"),); // コンソールに番号と現在時刻を出力

RxJS

•RxをJavaScriptに移植

•作ったのは Microsoft Open Technologies, Inc.

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪18

いっぱいあるけど、今回はRxJS-Main と RxJS-Time の

2つがあればいい

RxJS を使ったコード

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪19

【index.js】

function rxSample() {Rx.Observable.timer(3000, 1000) // 3秒後に動き始める、1秒間隔のタイマー.subscribe(// イベントごとの処理function () {

var now = new Date();var hh = ('0' + now.getHours()).toString().slice(-2);var mm = ('0' + now.getMinutes()).toString().slice(-2);var ss = ('0' + now.getSeconds()).toString().slice(-2);$("#content2").text(hh + ":" + mm + ":" + ss);

});

}; これだけで時計だよ♪

DEMO

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪20

•見せてもらおうか、

Visual Studio の

インテリセンスの性能とやらを♪

それじゃ、動かしてみよ~♪

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪21

DEMO

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪22

こいつ… 動くぞ♪

iPhone / iPad

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪23

Android

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪24

Windows 10 Desktop (UWPアプリ)

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪25

ここには見えてないけど、Windows 8.1 もイケル♪

Windows 10 Mobile (UWPアプリ)

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪26

ここには見えてないけど、Windows Phone 8.1 もイケル♪

クロスプラットフォーム開発

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪27

今どきのVisual Studioは化け物か!?

Visual Studio によるクロスプラットフォーム開発

今日の本題

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪28

Apache Cordova (JavaScript)

•Visual Studio Tools for Apache Cordova

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪29

VS 2015 Communityインストール時に選択すると

Cordova も入る

VS Tools for Apache Cordova の注意

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪30

•「Visual Studio の Node.js ツール」のインストールが別途必要かも

•ファイルのパスに日本語が入ってるとアウト! (おまえもか!? (--; )

•NuGet で .js を入れた時の場所がおかしい (前述)

Xamarin (C#)

•Xamarin for Visual Studiohttps://xamarin.com/visual-studio

• iOS / Android / Windows

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪31

Unity (C#)

•Unity http://unity3d.com/jp/+ Visual Studio Tools for Unity

• Android, iOS, Windows Phone, Tizen / Windows, Mac OS, Linux / Native Oculus Rift, Gear VR, Playstation VR, HoloLens / PS4, PS3, Xbox One, XBox360, PlayStation Mobile, PlayStation VITA, WiiU

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪32

Visual Studio によるクロスプラットフォーム開発

まとめるよ♪

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪33

Visual Studio 2015 Community でクロスプラットフォーム開発

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪34

• JavaScript or C#

•Visual Studio に Android エミュが❢クロスプラットフォームに本気なMS

• JavaScript でも LINQ や Rx が♪なんならTypeScriptをどうぞ!

• ((+_+)) オープンソースな開発環境構築がめんど~ orz

•プログラミング 楽しい♪

無償の Visual Studio で作る❢クライアント アプリ♪

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪35

ご清聴ありがとうございました♪

無償の Visual Studio で作る❢クライアント アプリ♪

2015/12/12無償の Visual Studio で作る❢

クライアント アプリ♪36