アプリリニューアルの際に意識したAndroid アプリらしさ NewsPicks らしさとは株式会社 NewsPicksKoji Matsubara

Koji Matsubara (@_koji_matsu_)NewsPicks Engineer.

・元組込みエンジニアです ( ガラケーとかを作ってました )・ NewsPicks アプリを今はメインで開発しています。

会社紹介

経済情報で、世界をかえる

ビジネスに特化した 2 つのサービス

高度な企業・産業分析のためのデータベース

経済を専門とするニュースアプリ500導 入 企 業

社 以 上

200購 読 者

万 人

※ 数値： 2016 年 12 月時点

NewsPicks リニューアルまでの道のり…

2015 年当時の旧 NewsPicks アプリの問題点• NewsPicks Android アプリの専任が居なかった• iOS と Android で UI/UX が ( ほぼ ) 共通• 通信量が多い ?• ニュースのスクロールが遅い• Crashlytics の CRASH-FREE SESSIONS の値が悪い

Android アプリとしてちょっとイケてない…

UI/UX の改修• 如何にニュース、コメントを見やすくするか

• フォントサイズの見直し• 各コンポーネント毎の Margin/Padding を調整する

• Android らしい UI/UX を採用する• 基本的に Google の Material Design を用いる• Ripple Effect, Elevation ( 高さの概念 ) を意識する• Android にはバックボタンがある事を意識する！

• メニューを整理する (iOS も一緒に )• ハンバーガーメニューはあえて採用しない• Bottom navigation を採用する ( デザインの検討中に Material Design のガイドライ

ンに加わったので安心して Android にも採用 ) https://material.io/guidelines/components/bottom-navigation.html

コンポーネント間隔用のリソースを作っておく

<resources> <dimen name="material_size_00">4dp</dimen> <dimen name="material_size_00_5">6dp</dimen> <dimen name="material_size_01">8dp</dimen> <dimen name="material_size_01_5">12dp</dimen> <dimen name="material_size_02">16dp</dimen> <dimen name="material_size_02_5">20dp</dimen> <dimen name="material_size_03">24dp</dimen> <dimen name="material_size_03_5">28dp</dimen> <dimen name="material_size_04">32dp</dimen> <dimen name="material_size_04_5">36dp</dimen> <dimen name="material_size_05">40dp</dimen> <dimen name="material_size_05_5">44dp</dimen> <dimen name="material_size_06">48dp</dimen> <dimen name=“material_size_06_5">52dp</dimen>

::

Material Design のコンポーネントの間隔は 8dp が基本の為、 8dp ( 一部 4dp, 2dp も ) 間隔の値をあらかじめ dimens.xml に定義しておく

↓

「もうちょっと間隔を広げたい ( 狭めたい ) 」と言われた場合にレイアウト上で material_size_xx の xx 部分だけを修正する事で常に Material Design に準拠した形での間隔を維持できる

UI 改修後 ( トップ )

UI 改修後 ( メニュー )

UI 改修後 ( ニュースコメント )

通信量削減• 通信ライブラリとして Volley を採用

• Retrofit も検討したが既存のロジックとの親和性を優先• Http 通信は OkHttp3 を経由

• 画像表示は Glide を採用• Glide も Http 通信は OkHttp3 を経由 (okhttp3-integration)

• 一部の通信は Volley をに処理が渡る前に (Volley の Queue に enqueue する前に ) JSON を返却するロジックを作成

• Volley, Glide 共にメモリ、ディスクキャッシュを有効化

レイアウトの最適化• 特に List/Recycler View 内の item 用のレイアウト

を作る場合明確な理由が無い限り LinearLayout を使わない

• Relative/FrameLayout で大概の事はできる• レイアウトのネストを可能な限り減らす

• 最悪 4.0 系の端末だと StackOverFlow になる場合も…

レイアウトのネスト削減 ( 例 )

LinearLayout -> LinearLayout -> LinearLayout -> LinearLayout -> LinearLayout -> LinearLayout -> LinearLayout -> LinearLayout

RelativeLayout -> RelativeLayout -> RelativeLayout

LinearLayout を多用して 4 層

RelativeLayout で置き換えて 2 層

直近の CRASH-FREE SESSIONS の値

99.87%※2017/01/22 時点

何をやって Crash 率を落したか ?

ひたすら NPE の対策です！

・ UI/UX を Android に最適化する・通信量は特にキャッシュを気をつける・ CRASH-FREE 率は 99% 以上を維持する・ Play ストアの Star を 4.0 以上に…

最後に…

NewsPicks では、エンジニアを随時募集しています。 ・ NewsPicks アプリのココを直してやりたい！ ・ Android に一家言あるぞ！というような方、是非声をかけてもらえると嬉しいです。

One more thing…

頂いたドロイドくんのトロフィー…

肝心のドロイドくんの触覚 ? が… (涙

ありがとうございます