某rss収集アプリ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

某rss収集アプリ

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 某rss収集アプリ (11)

More from 一希大田 (20)