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