特集

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

クラウディアさんのタッチアプリをいじってみよう

プログラミング入門の壁

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

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

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

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

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

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

 今回は、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名様にプレゼントいたします。編集部注:書籍のプレゼントは締め切りました。たくさんのご応募をありがとうございました。

【定価】
1,800円+税
【発売日】
2015/05/28
【ページ数】
160
【サイズ】
B5変形判
【著者】
広野 忠敏 著/岩永 信之 著/できるシリーズ編集部 著
【ISBN】
978-4-8443-3821-5

目次

第1章 アプリを作る準備をしよう

レッスン1 Visual Studioってなに?

レッスン2 Visual Studioで作れるアプリとは

レッスン3 Visual Studioに必要なものを確認しよう

レッスン4 Visual Studioをインストールするには

第2章 Visual Studioでアプリを動かそう

レッスン5 Visual Studioを起動するには

レッスン6 Visual Studioの画面構成を確認しよう

レッスン7 アプリのファイルを開くには

レッスン8 アプリを試しに動かしてみるには

レッスン9 Visual Studioの作業を終了するには

第3章 Windowsタブレットアプリを作ろう

レッスン10 タブレットアプリを作るには

レッスン11 新しいプロジェクトを作るには

レッスン12 アプリで使う画像を用意するには

レッスン13 アプリの画面全体に画像を表示させるには

レッスン14 プロジェクトを保存するには

レッスン15 タップすると画像が変わるようにするには

レッスン16 タップすると用意した順に画像が変わるようにするには

レッスン17 タップすると音声が鳴るようにするには

レッスン18 画像と音声のデータを定義するには

レッスン19 定義したデータを使って画像と音声を変えるには

レッスン20 一定時間たったら元の表情に戻すには

レッスン21 タップ位置によって得点を変えるには

レッスン22 ゲーム開始のボタンを追加するには

レッスン23 ゲームオーバーの処理を追加するには

レッスン24 メソッドを抽出してコードを整理するには

レッスン25 スプラッシュスクリーンとタイルを設定するには

レッスン26 Windowsストアに公開するには

レッスン27 Windows Phoneアプリを作るには

第4章 アプリの不具合を修正しよう

レッスン28 アプリの動作を確認して修正するには

レッスン29 アプリの動きを観察するには

レッスン30 任意の位置でアプリを停止させるには

レッスン31 変数やプロパティを確認するには

レッスン32 コードを一行ずつ実行するには

第5章 AndroidやiOSのアプリを作ってみよう

レッスン33 AndroidやiOSアプリを作るには

レッスン34 Androidアプリのプログラミングを始めるには

レッスン35 Androidアプリを試しに動かすには

レッスン36 Playストアに申請するには

レッスン37 iOSアプリのプログラミングを始めるには

レッスン38 iOSアプリを試しに動かすには

レッスン39 App Storeに申請するには

付録 Visual StudioからGitHubを使う

用語集

索引

(広野 忠敏)