You are on page 1of 132

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

スタートアップ

Agenda
• Windows8概要
• Windowsストアアプリ概要
• 開発を始めるには
• 開発入門

• 開発に役立つTips

Windows 8 概要

Windows 8概要
Windows8
2012年10月26日発売の最新のWindowsOS

Windows 8概要
Windows8

Windows 8概要
Windows8

Windows 8概要
Windows8

Windows 8概要
2つの側面を持つOS
マウス+キーボード用のUI
タッチ操作用のUI

Windows 8概要
2つの側面

ご存じsurface

Windows 8概要
2つの側面

回転してタブレット

Windows 8概要
2つの側面

やりすぎ?

Windows 8概要

PC+タブレットってことなのです

Windows 8概要

PC=いままでどおり従来のアプリケーションが動きます
(WindowsRTをのぞく)

Windows 8概要

新要素のModernUIにばかり目が行きますが、
従来のデスクトップ画面は存在します
(リボンになったりスタートボタンがなかったりはしますが)

Windows 8概要

Q.ModernUIはタッチ操作向けということでマウスでは使い辛くないですか?

Windows 8概要

A.使いずらいです

Windows 8概要

A.でも従来のデスクトップ(マウス+キーボードの場合にModernUIの画面に
行くことはほとんどないので問題ありません)
私の場合はアプリのデバッグと検索ぐらい
マウス+キーボードで作業する場合を考えるとストアアプリ開発者にとってはス
ナップの有効利用が大事

Windows 8概要

Windows 8概要

Q.Windows8搭載PCを買ったらゲームやPhotoshopなどがインストールで
きませんでした「うぃんどうずあーるてー」とか書いてありますがなんでしょう?

Windows 8概要

A.・・・・・・

Windows 8概要

( ・∀・)つドゾー

http://windows.microsoft.com/ja-JP/windows/windows-rt-faq

Windows 8概要

Q.Windows8をインストールしたのにディスプレイをタッチしても何も起こりま
せん!!

Windows 8概要

A.・・・・・・・

Windows 8概要

Q.ずばり、買いですか?

Windows 8概要
A.買いな人
・タッチ操作可能なディスプレイを持っている人
・新しい物好き
・スタートボタン嫌い
・ちょっとでも起動は早いほうがいい
・新しいパソコンの購入を考えている人
・Windowsストアアプリの開発を考えている

Windows 8概要
A.買わなくてもいいひと
・Windows7がインストールされたデスクトップPC(タッチ操作できない)
・新しいことを覚えるのが嫌いでいまだにXP、2000
・Apple製品しか考えられない(まぁ、BootCampか仮想マシンで・・・)
(今だとアップデート版が安いようなので買っておくのもいいかも)

Windowsストアアプリ概要

Windowsストアアプリ概要
Windowsストア

Windowsストアアプリ概要
Windowsストア
ModernUI用のアプリケーションは企業用途でない限りWindows
ストアにアップして、ストアからダウンロードする
ストアにアプリを提出するためにはストアのアカウントが必要
アカウント作成には個人の場合5000円くらい、企業だと10000円
ぐらいかかる

Windowsストアアプリ概要
Windowsストア
アプリを申請せずに開発するだけならストアの登録は不要

ストアでは有料アプリの販売や、お試し期間の指定などが可能

Windowsストアアプリ概要
Windowsストア
アプリを申請せずに開発するだけならストアの登録は不要

ストアでは有料アプリの販売や、お試し期間の指定などが可能
課金の仕組みはマイクロソフトにお任せ
広告を出すことも可能

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



ModernUI・デザイン
新しいランタイム(WinRT)
チャーム・コントラクト
タイル・通知

ModernUI
• ModernUI




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

ModernUI

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

ModernUI
従来のブラウザ=情報が多く没入できない

ModernUI
Metro版IE=情報が少なく没入できる

ModernUI

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

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

ModernUI

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

ModernUI

ModernUI

ModernUI
作法に従う→一貫性
コンテンツを優先するためにそぎ落とした
コンテンツ以外の要素が隠れてしまった=使い難い

ModernUI
再びIE10 これらの情報は普段隠れている

デザイン

デザイン




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

デザイン

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

デザイン

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

一般

ロード

ピスト

クロス

MTB

ミニベロ

