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

"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか？ 2014.04.18 主催：インプレスジャパン

株式会社ウフィカ代表取締役あんざいゆき blog : Y.A.Mの雑記帳（y-anz.m.blogspot.com） twitter : @yanzm （やんざむ） GTUG Girls マネージャー

秋葉ちひろ株式会社ツクロア取締役デザイナー Webサイト/スマホアプリ/ハードウェアなど、プラットフォームの垣根なく、デザイン全般のクリエイティブワークに携わる。 ! 構造や仕様もデザイナーから提案できないといけないと考えている。

前半デザイン＆設計

新しいアプリを作るステップ 1. 既存アプリの調査 2. ざっくり機能を考える 3. 構成（画面遷移）を考える 4. 各画面のレイアウトを考える 5. 実装する 6. 使ってみる

•どういう機能があるか •どういう構成（画面遷移）になっているか •こういう機能もあればいいのになぁ 1. 既存アプリの調査 2.ざっくり機能「必要な機能がみえてくる」

1. 既存アプリの調査 2.ざっくり機能チェックしたアプリ •ABC 2014 Spring 関連のアプリ •ABC 2013 Autumn 関連のアプリ •Google I/O アプリ •Google Playで「Conference」で  検索した結果からよさげなもの

アプリの調査 2.ざっくり機能を考える要求レベル •公式サイトにいきたい •講演内容がしりたい •見るスケジュールを作りたい •お気に入りとしてチェックしたい •地図が見たい 3.構成（画面遷

アプリの調査 2.ざっくり機能を考えるシナリオを考える（想像する） 1つの時間帯では1つの講演しか見れないタイムテーブルがほしい「同じ時間帯の講演から、　どれ見ようかなぁって考えるよね」 3.構成（画面遷

アプリの調査 2.ざっくり機能を考えるタイムテーブルの要求 •タイムテーブルの項目をタップしたら講演の詳細がみたい •どれがお気に入りになっているか  知りたい •どの部屋の講演か知りたい 3.構成（画面遷

アプリの調査 2.ざっくり機能を考える講演詳細の要求 •タイトル、講演者、概要、時間、  部屋、カテゴリが知りたい •カテゴリをタップしたら、  そのカテゴリの講演一覧が見たい •講演部屋の地図がみたい •お気に入りにチェックしたい 3.構成（画面遷

アプリの調査 2.ざっくり機能を考えるシナリオを考える2（想像する）バザールの見せ方って難しい「地図がないとつらい、常にみたい」「ブースの数が多いので、地図のどこ  　にあるかすぐ見つけられるように  　なっててほしい」 3.構成（画面遷

アプリの調査 2.ざっくり機能を考える ABC 2013 Autumn の地図 3.構成（画面遷

アプリの調査 2.ざっくり機能を考える ABC 2014 Spring の地図 •色分けわかりやすい •「あ、い、う、え、か」も別の色がいい 3.構成（画面遷

•どの島のブースがすぐわかりたい - 色分けの色を表示するとか •ブースがたくんさんあるから下まで  行くのたいへん - インデックスラベル + fast scroll - ヘッダーが残るリストアプリの調査 2.ざっくり機能を考えるバザール一覧の要求 3.構成（画面遷

アプリの調査 2.ざっくり機能を考えるバザール詳細の要求 •地図と一緒にみたい - 地図をみるときにブース番号を覚えておかないといけないのは嫌 •どの島のブースがすぐわかりたい - 色分けの色を背景にするとか •隣のブースの詳細に簡単に移動したい（ある島を流れ歩きでぐるっと見て回るときとか） 3.構成（画面遷

•それを見て行動するからスケジュールっぽくなっているのがいい - 時間順に講演が並ぶ - 地図が常にでているアプリの調査 2.ざっくり機能を考えるお気に入りの要求 3.構成（画面遷

•タイムテーブル •お気に入り（マイスケジュール） •カンファレンス一覧（カテゴリごと） •バザール一覧 •公式サイト能を考える 3.構成（画面遷移）を考えるトップレベルの画面 4.各画面のレ

•トップレベル画面が4つ以上ある •トップレベル画面でスワイプによる  画面きりかえを使いたい能を考える 3.構成（画面遷移）を考えるトップレベルの構成 4.各画面のレ Navigation Drawer

能を考える 3.構成（画面遷移）を考えるタイムテーブル 4.各画面のレ

•スマホの1画面におさめるのは難しい能を考える 3.構成（画面遷移）を考えるタイムテーブル 4.各画面のレ特定の時間枠ごとにどれを見るか考えるなら、時間枠ごとに1画面にするのはどうか ➡横軸を時間にする ➡スワイプで隣の時間枠に移動

特定の時間枠のタイムテーブル能を考える 3.構成（画面遷移）を考えるタイムテーブルの画面遷移 4.各画面のレ隣の時間枠のタイムテーブルスワイプ講演詳細項目タップ

特定の講演の情報能を考える 3.構成（画面遷移）を考える講演詳細の画面遷移 4.各画面のレ地図地図アイコンタップそのカテゴリの講演一覧カテゴリタップ

カテゴリの一覧能を考える 3.構成（画面遷移）を考えるカンファレンス一覧の画面遷移 4.各画面のレそのカテゴリの講演一覧特定のカテゴリをタップ講演詳細特定の講演を  タップ

