You are on page 1of 63

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

Windows Phone ハンズオン in 広島 vol.13 ver

Agenda







Windows8概要
開発を始めるには
デザイン
コントラクト
データ
タイルおよび通知
実行モデル
マーケット、審査

Windows 8 概要

Windows 8概要
・マウス+キーボード用のUI(クラシックデスクトップ)
・タッチ操作用のUI(スタート画面)

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



Metro(暫定)スタイルUI
新しいランタイム(WinRT)
Windowsストア
新しい実行環境

Metro(暫定)スタイルUI
Metro(暫定)スタイルUI




Immersive
infographic
そぎ落とす、コンテンツが最優先
レイアウト
作法に従う→一貫性

Metro(暫定)スタイルUI

Immersive
没入した、没入できる、どっぷりつかった、実体験のように感じる

Metro(暫定)スタイルUI
従来のブラウザ=情報が多く没入できない

Metro(暫定)スタイルUI
Metro版IE=情報が少なく没入できる

Metro(暫定)スタイルUI

infographic
Information(情報)とgraphic(図)を組み合わせた用語

Metro(暫定)スタイルUI
そぎ落とす、コンテンツが最優先
コンテンツこそがエクスペリエンスの中心
スクリーン上には、コンテンツに関係のある要素だけを配する
ユーザーの気を逸らす要素は最小限に
ユーザーがコンテンツに没頭できること。それがゴール

Metro(暫定)スタイルUI

レイアウト
カリッとしたグラフィックでスッキリした表現に
グループ化や階層化を線とボックスで表現しない
通勤ラッシュの車内のように詰め込みすぎない →余白が大切

Metro(暫定)スタイルUI

Metro(暫定)スタイルUI

Metro(暫定)スタイルUI
作法に従う→一貫性
コンテンツを優先するためにそぎ落とした
コンテンツ以外の要素が隠れてしまった=使い難い

Metro(暫定)スタイルUI
再びIE10 これらの情報は普段隠れている

Windows 8概要
新しいランタイム(WinRT)
・非同期処理
・OSの機能を呼び出す
・WindowsMetadata

新しいランタイム(WinRT)

新しいランタイム(WinRT)

非同期処理
50ミリ以上実行にかかるAPI呼び出しはすべて非同期へ
async / await の導入

新しいランタイム(WinRT)

OSの機能を呼び出す
Windows Phoneでもおなじみ、処理をOSに渡して結果を受け取る

アプリケーションコード

カメラをデバイスを起動
カメラから動画を撮影する処理
はOSが制御

アプリケーションコード

撮影結果の動画ファイルを受け取る

新しいランタイム(WinRT)

DEMO

新しいランタイム(WinRT)

WindowsMetadata
JavaScript+HTMLでもC#+XAMLでもアプリケーションを作成できる
中間言語的な存在、翻訳機

Windows 8概要
Windowsストア

Windows 8概要
新しい実行環境

開発を始めるには

開発を始めるには
必要なもの



Windows 8
VisualStudio 2012
Blend for VisualStudio
ストアのアカウント

開発を始めるには

Windows 8
Windows ストアアプリケーションの開発が可能なOSはWindows 8
のみです。
(Windows Server 2012もいけるかも?)

開発を始めるには

Windows 8
90日間利用可能なWindows 8 Enterprise を利用する
(MSDN、TechNet会員はその他エディションもDL可能)

Download Windows 8 Enterprise Evaluation
http://technet.microsoft.com/jaJP/evalcenter/hh699156.aspx?ocid=wc-mscom-ent

開発を始めるには

VisualStudio 2012
無償のExpressを利用するか
上位のエディションの90日体験版を利用する

開発を始めるには

VisualStudio 2012
Expressも使いやすくなった
エクスプローラーから右クリックでフォルダーを開けるように
TeamFoundationServerに接続可能に

(アドオンのインストール不能、テンプレートの作成不能)

開発を始めるには

Blend for VisualStudio
VisualStudioとあわせてインストールされるようになった
Expressエディションでも同様

開発を始めるには

Windows ストア
アプリケーションを提出するためにはストアのアカウントが必要
Application Excellation Lab
遠隔のAELについては
Developer Camp コミュニティ向け、 Windows 8 アプリ開発
Boot camp@ヒーロー島(8月31日)
で案内があると思います

http://atnd.org/events/31507

デザイン

デザイン




画面数
Charm、AppBarを利用する
テンプレートを利用する
タイポグラフィー
パン時の注意点

デザイン

• 画面数
• Windowsストアアプリケーションは用意しなければいけない画面数が
多くなる
縦持ち・横持ち、スナップ、セマンティックズーム、プライバシーポリシー
お問い合わせ・・・

