Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Windowsストアアプリの画面を作ってみよう

作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/09/06 14:00

 本連載は、IT業界に入ったばかりの新米エンジニアや、IT業界を目指す学生さんを対象とした、アプリケーション開発講座です。なにから勉強を始めて良いか分からないと迷っている方と一緒に、サンプルアプリを使った実践形式で「分かる」と「できる」そして「ものづくりってたのしい!!」を体感していきます。本連載では、Windows 8上で動くシンプルな商品カタログを作り、基本的なプログラムと動作を確認します。さらに、それをカスタマイズして、オリジナルのアプリを作ります。

目次

はじめに

 前回は、Windowsストアアプリを開発するための準備についてご紹介をしました。本記事では、実際にWindowsストアアプリを作成する手順と、作成したアプリケーションに画面部品を配置する手順を説明していきます。

対象読者

 本記事は、次の方を対象にしています。

  • アプリケーション開発がはじめての人
  • HTML/CSSでWebサイトを作ったことがある人

必要な環境

 本連載で紹介する環境は次のとおりです。

  • OS:Windows 8 Pro
  • IDE:Microsoft Visual Studio Express 2012 for Windows 8

どんなアプリを作ろうかな?

 Windowsストアアプリを開発するための準備が整ったので、具体的にどのようなアプリを作るかを決めていきます。

 私は旅行が好きで、日程や予算などが決まればいろいろなところに出かけます。「どこに行こうかな?」とか「何を見に行こうかな? おいしいものはあるのかな?」といった情報を事前に集め、行先を決めるのも旅の楽しみの一つです。

 最近の旅行は、個人のニーズに応じて航空便やホテルを自由に組み合わせて作るものが多くなっています。これらの旅行に関する情報を得るとき、旅行会社が発行している紙のカタログだと、手軽に見ることができますが、旅行代金を計算するために詳細な数字や金額/条件などを記載する必要があり、旅費を計算するのに電卓やメモなどが必要になります。また、パソコンであればインターネットから多くの情報を得ることができますが、ちょっとした空き時間にソファーやベッドルームでくつろぎながら情報を見るというのが難しくなります。スマートフォンだと、手軽に情報を得ることができますが、ホテルや観光地などの臨場感あふれる写真や動画を見るには、画面サイズが気になるところです。

 そこで、タブレットで利用できる「旅行カタログ」を作ってみたいと思います。一般的に旅行先を決めるときは、次のような項目を検討するのではないでしょうか。

  • どこに行くか
  • いつからいつまで行くか
  • どのような交通手段(飛行機・新幹線・車)で行くか
  • どのグレードのホテルに滞在するか
  • 何人で行くか、そのうちこどもは何人いるか
  • 食事は必要か

など。

 また、ホテルや飛行機などの料金は、目的地の天候(乾季/雨季)や観光イベント(お祭りがあるか)でも変わってきます。さらに、これらの空き状況は他のお客さんの予約状況によって時々刻々と変化します。また、旅行先の観光地情報や治安情勢といったことも、旅行者にとっては気になるところです。

サンプルアプリケーションのイメージ
サンプルアプリケーションのイメージ

 では、具体的に「旅カタログ」の設計を行っていきます。

今回の連載内容
今回の連載内容

アプリケーションの要件を決める

 はじめに、アプリケーションが誰のため/何のためのもので、なにを実現するかを決めます。これを「要件定義」といいます。

 サンプルアプリケーションは、旅行に行きたい!と思っている人に、必要な情報を分かりやすく表示するためのものを作ります。ただし、旅行カタログに必要なすべての機能を取り込むと大がかりなプログラムになるので、サンプルアプリケーションで実現する要件を、以下の3点に絞ります。

  • 旅行先の滞在ホテルを検討しているユーザに使ってもらう
  • ホテルの宿泊料金を知ることができる
  • ホテルの情報を分かりやすく表示する

 次に、これらの要件を満たすためのアプリケーションの設計をします。

アプリケーションの設計をする

 作りたいアプリケーションの要件が決まったら、アプリケーションを設計します。設計とは、どのようなデザイン/機能のアプリを作るかを具体的に決めることです。

 ここでは、要件を満たすために次のようなアプリケーションを作ることとします。

  • ディスプレイを4分割した画面に情報を表示する
  • アプリケーション起動時に、タイトルと実行した日付を表示する
  • 条件(ホテルグレード・滞在日数・人数)を入力して料金計算ボタンを押すとホテルの宿泊料金を自動計算して表示する
  • 旅行先を選択すると、ホテルの写真や情報を画面に表示する
旅行カタログの設計例
旅行カタログの設計例

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5