際際滷

際際滷Share a Scribd company logo
"あんざいゆき" x "拍~ちひろ" は
カンファレンスアプリをどう恬るのか
2014.04.18 麼岸坤ぅ鵐廛譽好献礇僖
幄塀氏芙ウフィカ 旗燕函叨
あんざいゆき
blog : Y.A.Mのj、y-anz.m.blogspot.com
twitter : @yanzm ┐笋鵑兇爍
GTUG Girls マネ`ジャ`
拍~ちひろ
幄塀氏芙ツクロア 函叨
デザイナ`
Webサイト/スマホアプリ/ハ`ドウェアなど、プラットフォ`
ムの圸功なく、デザイン畠違のクリエイティブワ`クに亊わる。
!
夛や碧もデザイナ`から戻宛できないといけないと深えてい
る。
念磯
デザインυO
仟しいアプリを恬るステップ
1. 屡贋アプリの{
2. ざっくりC嬬を深える
3. 撹┿中w卞を深える
4. 光鮫中のレイアウトを深える
5. g廾する
6. 聞ってみる
?どういうC嬬があるか
?どういう撹┿中w卞になって
いるか
?こういうC嬬もあればいいのになぁ
1. 屡贋アプリの{ 2.ざっくりC嬬
仝駅勣なC嬬がみえてくる々
1. 屡贋アプリの{ 2.ざっくりC嬬
チェックしたアプリ
?ABC 2014 Spring vBのアプリ
?ABC 2013 Autumn vBのアプリ
?Google I/O アプリ
?Google Playで仝Conference々で?
碧したY惚からよさげなもの
アプリの{ 2.ざっくりC嬬を深える
勣箔レベル
?巷塀サイトにいきたい
?v處坪否がしりたい
?るスケジュ`ルを恬りたい
?お櫃鉾襪蠅箸靴謄船Д奪したい
?仇蹐たい
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
シナリオを深える誅颪垢襭
1つのrg。では1つのv處しかれない
タイムテ`ブルがほしい
仝揖じrg。のv處から、
 どれようかなぁって深えるよね々
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
タイムテ`ブルの勣箔
?タイムテ`ブルの朕をタップしたら
v處のがみたい
?どれがお櫃鉾襪蠅砲覆辰討い襪?
岑りたい
?どの何塁のv處か岑りたい
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
v處の勣箔
?タイトル、v處宀、古勣、rg、?
何塁、カテゴリが岑りたい
?カテゴリをタップしたら、?
そのカテゴリのv處匯Eがたい
?v處何塁の仇蹐みたい
?お櫃鉾襪蠅縫船Д奪したい
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
シナリオを深える2誅颪垢襭
バザ`ルのせ圭ってyしい
仝仇蹐ないとつらい、械にみたい々
仝ブ`スの方が謹いので、仇蹐里匹?
 にあるかすぐつけられるように?
 なっててほしい々
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
ABC 2013 Autumn の仇
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
ABC 2014 Spring の仇
?弼蛍けわかりやすい
?仝あ、い、う、え、か々もeの弼がいい
3.撹┿中w
?どのuのブ`スがすぐわかりたい
- 弼蛍けの弼を燕幣するとか
?ブ`スがたくんさんあるから和まで?
佩くのたいへん
- インデックスラベル + fast scroll
- ヘッダ`が火るリスト
アプリの{ 2.ざっくりC嬬を深える
バザ`ル匯Eの勣箔
3.撹┿中w
アプリの{ 2.ざっくりC嬬を深える
バザ`ルの勣箔
?仇蹐頒讃wにみたい
- 仇蹐鬚澆襪箸にブ`ス桑催をえておか
ないといけないのは腕
?どのuのブ`スがすぐわかりたい
- 弼蛍けの弼を嘘尚にするとか
?Oのブ`スのにgに卞咾靴燭ぃ┐△
uを送れiきでぐるっとて指るときとか
3.撹┿中w
?それをて佩咾垢襪らスケジュ`ルっ
ぽくなっているのがいい
- rgにv處がKぶ
- 仇蹐械にでている
アプリの{ 2.ざっくりC嬬を深える
お櫃鉾襪蠅厘箔
3.撹┿中w
?タイムテ`ブル
?お櫃鉾襪蝪┘泪ぅ好吋献紿`ル
?カンファレンス匯E┘テゴリごと
?バザ`ル匯E
?巷塀サイト
嬬を深える 3.撹┿中w卞を深える
トップレベルの鮫中
4.光鮫中のレ
?トップレベル鮫中が4つ參貧ある
?トップレベル鮫中でスワイプによる?
鮫中きりかえを聞いたい
嬬を深える 3.撹┿中w卞を深える
トップレベルの撹
4.光鮫中のレ
Navigation Drawer
嬬を深える 3.撹┿中w卞を深える
タイムテ`ブル
4.光鮫中のレ
"あんざいゆき" x "拍~ちひろ" はカンファレンスアプリをどう恬るのか
"あんざいゆき" x "拍~ちひろ" はカンファレンスアプリをどう恬るのか
?スマホの1鮫中におさめるのはyしい
嬬を深える 3.撹┿中w卞を深える
タイムテ`ブル
4.光鮫中のレ
蒙協のrgごとにどれをるか深えるなら、
rgごとに1鮫中にするのはどうか
?罪Sをrgにする
?スワイプでOのrgに卞
蒙協のrgのタイムテ`ブル
嬬を深える 3.撹┿中w卞を深える
タイムテ`ブルの鮫中w卞
4.光鮫中のレ
Oのrgのタイムテ`ブルスワイプ
v處朕タップ
蒙協のv處の秤
嬬を深える 3.撹┿中w卞を深える
v處の鮫中w卞
4.光鮫中のレ
仇躓蹈▲ぅ灰鵐織奪
そのカテゴリのv處匯Eカテゴリタップ
カテゴリの匯E
嬬を深える 3.撹┿中w卞を深える
カンファレンス匯Eの鮫中w卞
4.光鮫中のレ
そのカテゴリのv處匯E
蒙協のカテゴリを
タップ
v處
蒙協のv處を?
タップ
バザ`ルの匯E
嬬を深える 3.撹┿中w卞を深える
バザ`ルの鮫中w卞
4.光鮫中のレ
バザ`ル
蒙協のバザ`ルを?
タップ
Oのバザ`ルスワイプ
カテゴリの匯E
嬬を深える 3.撹┿中w卞を深える
お櫃鉾襪蝪┘泪ぅ好吋献紿`ルの鮫中w卞
4.光鮫中のレ
v處
お櫃鉾襪蠅?
カンファレンス匯E
バザ`ル
お櫃鉾襪蠅?
バザ`ル匯E
?メインの弼をQめる
?タイムテ`ブル
?
?お櫃鉾襪
?バザ`ル
?マイスケジュ`ル
4.光鮫中のレイアウトを深える 5.g廾するを深える
4.光鮫中のレイアウトを深える 5.g廾するを深える
?易ベ`スでスッキリやすく
?うすいグレ`をサブカラ`
?アクセントカラ`2つ
メインの弼をQめる
メイン サブ アクセント
4.光鮫中のレイアウトを深える 5.g廾するを深える
?ActionBarのタブではなく
ViewPagerTabStrip
?猟忖のジャンプ楕と弼で、秤鵑喪
をつける
タイムテ`ブル
4.光鮫中のレイアウトを深える 5.g廾するを深える
?ヘッダでI囃をとらないように
?猟忖がかぶらないように
鮫中
4.光鮫中のレイアウトを深える 5.g廾するを深える
4.光鮫中のレイアウトを深える 5.g廾するを深える
?アイコンだけだとわかりづらい
?マイスケジュ`ルに鞠hするボタンの
咾
?仝マイスケジュ`ルに弖紗々?
仝゛鞠hgみ々という猟冱の哇龍
お櫃鉾襪
4.光鮫中のレイアウトを深える 5.g廾するを深える
4.光鮫中のレイアウトを深える 5.g廾するを深える
?それぞれの侭の咫鵑くなるよう
なデザインに
バザ`ル
弼を畠中に兀し竃す
4.光鮫中のレイアウトを深える 5.g廾するを深える
4.光鮫中のレイアウトを深える 5.g廾するを深える
?1鮫中でれるように、2双で深えてい
たが、さすがに秘りきらなかったw
マイスケジュ`ル
4.光鮫中のレイアウトを深える 5.g廾するを深える
瘁磯
g廾
ABC 2014 Spring のデ`タ
http://www.android-group.jp/conference/
abc2014s/api/
ContentProviderO
? id : integer primary key	

? title : text	

? abstract : text	

? speakers : textspeaker
idを;でY栽	

? start_time : long	

? end_time : long
カンファレンス
? room_id : integer	

? room : text	

? category_id : integer	

? category : text	

? time_frame : integer
ContentProviderO
? id : integer primary key	

? name : text	

? pro?le : text
スピ`カ`
ContentProviderO
? 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.バザ`ルムテ`ブル
カテゴリ`匯E
?ListFragment
?SimpleCursorAdapter
?カテゴリ`兆┘テゴリ`
IDのCursorを恬る
2.カンファレンス 3.バザ`ルムテ`ブル
カテゴリ`匯E
?カテゴリ`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.バザ`ルムテ`ブル
カテゴリ`匯E
?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.バザ`ルムテ`ブル
カテゴリ`匯E
?畠てのトラックを燕幣するための佩も
ほしい
?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.バザ`ルムテ`ブル
カンファレンス匯E
?ListFragment
?SimpleCursorAdapter
?カンファレンスのテ`ブルに
はスピ`カ`ID
?スピ`カ`兆はeテ`ブル
2.カンファレンス 3.バザ`ルムテ`ブル
カンファレンス匯E
?カンファレンスのテ`ブルにはスピ`
カ`のIDが ; 曝俳りで秘っている
?スピ`カ`兆にQしたカラムも
Cursorに圀しい
?CursorWrapperを聞う
2.カンファレンス 3.バザ`ルムテ`ブル
CursorWrapper を恬る
@Override	
public void onLoadFinished(Loader<Cursor> loader, Cursor c) {	
mAdapter.swapCursor(SpeakerCursorWrapper.wrap(c, getActivity()));	
}
SpeakerCursorWrapperのgHのコ`ドのデモ
2.カンファレンス 3.バザ`ルムテ`ブル
カンファレンス
?ListFragment
?ヘッダ`
?カンファレンス秤
?リスト云悶
?スピ`カ`
?お櫃鉾襪螢椒織
2.カンファレンス 3.バザ`ルムテ`ブル
お櫃鉾襪螢椒織
?FrameLayoutを@覚した
CustomView
?ToggleButtonと¥を嶷ね
たレイアウト
?Checkableをg廾し
ToggleButtonに送す
?ONでアニメ`ション
3.バザ`ル 4.
バザ`ル匯E
?ListFragment
?光uが1つのCursor
?}方のCursorを隔つ
Adapter
?FastScroll + インデックス
ラベル
?ヘッダ`の火るリスト
1. タイムテ`ブル 2.
?もともとヘッダ`の燕幣に鬉靴討
る
?ヘッダ`の秤鵑鯤垢辰謄ぅ鵐妊奪スラ
ベルを恬撹
?ヘッダ`の火るリストに
CompositeCursorAdapterを個夛
4.マイスケジュ`ル.
マイスケジュ`ル
?ViewPager
?PagerTabSt
rip
?Fragment +
ListView
ト`クセッション

More Related Content

"あんざいゆき" x "拍~ちひろ" はカンファレンスアプリをどう恬るのか