"あんざいゆき" 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.ざっくり機能を考える

「必要な機能がみえてくる」


チェックしたアプリ

•ABC 2014 Spring 関連のアプリ •ABC 2013 Autumn 関連のアプリ •Google I/O アプリ •Google Playで「Conference」で検索した結果からよさげなもの


要求レベル

•公式サイトにいきたい •講演内容がしりたい •見るスケジュールを作りたい •お気に入りとしてチェックしたい •地図が見たい

3.構成（画面遷移）を考える


シナリオを考える（想像する）

1つの時間帯では1つの講演しか見れない

タイムテーブルがほしい

「同じ時間帯の講演から、

　どれ見ようかなぁって考えるよね」



タイムテーブルの要求

•タイムテーブルの項目をタップしたら講演の詳細がみたい •どれがお気に入りになっているか知りたい •どの部屋の講演か知りたい



講演詳細の要求

•タイトル、講演者、概要、時間、部屋、カテゴリが知りたい •カテゴリをタップしたら、そのカテゴリの講演一覧が見たい •講演部屋の地図がみたい •お気に入りにチェックしたい



シナリオを考える2（想像する）

バザールの見せ方って難しい

「地図がないとつらい、常にみたい」

「ブースの数が多いので、地図のどこ　にあるかすぐ見つけられるように　なっててほしい」



ABC 2013 Autumn の地図



ABC 2014 Spring の地図

•色分けわかりやすい •「あ、い、う、え、か」も別の色がいい


•どの島のブースがすぐわかりたい - 色分けの色を表示するとか •ブースがたくんさんあるから下まで行くのたいへん - インデックスラベル + fast scroll - ヘッダーが残るリスト


バザール一覧の要求



バザール詳細の要求

•地図と一緒にみたい - 地図をみるときにブース番号を覚えておかないといけないのは嫌

•どの島のブースがすぐわかりたい - 色分けの色を背景にするとか •隣のブースの詳細に簡単に移動したい（ある島を流れ歩きでぐるっと見て回るときとか）


•それを見て行動するからスケジュールっぽくなっているのがいい - 時間順に講演が並ぶ - 地図が常にでている


お気に入りの要求


•タイムテーブル •お気に入り（マイスケジュール） •カンファレンス一覧（カテゴリごと） •バザール一覧 •公式サイト

2.ざっくり機能を考える 3.構成（画面遷移）を考える

トップレベルの画面

4.各画面のレイアウトを考える

•トップレベル画面が4つ以上ある •トップレベル画面でスワイプによる画面きりかえを使いたい


トップレベルの構成


Navigation Drawer


タイムテーブル


•スマホの1画面におさめるのは難しい




特定の時間枠ごとにどれを見るか考えるなら、時間枠ごとに1画面にするのはどうか

➡横軸を時間にする ➡スワイプで隣の時間枠に移動

特定の時間枠のタイムテーブル


タイムテーブルの画面遷移


隣の時間枠のタイムテーブルスワイプ

講演詳細項目タップ

特定の講演の情報


講演詳細の画面遷移


地図地図アイコンタップ

そのカテゴリの講演一覧カテゴリタップ

カテゴリの一覧


カンファレンス一覧の画面遷移


そのカテゴリの講演一覧特定のカテゴリをタップ

講演詳細特定の講演をタップ

バザールの一覧


バザールの画面遷移


バザール詳細特定のバザールをタップ

隣のバザール詳細スワイプ

カテゴリの一覧


お気に入り（マイスケジュール）の画面遷移


講演詳細お気に入りのカンファレンス一覧

バザール詳細お気に入りのバザール一覧

•メインの色を決める •タイムテーブル •詳細 •お気に入り •バザール •マイスケジュール

4.各画面のレイアウトを考える 5.実装する3.構成（画面遷移）を考える


•白ベースでスッキリ見やすく •うすいグレーをサブカラー •アクセントカラー2つ

メインの色を決める

メインサブアクセント


•ActionBarのタブではなくViewPagerTabStrip •文字のジャンプ率と色で、情報の優劣をつける



•ヘッダで領域をとらないように •文字がかぶらないように

詳細画面



•アイコンだけだとわかりづらい •マイスケジュールに登録するボタンの動き •「マイスケジュールに追加」「～登録済み」という文言の吟味

お気に入り



•それぞれの場所の印象が強くなるようなデザインに

バザール

色を全面に押し出す



•1画面で見れるように、2列で考えていたが、さすがに入りきらなかったｗ

マイスケジュール


後半実装

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

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



• name : text

• profile : text

スピーカー



• group : text

• title : text

• content : text

バザール

• location_area : text

• location_area_id : integer

• location_number:

• location_number_id : integer

MainActivity

0. Activityの構成 1.

ConferenceListActivity


ConferenceDetailActivity


BazaarDetailActivity



1. タイムテーブル 2.


•ViewPager •PagerTabStrip •ListFragment •複数のCursorを持つAdapter


各部屋が1つのCursor


•複数のCursorを持つAdapter •ヘッダーの表示も対応している •http://goo.gl/Dp033b

CompositeCursorAdapter

http://goo.gl/Dp033b

2.カンファレンス 3.バザール1.タイムテーブル

カテゴリー一覧

•ListFragment •SimpleCursorAdapter •カテゴリー名（カテゴリーID）のCursorを作る



•カテゴリーIDの重複していないCursor

•group By を使う


Content Provider で group By を使う

Uri.Builder builder = DataProvider.SESSION_URI.buildUpon();builder.appendQueryParameter("groupBy", DataProvider.SessionColumn.COLUMN_CATEGORY_ID);Uri uri = builder.build();

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



•SimpleCursorAdapterには “_id” カラムが必要 •group By したカテゴリーIDを as を使って “_id” として取得


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



•全てのトラックを表示するための行もほしい •MergeCursor を使って Cursor を合体 •全てのトラック用の Cursor は MatrixCursor で用意


MergeCursor で Cursor を合体

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


カンファレンス一覧

•ListFragment •SimpleCursorAdapter •カンファレンスのテーブルにはスピーカーID •スピーカー名は別テーブル


カンファレンス一覧

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


CursorWrapper を作る

@Overridepublic void onLoadFinished(Loader<Cursor> loader, Cursor c) { mAdapter.swapCursor(SpeakerCursorWrapper.wrap(c, getActivity()));}

SpeakerCursorWrapperの実際のコードのデモ


カンファレンス詳細

•ListFragment •ヘッダー •カンファレンス情報 •リスト本体 •スピーカー •お気に入りボタン


お気に入りボタン

•FrameLayoutを継承したCustomView •ToggleButtonと★を重ねたレイアウト •Checkableを実装しToggleButtonに流す •ONでアニメーション

3.バザール 4.2.

バザール一覧

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


•もともとヘッダーの表示に対応している •ヘッダーの情報を使ってインデックスラベルを作成 •ヘッダーの残るリストに対応

CompositeCursorAdapterを改造

4.マイスケジュール3.

マイスケジュール

•ViewPager •PagerTabStrip •Fragment + ListView

トークセッション

Technology

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