ボタンを表示する
サンプルの旅行カタログアプリでは、ユーザがボタンをクリックしたときに、入力した条件をもとに滞在費用を計算しますので、このボタンを配置します。
<button id="calcButton" >宿泊代金を計算</button>
このプログラムを、default.htmlのmain-right要素の中に記述して、アプリケーションを実行すると、次のようなボタンが表示されます。
今回の連載では、プログラムのコードと動作を説明するために、Visual Studioを使用していますが、Windowsストアアプリの画面がGUIで作成できる「Blend for Microsoft Visual Studio 2012」を利用することもできます。「Blend for Microsoft Visual Studio 2012」を起動するには、Visual Studioのソリューションエクスプローラでhtmlファイルを選択して右クリックし、［Blendで開く］をクリックします。
Blendは、今回のサンプルで作成したコントロールなどの部品をドラッグ＆ドロップで追加することができます。また、レイアウトの指定や色の指定などもGUI画面で設定できます。
（応用）チャレンジしてみよう
初めてのWindowsストアアプリの作成はいかがでしたか。HTMLを使ったホームページの作成経験がある人は、画面の作成がホームページを作成するときと同じ要領でできたと思います。余力のある人は、今回作成したWindowsストアアプリを、自由にカスタマイズしてみてください。
- 画面の色やレイアウトを変更する
- コントロールのレイアウトを変更する
- アプリのタイトルを変更する
- コントロールのサイズやフォント／余白などを変更する
ただし、各コントロールのid属性の値は、次回以降のプログラミングで使用しますので変更しないでください。
おわりに
今回は、Windowsストアアプリでどのようなものを作りたいかを設計し、実際に旅行カタログアプリケーションを作成しました。このサンプルアプリを作成しながら、Windowsストアアプリで画面を作成するための手順や、入力に使うコントロールの配置の方法などをご紹介しました。
次回の記事では、この旅行カタログに機能を追加し、ボタンを押すと代金を計算するなど、さまざまな処理を行うためのJavaScriptのプログラミングについて説明します。
