Chorome Custom Tabs - first step
-
Upload
tazake -
Category
Technology
-
view
870 -
download
1
Transcript of Chorome Custom Tabs - first step
![Page 1: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/1.jpg)
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使用 と 例
![Page 2: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/2.jpg)
A b o u t m e
![Page 3: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/3.jpg)
A b o u t m e
• Kenji Tazawa
• Android Engineer
• Recruit Marketing Partners Co.,Ltd
![Page 4: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/4.jpg)
C h r o m e C u s t o m Ta b s
![Page 5: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/5.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介
![Page 6: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/6.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介
![Page 7: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/7.jpg)
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)
![Page 8: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/8.jpg)
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)
• Browser Appでは遷移してからWebサイトを表示するまでが重い、遅い
• Browser Appでは別アプリの表示となるなのでUIに統一感を出せない(シームレスに表示できない)
• WebViewではセキュリティへの懸念がある
![Page 9: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/9.jpg)
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 )
Chrome Custom Tabs
![Page 10: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/10.jpg)
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 )
Chrome Custom Tabs
• Prefetchによる表示速度の向上
• UIのカスタマイズが可能
• Choromeベースのセキュリティと機能 翻訳、パスワード自動保存、オートフィル、
タップして検索、etc…
※ Chromeインストール済み v45以上
![Page 11: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/11.jpg)
H o w t o
![Page 12: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/12.jpg)
H o w t o
See -> NET BIZ DIV.TECH BLOG はじめての Chrome Custom Tabs
http://tech.recruit-mp.co.jp/mobile/post-7628/
![Page 13: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/13.jpg)
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);
![Page 14: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/14.jpg)
H o w t o - D e f a u l t
![Page 15: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/15.jpg)
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);
![Page 16: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/16.jpg)
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);
![Page 17: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/17.jpg)
H o w t o - C u s t o m
![Page 18: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/18.jpg)
H o w t o - P r e F e t c h
長いので省略
![Page 19: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/19.jpg)
H o w t o
See -> NET BIZ DIV.TECH BLOG はじめての Chrome Custom Tabs
http://tech.recruit-mp.co.jp/mobile/post-7628/
再掲
![Page 20: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/20.jpg)
H o w t o - P r e F e t c h
体感速度の違いだけ紹介
![Page 21: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/21.jpg)
H o w t o - P r e F e t c h
![Page 22: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/22.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介
![Page 23: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/23.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介
![Page 24: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/24.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介使用例から思ったこと
![Page 25: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/25.jpg)
A p p s
• Feedly
• Stack Exchange
• Skyscanner
![Page 26: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/26.jpg)
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.”
![Page 27: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/27.jpg)
A p p s
Skyscanner
![Page 28: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/28.jpg)
A p p s
Skyscannerデザイン、画面遷移時のアニメーションが統一
![Page 29: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/29.jpg)
A p p s
Stack Exchange
![Page 30: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/30.jpg)
A p p s
Stack Exchangeデザイン、画面遷移時のアニメーションが統一
![Page 31: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/31.jpg)
A p p s
シームレスに表示したい場合はToolbarの色はAppのテーマカラーに合わせ、遷移時のアニ
メーションも統一している
![Page 32: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/32.jpg)
A p p s
Feedly
![Page 33: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/33.jpg)
A p p s
Feedlyデザイン、画面遷移時のアニメーションが統一
![Page 34: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/34.jpg)
A p p s
Feedly 表示方法の変更が可能
![Page 35: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/35.jpg)
A p p s
RSSリーダーのような外部コンテンツに多く遷移するアプリの場合は、ユーザー毎でブラウジングする方法に違いがあるため選択の余地を残し
ている
![Page 36: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/36.jpg)
A p p s
![Page 37: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/37.jpg)
A p p s
Twitterデザイン、画面遷移時のアニメーションを統一していない
![Page 38: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/38.jpg)
A p p s
Twitter 表示方法の変更が可能
![Page 39: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/39.jpg)
A p p s
明確にアプリコンテンツ外としてWebサイトを表示したい場合は遷移時のアニメーションを通常と異なるものにし、Toolbarの色も統一しない
![Page 40: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/40.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介
![Page 41: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/41.jpg)
C h r o m e C u s t o m Ta b s
•機能を紹介
•使用例を紹介
![Page 42: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/42.jpg)
S u m m a r y
![Page 43: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/43.jpg)
S u m m a r y
導入は簡単
![Page 44: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/44.jpg)
S u m m a r y
ただ導入するのではなく、Appが提供する機能にあわせてデザイン、実装、ユーザーのサポー
トをしていしましょう
![Page 45: Chorome Custom Tabs - first step](https://reader034.fdocument.pub/reader034/viewer/2022042723/58803dd41a28abfd0a8b582f/html5/thumbnails/45.jpg)
t h a n k s