狠狠撸

～サルでもできる入門編～
2012/09/29 Hokuriku.NET vol.10

自己紹介
? -
? -
? -
? -
? 最近は、 WPF とか Windows 8 とかに興味があります。
? 金沢生まれの金沢育ちです。
? 金沢の湯涌温泉というところの出身です。
? 温泉以外は何もない田舎です。
? 最近は、アニメ「花咲くいろは」の舞台になって、聖地巡礼で
訪れる方が増えているそうです。
? 趣味はソフトテニスですが、最近は子どものお世話が
忙しくて、全然できてません。

? というか、子どもの面倒をみてると、おうちで時間を作りにくいです。
? 「子守り駆動開発 (CDD) 」とか言って、抱っこしながら開発しようとも
しましたがムリでした。
? というわけで、アプリ作る時間もなかなか作れません。 ( 言い訳
? でも、 Windows ストアアプリを作って、ストアに出してみたいと思い
ました。

“Windows ”ストアアプリを
ためしに作ってみようかなー
という気分になって頂く

アジェンダ
? きっかけ
? 審査に出してみた
? なかなか始まらなかった審査
? 作ったアプリ
? 使った開発体験テンプレート
? 開発体験テンプレートの使い方
? 見落としそうになった細かいこと
? 開発体験テンプレートから学ぶ
? セマンティックズーム
? アプリバー
? コントラクト
? ライブタイル
? 最后に

チャンス ( きっかけ ) が訪れた
? オンラインスタンプラリー
? 9 月末までにアプリ登録を完了すると、もれなくステキな特典
があたる。
? Application Excellence Lab (AEL)
? 日本マイクロソフトのエンジニアの方による審査前レビュー
? 9 月末までに AEL 利用すると、 Windows ストアへのアプリ登録
に必要なライセンスを頂ける
https://www.facebook.com/5Metro/app_384971174888643
http://msdn.microsoft.com/ja-jp/jj554833.aspx

色々あります、ガイドライン

色々あるので、
ひとつひとつには触れません。
( 詳しくは msdn のページを見てください。 )

魅力的なアプリの作成
? Metro デザインスタイルの活用
? 軽快かつ柔軟
? 美しいスナップとスケーリング
? 正しいコントラクトの使用
? 魅力的なタイルの作成
? つながり感とライブ感
? クラウドへのローミング
? Metro スタイルの設計原則の採用
（「 msdn : 魅力的な Metro スタイルアプリの作成」よ
り）
http://msdn.microsof.com/ja-jp/library/windows/apps/hh464920.aspx

というわけで、
審査に出してみました

9/19 深夜くらいに、審査に提出

「支払方法の確認」が必要でし
た? 通常 ( = 開発者アカウントを購入する場合 )
? 開発者アカウントの料金をクレジットカードで引き
落としされる。
? AEL 受講等による Token 入手から開発者アカウントを
入手した場合
? カード確認のために「少額請求」と「払い戻し」が
行われ、
? この請求金額を入力することで、アプリ審査が始ま
りました
? ( カード会社に問い合わせて入手し、 9/26 に入力し
ました。 )

… すいません。
まだリリースに至ってません。

作ったのはコレ
? 高校野球 News Reader
? RSS,Twitter から高校野球の情報を収集して表示します。

使ったのはコレ
http://msdn.microsoft.com/ja-jp/jj556277
Windows 8 Enterprise 評価版
+
Visual Studio Express 2012
+

1. スピーディにアプリが作れる。
2. 特別な意識をせずにガイドラインに従ったアプリが作れる
。
3. 基本的な実装方法が学べる。
4. なにより、早々に成功体験を得ることができる。
5. 成功体験を得たあとに、さらに独自色のあるアプリを作る
。
アプリ開発体験テンプレートで

アプリ開発体験テンプレートの
使い方 ( デモ ) 　　　 - DeveloperCamp の
おさらい -
1. (VisualStudio にテンプレートを組み込む )
2. テンプレートを選んでプロジェクトを作成。
3. 試しにそのまま実行してみる。
4. 自分のコンセプトに合わせて修正
1. アプリの名前
2. ニュースフィードの設定
3. 色の設定
4. プライバシーポリシーの設定
5. 画像を差し替える
5. 修正したものを実行してみる。
6. アプリパッケージの作成 ( ソリューション構成は
Release) -> Windows アプリ認定キットの実行

開発体験テンプレートを使っても
見落としそうになったところ

1. 画像のサイズ / 位置
1. タイル上にアプリ名称などの文字を乗せる場合
2. アプリ名称
1. 名称予約できるので、名称を決めたら早めに予約を。
2. ”アプリ名に Metro” は使っちゃダメ
3. 競合調査
1. ストア上に似たアプリが無いことを確認する。
2. 当たり前だけど、これ大事。
4. 審査提出前に必ず「 Windows アプリ認定キット」を
実行する。
1. この結果が NG になるような場合は、間違いなくリジェクト
されちゃうそうです。
細かいところ

テンプレートから学べる

セマンティックズーム
ズームイン?ズームアウトさせたときに、グループ化
されたアイテムがカッコよく見えるコレのこと。

セマンティックズーム
? <SemanticZoom> というコントロールを使う。
? <ListView> と <GridView> が対応。
<SementicZoom>

<SemanticZoom.ZoomInView>
<GridView ItemsSource="{Binding Source={xxx}}“/>
</SemanticZoom.ZoomInView>
<!– ズームアウト時のビューを定義 -->
<SemanticZoom.ZoomOutView>
<GridView>
<TextBlock Text="{Binding Group.yyy}“/>
</GridView>
</SemanticZoom.ZoomOutView>
</SemanticZoom>
<SementicZoom>

<SemanticZoom.ZoomInView>
<GridView ItemsSource="{Binding Source={xxx}}“/>
</SemanticZoom.ZoomInView>
<!– ズームアウト時のビューを定義 -->
<SemanticZoom.ZoomOutView>
<GridView>
<TextBlock Text="{Binding Group.yyy}“/>
</GridView>
</SemanticZoom.ZoomOutView>
</SemanticZoom>
ItemsSource とバインドして
データと紐づける。
Group プロパティを介して
データにアクセスする

アプリバー
画面下に隠れてるメニューのこと。

アプリバー
? <Page.TopAppBar> と <Page.BottomAppBar> がある。
<Page.BottomAppBar>
<AppBar x:Name=“xxx“/>
<Grid></Grid>
</AppBar>
<Page.BottomAppBar>
<Page.BottomAppBar>
<AppBar x:Name=“xxx“/>
<Grid></Grid>
</AppBar>
<Page.BottomAppBar>

コントラクト
? 他アプリやシステムと連携するための仕組み。
? 検索コントラクト、共有コントラクト、設定コントラ
クト???などなど。

コントラクト
? DataRequest に対して情報を設定します
protected override void DataRequested(DataTransferManager sender,
DataRequestedEventArgs e)
{
DataRequest request = e.Request;
　　　　　 request.Data.Properties.Title = “xxx”;
request.Data.Properties.Description =“xxx”;
　　　　　 request.Data.SetUri(xxx);
　　　　　 request.Data.SetText(xxx);
request Data.SetBitmap(xxx)
}
protected override void DataRequested(DataTransferManager sender,
DataRequestedEventArgs e)
{
DataRequest request = e.Request;
　　　　　 request.Data.Properties.Title = “xxx”;
request.Data.Properties.Description =“xxx”;
　　　　　 request.Data.SetUri(xxx);
　　　　　 request.Data.SetText(xxx);
request Data.SetBitmap(xxx)
}

ライブタイル
? スタート画面に配置されているアプリの入口?顔
? 単なる入口ではなく、情報を表示し、ユーザに絶えず
情報を提供することができる。

ライブタイル
? XML ドキュメントを作成して更新する例
XmlDocument tileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText09);
tileXml.GetElementsByTagName("text").Item(0).InnerText = " ヘッダー ";
tileXml.GetElementsByTagName("text").Item(1).InnerText = " ボディ ";
TileNotification tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
XmlDocument tileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText09);
tileXml.GetElementsByTagName("text").Item(0).InnerText = " ヘッダー ";
tileXml.GetElementsByTagName("text").Item(1).InnerText = " ボディ ";
TileNotification tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

