Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chorome Custom Tabs - first step

Androidの勉強会 kyobashi.dex #2 で発表した内容です。

  • Be the first to comment

  • Be the first to like this

Chorome Custom Tabs - first step

  1. 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. 2. A b o u t m e
  3. 3. A b o u t m e • Kenji Tazawa • Android Engineer • Recruit Marketing Partners Co.,Ltd
  4. 4. C h ro m e C u s t o m Ta b s
  5. 5. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介
  6. 6. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介
  7. 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. 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. 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. 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. 11. H o w t o
  12. 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. 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. 14. H o w t o - D e f a u l t
  15. 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. 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. 17. H o w t o - C u s t o m
  18. 18. H o w t o - P re F e t c h 長いので省略
  19. 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. 20. H o w t o - P re F e t c h 体感速度の違いだけ紹介
  21. 21. H o w t o - P re F e t c h
  22. 22. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介
  23. 23. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介
  24. 24. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介 使用例から思ったこと
  25. 25. A p p s • Twitter • Feedly • Stack Exchange • Skyscanner
  26. 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. 27. A p p s Skyscanner
  28. 28. A p p s Skyscanner デザイン、画面遷移時の アニメーションが統一
  29. 29. A p p s Stack Exchange
  30. 30. A p p s Stack Exchange デザイン、画面遷移時の アニメーションが統一
  31. 31. A p p s シームレスに表示したい場合はToolbarの色は Appのテーマカラーに合わせ、遷移時のアニ メーションも統一している
  32. 32. A p p s Feedly
  33. 33. A p p s Feedly デザイン、画面遷移時の アニメーションが統一
  34. 34. A p p s Feedly 表示方法の変更が可能
  35. 35. A p p s RSSリーダーのような外部コンテンツに多く遷移 するアプリの場合は、ユーザー毎でブラウジン グする方法に違いがあるため選択の余地を残し ている
  36. 36. A p p s Twitter
  37. 37. A p p s Twitter デザイン、画面遷移時の アニメーションを統一していない
  38. 38. A p p s Twitter 表示方法の変更が可能
  39. 39. A p p s 明確にアプリコンテンツ外としてWebサイトを 表示したい場合は遷移時のアニメーションを通 常と異なるものにし、Toolbarの色も統一しない
  40. 40. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介
  41. 41. C h ro m e C u s t o m Ta b s • 機能を紹介 • 使用例を紹介
  42. 42. S u m m a r y
  43. 43. S u m m a r y 導入は簡単
  44. 44. S u m m a r y ただ導入するのではなく、Appが提供する機能 にあわせてデザイン、実装、ユーザーのサポー トをしていしましょう
  45. 45. t h a n k s

×