無償の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で作るクライアントアプリ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from Yasuhiko Yamamoto

More from Yasuhiko Yamamoto (20)

Recently uploaded

Recently uploaded (8)