・Windows ストア アプリ・Windows Phone アプリ・Xbox アプリコーディング スキルが無くたってアプリが作れちゃうお話

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

1

開発ツールを買わずに作る♪ユニバーサル Windows アプリ!!

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

•BluewaterSoft 山本康彦 / @biac

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

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

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

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

2

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

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

• Microsoft MVP 受賞しました♪

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

3

Microsoft MVP for Windows Platform

Development (2014/10-2015/9)

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

【CM】

11/15(土)わんくま同盟名古屋勉強会 #33

MVP受賞記念のセッションやります

http://www.wankuma.com/seminar/20141115nagoya33/

このセッションで紹介する 4つのツール

• "Project Spark"Xbox と Windows ストア アプリ

• "Project Siena"Windows ストア アプリ

• "Windows App Studio"ユニバーサル Windows アプリ

• "Visual Studio Express"ユニバーサル Windows アプリ

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

4

「ユニバーサル Windows アプリ」って…?

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

5

•「(Microsoft の) ユニバーサルWindows アプリとは、Windows ストアと Windows Phone ストアの両方で入手できるアプリ」(MSDN「ストア アプリとは」より)

•将来は Xbox にも対応(Build Insider の記事参照)

2014/11/8開発ツールを買わずに作る♪ ユニバーサ

ルWindowsアプリ!6

MSDN「ストアアプリとは」より

なにやらマスコットアプリ文化祭

をやってるそうですよ

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

7

マスコットアプリ文化祭 2014

• http://pronama.github.io/mascot-apps-contest/2014/

• アプリ部門主催および協賛団体のキャラクターを利用したアプリ。ゲームやツールなどのジャンル、OS などのプラットフォームは問いません。

• 応募締切: 12月10日頃

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

8

まだまだ間に合うよっ!!

アプリ作ってみたい! けど…!?

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

9

•可愛いキャラとか使いたいけど、版権が… orz

•プログラム書いたことない、得意じゃない… orz

•開発環境そろえるお金が… orz

マスコットアプリ文化祭なら、使えるよ~! っていうか、使え!!

コーディング不要のツールや…

無償の開発環境があるよ♪

これから紹介するツールの前提

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

10

•Windows プラットフォーム用のアプリを作るWindows, Windows Phone, Xbox

•Microsoft アカウント 必須

•コードを書くなら C#

Project SparkXbox 用ゲームを作る

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

11

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

12

Project Spark: 特徴

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

13

ジャンル 3Dゲーム制作

アプリ配布先 Xbox One, Windows (8.1以降、RT除く)

開発用プラットフォーム

Xbox One, Windows (8.1以降、RT除く)

必要なスキル ゲームを作りたい情熱!!

費用 基本は無料・ちょくちょく有料アイテムを使いたくなる (ただし、チュートリアルをこなすなどでポイントを得られる)・Xbox 用パッケージ版のみ 3,900円

使い方 Project Spark 内のチュートリアル

入手先 Xbox: http://www.xbox.com/ja-JP/xbox-one/games/ProjectSparkWindows ストアアプリ: http://apps.microsoft.com/windows/ja-jp/app/project-spark/735aaf10-e354-4645-9cb4-c9f2fc391ec5

Project Spark: ここから始める

• [作成] ⇒ [チュートリアル]※ 現在、Windows 版には日本語入力できないバグが… orz

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

14

Project Spark: こんな感じ

• 環境を作り、キャラを配置し、キャラの動きを「KODE」で定義

• KODE: 「どんなとき」(WHEN)に「何をする」(DO)をマウスだけで指定

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

15

WHEN DO

DO の選択肢

Project Spark: 3Dモデルが… orz

•3Dモデルが取り込めません orz

•マスコット アプリ 文化祭には使えない (たぶん)せっかく 3D モデルがあるのに~

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

16

Project SienaWindows 用の情報提供型

アプリを作る

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

17

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

18

Project Siena: 特徴

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

19

ジャンル 情報提供型アプリ制作

アプリ配布先 Windows (8.1以降)※ サイドローディングのみ

開発用プラットフォーム

Windows (8.1以降)

必要なスキル Excel※ Excelライクな計算式が使える

費用 無料

使い方 Build Insider: マイクロソフトがリリースした新たなWindowsストアアプリ開発ツール「Microsoft Project “Siena”」を使ってみたTechNet: Project Siena のフォーラムとヘルプ

入手先 Windows ストアアプリ: http://apps.microsoft.com/windows/ja-jp/app/microsoft-project-siena/5ae47651-e8f3-4e41-aab7-e19ab1b80180

Project Siena: レイアウトの自由度が高い

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

20

•部品の位置やサイズ、背景色/壁紙や枠線… etc.

Project Siena: データソース

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

21

•Web コンテンツの他に、XML やJSON データなどを利用可能

http://technet.microsoft.com/ja-jp/dn518216

Project Siena: データの加工が可能

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

22

•Excel ライクな演算子や関数

http://technet.microsoft.com/en-us/library/dn690139

例えば文字列関数の Left, Right, Len, Concatenate, EncodeUrl なんてのがあるから、だいたいの文字列操作はできるよね♪あ、もちろん If 関数もあるよ!