バザールの一覧能を考える 3.構成（画面遷移）を考えるバザールの画面遷移 4.各画面のレバザール詳細特定のバザールを  タップ隣のバザール詳細スワイプ

カテゴリの一覧能を考える 3.構成（画面遷移）を考えるお気に入り（マイスケジュール）の画面遷移 4.各画面のレ講演詳細お気に入りの  カンファレンス一覧バザール詳細お気に入りの  バザール一覧

•メインの色を決める •タイムテーブル •詳細 •お気に入り •バザール •マイスケジュール 4.各画面のレイアウトを考える 5.実装する）を考える

4.各画面のレイアウトを考える 5.実装する）を考える •白ベースでスッキリ見やすく •うすいグレーをサブカラー •アクセントカラー2つメインの色を決めるメインサブアクセント

4.各画面のレイアウトを考える 5.実装する）を考える •ActionBarのタブではなく ViewPagerTabStrip •文字のジャンプ率と色で、情報の優劣をつけるタイムテーブル

4.各画面のレイアウトを考える 5.実装する）を考える •ヘッダで領域をとらないように •文字がかぶらないように詳細画面

4.各画面のレイアウトを考える 5.実装する）を考える

4.各画面のレイアウトを考える 5.実装する）を考える •アイコンだけだとわかりづらい •マイスケジュールに登録するボタンの動き •「マイスケジュールに追加」  「∼登録済み」という文言の吟味お気に入り

4.各画面のレイアウトを考える 5.実装する）を考える •それぞれの場所の印象が強くなるようなデザインにバザール色を全面に押し出す

4.各画面のレイアウトを考える 5.実装する）を考える •1画面で見れるように、2列で考えていたが、さすがに入りきらなかったｗマイスケジュール

後半実装

ABC 2014 Spring のデータ http://www.android-group.jp/conference/ abc2014s/api/

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

ContentProvider設計 • id : integer primary key • name : text • proﬁle : text スピーカー

ContentProvider設計 • id : integer primary key • group : text • title : text • content : text バザール • location_area : text • location_area_id : integer • location_number: • location_number_id : integer

MainActivity 0. Activityの構成 1.

ConferenceListActivity 0. Activityの構成 1.

ConferenceDetailActivity 0. Activityの構成 1.

BazaarDetailActivity 0. Activityの構成 1.

0. Activityの構成 1.

1. タイムテーブル 2. タイムテーブル •ViewPager •PagerTabStrip •ListFragment •複数のCursorを持つ Adapter

1. タイムテーブル 2. 各部屋が1つのCursor

1. タイムテーブル 2. •複数のCursorを持つAdapter •ヘッダーの表示も対応している •http://goo.gl/Dp033b CompositeCursorAdapter

2.カンファレンス 3.バザールムテーブルカテゴリー一覧 •ListFragment •SimpleCursorAdapter •カテゴリー名（カテゴリー ID）のCursorを作る

2.カンファレンス 3.バザールムテーブルカテゴリー一覧 •カテゴリーIDの重複していないCursor •group By を使う

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);

2.カンファレンス 3.バザールムテーブルカテゴリー一覧 •SimpleCursorAdapterには _id カラムが必要 •group By したカテゴリーIDを as を使って _id として取得

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);

2.カンファレンス 3.バザールムテーブルカテゴリー一覧 •全てのトラックを表示するための行もほしい •MergeCursor を使って Cursor を合体 •全てのトラック用の Cursor は MatrixCursor で用意

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})); }

2.カンファレンス 3.バザールムテーブルカンファレンス一覧 •ListFragment •SimpleCursorAdapter •カンファレンスのテーブルにはスピーカーID •スピーカー名は別テーブル

2.カンファレンス 3.バザールムテーブルカンファレンス一覧 •カンファレンスのテーブルにはスピーカーのIDが ; 区切りで入っている •スピーカー名に変換したカラムも Cursorに欲しい •CursorWrapperを使う

2.カンファレンス 3.バザールムテーブル CursorWrapper を作る @Override public void onLoadFinished(Loader<Cursor> loader, Cursor c) { mAdapter.swapCursor(SpeakerCursorWrapper.wrap(c, getActivity())); } SpeakerCursorWrapperの実際のコードのデモ

2.カンファレンス 3.バザールムテーブルカンファレンス詳細 •ListFragment •ヘッダー •カンファレンス情報 •リスト本体 •スピーカー •お気に入りボタン

2.カンファレンス 3.バザールムテーブルお気に入りボタン •FrameLayoutを継承した CustomView •ToggleButtonと★を重ねたレイアウト •Checkableを実装し ToggleButtonに流す •ONでアニメーション

3.バザール 4. バザール一覧 •ListFragment •各島が1つのCursor •複数のCursorを持つ Adapter •FastScroll + インデックスラベル •ヘッダーの残るリスト

1. タイムテーブル 2. •もともとヘッダーの表示に対応している •ヘッダーの情報を使ってインデックスラベルを作成 •ヘッダーの残るリストに対応 CompositeCursorAdapterを改造

4.マイスケジュール. マイスケジュール •ViewPager •PagerTabSt rip •Fragment + ListView

トークセッション

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

by Yuki Anzai, Android Application Developer, UI Desiner on Apr 20, 2014

Statistics

Views

Actions

1 Embed 38

Accessibility

Categories

Upload Details

Usage Rights

Report content

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