『作る！俺アプリ』入門　無料のVisual Studioで始めるタッチアプリ作成術 前編

プログラミング入門の壁

　みなさんは『自分もWindowsやスマホのアプリを作ってみたい』と思ったことはないだろうか？　しかし、かつてプログラミングを志した人のなかには、本を買ってみたけどよく分からなかった、サンプルは作ったけどあんまり楽しくなかった、という経験をした人も多いだろう。

　それもそのはず、プログラミングのお約束の勉強から始まり、やっと作り始めたと思えばできたアプリは“Hello World!”と表示するだけ。何百ページ読めばキャラがグリグリ動いて喋って遊べるアプリができるのか、スマホアプリなんて夢のまた夢……大抵の人が、こういった“コレジャナイ感”を味わって挫折するのである。

　楽しくアプリのプログラミングをするには、『カワイイキャラ』が『動いて』『喋って』『カンタン・手軽』にできる“体験”が必要だ。安易だなんて言わないでほしい、実際ヒットしているゲームやアプリにはこの要素が必要不可欠なのは誰もが認めるところだろう。

　そこで本記事では楽しいアプリ作りを体験するために、マイクロソフト公認キャラクターのクラウディア窓辺さんに一肌脱いでいただき、“壁ドン”をテーマにしたゲームっぽいサンプルを用意した。しかも、１行もコードを書かず動かして体験するところからスタートできる。ぜひ、見て触って動かして楽しいアプリ作りを体験してほしい。

まずは統合開発環境のインストールから

　統合開発環境とは、平たく言えば“全部入りのアプリ作成ツール”だ。アプリを動かすコードを書くためのエディターや、画面を作るためのデザイナー、書いたコードを実行できる形式に変換するコンパイラー、アプリのバグつぶしを支援するデバッガーが、すべて同じユーザーインターフェイスで利用できる。つまり、統合開発環境だけがあれば、プログラミングに必要なツールが一式揃うのである。

　今回は、4月に最新版が公開された、「Visual Studio 2015」を使ってみよう。プログラミング未経験の人でも名前くらいは聞いたことがあるかもしれない、「Visual Studio」はマイクロソフトが開発した統合開発環境だ。最新の「Visual Studio 2015」では、WindowsだけではなくiOSやAndroidスマートフォンやタブレットのアプリを作れる、“クロスプラットフォーム開発”ができる。それも、インストール時に指定するだけで、クロスプラットフォーム向けの開発環境一式が同時にインストールされるというワンタッチさだ。また、「Visual Studio Community 2015」というエディションであれば、個人やSOHOの人などは無償で利用できる。つまり、タダでWindowsアプリもスマホアプリも作れる最新の開発環境を入手できてしまうというわけだ。まずは、下記のリンク先からインストーラーをダウンロードしてインストールしてみよう。

　ちなみに本記事ではWindowsのタッチ対応アプリを体験するため、Windows 8.1 Updateの環境に「Visual Studio 2015」をインストールする必要がある。あらかじめご了承いただきたい。

RC版でもアプリを作って配布することが可能

　なお、「Visual Studio 2015」は現在、正式公開前の“RC”と呼ばれるベータ版だが、マイクロソフトがRCで作成したアプリは正式に公開・配布しても良い、と認めている“Go-Liveライセンス”が付いている。RCを使えば、今からWindows 10を見越してアプリを作り始めることができるのである。

いきなりアプリを動かしてみよう

　「Visual Studio 2015」のインストールが終わったら、以下のURLからサンプルをダウンロードしよう。今回は5月28日に発売される書籍『できるVisual Studio 2015 Windows/Android/iOSアプリ対応』の第2章のサンプルを流用する。

※第2章の［ダウンロード（約7.1MB）］をクリックしてサンプルをダウンロードする。ダウンロードページに記されているように、ファイルのプロパティから［ブロックを解除］をクリックしてからZIPファイルを展開して利用してほしい。

