SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

Windowsストアアプリってなんだろう

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

Windowsストアアプリの作り方

 それでは、具体的にWindowsストアアプリの開発のしかたについて説明します。アプリケーション作成の流れは、次の図のようになります。

Windowsストアアプリ作成の流れ
Windowsストアアプリ作成の流れ

開発の準備

 まず、はじめにWindowsストアアプリを作成するためには、開発環境を準備しなければいけません。この開発環境とは、いったいどのようなものでしょうか?

 開発環境とは、アプリケーションを作成するために必要なソフトやツールのことを指します。例えば、「販売店の売上推移が知りたいので、グラフィカルなグラフを作りたい」という場合、まず表計算ソフトをインストールしてから、グラフを作ります。このときの「表計算ソフトをインストールする」ということが、アプリケーション開発での開発環境を準備するということになります。

 Windowsストアアプリでは、Visual Studioというマイクロソフト社が提供するツールを使って開発します。Visual Studioには機能の違いによって有償版と無償版があります。本連載では、無償版の「Visual Studio Express 2012」を使用してアプリケーションを作成します。

Visual Studioでの開発イメージ
Visual Studioでの開発イメージ

設計

 アプリケーションを作るときは、「なんの目的でアプリケーションを作るか」や「どのような機能を持つアプリケーションを作るか」をあらかじめ決めることが重要です。これをアプリケーションの設計と言います。

 では、具体的にどのようなことを行うかというと、

  • 誰のため/何のためにアプリケーションを作るか
  • アプリケーションがなにを実現するか

などの要件を決めます。

 そして、作りたいアプリケーションが決まったら、どのようなデザイン/機能のアプリを作るかを決めます。例えば、

  • アプリ画面にどのような情報を表示するか
  • アプリで使う情報(データ)はどこに保存するか
  • クリックする、タップするといった動作があったとき、どのような処理をするか
  • 画面のデザイン(色や大きさ)はどうするか

などです。

 例として、Windowsストアアプリで子供向け教育アプリを作る場合、設計は以下のようになります。

子供向け教育アプリを作る場合の設計
項目 具体的な内容
要件の定義 対象は、幼稚園年中~年長児向け
タブレットを使って、幼稚園児が1人でひらがなの学習ができるようにする
デザイン/機能設計
画面にひらがなが1文字ずつ表示され、ひらがなをなぞると、よみかたが再生される
5問連続で正解すると、合格マークが表示される
幼稚園児でも操作できるように、アイコンやボタンは大きくし、カラフルな色を使う

 Windowsストアアプリの場合、画面デザインにガイドラインがあります。ガイドラインとは、デザインを行う上での指針のことで、ボタンの配置や文字/画像の大きさなどの目安が決まっています。そのため、この指針に従えばデザインが得意でない人が開発した場合でも、操作性の高いアプリケーションを作ることができます。

 以下のマイクロソフトの公式サイトには、Windowsストアアプリのデザインや操作性をよくするためのヒントが紹介されています。

プログラミング

 Windowsストアアプリでは、JavaScript、C#、Visual Basic、C++などの開発言語を使ってアプリケーションを作成できます。これらの言語は、すでにWebシステムやデスクトップアプリケーションなどの開発では多く使われている言語で、たくさんの優れた書籍や情報を参考にして開発をすすめることができます。

 本連載では、Webシステムで広く利用されているJavaScriptとHTMLを使ってアプリケーションを作成します。JavaScriptは、前述したとおりオブジェクト指向型のスクリプト言語であり、初心者でも習得がしやすいのが特徴です。また豊富なライブラリ(簡単に使えるサンプルのようなもの)があるのも魅力です。

テスト/配布

 Windowsストアは、作成したアプリケーションを配布するための仕組みです。

 一般のユーザに配布するときは、作成したアプリをWindowsストアで公開します。このWindowsストアで公開するためには、審査を受ける必要があります。コーディングに誤りがないなどのテストを行ったうえで、認定を受けたものが公開されます。また有料アプリの場合は、Windowsストアの課金の仕組みを利用します。

 企業システムなどで業務アプリを配布するときは、Windowsストアを使わずに作成したアプリを直接社内ユーザに配布することもできます。これを、サイドローディングと呼びます。このように、配布できる仕組みがあらかじめ決まっているというのは、不要なアプリや危険なアプリを使うことができないということにもなるので、セキュリティの観点からもメリットがあります。

おわりに

 Windows 8とともに新しく登場した「Windowsストアアプリ」は、次のような特徴があります。

  • Windows 8上で動き、パソコンやタブレットなどで幅広く利用できる
  • グラフィカルで操作性の高いアプリケーションを作ることができる
  • アプリケーション開発言語の選択肢が多い
  • Windows上で動作するため、業務システムと相性が良い

 本連載では、JavaScriptとHTMLを使って、「商品カタログ」アプリを作成する予定です。アプリケーションを作るうえで検討しなければならないことをふまえ、実際にサンプルコードを作りながら説明したいと思います。

 次回の記事では、このWindowsストアアプリを開発するための準備作業について紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7155 2013/05/30 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング