Chorome Custom Tabs - first step

k y o b a s h i . d e x # 2

C h r o m e C u s t o m Ta b s使用と例

A b o u t m e

A b o u t m e

• Kenji Tazawa

• Android Engineer

• Recruit Marketing Partners Co.,Ltd

C h r o m e C u s t o m Ta b s


•機能を紹介

•使用例を紹介


•機能を紹介


V S W e b V i e w, I n t e n t ( B r o w s e r A p p )

WebView,Intent (Browser App)


WebView,Intent (Browser App)

• Browser Appでは遷移してからWebサイトを表示するまでが重い、遅い

• Browser Appでは別アプリの表示となるなのでUIに統一感を出せない（シームレスに表示できない）

• WebViewではセキュリティへの懸念がある


Chrome Custom Tabs


Chrome Custom Tabs

• Prefetchによる表示速度の向上

• UIのカスタマイズが可能

• Choromeベースのセキュリティと機能翻訳、パスワード自動保存、オートフィル、

タップして検索、etc…

※ Chromeインストール済み v45以上

H o w t o

H o w t o

See -> NET BIZ DIV.TECH BLOG はじめての Chrome Custom Tabs

http://tech.recruit-mp.co.jp/mobile/post-7628/


H o w t o - D e f a u l t

CustomTabsIntent tabsIntent = new CustomTabsIntent.Builder().build(); String packageName = CustomTabsHelper.getPackageNameToUse(this); tabsIntent.intent.setPackage(packageName); tabsIntent.launchUrl(this, URI);

H o w t o - D e f a u l t

H o w t o - C u s t o m

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(); CustomTabsIntent tabsIntent = builder.setShowTitle(true) .enableUrlBarHiding() .setToolbarColor(getResources().getColor(R.color.brand_sub)) .setCloseButtonIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back)) .setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left) .setExitAnimations(this, android.R.anim.slide_in_left, android.R.anim.slide_out_right) .build(); String packageName = CustomTabsHelper.getPackageNameToUse(this); tabsIntent.intent.setPackage(packageName); tabsIntent.launchUrl(this, URI);


CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();CustomTabsIntent tabsIntent = builder.setShowTitle(true) .enableUrlBarHiding() .setToolbarColor(getResources().getColor(R.color.brand_sub)) .setCloseButtonIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back)) .setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left) .setExitAnimations(this, android.R.anim.slide_in_left, android.R.anim.slide_out_right) .build(); String packageName = CustomTabsHelper.getPackageNameToUse(this);tabsIntent.intent.setPackage(packageName);tabsIntent.launchUrl(this, URI);


H o w t o - P r e F e t c h

長いので省略

H o w t o

See -> NET BIZ DIV.TECH BLOG はじめての Chrome Custom Tabs


再掲



体感速度の違いだけ紹介



•機能を紹介



•機能を紹介



•機能を紹介

•使用例を紹介使用例から思ったこと

A p p s

• Twitter

• Feedly

• Stack Exchange

• Skyscanner

A p p s

– A n d r o i d D e v e l o p e r s B l o g : C h r o m e c u s t o m t a b s s m o o t h t h e t r a n s i t i o n b e t w e e n a p p s a n d t h e w e b

“Users will begin to experience custom tabs in the coming weeks in Feedly, The Guardian, Medium,

Player.fm, Skyscanner, Stack Overflow, Tumblr, and Twitter, with more coming soon. To get started

integrating custom tabs into your own application, check out the developer guide.”

A p p s

Skyscanner

A p p s

Skyscannerデザイン、画面遷移時のアニメーションが統一

A p p s

Stack Exchange

A p p s

Stack Exchangeデザイン、画面遷移時のアニメーションが統一

A p p s

シームレスに表示したい場合はToolbarの色はAppのテーマカラーに合わせ、遷移時のアニ

メーションも統一している

A p p s

Feedly

A p p s

Feedlyデザイン、画面遷移時のアニメーションが統一

A p p s

Feedly 表示方法の変更が可能

A p p s

RSSリーダーのような外部コンテンツに多く遷移するアプリの場合は、ユーザー毎でブラウジングする方法に違いがあるため選択の余地を残し

ている

A p p s

Twitter

A p p s

Twitterデザイン、画面遷移時のアニメーションを統一していない

A p p s

Twitter 表示方法の変更が可能

A p p s

明確にアプリコンテンツ外としてWebサイトを表示したい場合は遷移時のアニメーションを通常と異なるものにし、Toolbarの色も統一しない


•機能を紹介



•機能を紹介


S u m m a r y

S u m m a r y

導入は簡単

S u m m a r y

ただ導入するのではなく、Appが提供する機能にあわせてデザイン、実装、ユーザーのサポー

トをしていしましょう

t h a n k s

Technology

Chorome Custom Tabs - first step