無償のVisual studioで作るクライアントアプリ

いつもは C# だけど、今回は…
JavaScript で
アプリを作っちゃう話
2015/12/12
無償の Visual Studio で作る❢
クライアントアプリ♪
1

スピーカー紹介 (1/3)
• BluewaterSoft 山本康彦 / @biac
• Windows ストアアプリを開発したり
• Windows ストアアプリ開発の講師とか
• Windows ストアアプリ開発の記事とか
2015/12/12
無償の Visual Studio で作る❢ クライ
アントアプリ♪
2
@IT WinRT/Metro TIPS (連載) @IT 特集記事 (7/19～)

• Microsoft MVP 受賞しました♪ (2年目)
2015/12/12
3
Microsoft MVP for Windows Platform
Development (2014/10-2016/9)
☆ 勉強会に来てくれた人
☆ 記事や本を読んでくれた人
皆様のおかげです
ありがとうございます!!

• 近刊予告❢
2015/12/12
4
☆ 今どきの .NET には欠かせない!
☆ Xp を「卒業」した開発者に!
2016年 2月頃発売予定
300ページ以上

このセッションでやること
• 無償のVisual Studio 2015を使うよ♪
• JavaScriptでコーディングするよ
.NETのLINQやRxも❢
• クライアントで動かしてみるよ
• Visual Studio 2015 で
クロスプラットフォーム開発
2015/12/12
5

無償で使える♪
Visual Studio 2015
Community
2015/12/12
6

Community と Professional
Community Professional
お値段無償♪ 6万円くらい (ダウン
ロード版)
機能ほぼ同じ
(GitHub連携などで部分的に差異あり)
ライセンス個人利用ならOK♪
作ったアプリを販売して
もいいよ❢
※詳細はここの下の方に
買った人
2015/12/12
7

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

VS2015でプロジェクトを作る
2015/12/12
9
JavaScript を使うよ♪

NuGetから必要なライブラリを追加
2015/12/12
10
今どき
jQueryを使わないなんて
ありえないよね♪

※ 注意
2015/12/12
11
• NuGetから入れた .js は、
なぜかプロジェクト直下の
Scriptsフォルダーに! orz
• 今回は、それを
www/scripts/lib に
コピーして使います。

コードも書いていくよ
2015/12/12
12

jQueryを使ったコード
2015/12/12
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
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
15
プレリリース版
3.0.4 beta5 以降を使う

linq.js を使ったコード
2015/12/12
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
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
18
いっぱいあるけど、今回は
RxJS-Main と RxJS-Time の
2つがあればいい

RxJS を使ったコード
2015/12/12
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
20
• 見せてもらおうか、
Visual Studio の
インテリセンスの性能とやらを♪

それじゃ、
動かしてみよ~♪
2015/12/12
21

DEMO
2015/12/12
22
こいつ… 動くぞ♪

iPhone / iPad
2015/12/12
23

Android
2015/12/12
24

Windows 10 Desktop (UWPアプリ)
2015/12/12
25
ここには見えてないけど、
Windows 8.1 もイケル♪

Windows 10 Mobile (UWPアプリ)
2015/12/12
26
ここには見えてないけど、
Windows Phone 8.1 もイケル♪

2015/12/12
27
今どきのVisual Studioは
化け物か!?

Visual Studio による
今日の本題
2015/12/12
28

Apache Cordova (JavaScript)
• Visual Studio Tools for Apache
Cordova
2015/12/12
29
VS 2015 Community
インストール時に選択すると
Cordova も入る

VS Tools for Apache Cordova の注意
2015/12/12
30
• 「Visual Studio の Node.js ツール」
のインストールが別途必要かも
• ファイルのパスに日本語が入ってると
アウト! (おまえもか!? (--; )
• NuGet で .js を入れた時の
場所がおかしい (前述)

Xamarin (C#)
• Xamarin for Visual Studio
https://xamarin.com/visual-studio
• iOS / Android / Windows
2015/12/12
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
32

Visual Studio による
まとめるよ♪
2015/12/12
33

Visual Studio 2015 Community で
2015/12/12
34
• JavaScript or C#
• Visual Studio に Android エミュが❢
クロスプラットフォームに本気なMS
• JavaScript でも LINQ や Rx が♪
なんならTypeScriptをどうぞ!
• ((+_+)) オープンソースな開発
環境構築がめんど~ orz
•プログラミング楽しい♪

2015/12/12
35
ご清聴
ありがとうございました♪

2015/12/12
36

無償のVisual studioで作るクライアント アプリ

More Related Content

What's hot

Similar to 無償のVisual studioで作るクライアント アプリ

More from Yasuhiko Yamamoto