Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Windowsストアアプリの概要と、開発の第一歩

速習 Windowsストアアプリケーション 第1回

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

 Windows 8が発売され、タッチ操作向けのアプリケーションのストア「Windowsストア」がオープンしました。本記事ではその新しい「Windowsストア」向けのアプリケーションの概要と初期プロジェクトのテンプレートを比較しながら解説し、基礎的な構成を学習する手助けを行います。

目次

はじめに

 2012年10月26日、満を持してMicrosoftの最新OS「Windows 8」が発売されました。

 Windows 8には、従来のデスクトップアプリケーションに加え、指やペンデバイスを用いたタッチ操作に特化したUI(ユーザーインターフェース)が備わりました。

 タッチ操作向けのアプリケーションをWindowsストアアプリケーションといい、アプリケーションを公開するためのストアをWindowsストアといいます。

 この記事では、Windowsストアアプリケーション開発環境の導入方法を説明した後に、アプリケーションの概要と最初のプロジェクトの解説を行います。

対象読者

  • Windowsストアアプリケーションの開発に興味がある方。
  • C#ないしその他のオブジェクト指向言語の基礎知識がある方。

必要な環境

 Windowsストアアプリケーションの開発には、Windows 8にインストールされたVisual Studio Express 2012 for Windows 8ないしVisual Studio2012の上位エディション(プロフェッショナル以上)が必要です。

Windowsストアアプリケーションの概要

タッチ中心のUI

 Windowsストアアプリケーションは、Windows 8の2つの側面「従来の使い方(マウス&キーボード)」と「新しい使い方(指やペンでのタッチ操作)」の後者に対応するアプリケーションです。

 そのため、指でタッチしてもミスタッチをしない十分な大きさのボタンを使うなど、従来のWindowsアプリケーションにはなかったUIデザインが必要になります。

「Metro」と呼ばれたデザイン

 WindowsストアアプリケーションのUIはこれまで「Metroスタイル」と呼ばれていましたが、事情があってMetroスタイルという用語は使えなくなりました。MetroスタイルはMicrosoftのスマートフォンWindows Phoneでも採用されているUIです。

コンテンツ中心

 Windowsストアアプリケーションでは、コンテンツを最優先にすることが提唱されています。そのため極力ボタンなどを排した画面設計が求められ、ボタンやメニューなどのアプリケーションバーは、チャームといった普段は表示しない領域に配置されます。

 下図はWindowsストアアプリケーション版のIE10の画面ですが、コンテンツを最優先するために、画面上から極力ボタンやメニューを排除したデザインになっています。

Windowsストアアプリケーションの「IE10」
Windowsストアアプリケーションの「IE10」

アプリケーションバー

 アプリケーションバーは、通常時は画面の上部や下部に隠れている、ボタンなどを配置する領域です。マウスの右クリック、または指を画面下端または上端から中央にスワイプすることで表示できます。

IE10でアプリケーションバーを表示
IE10でアプリケーションバーを表示
エッジスワイプ

 画面端から中央に向けてスワイプ操作することを「エッジスワイプ」といいます。

チャーム

 チャームはWindows 8の重要な機能を配置したサイドバーです。

 マウスを画面右上または右下に移動させることで表示できます。タッチ操作の場合は、画面右端からエッジスワイプします。

チャームを表示
チャームを表示

スタート画面に表示されるライブタイル

 Windows 8起動時は、「スタート画面」と呼ばれるWindowsストアアプリケーションのショートカットを敷き詰めた画面が表示されます。

 この四角いショートカットを「タイル」と呼びます。タイルの中でもくるくると切り替わりながら情報を表示するタイルが「ライブタイル」です。

 ライブタイルはサーバーと通信を行うことなどで最新の情報を取得してアプリケーションが起動していない状態でもユーザーに取得した情報を表示することができます。 

新しいAPI「WinRT」

 Windowsストアアプリケーションは、新しいAPI「WinRT」を使って開発します。「WinRT」は実行に時間がかかる処理はすべて非同期処理になるなど、アプリケーションが滑らかな表示を行えるように配慮されたAPIです。

複数のプラットフォーム

 Windowsストアアプリケーションでは、さまざまな言語で開発可能です。

 XAMLと呼ばれるXML形式のマークアップ言語で画面を定義する場合は、C#、VB、C++言語。HTMLを表示に使う場合は、CSS+JavaScriptというWeb開発で用いられるスキルで開発が可能です。

 本記事ではXAML+C#での解説を行いますが、Windows 8から新しく導入されたWinRTというAPIは、これらの言語から(言語的な記法の差異を除けば)共通の形で呼び出し可能です。

選べるテンプレート

 Windowsストアアプリケーションの初期状態で使用できるテンプレートは3つです(XAML+C#プロジェクトの場合)。

  • 新しいアプリケーション(XAML)
  • グリッドアプリケーション(XAML)
  • 分割アプリケーション(XAML)
選択可能なプロジェクト
選択可能なプロジェクト

 まずは一番シンプルな「新しいアプリケーション」プロジェクトの構成、プログラム処理を確認しながら、Windowsストアアプリケーションの最初の一歩を踏み出すための基礎知識を身につけましょう。


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

修正履歴

  • 2012/11/23 15:23 分割アプリケーションの章を削除

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

バックナンバー

連載:速習 Windowsストアアプリケーション

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5