めとべや東京 #6での発表資料です。

1. 某RSS収集アプリ
めとべや東京 #6
大田 一希

2. 自己紹介
 HN：かずき
 Twitter：@okazuki
 Blog：http://okazuki.hatenablog.com
 Microsoft MVP for Windows Platform Development
 犬派？猫派？：犬派
 アプリ作り：そんなに好きではない

3. お約束事項
このセッションの内容は、個人の見解であり、所属する組織を代表するもの
ではありません。

4. このセッションの目的
Tipsを1つ持ち帰ってもらう

5. ことの発端
なぜ、アプリを作ることになったのか

6. ある日某所に集められて…
 MS MVPのBlogを閲覧するアプリが欲しい
– カテゴリわけをしたい
– MSアカウントでログインして紐づくBlogの所有者が自分のBlogに関する情報を編集
したい
– 検索をしたい
– 記事のレーティングをしたい
– 人気記事を見たい（もちろんカテゴリ単位と全体で）
– 記事を書いてる人の紹介ページが欲しい
– 記事のレコメンドもしたい（こんな記事を見てる人は、こんな記事も見ています）
– etc…

7. チームメンバー
 デザイナー担当Mさん
Windows store appのデザインにとても詳しい
 サーバー担当Tさん
色々詳しい
 インフラ担当Hさん
Azure詳しい。Windows store appに詳しい。
 クライアント担当Kさん
俺。XAML関係が好き

8. 役割分担
一貫したデザイン・プロトタイピング（Mさん）
デザインを実装に落とし込む（Kさん）
サーバーサイドの機能を実装に落とし込む（Tさん）
クラウド環境の準備・構築etc…（Hさん）

9. 今回の範囲
一貫したデザイン・プロトタイピング（Mさん）
デザインを実装に落とし込む（Kさん）
サーバーサイドの機能を実装に落とし込む（Tさん）
クラウド環境の準備・構築etc…（Hさん）

10. 一貫したデザイン

11. 要求仕様
 MS MVPのBlogを閲覧するアプリが欲しい
– カテゴリわけをしたい
– MSアカウントでログインして紐づくBlogの所有者が自分のBlogに関する情報を編集
したい
– 検索をしたい
– 記事のレーティングをしたい
– 人気記事を見たい（もちろんカテゴリ単位と全体で）
– 記事を書いてる人の紹介ページが欲しい
– 記事のレコメンドもしたい（こんな記事を見てる人は、こんな記事も見ています）
– etc…

12. 本当にやりたいことのヒアリング
 ユーザーにBlogの更新をわかりやすく見てほしい。
– 全体を俯瞰する
– カテゴリ単位に見る
– 検索して見る
 すぐ記事にたどり着けて見れるようにしたい。

13. コア機能をベースにプロトタイピング
 カテゴリ単位に見る流れ。ハブ → セクション → 詳細
Windows ストア アプリのハブ コントロールのガイドライン
http://msdn.microsoft.com/ja-jp/library/windows/apps/dn449149.aspx
カテゴリを横断した情報の閲覧
カテゴリ単位での閲覧
記事単位での閲覧

14. コア機能をベースにプロトタイピング
 検索して見る流れ。ハブ → セクション → 詳細
Windows ストア アプリのハブ コントロールのガイドライン
http://msdn.microsoft.com/ja-jp/library/windows/apps/dn449149.aspx
カテゴリを横断した情報の検索
カテゴリ単位での検索
記事単位での閲覧

15. プロトタイピングでやったこと
基本的なWindows store appの流れに乗せて機能をそぎ落とす

16. v1.0としての合意形成
 新着記事の表示
 人気記事の表示
 カテゴリごとの新着記事・人気記事の表示
 記事の閲覧機能
 検索機能

17. 設計

18. こんな感じで
クライアント
Prism + ReactiveProperty
サーバー
MicrsofotAzure Mobile
Services
REST
API
表示に徹する 難しいこと

19. 画面

20. 実際の画面

21. 実際の画面

22. 実際の画面

23. 実際の画面

24. 実際の画面

25. 実際の画面

26. 実際の画面

27. 機能を作りこむ中で困ったこと
Tips

28. 困ったこと
 要件
– HubSectionコントロールのヘッダーにComboBoxを置く
 実際
– HubSectionにComboBoxを置いても操作に反応しない

29. 解法
 HubSectionのIsHeaderInteractive=Trueにする
 問題点
– “>”というグリフがついてしまう

30. 解法
 HubSectionのControlTemplateを差し替える
– HubSectionのControlTemplateを開く
– HeaderButtonのControlTemplateを開く
– IsHeaderInteractiveMarkerコントロールを削除
 ヘッダーに置いたコントロールの操作が出来て邪魔なグリフも消える
 参考
– HubSectionのヘッダーのグリフを消したい
 http://okazuki.hatenablog.com/entry/2014/09/24/225413

31. 困ったこと
 要件
– FlipViewのTappedイベントを処理しつつ、マウス操作時の左右移動ボタンも有効に
したい
 実際
– マウス操作時の左右移動ボタンを押すとTappedイベントが実行されてしまう

32. 解法
 FlipViewのLoadedイベントで以下の処理をする
– VisualTreeからButtonをとってきてTappedイベントのHandledをTrueに設定する。
– Behaviorとして実装すると再利用が効く
 参考
– FlipViewの上下移動のボタンをクリックしたときにTappedイベントが発生してしまうの
をどうにかしたい
 http://okazuki.hatenablog.com/entry/2014/09/29/165615

33. 困ったこと
 要件
– GridViewの要素が空のときにメッセージを出したい
 実際
– GridViewにそんな機能はない

34. 解法
 コレクションを監視するBehaviorを作る
– コレクションが空のときと空じゃないときでVisualStateを切り替える
要素が空のとき
EmptyState
要素が空じゃないとき
FillState

35. まとめ

36. まとめ
 デザイン関係について
– コア機能の絞り込み大事
 といっても仕事では、なかなかやりづらいですが…
– プロトタイピングによるイメージの共有大事
 画面の作りこみについて
– ControlTemplateいじるのは強力
– ちょっとした機能はBehaviorで部品化するといい感じ
 ボタンを押してもTappedイベントが発行されないFlipView
 コレクションの状態に応じてVisualStateを切り替える
 etc…