Windows App StudioWindows / Phone 用の情報提供型アプリを作る

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

23

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

24

これは作業中のApp Studio の画面だよ♪

IE11 on Windows 7

App Studio: 特徴

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

25

ジャンル 情報提供型アプリ制作

アプリ配布先 Windows (8.1以降), Windows Phone (8.1以降)

開発用プラットフォーム

Web ブラウザー※ Win7 でも Mac でも♪

必要なスキル (特になし)

費用 無料

使い方 App Studo 内: 「方法」窓の杜: 「暮井 慧とアプリ開発！ 第3回」プロ生: 「暮井 慧とアプリ開発！ 第3回 Windows App Studio 補足」＠IT: 「無償のオンライン型開発環境「Windows App Studio」入門」

入手先 Web サイト: http://appstudio.windows.com/ja-jp

App Studio: Web サイト

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

26

•Web ブラウザーだけで、アプリの制作からストアでの公開まで!

Windows 版 ⇨

⇧ Windows Phone 版

ストアに公開されているアプリの例 (ステマw

テスト用に実機が無いと困るし、デバッグと修正は Visual Studio の方が楽だけどね♪

App Studio: こんな感じ

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

27

•下からコンテンツの種類を選んで追加し、プロパティを設定していく

⇦ 作成画面自由なレイアウトはできない。Webから取り込めるデータも決まっている

⇨ 元々は Phone 専用だったWindows の画面はプレビュー ボタンで確認する

App Studio: ソースコード

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

28

•C# 得意な人は、一見の価値あり♪

・画面とViewModelの分離・多彩なコマンドとコンバーター・Html2Xamlコントロール

(共有の「Controls¥Html2Xaml」フォルダー)

Project Siena と App Studio

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

29

Project Siena App Studio

形態 Windowsストアアプリ Web サイト

作成できるアプリ

Windowsストアアプリのみ

ユニバーサル Windows アプリ

アプリの配布

サイドローディングのみ ストアでの公開サイドローディング

レイアウト かなり自由 テンプレートから選択

クラウドデータ

JSON や XML を解釈可能

用意されているサイト種類のみ

データ処理 Excel ライクな計算式 不可

ソースコード 取得不可 取得して改修可能 (C#)

機能の Project Siena / 応用の App Studio って感じ

Visual Studio Express無料の Visual Stduio

2014/11/8開発ツールを買わずに作る♪ ユニバーサ

ルWindowsアプリ!30

VS Exp 2013: 入手

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

31

•ここからダウンロード♪

…って、ドレよ!?

"for Windows" を使ってね♪

※ "for Windows Desktop"は、WPF や Windows Forms 用

VS Exp 2013: できること

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

32

•VS Exp. 2013 for Windows で出来ること★ ユニバーサル Windows アプリの制作★ それ↑用のクラスライブラリの作成

(C++ で DirectX や Win32 の一部も利用可)★ ユニットテストの記述と実行

(Windows と Phone 別々)★ エミュレーター (Win/Phone)★ リモート デバッグ (Win/Phone)★ Git / TFS との連携

VS Exp 2013: できないこと

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

33

•VS Exp. 2013 for Windows では出来ないこと✘ Visual Studio 用「プラグイン」利用✘ ALM などの高級な機能✘ VS 2012 用プロジェクトとの混在

•Phone エミュレータの動作にはSLAT 対応 64bit PCが必須(VS の全ての版で)

VS Exp 2013: これでたいてい困らない♪

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

34

•私は基本的に Express でやってます※ 2012版のメンテのために、2013版と混在したソリューションにする必要が出てきて、「青空文庫リーダー・ライト」は Ult. に移行しました

おまけ: Unity + MonoDevelop

•Unity (無償版あり、Pro版は有償)マルチプラットフォームのゲーム開発

• C# でのデバッグには MonoDevelop か、有償版のVisual Studio を使用

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

35

Unity のサイトより CodeZine の記事より

【最後に】Dev Center Benefits

MS の開発者支援

ストアへの登録にお金が…!?

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

36

ストアへの開発者登録

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

37

•初回 $19 必要 (更新料は不要)MSDN「アカウントの種類、場所、料金」参照

•年齢制限クレジットカード (18歳以上)または PayPal (20歳以上) が必要MSDN「開発者アカウントを開く」参照

Dev Center Benefits で登録料が無料に♪

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

38

•Microsoft による開発者支援Web: Dev Center ベネフィットPDF: 初期登録無料特典の利用方法PDF: Dev Center Benefits Program Terms - Agreement (契約)※ 参加できるのは20歳以上となっています。18歳以上の学生は DreamSpark を! (クレジットカードは必須)

まとめ

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

39

•コードをガリガリ書くだけが アプリを作る方法じゃない!

•ユニバーサル Windows アプリを作る無償ツールが複数♪

•自分に合った作り方を見つけてね

開発ツールを買わずに作る♪ユニバーサル Windows アプリ!!

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

40

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

開発ツールを買わずに作る♪ユニバーサル Windows アプリ!!

2014/11/8開発ツールを買わずに作る♪ユニバーサルWindowsアプリ!

41