電動アシスト

パーツ

ウェア

アクセサリー

デザイン

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

デザイン

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

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

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

デザイン

デザイン

デザイン

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

デザイン

パン時の注意
例外もある(納得のいくコンセプトがあればOK? ようは押しか?)

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でもアプリケーションを作成できる
中間言語的な存在、翻訳機

チャーム・コントラクト

チャーム
検索、共有、デバイス、設定などの機能を呼び出す
OSの場合もあるしアプリの場合もある
検索チャームからはOSのファイルも検索できるし、あなたのアプリ
ケーションが検索に対応した場合、あなたのアプリケーション内の
情報も検索できる
設定チャーム、OSの設定だけでなくアプリの設定もここから行う

チャーム・コントラクト

コントラクト
アプリが検索や共有に対応していることを宣言する仕組み

検索に対応していることをコントラクトで宣言した場合検索チャー
ムの検索候補としてアプリが表示される

コントラクトはOSとアプリの契約ともいえるもので、
OSは契約に従い検索候補に表示する。アプリは契約に従
い検索結果を返す必要がある

チャーム・コントラクト

コントラクト
コントラクトの宣言は
マニフェストファイルから行う

チャーム・コントラクト

コントラクト
あなたのアプリからデータをほかのアプリに渡すことができる

Twitterアプリに文字列を渡して共有先のアプリから
Twitterに投稿してもらうなど
Unixのパイプみたいなもの
ほかのアプリやOSの力を借りることでより魅力あるアプリ
に!!

タイル・通知

タイル(ライブタイル)
アプリケーションの起点となる
四角いスペース
情報が切り替わるタイル
=ライブタイル

タイル・通知

通知(トースト通知)
ポップアップで情報を通知する仕組み
別のアプリが起動中でも表示できる

タイル・通知
タイルと通知については
眠るシーラカンスと水底のプログラマーの
Windows8まとめを参照してください
(手前味噌ですが)

http://coelacanth.heteml.jp/blog/windows8/windows8%E3%81%BE%E3%81%A8%E3%82%81/

開発を始めるには

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



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

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

開発を始めるには

Windows 8
Windows ストアアプリケーションの開発が可能なOSはWindows 8
のみです。
今回のノベルティの「Windows8 Enterprise 90日体験版」でも
3か月は開発できる!!
Enterprise版なのでWindows To Goも試せる
(時間があればデモします)

開発を始めるには

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
今日のノベルティの30日体験版でも・・・ん?30日?

開発を始めるには

VisualStudio 2012
今日のノベルティの30日体験版でも・・・ん?30日?
WebでDLしたほうがいいじゃないか!!

開発を始めるには

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

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

開発を始めるには

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

開発入門

開発の言語を選ぶ

多彩な言語
XAML+C#+(DirectX)
XAML+C++(DirectX)
XAML+VB
HTML+JavaScript+CSS

開発の言語を選ぶ

グリッドアプリケーションを眺める
アプリの起点
App.xaml.cs
// ナビゲーション スタックが復元されていない場合、最初のページに移動します。
// このとき、必要な情報をナビゲーション パラメーターとして渡して、新しいページを
// を構成します

if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups"))
{
throw new Exception("Failed to create initial page");
}

開発の言語を選ぶ

グリッドアプリケーションを眺める
アプリの起点
App.xaml.cs
// ナビゲーション スタックが復元されていない場合、最初のページに移動します。
// このとき、必要な情報をナビゲーション パラメーターとして渡して、新しいページを
// を構成します

if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups"))
{
throw new Exception("Failed to create initial page");
}

GroupedItemsPageが最初のページだ

開発の言語を選ぶ

グリッドアプリケーションを眺める
ページ構成
GroupedItemsPage.xaml = グループ分けされたリストページ
GroupDetailPage = グループの詳細ページ

ItemDetailPage = グループのアイテム詳細ページ

開発の言語を選ぶ

グリッドアプリケーションを眺める
デザインビューになぜ値が入っているの?

開発の言語を選ぶ

グリッドアプリケーションを眺める
デザインビューになぜ値が入っているの?
<!-- このページで表示されるアイテムのコレクション -->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"
d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance
Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

開発の言語を選ぶ

