"あんざいゆき" 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」で検索した結果からよさげなもの

1. 既存アプリの調査 2.ざっくり機能を考える

要求レベル

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

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

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

タイムテーブルがほしい

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

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

タイムテーブルの要求

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

講演詳細の要求

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

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

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

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

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

ABC 2013 Autumn の地図

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

1. 既存アプリの調査 2.ざっくり機能を考える

ABC 2014 Spring の地図

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

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

バザール一覧の要求

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

1. 既存アプリの調査 2.ざっくり機能を考える

バザール詳細の要求

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

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

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

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

1. 既存アプリの調査 2.ざっくり機能を考える

お気に入りの要求

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

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

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

トップレベルの画面

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

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

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

トップレベルの構成

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

Navigation Drawer

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

タイムテーブル

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

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

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

タイムテーブル

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

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

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

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

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

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

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

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

講演詳細項目タップ

特定の講演の情報

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

講演詳細の画面遷移

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

地図地図アイコンタップ

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

カテゴリの一覧

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

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

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

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

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

バザールの一覧

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

バザールの画面遷移

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

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

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

カテゴリの一覧

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

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

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

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

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

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

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

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

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

メインの色を決める

メイン サブ アクセント

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

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

タイムテーブル

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

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

詳細画面

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

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

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

お気に入り

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

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

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

バザール

色を全面に押し出す

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

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

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

マイスケジュール

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

後半実装

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

• profile : 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.バザール1.タイムテーブル

カテゴリー一覧

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

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

カテゴリー一覧

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

•group By を使う

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

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

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

カテゴリー一覧

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

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

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.バザール1.タイムテーブル

カテゴリー一覧

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

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

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

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

カンファレンス一覧

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

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

カンファレンス一覧

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

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

CursorWrapper を作る

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

SpeakerCursorWrapperの実際のコードのデモ

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

カンファレンス詳細

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

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

お気に入りボタン

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

3.バザール 4.2.

バザール一覧

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

1. タイムテーブル 2.

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

CompositeCursorAdapterを改造

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

マイスケジュール

•ViewPager •PagerTabStrip •Fragment + ListView

トークセッション