"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?

6,179 views

Published on

2014年4月18日開催のAndroidアプリ制作者のための開発&デザインセミナー
http://www.impressjapan.jp/items/android-20140418
のスライドです。

Published in: Technology
0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,179
On SlideShare
0
From Embeds
0
Number of Embeds
2,329
Actions
Shares
0
Downloads
25
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?

  1. 1. "あんざいゆき" x "秋葉ちひろ" は カンファレンスアプリをどう作るのか? 2014.04.18 主催:インプレスジャパン
  2. 2. 株式会社ウフィカ 代表取締役 あんざいゆき blog : Y.A.Mの雑記帳(y-anz.m.blogspot.com) twitter : @yanzm (やんざむ) GTUG Girls マネージャー
  3. 3. 秋葉ちひろ 株式会社ツクロア 取締役 デザイナー Webサイト/スマホアプリ/ハードウェアなど、プラットフォー ムの垣根なく、デザイン全般のクリエイティブワークに携わる。 ! 構造や仕様もデザイナーから提案できないといけないと考えてい る。
  4. 4. 前半 デザイン&設計
  5. 5. 新しいアプリを作るステップ 1. 既存アプリの調査 2. ざっくり機能を考える 3. 構成(画面遷移)を考える 4. 各画面のレイアウトを考える 5. 実装する 6. 使ってみる
  6. 6. •どういう機能があるか •どういう構成(画面遷移)になって いるか •こういう機能もあればいいのになぁ 1. 既存アプリの調査 2.ざっくり機能 「必要な機能がみえてくる」
  7. 7. 1. 既存アプリの調査 2.ざっくり機能 チェックしたアプリ •ABC 2014 Spring 関連のアプリ •ABC 2013 Autumn 関連のアプリ •Google I/O アプリ •Google Playで「Conference」で
 検索した結果からよさげなもの
  8. 8. アプリの調査 2.ざっくり機能を考える 要求レベル •公式サイトにいきたい •講演内容がしりたい •見るスケジュールを作りたい •お気に入りとしてチェックしたい •地図が見たい 3.構成(画面遷
  9. 9. アプリの調査 2.ざっくり機能を考える シナリオを考える(想像する) 1つの時間帯では1つの講演しか見れない タイムテーブルがほしい 「同じ時間帯の講演から、  どれ見ようかなぁって考えるよね」 3.構成(画面遷
  10. 10. アプリの調査 2.ざっくり機能を考える タイムテーブルの要求 •タイムテーブルの項目をタップしたら 講演の詳細がみたい •どれがお気に入りになっているか
 知りたい •どの部屋の講演か知りたい 3.構成(画面遷
  11. 11. アプリの調査 2.ざっくり機能を考える 講演詳細の要求 •タイトル、講演者、概要、時間、
 部屋、カテゴリが知りたい •カテゴリをタップしたら、
 そのカテゴリの講演一覧が見たい •講演部屋の地図がみたい •お気に入りにチェックしたい 3.構成(画面遷
  12. 12. アプリの調査 2.ざっくり機能を考える シナリオを考える2(想像する) バザールの見せ方って難しい 「地図がないとつらい、常にみたい」 「ブースの数が多いので、地図のどこ
  にあるかすぐ見つけられるように
  なっててほしい」 3.構成(画面遷
  13. 13. アプリの調査 2.ざっくり機能を考える ABC 2013 Autumn の地図 3.構成(画面遷
  14. 14. アプリの調査 2.ざっくり機能を考える ABC 2014 Spring の地図 •色分けわかりやすい •「あ、い、う、え、か」も別の色がいい 3.構成(画面遷
  15. 15. •どの島のブースがすぐわかりたい - 色分けの色を表示するとか •ブースがたくんさんあるから下まで
 行くのたいへん - インデックスラベル + fast scroll - ヘッダーが残るリスト アプリの調査 2.ざっくり機能を考える バザール一覧の要求 3.構成(画面遷
  16. 16. アプリの調査 2.ざっくり機能を考える バザール詳細の要求 •地図と一緒にみたい - 地図をみるときにブース番号を覚えておか ないといけないのは嫌 •どの島のブースがすぐわかりたい - 色分けの色を背景にするとか •隣のブースの詳細に簡単に移動したい(ある 島を流れ歩きでぐるっと見て回るときとか) 3.構成(画面遷
  17. 17. •それを見て行動するからスケジュールっ ぽくなっているのがいい - 時間順に講演が並ぶ - 地図が常にでている アプリの調査 2.ざっくり機能を考える お気に入りの要求 3.構成(画面遷
  18. 18. •タイムテーブル •お気に入り(マイスケジュール) •カンファレンス一覧(カテゴリごと) •バザール一覧 •公式サイト 能を考える 3.構成(画面遷移)を考える トップレベルの画面 4.各画面のレ
  19. 19. •トップレベル画面が4つ以上ある •トップレベル画面でスワイプによる
 画面きりかえを使いたい 能を考える 3.構成(画面遷移)を考える トップレベルの構成 4.各画面のレ Navigation Drawer
  20. 20. 能を考える 3.構成(画面遷移)を考える タイムテーブル 4.各画面のレ
  21. 21. •スマホの1画面におさめるのは難しい 能を考える 3.構成(画面遷移)を考える タイムテーブル 4.各画面のレ 特定の時間枠ごとにどれを見るか考えるなら、 時間枠ごとに1画面にするのはどうか ➡横軸を時間にする ➡スワイプで隣の時間枠に移動
  22. 22. 特定の時間枠のタイムテーブル 能を考える 3.構成(画面遷移)を考える タイムテーブルの画面遷移 4.各画面のレ 隣の時間枠のタイムテーブルスワイプ 講演詳細項目タップ
  23. 23. 特定の講演の情報 能を考える 3.構成(画面遷移)を考える 講演詳細の画面遷移 4.各画面のレ 地図地図アイコンタップ そのカテゴリの講演一覧カテゴリタップ
  24. 24. カテゴリの一覧 能を考える 3.構成(画面遷移)を考える カンファレンス一覧の画面遷移 4.各画面のレ そのカテゴリの講演一覧 特定のカテゴリを タップ 講演詳細 特定の講演を
 タップ
  25. 25. バザールの一覧 能を考える 3.構成(画面遷移)を考える バザールの画面遷移 4.各画面のレ バザール詳細 特定のバザールを
 タップ 隣のバザール詳細スワイプ
  26. 26. カテゴリの一覧 能を考える 3.構成(画面遷移)を考える お気に入り(マイスケジュール)の画面遷移 4.各画面のレ 講演詳細 お気に入りの
 カンファレンス一覧 バザール詳細 お気に入りの
 バザール一覧
  27. 27. •メインの色を決める •タイムテーブル •詳細 •お気に入り •バザール •マイスケジュール 4.各画面のレイアウトを考える 5.実装する)を考える
  28. 28. 4.各画面のレイアウトを考える 5.実装する)を考える •白ベースでスッキリ見やすく •うすいグレーをサブカラー •アクセントカラー2つ メインの色を決める メイン サブ アクセント
  29. 29. 4.各画面のレイアウトを考える 5.実装する)を考える •ActionBarのタブではなく ViewPagerTabStrip •文字のジャンプ率と色で、情報の優劣 をつける タイムテーブル
  30. 30. 4.各画面のレイアウトを考える 5.実装する)を考える •ヘッダで領域をとらないように •文字がかぶらないように 詳細画面
  31. 31. 4.各画面のレイアウトを考える 5.実装する)を考える
  32. 32. 4.各画面のレイアウトを考える 5.実装する)を考える •アイコンだけだとわかりづらい •マイスケジュールに登録するボタンの 動き •「マイスケジュールに追加」
 「∼登録済み」という文言の吟味 お気に入り
  33. 33. 4.各画面のレイアウトを考える 5.実装する)を考える
  34. 34. 4.各画面のレイアウトを考える 5.実装する)を考える •それぞれの場所の印象が強くなるよう なデザインに バザール 色を全面に押し出す
  35. 35. 4.各画面のレイアウトを考える 5.実装する)を考える
  36. 36. 4.各画面のレイアウトを考える 5.実装する)を考える •1画面で見れるように、2列で考えてい たが、さすがに入りきらなかったw マイスケジュール
  37. 37. 4.各画面のレイアウトを考える 5.実装する)を考える
  38. 38. 後半 実装
  39. 39. ABC 2014 Spring のデータ http://www.android-group.jp/conference/ abc2014s/api/
  40. 40. ContentProvider設計 • id : integer primary key • title : text • abstract : text • speakers : text(speaker idを;で結合) • start_time : long • end_time : long カンファレンス • room_id : integer • room : text • category_id : integer • category : text • time_frame : integer
  41. 41. ContentProvider設計 • id : integer primary key • name : text • profile : text スピーカー
  42. 42. ContentProvider設計 • id : integer primary key • group : text • title : text • content : text バザール • location_area : text • location_area_id : integer • location_number: • location_number_id : integer
  43. 43. MainActivity 0. Activityの構成 1.
  44. 44. ConferenceListActivity 0. Activityの構成 1.
  45. 45. ConferenceDetailActivity 0. Activityの構成 1.
  46. 46. BazaarDetailActivity 0. Activityの構成 1.
  47. 47. 0. Activityの構成 1.
  48. 48. 1. タイムテーブル 2. タイムテーブル •ViewPager •PagerTabStrip •ListFragment •複数のCursorを持つ Adapter
  49. 49. 1. タイムテーブル 2. 各部屋が1つのCursor
  50. 50. 1. タイムテーブル 2. •複数のCursorを持つAdapter •ヘッダーの表示も対応している •http://goo.gl/Dp033b CompositeCursorAdapter
  51. 51. 2.カンファレンス 3.バザールムテーブル カテゴリー一覧 •ListFragment •SimpleCursorAdapter •カテゴリー名(カテゴリー ID)のCursorを作る
  52. 52. 2.カンファレンス 3.バザールムテーブル カテゴリー一覧 •カテゴリーIDの重複していないCursor •group By を使う
  53. 53. 2.カンファレンス 3.バザールムテーブル Content Provider で group By を使う Uri.Builder builder = DataProvider.SESSION_URI.buildUpon(); builder.appendQueryParameter("groupBy", DataProvider.SessionColumn.COLUMN_CATEGORY_ID); Uri uri = builder.build(); @Override public Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder) { ! String groupBy = uri.getQueryParameter("groupBy"); ! SQLiteQueryBuilder qb = new SQLiteQueryBuilder(); ... Cursor c = qb.query(db, projection, selection, selectionArgs, groupBy, null, orderBy);
  54. 54. 2.カンファレンス 3.バザールムテーブル カテゴリー一覧 •SimpleCursorAdapterには _id カラムが必要 •group By したカテゴリーIDを as を使って _id として取得
  55. 55. 2.カンファレンス 3.バザールムテーブル as を使って _id として取得 String[] projection = { DataProvider.SessionColumn.COLUMN_CATEGORY_ID + " as " + DataProvider.SessionColumn._ID, DataProvider.SessionColumn.COLUMN_CATEGORY}; ! return new CursorLoader(getActivity(), uri, projection, null, null, null);
  56. 56. 2.カンファレンス 3.バザールムテーブル カテゴリー一覧 •全てのトラックを表示するための行も ほしい •MergeCursor を使って Cursor を 合体 •全てのトラック用の Cursor は MatrixCursor で用意
  57. 57. 2.カンファレンス 3.バザールムテーブル MergeCursor で Cursor を合体 @Override public void onLoadFinished(Loader<Cursor> loader, Cursor c) { MatrixCursor all = new MatrixCursor(new String[]{ DataProvider.SessionColumn._ID, DataProvider.SessionColumn.COLUMN_CATEGORY}); ! // CATEGORY_ID は 1 からなので、全トラック用に 0 を使う all.addRow(new Object[]{0, getString(R.string.all_track)}); mAdapter.swapCursor(new MergeCursor(new Cursor[]{all, c})); }
  58. 58. 2.カンファレンス 3.バザールムテーブル カンファレンス一覧 •ListFragment •SimpleCursorAdapter •カンファレンスのテーブルに はスピーカーID •スピーカー名は別テーブル
  59. 59. 2.カンファレンス 3.バザールムテーブル カンファレンス一覧 •カンファレンスのテーブルにはスピー カーのIDが ; 区切りで入っている •スピーカー名に変換したカラムも Cursorに欲しい •CursorWrapperを使う
  60. 60. 2.カンファレンス 3.バザールムテーブル CursorWrapper を作る @Override public void onLoadFinished(Loader<Cursor> loader, Cursor c) { mAdapter.swapCursor(SpeakerCursorWrapper.wrap(c, getActivity())); } SpeakerCursorWrapperの実際のコードのデモ
  61. 61. 2.カンファレンス 3.バザールムテーブル カンファレンス詳細 •ListFragment •ヘッダー •カンファレンス情報 •リスト本体 •スピーカー •お気に入りボタン
  62. 62. 2.カンファレンス 3.バザールムテーブル お気に入りボタン •FrameLayoutを継承した CustomView •ToggleButtonと★を重ね たレイアウト •Checkableを実装し ToggleButtonに流す •ONでアニメーション
  63. 63. 3.バザール 4. バザール一覧 •ListFragment •各島が1つのCursor •複数のCursorを持つ Adapter •FastScroll + インデックス ラベル •ヘッダーの残るリスト
  64. 64. 1. タイムテーブル 2. •もともとヘッダーの表示に対応してい る •ヘッダーの情報を使ってインデックスラ ベルを作成 •ヘッダーの残るリストに対応 CompositeCursorAdapterを改造
  65. 65. 4.マイスケジュール. マイスケジュール •ViewPager •PagerTabSt rip •Fragment + ListView
  66. 66. トークセッション

×