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の
過去・現在・未来 ver 0.1
kyobashi.dex #2
About me
• Shinobu Okano(@operandoOS)
• Mercari, Inc.
• 変なものいっぱい作ってます
• https://github.com/operando
DroidKaigi 2016
• みんな来てね!
• https://droidkaigi.github.io/2016/
DroidKaigi 2016
• 2日間セッションします!
• Android Dev Tools Knowledge
• 2/18 14:00-14:50
• ChromeとAndroidの過去・現在・未来
• 2/19 16:30-17:...
shinobu.apk #1
• パネルディスカッション・一般参加募集中!
• http://shinobu-apk.connpass.com/event/
24921/
shinobu.apk #1
• Shinobu Okanoと愉快な仲間たちが繰り広げるファン
タジーな勉強会
• shibuya.apkという、渋谷を中心に活動するAndroidア
プリ開発者コミュニティの名前をtypoしたことによっ
て生ま...
本題
ちなみに
今日の発表DroidKaigiの
前フリだからね?
Chrome??
• Web Browser developed by Google
• Blink Rendering Engine
• V8 JavaScript Engine
Chromium??
• open-source browser project that aims to
build a safer, faster, and more stable way for
all Internet users to...
Chromeの技術を活用したアプリ開発
• Chrome Custom Tabs
• Web App Manifest
• Service WorkersとWeb Push Notifications
Chromeの技術を活用したアプリ開発
• Chrome Custom Tabs
• Web App Manifest
• Service WorkersとWeb Push Notifications
Web App Manifest
• Webページに関連するメタデータを記述したjson
ファイルをサーバに置くことで、それらの情報を
Browserなど解釈し、Service Workerなどでプッ
シュ通知やHomeに追加が実現できる
• ...
Web App Manifest
https://www.w3.org/TR/appmanifest/
Web App Manifest
• 雑に言うと、このWebページはこーゆーもんやで
• Homeに追加するならアイコンはこれ使ってくれ!
• Push使いたいで!
• アプリもあるから良かったらインストールして!
• みたいな感じ...
あれ?Webの話じゃね?
Android関係なくね?
Native app install banner
• Webにネイティブアプリのインストールバナーを
出すことができる
• ネイティブアプリ = Android Application
• 自身がリリースしたアプリ以外のインストールバナ
ーも...
Native app install bannerを出す条件
• You have a web app manifest file
• short_nameと144x144のpng iconをtype image/
pngとして書いておく
• Y...
Native app install banner
• manifest.jsonに以下のような書いてあげる
{
"short_name": "Web Application Manifest Sample",
"name": "Web App...
Native app install banner
https://github.com/operando/web-
application-manifest-sample
雑なサンプルはここ
Native app install banner
https://developers.google.com/web/updates/
2015/03/increasing-engagement-with-app-
install-banne...
DEMO
Native app install banner
https://dl.dropboxusercontent.com/u/97368150/
index.html
Web Push Notifications
• WebからでもPush通知ができる
• Google Cloud Messaging(GCM)のプッシュ通知を
Webアプリで受け取ることができる
• Chrome for Androidでは、C...
Web Push Notifications Technology
• Service Worker
• https://www.w3.org/TR/service-workers/
• Push API
• https://w3c.github...
manifest.json - Web Push Notifications
{
"short_name": "Web Application Manifest Sample",
"name": "Web Application Manifest...
Web Push Notifications
https://github.com/operando/push-api-sample
雑なサンプルはここ
DEMO
Web Push Notifications
https://operando.github.io/push-api-sample/
App Stream
• 今調査中...
• に包まれてる
• http://www.itmedia.co.jp/news/articles/
1511/19/news074.html
Progressive Web Apps
• アプリっぽい快適に動作をするWeb App
• ....
続きは、Droidkaigiで
Thanks!
Upcoming SlideShare
Loading in …5
×

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

kyobashi.dex #2
http://kyobashi-android.connpass.com/event/23975/

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

  • Be the first to comment

  • Be the first to like this

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

  1. 1. ChromeとAndroidの 過去・現在・未来 ver 0.1 kyobashi.dex #2
  2. 2. About me • Shinobu Okano(@operandoOS) • Mercari, Inc. • 変なものいっぱい作ってます • https://github.com/operando
  3. 3. DroidKaigi 2016 • みんな来てね! • https://droidkaigi.github.io/2016/
  4. 4. DroidKaigi 2016 • 2日間セッションします! • Android Dev Tools Knowledge • 2/18 14:00-14:50 • ChromeとAndroidの過去・現在・未来 • 2/19 16:30-17:00
  5. 5. shinobu.apk #1 • パネルディスカッション・一般参加募集中! • http://shinobu-apk.connpass.com/event/ 24921/
  6. 6. shinobu.apk #1 • Shinobu Okanoと愉快な仲間たちが繰り広げるファン タジーな勉強会 • shibuya.apkという、渋谷を中心に活動するAndroidア プリ開発者コミュニティの名前をtypoしたことによっ て生まれたもの • 真面目に言うと、有志を募ってAndroidについてパネ ルディスカッションをする勉強会
  7. 7. 本題
  8. 8. ちなみに
  9. 9. 今日の発表DroidKaigiの 前フリだからね?
  10. 10. Chrome?? • Web Browser developed by Google • Blink Rendering Engine • V8 JavaScript Engine
  11. 11. Chromium?? • open-source browser project that aims to build a safer, faster, and more stable way for all Internet users to experience the web
  12. 12. Chromeの技術を活用したアプリ開発 • Chrome Custom Tabs • Web App Manifest • Service WorkersとWeb Push Notifications
  13. 13. Chromeの技術を活用したアプリ開発 • Chrome Custom Tabs • Web App Manifest • Service WorkersとWeb Push Notifications
  14. 14. Web App Manifest • Webページに関連するメタデータを記述したjson ファイルをサーバに置くことで、それらの情報を Browserなど解釈し、Service Workerなどでプッ シュ通知やHomeに追加が実現できる • メタデータを記述したjsonファイル = manifest.json
  15. 15. Web App Manifest https://www.w3.org/TR/appmanifest/
  16. 16. Web App Manifest • 雑に言うと、このWebページはこーゆーもんやで • Homeに追加するならアイコンはこれ使ってくれ! • Push使いたいで! • アプリもあるから良かったらインストールして! • みたいな感じ...
  17. 17. あれ?Webの話じゃね? Android関係なくね?
  18. 18. Native app install banner • Webにネイティブアプリのインストールバナーを 出すことができる • ネイティブアプリ = Android Application • 自身がリリースしたアプリ以外のインストールバナ ーも出せる! • support for Chrome 44
  19. 19. Native app install bannerを出す条件 • You have a web app manifest file • short_nameと144x144のpng iconをtype image/ pngとして書いておく • Your site is served over HTTPS • The user has visited your site twice over two separate days during the course of two weeks.
  20. 20. Native app install banner • manifest.jsonに以下のような書いてあげる { "short_name": "Web Application Manifest Sample", "name": "Web Application Manifest 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" } ] }
  21. 21. Native app install banner https://github.com/operando/web- application-manifest-sample 雑なサンプルはここ
  22. 22. Native app install banner https://developers.google.com/web/updates/ 2015/03/increasing-engagement-with-app- install-banners-in-chrome-for-android いいサンプル!最高なサンプル!
  23. 23. DEMO Native app install banner https://dl.dropboxusercontent.com/u/97368150/ index.html
  24. 24. Web Push Notifications • WebからでもPush通知ができる • Google Cloud Messaging(GCM)のプッシュ通知を Webアプリで受け取ることができる • Chrome for Androidでは、Chromeが起動してなくて も通知を受信できる • manifest.jsonにPush通知に必要な情報を記載する
  25. 25. Web Push Notifications Technology • Service Worker • https://www.w3.org/TR/service-workers/ • Push API • https://w3c.github.io/push-api/ • Notifications API • https://notifications.spec.whatwg.org/
  26. 26. manifest.json - Web Push Notifications { "short_name": "Web Application Manifest Sample", "name": "Web Application Manifest Sample", "icons": [ { "src": "image/ic_android_black_48dp.png", "sizes": "144x144", "type": "image/png", "density": 3.0 } ], "start_url": "index.html", "gcm_sender_id": "39129296837" }
  27. 27. Web Push Notifications https://github.com/operando/push-api-sample 雑なサンプルはここ
  28. 28. DEMO Web Push Notifications https://operando.github.io/push-api-sample/
  29. 29. App Stream • 今調査中... • に包まれてる • http://www.itmedia.co.jp/news/articles/ 1511/19/news074.html
  30. 30. Progressive Web Apps • アプリっぽい快適に動作をするWeb App • ....
  31. 31. 続きは、Droidkaigiで
  32. 32. Thanks!

×