グリッドアプリケーションを眺める
GroupDetailPage.xaml.csを眺めてみる
ポイントは2つ
class GroupDetailPage :App1.Common.LayoutAwarePage

this.DefaultViewModel["Group"] = group;

開発の言語を選ぶ

グリッドアプリケーションを眺める
Common以下は宝の山だ(サンプル的に)

開発の言語を選ぶ

グリッドアプリケーションを眺める
Common以下は宝の山だ(サンプル的に)

開発の言語を選ぶ

入門の次はこれを覚えよう
LINQ
データの集合(コレクション)をSQLライクに処理できる

開発の言語を選ぶ

入門の次はこれを覚えよう
データバインディング
XAMLコードとC#コードを関連づける仕組み
C#側でコードを変えるだけでXAMLコード(ビュー)の表示が変わる

開発の言語を選ぶ

入門の次はこれを覚えよう
MVVM
データバインディングの次はMVVM(Model-View-ViewModel)を学
んでみよう(規模の大きな開発向け)

CommandだけでもOK

Tips

Windowsストア攻略
ストア登録のポイント&はまりどころ
を紹介しようと思います
1.画面について
2.レイアウト&コントロールについて
3.デザインについて?

Windowsストア攻略
1.画面について
Windows8はPC、タブレット・・・様々な画面解像度に対応している必
要があります。
では開発者はどのようなポイントに気を付ければ良いでしょう?

Windowsストア攻略
1.画面について
・最少サイズで必ずチェックする
画面サイズは1024×768が最小サイズ
このサイズで文字やコントロールが切れないかチェック
シュミレーターはかならず最少幅で
動作確認

Windowsストア攻略
1.画面について
・最少サイズで必ずチェックする
画面サイズは1024×768が最小サイズ
このサイズで文字やコントロールが切れないかチェック
デザインビューは最少幅を選べないので
シュミレーターでチェック!!

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ち、横持ち時の動作を必ず確認する
シュミレーターでチェック!!!

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ち、横持ち時の動作を必ず確認する
横持ちから縦持ちに持ち替えたときに横スクロールが発生するような
場合に縦スクロールがすでにあるようなレイアウトは注意

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ち、横持ち時の動作を必ず確認する
横持ちから縦持ちに持ち替えたときに横スクロールが発生するような
場合に縦スクロールがすでにあるようなレイアウトは注意
そういう場合にRichTextColumnsが便利

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ちと横持ち時はどうやって表示を変える?
方法1:VisualStateManagerで制御
(ー)実行時にエラーになる
(+)x:nameの重複がさけれる

VSのデバイスで確認

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ちと横持ち時はどうやって表示を変える?
方法2:一画面に縦のレイアウトと横のレイアウトを記述して
Visibilityで制御する
(+)XAMLコードが直観的
(ー)x:nameが重複する
方法1がおすすめ

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ちと横持ち時はどうやって表示を変える?
楽をしたい場合は横持ち時の画面は横にスクロールする形にしておいて、
縦持ち時も同じレイアウトで表示

Windowsストア攻略
1.画面について
・スナップをチェックする
スナップは横幅320ピクセルの細長い領域になる
端末の解像度は1326以上ないとスナップできない
動作はシュミレーターでチェック

楽をしたい場合はスナップ時は画像だけ表示しておけばOK

Windowsストア攻略
1.画面について
・セマンティックズームは必須ではない
楽をしたい場合は未対応で

Windowsストア攻略
1.画面について
・まとめ
画面についてはシュミレーターで切れている部分がないかしっかりチェック
最少画面サイズでの確認を忘れずに
スナップも忘れずに

Windowsストア攻略
2.レイアウト&コントロールについて
拡張するコントロール
GridView & ListViewをうまく使おう

Windowsストア攻略
2.レイアウト&コントロールについて
拡張するコントロール
GridView & ListViewをうまく使おう

Windowsストア攻略
2.レイアウト&コントロールについて
セッティングチャーム
設定時に画面右に一部分表示するような処理は
チャームフライアウトで実現する(ex:星座表)
ただしC#のコントロールにはデフォルトで
チャームフライアウトは無い

CharmFlyout
http://nuget.org/packages/CharmFlyout

