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.

ChromeとAndroidの過去・現在・未来

3,690 views

Published on

DroidKaigi
https://droidkaigi.github.io/2016/
ChromeとAndroidの過去・現在・未来

Published in: Technology
  • Be the first to comment

ChromeとAndroidの過去・現在・未来

  1. 1. ChromeとAndroidの 過去・現在・未来 Droidkaigi 2016
  2. 2. This is the last session of DroidKaigi
  3. 3. Thank you for coming to my session.
  4. 4. 最後まで楽しんでください!
  5. 5. About Me Shinobu Okano @operandoOS Mercari, Inc.
  6. 6. shinobu.apk http://hack-it-iron.hatenablog.com/entry/ 2016/02/08/142322 shinobu.apk #1 のパネルディスカッション 録音データとShow Notesを公開しました!
  7. 7. まったりAndroid Framework Code Reading http://hack-it-iron.hatenablog.com/entry/ 2015/11/28/185529 まったりAndroid Framework Code Reading #2 を開催しました
  8. 8. WebView
  9. 9. WebView つ ら い
  10. 10. WebView つ ら い
  11. 11. 1.x ∼ 4.3.x
 WebKit 4.4.X
 Chromium 5.0 ∼
 System WebView (APK) WebView History
  12. 12. Google I/O 2012 Android WebView https://www.youtube.com/watch?v=HbOtn5VhGZU
  13. 13. Migrating to WebView in Android 4.4 http://developer.android.com/guide/webapps/migrating.html
  14. 14. Android System WebView https://play.google.com/store/apps/details? id=com.google.android.webview
  15. 15. Android WebView の進化と実装 http://outcesticide.hatenablog.com/entry/android_webview
  16. 16. Chrome Custom Tabs
  17. 17. Show the Chrome Tab like a my app browser
  18. 18. Intent Chrome Custom Tabs
  19. 19. Chrome Custom Tabs
  20. 20. Intent App Process Chrome Process Chrome Custom Tabs
  21. 21. Setup Chrome Custom Tabs
  22. 22. Custom Tabs Support Library Setup Chrome Custom Tabs https://developer.android.com/tools/support- library/features.html#custom-tabs
  23. 23. Setup Chrome Custom Tabs https://github.com/GoogleChrome/custom-tabs- client/tree/master/shared Shared util module (Optional)
  24. 24. Chrome Custom Tabs Starter Kit Setup Chrome Custom Tabs https://github.com/operando/chrome-custom-tabs-starterkit
  25. 25. dependencies { compile 'com.android.support:customtabs:23.1.1' compile project(':shared') } Setup Chrome Custom Tabs
  26. 26. Uri URI = Uri.parse("https://android.com/"); CustomTabsIntent tabsIntent = new CustomTabsIntent.Builder().build(); String package = CustomTabsHelper.getPackageNameToUse(this); tabsIntent.intent.setPackage(package); tabsIntent.launchUrl(this, URI); Setup Chrome Custom Tabs
  27. 27. app to customize how Chrome looks and feels
  28. 28. Toolbar color Toolbar close button Enter and exit animations Add actions to the toolbar Add overflow menu UI customization
  29. 29. CustomTabsIntent tabsIntent = new CustomTabsIntent.Builder() .setShowTitle(true) .setToolbarColor(0x77C159) .setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left) .setExitAnimations(this, R.anim.slide_in_left, R.anim.slide_out_right) .setCloseButtonIcon(back) .setActionButton(droid, "android", getActionButtonIntent()) .addMenuItem("android menu", getActionButtonIntent()) .build(); String package = CustomTabsHelper.getPackageNameToUse(this); tabsIntent.intent.setPackage(package); tabsIntent.launchUrl(this, Uri.parse("https://android.com/")); UI customization
  30. 30. UI Customize
  31. 31. No Customize UI Customize
  32. 32. making the transition from app to web content fast and seamless
  33. 33. optimized to load faster than WebViews and traditional methods of launching Chrome
  34. 34. http://3.bp.blogspot.com/-bsqTJQg_KG8/VecqcRS1SnI/ AAAAAAAACAM/nclxZZ1bOxA/s1600/CCT_Large%2B2.gif
  35. 35. Warm up / Pre-fetch
  36. 36. Use Chrome features Ssecurity Saved passwords Data Saver Shared cookie more features…
  37. 37. Chrome Custom Tabs can replace the WebView?
  38. 38. NO!!!!!!!!!!
  39. 39. Why?
  40. 40. Why? 細かいHandlingができない + 秘伝のWebChromeClient + 秘伝のWebViewClient + JavaScriptInterface
  41. 41. Why? 細かいHandlingができない + 秘伝のWebChromeClient + 秘伝のWebViewClient + JavaScriptInterface
  42. 42. Why? CustomTabsCallback#onNavigatio nEventメソッドでページ(Tab)を 読み込み開始・終了、閉じた・開いた くらいのことなら通知してくれる
  43. 43. Best Practices for Custom Tabs https://medium.com/google-developers/best-practices-for- custom-tabs-5700e55143ee
  44. 44. Android Intents with Chrome
  45. 45. Android Intents with Chrome ChromeがIntent SyntacなURLを 解釈してIntentを実行する
  46. 46. Android Intents with Chrome <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="mercariapp" android:host="run:" /> </intent-filter>
  47. 47. Android Intents with Chrome <a href= “intent://run/#Intent; scheme=mercariapp;package=com.mercariapp.mercari; end”> Run Mercari </a>
  48. 48. Android Intents with Chrome https://developer.chrome.com/ multidevice/android/intents
  49. 49. Debugging WebViews
  50. 50. Debugging WebViews webView.setWebContentsDebuggingEnabled(true); Android 4.4 以上
  51. 51. Debugging WebViews
  52. 52. Debugging WebViews
  53. 53. Web App Manifest
  54. 54. Define the metadata associated with your web application in a JSON-based manifest.
  55. 55. name icons display theme_color background_color etc. Manifest and its members
  56. 56. { "name": "Google I/O 2015", "short_name": "I/O 2015", "display": "standalone", "icons": [{ "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" },…..], "gcm_sender_id": "608394197750", "gcm_user_visible_only": true } Manifest by Google IO 2015 https://events.google.com/io2015/manifest.json
  57. 57. <link rel="manifest" href="manifest.json"> Manifest by Google IO 2015 view-source:https://events.google.com/io2015/
  58. 58. manifest HTTPS Service Worker visited your site twice over two separate days during the course of two weeks App Install Banner
  59. 59. App Install Banner
  60. 60. Web Push Notification(GCM) Cache API Background Sync API etc. Service Worker
  61. 61. スマートフォン体験を一歩先へ プログレッシブウェブアプリの作り方 https://docs.google.com/presentation/d/ 1VcXsKDaCUpf2SS35WNcrKslkK6PcXxWsnhcKiLfWCXs/ edit#slide=id.gf39949af9_0_0 by Google Eiji Kitamura
  62. 62. ??
  63. 63. Web App Manifest Ⅱ Web Technology
  64. 64. but
  65. 65. Native app install banner
  66. 66. similar to Web app install banners, but instead of adding to the home screen will let the user install your native app without leaving your site Native app install banner
  67. 67. You have a web app manifest file Site is served over HTTPS The user has visited your site twice over two separate days during the course of two weeks Criteria to Show the Banner
  68. 68. chrome://flags/#bypass-app-banner- engagement-checks Testing flag
  69. 69. { "name": "Native app install banner Sample", "short_name": "Native app install banner Sample", "icons": [{ "src": "image/ic_android_black_48dp.png", "sizes": "144x144", "type": "image/png" }], "prefer_related_applications": true, "related_applications": [{ "platform": "play", "id": "com.kouzoh.mercari" }] } Native app install banner manifest.json
  70. 70. Web App Manifest https://www.w3.org/TR/appmanifest/ 草案(Working Draft)
  71. 71. Native app Install Banners https://developers.google.com/web/fundamentals/engage- and-retain/app-install-banners/native-app-install
  72. 72. App Stream
  73. 73. when Google finds in-app content that points to a mobile app you don’t already have installed, it will offer you the option to “stream” the app instead.
  74. 74. To run the application in the streaming when application don’t have installed.
  75. 75. Streaming apps??
  76. 76. Very cool!!!!!!!!!!
  77. 77. http://3.bp.blogspot.com/-2Ats2zhc0HQ/Vkyq3JlcEiI/AAAAAAABBrA/hcfu4p02Fn4/ s1600/app-stream-w-dots.gif
  78. 78. “This uses a new cloud-based technology that we’re currently experimenting with” http://insidesearch.blogspot.jp/2015/11/new-ways-to-find-and- stream-app-content.html
  79. 79. VM Streaming Event(tap,scroll) Streaming apps??
  80. 80. New ways to find (and stream) app content in Google Search http://insidesearch.blogspot.jp/2015/11/new-ways-to-find-and- stream-app-content.html
  81. 81. Trial Run Ads
  82. 82. App ad format that lets a user play a game for up to 60 seconds by streaming content from the app before downloading
  83. 83. http://2.bp.blogspot.com/-9v_0t2rKlzM/Vl-wzBxLs8I/AAAAAAAACGo/hU-Nndu-AIg/ s1600/Trial%2BRun%2BAd%2Bgif%2Bfor%2BSGN.gif
  84. 84. Introducing new interactive ads to drive app installs http://adwords.blogspot.jp/2015/12/trial-run-ads-interactive- interstitials-beta.html
  85. 85. Chrome Platform Status https://www.chromestatus.com/features
  86. 86. ChromeとAndroidの 今後について
  87. 87. Thanks!! Enjoy After Party!!

×