Submit Search
Upload
マテリアルデザインを用いたデザインリニューアル [フリル編]
•
286 likes
•
93,780 views
YUKI YAMAGUCHI
Follow
DroidKaigiで発表したマテリアルデザインを用いたデザインリニューアル の資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 88
Download now
Download to read offline
Recommended
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
実在感溢れるキャラクターを目指して ~ワンダ、トリコで培った 巨大キャラクターアニメーション5つの法則~
実在感溢れるキャラクターを目指して ~ワンダ、トリコで培った 巨大キャラクターアニメーション5つの法則~
株式会社ジェンデザイン
Recommended
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
実在感溢れるキャラクターを目指して ~ワンダ、トリコで培った 巨大キャラクターアニメーション5つの法則~
実在感溢れるキャラクターを目指して ~ワンダ、トリコで培った 巨大キャラクターアニメーション5つの法則~
株式会社ジェンデザイン
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
ゲーム開発出身者がチームラボで働いてみた
ゲーム開発出身者がチームラボで働いてみた
秀和 福永
ブループリント+ビジュアルスクリプトと仲良くやる方法
ブループリント+ビジュアルスクリプトと仲良くやる方法
Masahiko Nakamura
マテリアルデザイン
マテリアルデザイン
Akio Yonekura
Go mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろう
Takuya Ueda
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
エラーハンドリング
エラーハンドリング
道化師 堂華
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
小林 信行
VRM 標準シェーダ MToon の使い方
VRM 標準シェーダ MToon の使い方
VirtualCast, Inc.
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
DeNA
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
Unity Technologies Japan K.K.
QGIS はじめてのラスタ解析
QGIS はじめてのラスタ解析
Mayumit
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
UnityTechnologiesJapan002
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
Unity Technologies Japan K.K.
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
tmr2013
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
witstudio
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
Satoshi Kodaira
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
kyon mm
More Related Content
What's hot
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
ゲーム開発出身者がチームラボで働いてみた
ゲーム開発出身者がチームラボで働いてみた
秀和 福永
ブループリント+ビジュアルスクリプトと仲良くやる方法
ブループリント+ビジュアルスクリプトと仲良くやる方法
Masahiko Nakamura
マテリアルデザイン
マテリアルデザイン
Akio Yonekura
Go mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろう
Takuya Ueda
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
エラーハンドリング
エラーハンドリング
道化師 堂華
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
小林 信行
VRM 標準シェーダ MToon の使い方
VRM 標準シェーダ MToon の使い方
VirtualCast, Inc.
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
DeNA
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
Unity Technologies Japan K.K.
QGIS はじめてのラスタ解析
QGIS はじめてのラスタ解析
Mayumit
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
UnityTechnologiesJapan002
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
Unity Technologies Japan K.K.
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
tmr2013
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
witstudio
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
Satoshi Kodaira
What's hot
(20)
UXのためのUIデザイン
UXのためのUIデザイン
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
ゲーム開発出身者がチームラボで働いてみた
ゲーム開発出身者がチームラボで働いてみた
ブループリント+ビジュアルスクリプトと仲良くやる方法
ブループリント+ビジュアルスクリプトと仲良くやる方法
マテリアルデザイン
マテリアルデザイン
Go mobileでモバイルアプリを作ろう
Go mobileでモバイルアプリを作ろう
デザインのためのデザイン
デザインのためのデザイン
エラーハンドリング
エラーハンドリング
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
Unityとアセットツールで学ぶ「絵づくり」の基礎 ライト、シェーダー、イメージエフェクト
VRM 標準シェーダ MToon の使い方
VRM 標準シェーダ MToon の使い方
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
QGIS はじめてのラスタ解析
QGIS はじめてのラスタ解析
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
Viewers also liked
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
kyon mm
Droid kaigiプレゼン
Droid kaigiプレゼン
Suguru Oho
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
JobStreamerではじめるJavaBatchのクラウド分散実行
JobStreamerではじめるJavaBatchのクラウド分散実行
Yoshitaka Kawashima
データモデルは時空を越える
データモデルは時空を越える
terahide
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
Fumihiko Shiroyama
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
Shinobu Okano
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
Shinichi Kozake
Java web application testing
Java web application testing
Tokuhiro Matsuno
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Takahiro YAMADA
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Yuki Anzai
Viewers also liked
(20)
確実に良くするUI/UX設計
確実に良くするUI/UX設計
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
出来るチューリング完全!SQLでもいろいろ出来る! #syoboben
Droid kaigiプレゼン
Droid kaigiプレゼン
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
JobStreamerではじめるJavaBatchのクラウド分散実行
JobStreamerではじめるJavaBatchのクラウド分散実行
データモデルは時空を越える
データモデルは時空を越える
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
あなたとAndroid 今すぐダウンロード!? Android開発で変わる SIerのJava技術事情について
Java web application testing
Java web application testing
DB設計でこだわりたい三つの要素
DB設計でこだわりたい三つの要素
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Sketchで変わるワークフロー
Sketchで変わるワークフロー
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
More from YUKI YAMAGUCHI
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
YUKI YAMAGUCHI
Abc words
Abc words
YUKI YAMAGUCHI
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
YUKI YAMAGUCHI
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
YUKI YAMAGUCHI
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
YUKI YAMAGUCHI
Road Map 2012
Road Map 2012
YUKI YAMAGUCHI
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
YUKI YAMAGUCHI
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
YUKI YAMAGUCHI
CS -Cart勉強会
CS -Cart勉強会
YUKI YAMAGUCHI
WordPressテーマの作り方
WordPressテーマの作り方
YUKI YAMAGUCHI
Osc2010fukuoka
Osc2010fukuoka
YUKI YAMAGUCHI
Word Camp Fukuoka2010
Word Camp Fukuoka2010
YUKI YAMAGUCHI
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
YUKI YAMAGUCHI
More from YUKI YAMAGUCHI
(14)
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
Abc words
Abc words
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
Road Map 2012
Road Map 2012
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
CS -Cart勉強会
CS -Cart勉強会
WordPressテーマの作り方
WordPressテーマの作り方
Osc2010fukuoka
Osc2010fukuoka
Word Camp Fukuoka2010
Word Camp Fukuoka2010
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
マテリアルデザインを用いたデザインリニューアル [フリル編]
1.
マテリアルデザインを 用いたデザインリニューアル 株式会社Fablic ninjinkun,yuki930
2.
@ninjinkun @yuki930 エンジニア デザイナー
3.
ninjinkun • 最近はDagger2に入門中 • http://ninjinkun.hatenablog.com/
4.
yuki930 • 山口 有由希 •
ずっとAndroidユーザー • 福岡でデザイナー • 2014年1月にFablicに入社
5.
女の子のためのフリマアプリ 300万 ダウンロード 2014 Google BestApp
6.
Fril 2.x
7.
Fril 3.x
8.
時系列の説明 • 2014年6月 マテリアルデザインガイドライン公開 •
2014年7月 フリルAndroid版リニューアル計画スタート • TV CMが決まってリリース日が10月末に確定 • タイミングが5.0と重なりそう • どうせリニューアルするならマテリアル対応… • 2014年12月 Google Play Best App 2014受賞
9.
UIリニューアルの流れ v2.5 v3.0 v3.1
v3.2 ∼2014年10月 2014年10月 2014年11月 2014年12月 リニューアル前 体験改善! 自力Material サポート ライブラリ適用 タブレット対応
10.
マテリアルデザインの キャッチアップと実装について 今日お話すること
11.
マテリアルデザインの理解と取り組み デザイン編
12.
Google I/O 2014
13.
マテリアルデザインの理解
14.
信じられるもの:ガイドライン http://www.google.com/design/spec/material-design/introduction.html
15.
リアルタイムに変わっていくから! 今もなお…
16.
Material Design on
Android Checklist マテリアルデザインを理解する上でキーとなる4つのポイントの解説 Tangible Surfaces A Bold, Print-Like Aesthetic Authentic Motion Adaptive Design 手触りのある 表面の表現 印刷物デザインの 応用 修飾ではなく 意味を伝える動き 画面サイズの変化に 適応するデザイン http://android-developers.blogspot.jp/2014/10/material-design-on- android-checklist.html
17.
マテリアル・デザインって何? Androidデザイン責任者にインタビュー どういう経緯で生まれたのか?が分かる記事 我々は誰もが使えて、その人のブランドやアイデンティティやニーズや能力を本当に表現できるデザイ ンシステムを作りたかったんです。 それは巨大なデザイン空間で、超エキサイティングでした。それほど大きなデザイン問題に取り組んだ 人とか機会が他にあったかわかりません。そこにチームがひとつになって取り組めたのは素晴らしかっ たです。みんな本当にのめりこんでいきましたからね。デザイナーを巻き込めば巻き込むほど、彼らは 「あのさあ、もうちょっと本気出せば、僕らだってこの問題は解けるよ?」と言ってくるんです。 http://www.gizmodo.jp/2014/07/_android.html
18.
An exploration in
Material Design 実際に上記ポイントを踏まえてリニューアルされたfeedlyの事例 https://medium.com/feedly-behind-the-curtain/an-exploration-in- material-design-by-feedly-8c1a1cbdfdcd
19.
公式動画に日本語字幕もつきました http://googledevjp.blogspot.jp/2015/02/blog-post.html
20.
プロトタイプ作成
21.
ユーザーからの要望や お問い合わせチェック
22.
UIパターンの調査
23.
ペーパープロトテスト
24.
25.
ユーザーテスト
26.
がんばってAndroidの標準に 合わせたつもりだったが…
27.
既存ユーザーの使い勝手を 悪くしてしまっていた
28.
29.
30.
31.
32.
33.
議論は ユーザーテストで収束
34.
デザインルール作成
35.
カラー
36.
フリルらしい配色のカラーパレットを作成
37.
タイポグラフィー
38.
日本語だと強くなりすぎてしまう点を考慮して 行間やフォントサイズを最適化 草案 最終的には値は変更しています
39.
40.
+1sp ALL CAPSなし
41.
42.
デザイン起こし
43.
sticker sheet パーツのデザインが ひと通り揃っています Sketchのデータが扱いやすく とくにおすすめ! http://www.google.com/design/spec/resources/sticker-sheets-icons.html
44.
アイコン作成
45.
提供されているアイコン類
46.
Githubでも管理 https://github.com/google/material-design-icons
47.
足りないモチーフの書き起こし
48.
IcoMoonで アイコンフォント化 • ブラウザから簡単にフォントファ イルが作成可能 • jsonファイルを利用すれば 誰でもブラウザだけで編集が可能
49.
16KBまで削減でき、アプリの容量もダウン
50.
51.
実装のための準備
52.
扱いやすい カラー定義 基本的な配色ルールを colors.xmlに定義 基本的にはそれらの色を参照する 形で色を設定すると 変更に柔軟になりとても便利!
53.
カラー定義 基本的な配色ルールを colors.xmlに定義 基本的にはそれらの色を継承する 形で色を設定すると 変更に柔軟になりとても便利!
54.
定数定義 余白や基本的な フォントサイズなどを dimen.xmlに定義
55.
ボタンの整備 影もdrawableで書いていたが 1dp単位で書いていたので荒すぎた 影を必死に描くのは不毛なので 影の背景画像、シェイプ、アイコンの 重ね技で色変更のしやすいボタンに
56.
textAppearance の活用 TextAppearanceを活用することで styleの切り分けが容易に スタイルがコンパクトになり、 かつ無駄に似たような スタイルが増えすぎることがない
57.
マテリアルデザインの理解と取り組み 実装編
58.
Support Libraryが ない状況での マテリアル対応 実装と ライブラリの変遷
59.
実装・ライブラリの変遷 2.x 3.x Activityまわり Activityべた書き
Activity + Fragment APIクライアント AsyncTaskLoader ベースの自作 Retrofit + RxJava 画像 Picasso Picasso EventBus Otto Otto View DI findViewById() ButterKnife テスト なし >< JUnit4, Mocito CI なし >< CircleCI
60.
Activity + Fragment •
それまではActivityべた書きだった… • 回転対応、タブレット対応を見据えてFragment化
61.
Activity + Fragment •
ひたすらFragment化
62.
Activity + Fragment •
ひたすらFragment化
63.
Activity + Fragment •
一通り対応が終わってからFragment批判が盛り上がって 辛い • 【翻訳】Android Fragmentへの反対声明 • しかしFragment使って良かったと思ってます • ViewPagerはFragment使わないと実装しづらい http://ninjinkun.hatenablog.com/entry/2014/10/16/234611
64.
Retrofit Square製のHTTP Client インターフェイスにアノテーション を書くスタイルで読みやすい JavaDocにAPIの仕様を 記述していくと良い感じ
65.
RxJava Reactive ExtensionのJava実装 FrilではPromiseとして使用 複雑なAPIコールを宣言的に記述 商品情報のPOSTと画像アップロード を順に行う様子 商品情報POST 画像を4枚POST レスポンス レスポンス
66.
MaterialTabHost マテリアルスタイルで ViewPager+Tabを実現する NAVIGATION_MODE_TABSの代替 https://github.com/yanzm/MaterialTabHost
67.
Calligraphy アイコンフォントに使用 TextViewを拡張して外部フォントを 読み込み可能にしてくれる https://github.com/chrisjenx/Calligraphy
68.
Support Libraryがない状況での マテリアル対応
69.
Support Libraryがない状況でのマテリアル対応 • パラメータを
えてそれっぽく見せる • Floating Action Button • Scroll to Full Screen ←お手軽 ←お手軽 ←ハード Android 5.0 & Support Library 21がリリース前だった
70.
パラメータを えてそれっぽく見せる 48dp 10dp Fril 2.5 52dp 16dp Fril
3.0 Googleに怒られるやつ
71.
パラメータを えてそれっぽく見せる Fril 2.5
Fril 3.0 Fril 3.2
72.
FloatingAction Button ボタンを置くだけ 今はOSS実装もあります makovkastar/FloatingActionButton
73.
Scrollto FullScreen ScrollViewやListViewのAPIを調べ てがんばって実装 ninjinkun/ScrollFullScreen
74.
Scrollto FullScreen ScrollViewやListViewのAPIを調べ てがんばって実装 ninjinkun/ScrollFullScreen
75.
Scroll to Full
Screen • 今ならSupport Libraryでできます • ActionBar. setHideOnContentScrollEnabled • 細かいことがやりたければもっと良いライブラリも • Android-ObservableScrollView
76.
黎明期マテリアル対応の感想 • Googleの標準も固まってなかったりして暗中模索 • 先行実装しても損はしない •
Support Libraryリリース時の対応もすぐできた • 先行実装でGoogleさんからの評価は上がった様子
77.
おわりに
78.
Androidの進化のタイミングはチャンス いち早いキャッチアップはBest Appへの近道(かも) でもユーザー視点は忘れずに 技術やデザインを自分たちのものにしようとする努力が大切
79.
リニューアルの裏話
80.
社外開発者との連携 • 手が足りないので助けてもらった • 社内開発者のレベルアップにもなった •
Android開発の定石、ハマり処の伝授 • コードレビュー
81.
社外開発者との連携 • ドキュメントの整備 • 継承の使い方で議論
82.
ドキュメント整備 CONTRIBUTION.mdに集約 branch運用 コーディング規約 Layout XMLの規約
83.
ドキュメント整備 CONTRIBUTION.mdに集約 branch運用 コーディング規約 Layout XMLの規約
84.
JavaDoc整備 クラスとpublicメソッドにはJavaDoc を書く API Clientは特に丁寧に
85.
継承で議論 • Activity, Fragmentの孫継承を使うかで議論に •
Android SDKは継承モデルだがしかし…
86.
継承で議論 • 似たような出品画面、編集画面、下書き編集画面 • BaseItemEditFragmentみたいなのを作る?
87.
継承で議論 • FrilではActivity, Fragmentの孫継承は使わない •
差分プログラミングのための継承は見通しが悪くなる • ベースクラスを弄る誘惑と戦う羽目になる
88.
ご清聴ありがとう ございました
Download now