Windowsストア攻略
2.レイアウト&コントロールについて
検索チャーム使用時の起動に注意
検索チャームからアプリが起動することがある
この場合検索結果画面が最初に表示される
初期化処理は
App.xaml.csのOnSearchActivatedイベントハンドラーで

楽をしたい場合は検索未対応だ!!

Windowsストア攻略
2.レイアウト&コントロールについて
既存のプロジェクトを利用する
プロジェクト作成時に
「グリッドアプリケーション」
「分割アプリケーション」
を利用すると
最初からデザインのコンセプトに沿ったレイアウトになっている
Windowsストアアプリの構成を学ぶにもおすすめ

Windowsストア攻略
2.レイアウト&コントロールについて
MS提供のテンプレートを利用する
Windows 8 アプリ開発体験テンプレート

Windowsストア攻略
2.レイアウト&コントロールについて
MS提供のテンプレートを利用する
最初から色々そろっているが、
テンプレートを使ったアプリが増えてきたので今後はオリジナリティを求められ
るかも?
とはいえスタート位置としてはかなり楽!!

Windowsストア攻略
2.レイアウト&コントロールについて
・まとめ
GridView、ListViewをうまく使おう
プロジェクトやテンプレートを利用する
XAMLとHTMLのコントロールの違いに注意

Windowsストア攻略
3.デザインについて
あなたがプログラマーならWindowsストアアプリの
タイポグラフィーとかインフォグラフィックについて頭が痛いはず
(かくいう私が頭が痛い・・・というか何かが理解を拒む)
そういう場合はデザイナーさんを味方につけましょう!!
(かなり楽になります。これが一番楽する方法かも・¥・)

Tips
・タイルの画像にアプリ名がある場合は左下の表記はアプリ名ではなく、画像

ライブタイルでWebからもらったXMLで更新する場合はマニフェストではなく
XML側に指定を書く

Tips
・インターネットに接続する場合はプライバシーポリシーを
アプリ内に表示
Webにページを作ってそこをブラウザで開くか、WebViewで表示でもOK

Tips
・データ取得する前に中途半端な部分を表示しない
(郵便番号が取得できるまでの表記が[〒 - ]など)

必須ではないが、ちゃんとしておきたい

Tips
・ストア申請時になぜかブルガリア語の説明を求められる
<Resource Language="x-generate" />

<Resource Language="JA-JP" />

ブルガリア問題体験した人?

Tips
・なんか勝手にズームするぞ
<ScrollViewer ZoomMode="Disabled“

Tips
・GridViewやListViewは自前でScrollViewerを内包しているので、
無駄にScrollViewerで囲まない

・GridViewやListViewはCanvas、StackPanelなどでくくると高さが判定
できず折り返ししないことが!!

Tips
・文字数が長すぎる場合は3点リーダー「・・・」で
TextTrimming="WordEllipsis"

Tips
・データバィンディング時に表示に合わせて値を加工したい場合は
Converterを(CommonディレクトリのBooleanToVisibilityConverter
などを参考に)

Tips
・Commonディレクトリのファイルの追加方法
Commonディレクトリのファイルを必要とするようなコントロールやコントラク
トの追加をすればOK
もっとスマートな方法ある?

Tips
・タイルやトースト通知は独自の定期実行APIがあるのでバックグラウンドタス
クにしない(バックグラウンドタスクの定期処理を実装する場合ユーザーに確
認ダイアログが出る)

Tips
・WACKでテストしようね

Tips
・背景画像をトップGridに定義すると画像読み込みの間表示が乱れること
があるので下の階層でCanvasなどに指定するとよいかも?

描画が入れ子の下から行われるからツリーの上位だと時間がかかる?
(最近の事象なのでその通りかは検証中)

Tips
・未実装の機能はきっぱり削る
アプリは完成した状態で

Tips
・Templateをアイテム毎に切り替えたい場合は
TemplateSelectorを使う

class hogeSelector : DataTemplateSelector
{
protected override DataTemplate SelectTemplateCore(object item,
DependencyObject container)
{

Tips
・C#でDirectXがつかえるCharpDxがあります
http://sharpdx.org/
Sampleは公式から

おまけ

おまけ
書籍を出します(予約開始)
基礎から学ぶ Windowsストアアプリ開発

おまけ
Ascii.jpで紹介されました
http://ascii.jp/elem/000/000/737/737445/

ご清聴ありがとうございました