2017. 4.12.
石立 喬

Visual Studio Community 2017の使い方(1)

――― Visual Studio 2017をインストールし、Universal Windows Platformアプリケーション作成の準備をする ―――

 Visual Studio Community 2017が2017年3月7日に正式公開された。Visual C++に関しては、Visual Studio 2015と大差がないと言われているが、C++でのUniversal Windows Platform(UWP)アプリケーションの開発が容易になっている。UWPアプリケーションは、Windowsフォームアプリケーションに代わるもので、PCデスクトップ以外に携帯電話やタブレットなどでも使用できる。
 ここでは、Visual Studio 2017 Communityのインストールと、UWPアプリの始め方の説明にとどめ、具体的なUWPアプリの作成は、次項以降で紹介する。

Visual Studio 2017 Communityのインストールと、直後のスタートページ
 Visual Studioのサイト(たとえば、https://www.visualstudio.com/ja/vs/whatsnew/)からダウンロードすると、C:\Program Files(x86)\Microsoft Visual Studio\2017\Community\Community7\IDE\devenv.exeができるので、これを実行する。最終的に得られた「スタートページ」は、図1のようになっている。


図1 インストール直後の「スタートページ」、最近のプロジェクトや使われたテンプレートは表示されていない


Visual Studio Community 2017でUWPを始めるための準備
 Visual Studio Community 2017を単純にインストールした後に用意されているテンプレートを見ると、Visual C#とVisual Basicには、「Windowsユニバーサル」と「Windowsクラシックデスクトップ」があらかじめ用意されているが、Visual C++には、「Windowsユニバーサル」の欄はあるものの、別途インストールしなければいけない。
 図2は、単純にVisual Studio 2017 Communityをインストールした後に、「スタートページ」の「その他のプロジェクトテンプレート」をクリックして、「新しいプロジェクト」ウィンドウを開いて「Visual C++」を選択した画面で、この状態では、使用できるテンプレートはWin32関係に限られている。


図2 Windowsユニバーサル開発ツールをインストールしていない最初の状態のテンプレート


 Visual C++でWindowsユニバーサル用アプリケーションを作成するには、下記の手順が必要になる。
1)「新しいプロジェクト」ウィンドウで、
   左欄 --- 「Visual C++」→「Windowsユニバーサル」
   右欄 --- 「C++開発用のWindowsユニバーサルをインストールする Visual C++」
 を選択して、「OK」をクリックする。
2)図3に示すインストーラーが起動するので、図3のようにWindows関連の3個のワークロード(workload、開発パッケージの意味で使われている)にチェックを付け、Visual Studioを閉じる
3)インストーラーがパッケージを取得し、終了するのを待つ。
4)再起動する。
このようにして得られた、Windowsユニバーサルのテンプレートを図4に示す。プロジェクトの名前がデフォルトで「App1」になっている。


図3 インストーラーの画面で、Windows関連の3種のワークロードにチェックを付け、実行する




図4 関連ワークロードをインストールすると、「Visual C++」→「Windowsユニバーサル」にテンプレートが用意される


 図4の右欄で、「空白のアプリ(ユニバーサルWindows)   Visual C++」を選択して、「OK」をクリックすると、図5に示すウィンドウが現れるので、このまま、「OK」をクリックすると、中央にエディタ部、右に「ソリューションエクスプローラー」の画面が現れ、アプリ開発の準備が完了する。


図5 このようなメッセージが表示されるが、「OK」をクリックする


UWPアプリケーションを作成するための予備知識
 ここでは、具体的なアプリ作成を紹介する前に、Visual Studio 2017を用いてUWPプログラムを開発する一般的な方法を説明する。
◎テンプレートとして用意されているプログラム
 プログラムの作成を始めた場合の「ソリューションエクスプローラ」を図6に示す。プログラム作成でユーザーが使用するのは、
    MainPage.xaml ---------- 画面上のコントロール部品の配置や、表示する文字列をXAMLで記述したもの
    MainPage.xaml.cpp ------- コントロール部品イベントハンドラなど、C++/CXで記述したもの
と考えてよい。
 その他のファイルでは、
    Assets ---------------- アプリ起動時に表示される画像やアイコンの画像、独自の画像に変えることができる
    App.xaml.cpp ----------- アプリのC++コード
    Package.appxmanifest --- 設定情報を含むマニフェスト
などがある。


図6 「ソリューションエクスプローラ」を見るとファイル構成が分かる


コントロール部品の配置にはツールボックスを使用する
 メニューから、「表示」→「ツールボックス」で「ツールボックス」を開くことができ、ここから「デザイン」画面にドラッグ・ドロップ(「ツールボックス」内でクリックし、「デザイナ」作成画面上で再度クリックしても可)して配置する。
 「ツールボックス」は、良く使われるコモンコントロールとすべてのコントロールに分かれていて。内容を図7に示す。


