[Windows ストア アプリ] Hello, World

こんにちは、うりるーです。

このサークルでは音楽系とプログラム系の 2つの活動主体があるのですが、私はプログラムの開発を主にやっていく予定です。このサークルに入る前に都市大横浜キャンパス、世田谷キャンパスの休講情報、補講情報をツイートする Twitter のボットを作っています。このボットの仕様や作業報告は後々ブログに書きたいと思います。

さて、都市大の環境情報学部の学生は Dreamspark Premium というプログラムを利用でき、情報基盤センターから Windows のセットアップディスクを入手することができます。

私はこのプログラムを通じて Windows 8 を入手できたので、これから Windows 8 の最大の特長でもある Windows ストア アプリを少しずつ作っていきたいと思います。Windows ストア アプリ(Store Apps)は Windows 8 を起動したときに最初に表れる四角いアイコンから起動できるアプリのことで、基本的にはタッチパネルでの操作を強く意識したつくりになっています。


このアプリは様々な言語で作ることができるのも 1つの特徴で、JavaScript や Visual Basic、Visual C#、C++ の 4つの中から好きな言語を自分で選択して作ることができます。特に JavaScript は情報リテラシー演習でも扱う言語であり、プログラムのコツがわかれば比較的簡単に作ることができると思います。

アプリを作るにあたり Visual Studio Express 2012 for Windows 8 という統合開発環境が必要ですが、これはマイクロソフトの公式サイトから無料でインストールすることができます。

Windows ストア アプリで Hello, World と表示するところまで作ることができたので、そこまでの作業の状況をまとめておきたいと思います。

Visual Studio Express 2012 for Windows 8 をインストールすると、スタート画面の右の方に VS Express for Windows 8 のアイコンが表示されます。


最初に開発者用ライセンスを取得しないといけないようで、ここには普段ログオンに使う Microsoft アカウントのユーザー名とパスワードを入力しました。これは期限付きですが、アプリの開発途中で期限が切れても再度更新すれば更新する前と同じように開発を続けられます。

Visual Studio が起動したら新しいプロジェクトをクリックします。


今回、私は開発に使う言語を Visual Basic にしました。


テンプレートの中から Visual Basic、Windows ストア、新しいアプリケーションの順に選択し、名前を hello world に変えて「OK」をクリックします。
ここまでの操作は Visual Basic を使っている方は何も見なくても操作できると思います。


最初に App.xaml.vb というファイルが開かれた状態になります。
Windows ストアアプリで「Hello, World」と表示させるだけのアプリを作るのであれば、このファイルは編集しないので、そのままタブを閉じても構いません。


ウィンドウの右側に「ソリューション 'hello world' (1 プロジェクト)」という項目があります。
このアプリで実際にアプリの表示を担うのは「MainPage.xaml」ですので、このファイルを開きます。
読み込みが終わると、MainPage.xaml を編集する画面に切り替わります。
MainPage.xaml はアプリを起動後に初めて読み込まれるページです。そのため、ファイル名を変更するときには注意する必要があります。

ウィンドウの左側に「ドキュメントアウトライン」「ツールボックス」「デバイス」の 3つの項目が隠されいます。ここから「ツールボックス」をクリックして画面にコントロールを追加していきます。


このアプリでは単に「Hello, World」という文字列を表示させるだけなので、文字列を表示するコントロール「TextBlock」をドラッグアンドドロップします。


TextBlock のサイズを適当に伸ばした後、TextBlock を選択したまま Visual Studio のウィンドウの右下にあるプロパティ内にある「共通」と「テキスト」の項目を展開します。Text には「Hello, World」と、フォントサイズのところには「48px」と入力します。

最後に「ローカルコンピューター」をクリックして、数秒待つと下の様に「Hello, World」と表示するアプリが完成します。スタート画面に戻ると作ったアプリのアイコンが表示されています。



このようにして Windows ストアアプリを作っていこうと思います!

参考: Windows 8 APIの基礎 - Windows ストア アプリのAPIは新旧ミックス:ITpro

0 件のコメント:

コメントを投稿