ソリューションエクスプローラー

　さて、ダウンロードしたサンプルを「Visual Studio 2015」で読み込むと、画面右側に［ソリューションエクスプローラー］のウインドウが表示される。このウインドウには、アプリのコードや画像ファイル、音声ファイルといったアプリに必要なファイルがすべて含まれている。

　たとえば、“MainPage.xaml”はアプリをデザインするコードが記述されたファイルだ。これをダブルクリックすると、「Visual Studio」の画面左側に［XAMLデザイナー］と呼ばれる画面が開きアプリの画面デザインが表示される。

　さあ早速アプリを実行してみよう。アプリを実行するには“ビルド”と呼ばれる操作を行う。ビルドとは、アプリのコードや画像ファイルなどをパソコンやスマホが実行できる形式に変換する作業のことだ。ターゲットデバイス（画面では“ローカルコンピューター”）を選択して［デバッグの開始］ボタンをクリックするだけで、アプリをビルドして「Visual Studio 2015」のデバッガーを使って実行できる。

XAMLデザイナー

［ローカルコンピューター］をクリックすると「Visual Studio」からアプリを実行できる

アプリをカスタマイズしてみよう

　ひととおり「クラウディアさんと壁ドン」のシチュエーションを楽しんだ後は、アプリを改造してみることにしよう。自由にアプリの動作をいじることができるのも、プログラミングの醍醐味のひとつだ。

　まずは、ソリューションエクスプローラーから“MainPage.xaml”左の▽をクリックして表示される“MainPage.xaml.cs”をダブルクリックして開いてほしい。“MainPage.xaml.cs”は、アプリの挙動をつかさどる処理が含まれているファイルだ。このアプリでは、“MainPage.xaml.cs”内にタップした位置に応じて表示する画像と再生する音声、得点を定義している“Area配列”がある。つまり、Area配列の定義を変更すれば、タップしたときの表情や音声、得点を自由に変更できるわけだ。

“MainPage.xaml.cs”を編集することでアプリの挙動をカスタマイズできる

new Area { X = 396, Y = 238, Width = 320, Height = 108, Image = "Claudia4", Sound = "ah", Score = -20 },

ここを

new Area { X = 396, Y = 238, Width = 320, Height = 108, Image = "Claudia3", Sound = "ah", Score = 50 },

　このように変更すると、クラウディアさんの頭頂部をタップしたときの動作を変えることができる。変更が終わったらビルドして実行してみよう。動作がどのように変わるのかは、実際にアプリを実行して試してみてほしい。

　さて、「Visual Studio 2015」を使ったプログラミングの体験はいかがだっただろうか。ものすごく駆け足ではあるが、『楽しそうなネタや楽しそうなサンプルがある』それだけで、プログラミングがぐっと身近で楽しそうなものに感じてくるハズだ。後編では、「Visual Studio 2015」でiPhoneやAndroidスマホに対応したアプリを作る方法について紹介しよう。

アプリをWindows Phoneに対応させることもできる

　「Visual Studio 2015」では、作成したストアアプリを簡単な手順でWindows Phoneに対応させることもできる。また、はじめからストアアプリとWindows Phoneアプリ両方に対応した“ユニバーサルアプリ”を作成することも可能だ。本記事で紹介したサンプルはもちろん、ストアアプリをWindows Phoneに対応させる方法については書籍『できるVisual Studio 2015 Windows/Android/iOSアプリ対応』に詳しく書いてあるので、興味のある人はぜひとも手に取って読んでみてほしい。

ストアアプリをWindows Phoneに対応させることもできる

実機がなくてもエミュレーターで動作を確認できる

編集部より：書籍プレゼントのお知らせ！

　本記事で紹介した書籍『できるVisual Studio 2015 Windows/Android/iOS アプリ対応』を、抽選で5名様にプレゼントいたします。編集部注：書籍のプレゼントは締め切りました。たくさんのご応募をありがとうございました。