図7 「ツールボックス」に用意されているツールの一覧(左は良く使われるコントロール、右はすべてを示す


「デザイナ」画面上でのコントロール部品の配置方法
 コントロール部品の配置方法を説明するために、特に意味のない配置の例を以下に示す。
 1) 「ソリューションエクスプローラー」で、「MainPage.xaml」をダブルクリックすると、上半分に「デザイン」画面が、下半分に「XAML」コードエディタが表示される(図8参照)。
 2)作成するアプリのサイズを「13.3" Desktop (1280 x 720) 100%スケール」、倍率を「100%」に設定する(推奨できる一例、図8参照)。
 3)メニューから、「表示」→「ツールボックス」を選択して、「ツールボックス」を表示する。
 4)「ツールボックス」から、「Button」、「TextBlock」、「TextBox」を、順次、「デザイン」画面上にドラッグ・ドロップする(配置は大体の位置で良い)。
 5)「XAML」コードエディタ欄で、各コントロール部品の位置を、「Margin=" "」で編集して、詳細設定する。
 図8は、以上の方法でコントロール部品を配置して得られた結果で、「TextBox」を選択状態にしてある例を示す。上部の「デザイン」画面で「TextBox」が変更可能になり、下部の「XAML」エディタで「TextBox」が着色されている。


図8 「デザイン」と「XAML」を上下に表示する画面


各コントロールのデフォルト設定値(XAML)
 「ツールボックス」から持ってきただけの各コントロールのプロパティは下記の通りになっている。各コントロールのプログラム上の名称はまだ設定されてなく、サイズはAuto(デフォルト、表示文字列の長さにより、最適化される)である。Buttonの場合、これがクリックされた場合のイベントハンドラの名称も未設定である。
◎Button(これをクリックするとイベントが実行される)
 <Button Content="Button" ------------ ボタン上の表示が最初は「Button」なので、ここを「OK」等に書き換える
       HorizontalAlignment="Left"
       Margin="139, 34,0, 0" --------- ドラッグしただけでは、正確に配置できないので、あとで書き換える
       VerticalAlignment="Top"
 />
◎TextBlock(文字列を表示するだけの領域)
 <TextBlock HorizontalAlignment="Left"
         Margin="270, 34, 0, 0" ------- ドラッグしただけでは、正確に配置できないので、あとで書き換える
         TextWrapping="Wrap"
         Text="TextBlock" ---------- 最初は「TextBlock」になっているので、表示したい文字列に書き換える
         VerticalAlignment="Top"
 />
◎TextBox(文字列の入出力ができる領域)
 <TextBox HorizontalAlignment="Left"
         Margin="415, 38, 0, 0" ------- ドラッグしただけでは、正確に配置できないので、あとで書き換える
         TextWrapping="Wrap"
         Text="TextBox" ---------- 最初は「TextBox」になっているので、表示したい文字列に書き換えるか空欄にする
         VerticalAlignment="Top"
 />

「プロパティ」ウィンドウによるコントロールの詳細設定
 XAMLの知識が十分ある場合には、XAMLコード上で直接設定するのが簡単であり、確実であるが、「プロパティ」ウィンドウで設定する場合を、「Button」を例にして説明する。
 右側に「プロパティ」ウインドウを開いておいて「デザイン」上のボタンをクリックすると、図9の左に示すような内容が画面に表示される。
 「OK」ボタン(了解した時にクリックする)の作成を例にとると、プログラム上のボタンの名前を「<名前なし>」から「Button_OK」(一例)に、ボタン上に表示する文字(Content)をデフォルトの「Button」から「OK」(一例)に書き換える(図9の右を参照)。


図9 「Button」の 「プロパティ」ウィンドウを書き換える(左はデフォルト、右は変更後)


 ボタンをクリックしたイベントに対する反応をコード化するには、まず、「プロパティ」ウィンドウで、「稲妻マーク」を選択して、イベントを表示させる。図10は、そのすべてを示したものである(名前変更前のものであるが・・・)。ここで「Click」をダブルクリックすると、名前が「Button_Click」の場合には、右の枠内に、「Button_OK_Click」と表示され、空のイベントハンドラーvoid App1::MainPage::Button_OK_ClickがMainPage.xaml.cppに生成される(これを確認するには、「ソリューションエクスプローラー」で、「MainPage.xaml.cpp」をダブルクリックして、表示させる)。この結果を図11に示す。


図10 使用できるイベントが多数ある



図11 左の「Click」をダブルクリックすると、イベントハンドラが生成され、名称が表示される

 このように「プロパティ」ウィンドウで設定した結果を「XAML」エディタで見ると、
 <Button x:Name="Button_OK" ------- プログラム上の名称
       Content="OK" ------------ ボタン上の表示
       HorizontalAlignment="Left"
       Margin="120, 35,0, 0" ------- 「デザイン」画面を見ながら、最適位置に書き換えた
       VerticalAlignment="Top"
       Width="80" --------------- 自動設定(Auto)では狭すぎるので、手動入力した
       Click="Butto_OK_Click" ----- イベントハンドラー名が自動的に設定される
 />
のようになっている(赤字は追加または変更箇所)。

Windows10を開発モードに設定する
 作成したプログラムをビルドし実行するには、あらかじめ、使用しているWindows10を開発モードに設定しておく必要があるので、下記を実行する。
 1)「スタート」ボタン→「歯車マーク(設定)」→「更新とセキュリティ」と選択する。
 2)「開発」ウィンドウの左欄で「開発者向け」を選択する。
 3)右欄の「開発者向け機能を使う」の下の「開発者モード」にチェックを付ける。

プログラムのビルドと実行
 メニューの「ローカルコンピューター」(図12の上部参照)をクリックすると、図12に示すのウィンドウが現れるので、「はい」をクリックすると、ビルドの後に、プログラムが実行される。


図12 「ローカルコンピューター」をクリックして、プログラムを実行する





「Visual C++の勉強部屋」(目次)へ