デザイン

Charmを利用する
画面内に検索フォームを設けない=チャームの検索を利用する
画面にボタンを多用しない=AppBarに機能を付ける

一般

ロード

ピスト

クロス

MTB

ミニベロ

電動アシスト

パーツ

ウェア

アクセサリー

デザイン

テンプレートを利用する
プロジェクト作成時に選べる
「グリッドアプリケーション」「分割アプリケーション」から作り始めると、
デザインの作法に則っているので楽できる
注目:GridViewの使い方、RitchTextBlockの使い方

デザイン

DEMO

デザイン

タイポグラフィー
Windowsストアアプリケーションは文字のジャンプ率が高いのと余白の使い方
が特徴
タイポグラフィーにも指標がある

Metro スタイル アプリの設計ガイド

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh770552.aspx

デザイン

デザイン

デザイン

パン時の注意
画面内に横スクロールと縦スクロールが混在してはいけない
Contoso Travel

コントラクト

コントラクト



別のアプリケーションにデータを送る
検索する
ほかのアプリと共通した操作を提供
マニフェスト

コントラクト

別のアプリケーションにデータを送る
• 共有コントラクト

アプリケーション間のデータ連携は共有コントラクトを利用する
受け取り側はデータ形式に対応するという宣言(マニフェスト)が必要
テキスト、URL、バイナリデータ

コントラクト

検索する
• 検索コントラクト

チャームから検索を呼び出す
「項目の追加」から簡単に設定できる

コントラクト

ほかのアプリと共通した操作を提供
• たとえば検索はOSも含めて検索チャームから行えるという共通認識を
与えられる
• Windows 8のタッチUIは隠れた機能が多い、AppBar、Charm、
全部のアプリケーションが作法に則ることで「隠れた=わかりにくい」を軽
減→没頭できる画面が実現できる

コントラクト

マニフェスト
何度か出ましたが多くの機能は利用する際に「この機能を使います」とい
う宣言(マニフェスト)が必要
マニフェストが足りないときにはっきりエラーを出さない場合があるので、な
んで動かないのかがわからないケースで思い出してみましょう

データ

データ




ローカルに保存する一時データ
ローカルに保存するデータ
同じPCで共有するデータ(画像フォルダなどの共有スペース)
同じアプリケーション間で共有するデータ(ローミング)
異なるユーザー、異なるアプリケーション、異なるデバイス間で共有する
データ(クラウド)

タイルおよび通知

タイルおよび通知
• ライブタイル
• Notification

実行モデル

マーケット、審査

アプリ公開までの経緯と、HowTo
ここからはハンズオン限定内容
ざっくばらんに行きますw

Application Excellence Lab
審査前のアプリケーションをMicroSoftの方にチェックしてもらえるLab

アプリを申請するためのトークンはここでもらう
(私が参加したころは東京に行くしかなかった)

審査落ち
審査に出したアプリケーションが2週間の審査期間の後落ちる・・・

1.1 アプリは、サポートしているすべての言語と市場で、ユーザーに
独特かつ独創的な価値または実用性を提供しなければならない
・・・意味が分からない・・・
審査を行うのはUSのマイクロソフト、回答はタンパク

再びApplication Excellence Lab
上記審査落ちをLabで担当してくれたMSの方(およびGoMetro周辺
の方w)に相談
アプリのappxuploadファイル(Windows Phoneのxapみたいなもの)を渡
して実際に動作を検証してもらう。

かなり懇意に対応してもらいました。

修正点
画面サイズによって文字が欠ける

・シュミレーターのデフォルトが最小画面サイズではないので注意
1024×768でチェック
・画面に収めるよりスクロールするレイアウトにしたほうが柔軟
ScrollViewr
RitchTextBlock
HttpUtilityでHTMLを文字列に

修正点
インターネットを利用するアプリケーションはプライバシーポリシーを入れ

タイル時は左下にアプリ名が出るので、その場合はタイル画像からアプ
リ名を外す

再審査
開発環境がRCからRTMに代わるタイミングに入り、
8月16日まで再審査不可能に
8月16日にRTMでビルドして申請する
16日に夜に審査に出して、17日に審査通過メールがくる

平行して開発しいていたもう一つのアプリの審査出しを急ぐ
いまがチャンスだ!!

ブルガリア!!
アプリの審査画面でなぜかブルガリア語の説明を求めれる

パッケージはWindowsPhoneのxapと同じzipファイルなので解凍して中
身を見ると言語のところになぜかBGの文字がw
マニフェストを修正して再審査、これも一日で通過!!
(この顛末はブログ参照)