"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか？
•
34 likes•8,298 views
2014年4月18日開催のAndroidアプリ制作者のための開発＆デザインセミナー http://www.impressjapan.jp/items/android-20140418 のスライドです。
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to "あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか？
Similar to "あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか？ (20)
More from Yuki Anzai
More from Yuki Anzai (11)
Recently uploaded
Recently uploaded (16)
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか？
- 1. "あんざいゆき" x "秋葉ちひろ" は カンファレンスアプリをどう作るのか？ 2014.04.18 主催：インプレスジャパン
- 2. 株式会社ウフィカ 代表取締役 あんざいゆき blog : Y.A.Mの雑記帳（y-anz.m.blogspot.com） twitter : @yanzm （やんざむ） GTUG Girls マネージャー
- 4. 前半 デザイン＆設計
- 5. 新しいアプリを作るステップ 1. 既存アプリの調査 2. ざっくり機能を考える 3. 構成（画面遷移）を考える 4. 各画面のレイアウトを考える 5. 実装する 6. 使ってみる
- 7. 1. 既存アプリの調査 2.ざっくり機能 チェックしたアプリ •ABC 2014 Spring 関連のアプリ •ABC 2013 Autumn 関連のアプリ •Google I/O アプリ •Google Playで「Conference」で 検索した結果からよさげなもの
- 8. アプリの調査 2.ざっくり機能を考える 要求レベル •公式サイトにいきたい •講演内容がしりたい •見るスケジュールを作りたい •お気に入りとしてチェックしたい •地図が見たい 3.構成（画面遷
- 13. アプリの調査 2.ざっくり機能を考える ABC 2013 Autumn の地図 3.構成（画面遷
- 14. アプリの調査 2.ざっくり機能を考える ABC 2014 Spring の地図 •色分けわかりやすい •「あ、い、う、え、か」も別の色がいい 3.構成（画面遷
- 15. •どの島のブースがすぐわかりたい - 色分けの色を表示するとか •ブースがたくんさんあるから下まで 行くのたいへん - インデックスラベル + fast scroll - ヘッダーが残るリスト アプリの調査 2.ざっくり機能を考える バザール一覧の要求 3.構成（画面遷
- 16. アプリの調査 2.ざっくり機能を考える バザール詳細の要求 •地図と一緒にみたい - 地図をみるときにブース番号を覚えておか ないといけないのは嫌 •どの島のブースがすぐわかりたい - 色分けの色を背景にするとか •隣のブースの詳細に簡単に移動したい（ある 島を流れ歩きでぐるっと見て回るときとか） 3.構成（画面遷
- 17. •それを見て行動するからスケジュールっ ぽくなっているのがいい - 時間順に講演が並ぶ - 地図が常にでている アプリの調査 2.ざっくり機能を考える お気に入りの要求 3.構成（画面遷
- 18. •タイムテーブル •お気に入り（マイスケジュール） •カンファレンス一覧（カテゴリごと） •バザール一覧 •公式サイト 能を考える 3.構成（画面遷移）を考える トップレベルの画面 4.各画面のレ
- 28. カテゴリの一覧 能を考える 3.構成（画面遷移）を考える お気に入り（マイスケジュール）の画面遷移 4.各画面のレ 講演詳細 お気に入りの カンファレンス一覧 バザール詳細 お気に入りの バザール一覧
- 40. 後半 実装
- 41. ABC 2014 Spring のデータ http://www.android-group.jp/conference/ abc2014s/api/
- 42. 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
- 43. ContentProvider設計 • id : integer primary key • name : text • profile : text スピーカー
- 44. ContentProvider設計 • id : integer primary key • group : text • title : text • content : text バザール • location_area : text • location_area_id : integer • location_number: • location_number_id : integer
- 55. 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);
- 56. 2.カンファレンス 3.バザールムテーブル カテゴリー一覧 •SimpleCursorAdapterには _id カラムが必要 •group By したカテゴリーIDを as を使って _id として取得
- 57. 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);
- 58. 2.カンファレンス 3.バザールムテーブル カテゴリー一覧 •全てのトラックを表示するための行も ほしい •MergeCursor を使って Cursor を 合体 •全てのトラック用の Cursor は MatrixCursor で用意
- 59. 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})); }
- 61. 2.カンファレンス 3.バザールムテーブル カンファレンス一覧 •カンファレンスのテーブルにはスピー カーのIDが ; 区切りで入っている •スピーカー名に変換したカラムも Cursorに欲しい •CursorWrapperを使う
- 62. 2.カンファレンス 3.バザールムテーブル CursorWrapper を作る @Override public void onLoadFinished(Loader<Cursor> loader, Cursor c) { mAdapter.swapCursor(SpeakerCursorWrapper.wrap(c, getActivity())); } SpeakerCursorWrapperの実際のコードのデモ
- 65. 3.バザール 4. バザール一覧 •ListFragment •各島が1つのCursor •複数のCursorを持つ Adapter •FastScroll + インデックス ラベル •ヘッダーの残るリスト
- 68. トークセッション