Embed Size (px)
DESCRIPTION
2012年の8月にWindows Phoneハンズオンin広島で発表したWindows8の入門スライドです。
Citation preview
Windows ストア アプリケーション概要
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
infographicInformation( 情報 ) と graphic( 図 ) を組み合わせた用語
Metro( 暫定 ) スタイル UI
そぎ落とす、コンテンツが最優先コンテンツこそがエクスペリエンスの中心スクリーン上には、コンテンツに関係のある要素だけを配するユーザーの気を逸らす要素は最小限にユーザーがコンテンツに没頭できること。それがゴール
Metro( 暫定 ) スタイル UI
レイアウトカリッとしたグラフィックでスッキリした表現にグループ化や階層化を線とボックスで表現しない通勤ラッシュの車内のように詰め込みすぎない →余白が大切
Metro( 暫定 ) スタイル UI
Metro( 暫定 ) スタイル UI
Metro( 暫定 ) スタイル UI
作法に従う→一貫性コンテンツを優先するためにそぎ落としたコンテンツ以外の要素が隠れてしまった = 使い難い
Metro( 暫定 ) スタイル UI
再び IE10 これらの情報は普段隠れている
Windows 8 概要
新しいランタイム (WinRT)
・非同期処理・ OS の機能を呼び出す・ WindowsMetadata
新しいランタイム (WinRT)
Metro スタイル アプリ
HTML
JavaScript
CC++
C#VB
デスクトップ アプリ
Win32.NET/SL
Internet
Explorer
通信 とデータ
アプリ モデル
デバイスと印刷
WinRT API
グラフィックスとメディア
シス
テム
サー
ビス
JavaScript C
C++C#VB
XAMLHTML /
CSSビュ
ーモ
デル
コン
トロ
ーラ
ー
Windows コア OS サービスコア
新しいランタイム (WinRT)
非同期処理50 ミリ以上実行にかかる API 呼び出しはすべて非同期へasync / await の導入
新しいランタイム (WinRT)
OS の機能を呼び出すWindows Phone でもおなじみ、処理を OS に渡して結果を受け取る
アプリケーションコード
アプリケーションコード
カメラから動画を撮影する処理は OS が制御
カメラをデバイスを起動
撮影結果の動画ファイルを受け取る
新しいランタイム (WinRT)
DEMO
新しいランタイム (WinRT)
WindowsMetadataJavaScript+HTML でも C#+XAML でもアプリケーションを作成できる中間言語的な存在、翻訳機
Windows 8 概要
Windows ストア
Windows 8 概要
新しい実行環境
開発を始めるには
開発を始めるには
必要なもの
• Windows 8• VisualStudio 2012• Blend for VisualStudio• ストアのアカウント
開発を始めるには
Windows 8Windows ストアアプリケーションの開発が可能な OS はWindows 8 のみです。(Windows Server 2012 もいけるかも？ )
開発を始めるには
Windows 8
Download Windows 8 Enterprise Evaluationhttp://technet.microsoft.com/ja-JP/evalcenter/hh699156.aspx?ocid=wc-mscom-ent
90 日間利用可能な Windows 8 Enterprise を利用する(MSDN 、 TechNet 会員はその他エディションも DL 可能 )
開発を始めるには
VisualStudio 2012無償の Express を利用するか上位のエディションの 90 日体験版を利用する
開発を始めるには
VisualStudio 2012Express も使いやすくなった
エクスプローラーから右クリックでフォルダーを開けるようにTeamFoundationServer に接続可能に
( アドオンのインストール不能、テンプレートの作成不能 )
開発を始めるには
Blend for VisualStudioVisualStudio とあわせてインストールされるようになった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
デザイン
Segoe UI Type ramp
見出し小見出し本文補足
デザイン
Meiryo UI Type ramp
見出し小見出し本文補足
デザイン
パン時の注意画面内に横スクロールと縦スクロールが混在してはいけない
Contoso Travel
コントラクト
コントラクト
• 別のアプリケーションにデータを送る• 検索する• ほかのアプリと共通した操作を提供• マニフェスト
コントラクト
• 共有コントラクト
アプリケーション間のデータ連携は共有コントラクトを利用する受け取り側はデータ形式に対応するという宣言 ( マニフェスト ) が必要
テキスト、 URL 、バイナリデータ
別のアプリケーションにデータを送る
コントラクト
• 検索コントラクト
チャームから検索を呼び出す「項目の追加」から簡単に設定できる
検索する
コントラクト
• たとえば検索は OS も含めて検索チャームから行えるという共通認識を与えられる
• Windows 8 のタッチ UI は隠れた機能が多い、 AppBar 、Charm 、全部のアプリケーションが作法に則ることで「隠れた = わかりにくい」を軽減→没頭できる画面が実現できる
ほかのアプリと共通した操作を提供
コントラクト
何度か出ましたが多くの機能は利用する際に「この機能を使います」という宣言 ( マニフェスト ) が必要
マニフェストが足りないときにはっきりエラーを出さない場合があるので、なんで動かないのかがわからないケースで思い出してみましょう
マニフェスト
データ
データ
• ローカルに保存する一時データ• ローカルに保存するデータ• 同じ PC で共有するデータ ( 画像フォルダなどの共有スペー
ス )• 同じアプリケーション間で共有するデータ ( ローミング )• 異なるユーザー、異なるアプリケーション、異なるデバイ
ス間で共有するデータ ( クラウド )
タイルおよび通知
タイルおよび通知
• ライブタイル• Notification
実行モデル
マーケット、審査
アプリ公開までの経緯と、 HowTo
ここからはハンズオン限定内容ざっくばらんに行きますｗ
Application Excellence Lab
審査前のアプリケーションを MicroSoft の方にチェックしてもらえる Lab
アプリを申請するためのトークンはここでもらう(私が参加したころは東京に行くしかなかった )
審査落ち
審査に出したアプリケーションが 2週間の審査期間の後落ちる・・・
1.1 アプリは、サポートしているすべての言語と市場で、ユーザーに独特かつ独創的な価値または実用性を提供しなければならない
・・・意味が分からない・・・
審査を行うのは US のマイクロソフト、回答はタンパク
再び Application Excellence Lab
上記審査落ちを Lab で担当してくれた MS の方 ( および GoMetro周辺の方ｗ ) に相談
アプリの appxupload ファイル (Windows Phone のxap みたいなもの ) を渡して実際に動作を検証してもらう。
かなり懇意に対応してもらいました。
修正点
画面サイズによって文字が欠ける
・シュミレーターのデフォルトが最小画面サイズではないので注意 1024×768 でチェック
・画面に収めるよりスクロールするレイアウトにしたほうが柔軟 ScrollViewr RitchTextBlock HttpUtility で HTML を文字列に
修正点
インターネットを利用するアプリケーションはプライバシーポリシーを入れる
タイル時は左下にアプリ名が出るので、その場合はタイル画像からアプリ名を外す
再審査
開発環境が RC から RTM に代わるタイミングに入り、8 月 16 日まで再審査不可能に
8 月 16 日に RTM でビルドして申請する16 日に夜に審査に出して、 17 日に審査通過メールがくる
平行して開発しいていたもう一つのアプリの審査出しを急ぐいまがチャンスだ！！
ブルガリア！！
アプリの審査画面でなぜかブルガリア語の説明を求めれる
パッケージは WindowsPhone の xap と同じ zip ファイルなので解凍して中身を見ると言語のところになぜか BG の文字がｗ
マニフェストを修正して再審査、これも一日で通過！！
( この顛末はブログ参照 )