? 自分で実際に体験してみることが大切。
? 「 Windows 8 アプリ開発体験テンプレート」はアプリ開発
の敷居をぐっと下げてくれます。
? このテンプレートを使うことで、ガイドラインに準拠しながら開発
体験が行えちゃう。
? ストアアプリの考え方のひとつ「ハブ＆スポーク」に準拠すると、
画面構成は一定のものになると考えてよく、テンプレートを参考に
して開発するというアプローチは間違っていないハズ。
? とは言え、これの次は、もうちょっと独自性のあるものも
作ってみたほうがいいでしょう。
お伝えしたかったこと

というわけで、まだの方は
一度試してみてはいかがでしょうか

ありがとうございました

狠狠撸

Windows ストアアプリを作ろう　～Metroスタイルアプリ入門～ (2012/09/29)

Recommended

More Related Content

What's hot (14)

Similar to Windows ストアアプリを作ろう　～Metroスタイルアプリ入門～ (2012/09/29) (20)

Windows ストアアプリを作ろう　～Metroスタイルアプリ入門～ (2012/09/29)

Editor's Notes

狠狠撸

Windows ストアアプリを作ろう ～Metroスタイルアプリ入門～ (2012/09/29)

Recommended

More Related Content

What's hot (14)

Similar to Windows ストアアプリを作ろう ～Metroスタイルアプリ入門～ (2012/09/29) (20)

Windows ストアアプリを作ろう ～Metroスタイルアプリ入門～ (2012/09/29)

Editor's Notes

Windows ストアアプリを作ろう　～Metroスタイルアプリ入門～ (2012/09/29)

Similar to Windows ストアアプリを作ろう　～Metroスタイルアプリ入門～ (2012/09/29) (20)

Windows ストアアプリを作ろう　～Metroスタイルアプリ入門～ (2012/09/29)