Windowsストアアプリケーション概要(スタート編)

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

Agenda

• Windows8概要

• Windowsストアアプリ概要

• 開発を始めるには

• 開発入門

• 開発に役立つTips

Windows 8 概要

Windows 8概要

2012年10月26日発売の最新のWindowsOS

Windows8

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ストア

ModernUI用のアプリケーションは企業用途でない限りWindowsストアにアップして、ストアからダウンロードする

ストアにアプリを提出するためにはストアのアカウントが必要

アカウント作成には個人の場合5000円くらい、企業だと10000円ぐらいかかる


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



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

async / await の導入


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

アプリケーションコード

アプリケーションコード

カメラから動画を撮影する処理はOSが制御

カメラをデバイスを起動

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


DEMO


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

Download Windows 8 Enterprise Evaluation

http://technet.microsoft.com/ja-JP/evalcenter/hh699156.aspx?ocid=wc-mscom-ent

90日間利用可能なWindows 8 Enterprise を利用する

(MSDN、TechNet会員はその他エディションもDL可能)









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.デザインについて？



Windows8はPC、タブレット・・・様々な画面解像度に対応している必

要があります。

では開発者はどのようなポイントに気を付ければ良いでしょう？



・最少サイズで必ずチェックする

画面サイズは1024×768が最小サイズ

このサイズで文字やコントロールが切れないかチェック

シュミレーターはかならず最少幅で

動作確認



・最少サイズで必ずチェックする

画面サイズは1024×768が最小サイズ

このサイズで文字やコントロールが切れないかチェック

デザインビューは最少幅を選べないので

シュミレーターでチェック！！



・縦横をチェックする

縦持ち、横持ち時の動作を必ず確認する

シュミレーターでチェック！！！





横持ちから縦持ちに持ち替えたときに横スクロールが発生するような

場合に縦スクロールがすでにあるようなレイアウトは注意





横持ちから縦持ちに持ち替えたときに横スクロールが発生するような

場合に縦スクロールがすでにあるようなレイアウトは注意

そういう場合にRichTextColumnsが便利




縦持ちと横持ち時はどうやって表示を変える？

方法1：VisualStateManagerで制御

(ー)実行時にエラーになる

(＋)x:nameの重複がさけれる

VSのデバイスで確認





方法2：一画面に縦のレイアウトと横のレイアウトを記述して

Visibilityで制御する

(＋)XAMLコードが直観的

(ー)x:nameが重複する

方法1がおすすめ





楽をしたい場合は横持ち時の画面は横にスクロールする形にしておいて、

縦持ち時も同じレイアウトで表示



・スナップをチェックする

スナップは横幅320ピクセルの細長い領域になる

端末の解像度は1326以上ないとスナップできない

動作はシュミレーターでチェック

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



・セマンティックズームは必須ではない

楽をしたい場合は未対応で



・まとめ

画面についてはシュミレーターで切れている部分がないかしっかりチェック

最少画面サイズでの確認を忘れずに

スナップも忘れずに



拡張するコントロール

GridView & ListViewをうまく使おう



拡張するコントロール

GridView & ListViewをうまく使おう



セッティングチャーム

設定時に画面右に一部分表示するような処理は

チャームフライアウトで実現する(ex:星座表)

ただしC#のコントロールにはデフォルトで

チャームフライアウトは無い

CharmFlyout

http://nuget.org/packages/CharmFlyout

http://nuget.org/packages/CharmFlyout



検索チャーム使用時の起動に注意

検索チャームからアプリが起動することがある

この場合検索結果画面が最初に表示される

初期化処理は

App.xaml.csのOnSearchActivatedイベントハンドラーで

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



既存のプロジェクトを利用する

プロジェクト作成時に

「グリッドアプリケーション」

「分割アプリケーション」

を利用すると

最初からデザインのコンセプトに沿ったレイアウトになっている

Windowsストアアプリの構成を学ぶにもおすすめ



MS提供のテンプレートを利用する

Windows 8 アプリ開発体験テンプレート



MS提供のテンプレートを利用する

最初から色々そろっているが、

テンプレートを使ったアプリが増えてきたので今後はオリジナリティを求められるかも？

とはいえスタート位置としてはかなり楽！！



・まとめ

GridView、ListViewをうまく使おう

プロジェクトやテンプレートを利用する

XAMLとHTMLのコントロールの違いに注意


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は公式から

http://sharpdx.org/

http://sharpdx.org/

おまけ

おまけ

書籍を出します(予約開始)

基礎から学ぶ Windowsストアアプリ開発

おまけ

Ascii.jpで紹介されました

http://ascii.jp/elem/000/000/737/737445/

http://ascii.jp/elem/000/000/737/737445/

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

Documents

Windowsストア アプリケーション概要(スタート編)

Windowsストアアプリケーション概要(スタート編)