Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

某rss収集アプリ

3,851 views

Published on

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

Published in: Technology
  • Be the first to comment

某rss収集アプリ

  1. 1. 某RSS収集アプリ めとべや東京 #6 大田 一希
  2. 2. 自己紹介  HN:かずき  Twitter:@okazuki  Blog:http://okazuki.hatenablog.com  Microsoft MVP for Windows Platform Development  犬派?猫派?:犬派  アプリ作り:そんなに好きではない
  3. 3. お約束事項 このセッションの内容は、個人の見解であり、所属する組織を代表するもの ではありません。
  4. 4. このセッションの目的 Tipsを1つ持ち帰ってもらう
  5. 5. ことの発端 なぜ、アプリを作ることになったのか
  6. 6. ある日某所に集められて…  MS MVPのBlogを閲覧するアプリが欲しい – カテゴリわけをしたい – MSアカウントでログインして紐づくBlogの所有者が自分のBlogに関する情報を編集 したい – 検索をしたい – 記事のレーティングをしたい – 人気記事を見たい(もちろんカテゴリ単位と全体で) – 記事を書いてる人の紹介ページが欲しい – 記事のレコメンドもしたい(こんな記事を見てる人は、こんな記事も見ています) – etc…
  7. 7. チームメンバー  デザイナー担当Mさん Windows store appのデザインにとても詳しい  サーバー担当Tさん 色々詳しい  インフラ担当Hさん Azure詳しい。Windows store appに詳しい。  クライアント担当Kさん 俺。XAML関係が好き
  8. 8. 役割分担 一貫したデザイン・プロトタイピング(Mさん) デザインを実装に落とし込む(Kさん) サーバーサイドの機能を実装に落とし込む(Tさん) クラウド環境の準備・構築etc…(Hさん)
  9. 9. 今回の範囲 一貫したデザイン・プロトタイピング(Mさん) デザインを実装に落とし込む(Kさん) サーバーサイドの機能を実装に落とし込む(Tさん) クラウド環境の準備・構築etc…(Hさん)
  10. 10. 一貫したデザイン
  11. 11. 要求仕様  MS MVPのBlogを閲覧するアプリが欲しい – カテゴリわけをしたい – MSアカウントでログインして紐づくBlogの所有者が自分のBlogに関する情報を編集 したい – 検索をしたい – 記事のレーティングをしたい – 人気記事を見たい(もちろんカテゴリ単位と全体で) – 記事を書いてる人の紹介ページが欲しい – 記事のレコメンドもしたい(こんな記事を見てる人は、こんな記事も見ています) – etc…
  12. 12. 本当にやりたいことのヒアリング  ユーザーにBlogの更新をわかりやすく見てほしい。 – 全体を俯瞰する – カテゴリ単位に見る – 検索して見る  すぐ記事にたどり着けて見れるようにしたい。
  13. 13. コア機能をベースにプロトタイピング  カテゴリ単位に見る流れ。ハブ → セクション → 詳細 Windows ストア アプリのハブ コントロールのガイドライン http://msdn.microsoft.com/ja-jp/library/windows/apps/dn449149.aspx カテゴリを横断した情報の閲覧 カテゴリ単位での閲覧 記事単位での閲覧
  14. 14. コア機能をベースにプロトタイピング  検索して見る流れ。ハブ → セクション → 詳細 Windows ストア アプリのハブ コントロールのガイドライン http://msdn.microsoft.com/ja-jp/library/windows/apps/dn449149.aspx カテゴリを横断した情報の検索 カテゴリ単位での検索 記事単位での閲覧
  15. 15. プロトタイピングでやったこと 基本的なWindows store appの流れに乗せて機能をそぎ落とす
  16. 16. v1.0としての合意形成  新着記事の表示  人気記事の表示  カテゴリごとの新着記事・人気記事の表示  記事の閲覧機能  検索機能
  17. 17. 設計
  18. 18. こんな感じで クライアント Prism + ReactiveProperty サーバー MicrsofotAzure Mobile Services REST API 表示に徹する 難しいこと
  19. 19. 画面
  20. 20. 実際の画面
  21. 21. 実際の画面
  22. 22. 実際の画面
  23. 23. 実際の画面
  24. 24. 実際の画面
  25. 25. 実際の画面
  26. 26. 実際の画面
  27. 27. 機能を作りこむ中で困ったこと Tips
  28. 28. 困ったこと  要件 – HubSectionコントロールのヘッダーにComboBoxを置く  実際 – HubSectionにComboBoxを置いても操作に反応しない
  29. 29. 解法  HubSectionのIsHeaderInteractive=Trueにする  問題点 – “>”というグリフがついてしまう
  30. 30. 解法  HubSectionのControlTemplateを差し替える – HubSectionのControlTemplateを開く – HeaderButtonのControlTemplateを開く – IsHeaderInteractiveMarkerコントロールを削除  ヘッダーに置いたコントロールの操作が出来て邪魔なグリフも消える  参考 – HubSectionのヘッダーのグリフを消したい  http://okazuki.hatenablog.com/entry/2014/09/24/225413
  31. 31. 困ったこと  要件 – FlipViewのTappedイベントを処理しつつ、マウス操作時の左右移動ボタンも有効に したい  実際 – マウス操作時の左右移動ボタンを押すとTappedイベントが実行されてしまう
  32. 32. 解法  FlipViewのLoadedイベントで以下の処理をする – VisualTreeからButtonをとってきてTappedイベントのHandledをTrueに設定する。 – Behaviorとして実装すると再利用が効く  参考 – FlipViewの上下移動のボタンをクリックしたときにTappedイベントが発生してしまうの をどうにかしたい  http://okazuki.hatenablog.com/entry/2014/09/29/165615
  33. 33. 困ったこと  要件 – GridViewの要素が空のときにメッセージを出したい  実際 – GridViewにそんな機能はない
  34. 34. 解法  コレクションを監視するBehaviorを作る – コレクションが空のときと空じゃないときでVisualStateを切り替える 要素が空のとき EmptyState 要素が空じゃないとき FillState
  35. 35. まとめ
  36. 36. まとめ  デザイン関係について – コア機能の絞り込み大事  といっても仕事では、なかなかやりづらいですが… – プロトタイピングによるイメージの共有大事  画面の作りこみについて – ControlTemplateいじるのは強力 – ちょっとした機能はBehaviorで部品化するといい感じ  ボタンを押してもTappedイベントが発行されないFlipView  コレクションの状態に応じてVisualStateを切り替える  etc…

×