Successfully reported this slideshow.

Web技術勉強会 20130525 - Google Cloud Messaging入門

1,095 views

Published on

Google Cloud Messagingの紹介とサンプルの作成について。

Published in: Technology
  • Be the first to comment

Web技術勉強会 20130525 - Google Cloud Messaging入門

  1. 1. Web技術勉強会Ryuichi TANAKA/@mapserver2007/summer-lights.jpGoogle Cloud Messaging for Chrome入門
  2. 2. GCM(Google Cloud Messaging)とはデバイスに対してPUSH通知するGoogleの技術。Androidではすでに実装済みついにChromeでも!GCMを使うと、WebアプリからPUSH通知できる。仕組みは全部Google任せでアプリの機能だけにフォーカスすればいい。アプリの機能だけにフォーカスすればいい。AndroidやiPhoneだと普通にできるが、ブラウザだと…。Chrome限定だがブラウザPUSHできる。ポーリングやロングポールはどうしてもやりたくなかったので待望の仕組み。
  3. 3. PUSHできて嬉しいこと会社のブロックを通過できる(はず)2ch、Twitter、Evernoteなど使用禁止。見ることすらできない。まあ見る方法(限定的に)はあるんだけど…。とりあえずやってみたかったのが、Twitterのリアルタイム監視iPhoneとかならTheWorldとかあるけどブラウザでさり気なく監視したい。それ意外にも通知系アプリならなんでもいける
  4. 4. PUSHするまでの準備Chromeをインストールする当然だけどChrome Extentionを作る拡張を経由して通知するので必須。初回登録時のみ5ドル必要。OAuth2.0の設定をするアクセスキーなどを作るアクセスキーなどを作る
  5. 5. 手順1:ChromeExtension作成内容はChromeに通知ウインドウを出すだけ。作るファイルmanifest.jsontest.js
  6. 6. 手順1:ChromeExtension作成manifest.json{"manifest_version": 2,"name": "GCM Test","description": "Its test extension","version": "1.0.1","permissions": ["permissions": ["pushMessaging","notifications"],"background": {"scripts": ["test.js"]}}
  7. 7. 手順1:ChromeExtension作成test.jsonchrome.pushMessaging.getChannelId(false, function (response){console.log(response);}var messageCallback = function(message) {var notification = webkitNotifications.createNotification(var notification = webkitNotifications.createNotification(,Message,message.payload + message.subchannelId);notification.show();};chrome.pushMessaging.onMessage.addListener(messageCallback);
  8. 8. 手順1:ChromeExtension作成manifest.json、test.jsをzip圧縮する。ファイル名はなんでもOK作成は以上で完了。
  9. 9. 手順2:ChromeExtension登録Chromeウェブストア(https://chrome.google.com/webstore/developer/dashboard)に登録する。初回時に5ドル必要なので払ってください。公開範囲は「テスターに公開」にする。いきなり全体に公開するのは避けるいきなり全体に公開するのは避けるテスターは自分を設定する
  10. 10. 手順2:ChromeExtension登録
  11. 11. 手順2:ChromeExtension登録
  12. 12. 手順2:ChromeExtension登録ChannelIdを取得するChrome拡張画面を開く「デベロッパーモード」にする(右上チェックボックス)ビューを調査をクリック
  13. 13. 手順2:ChromeExtension登録ChannelIdを取得する
  14. 14. 手順3:Google APIs Console設定Google APIs Console(https://code.google.com/apis/console)。APIのOauth認証の設定を行う
  15. 15. 手順3:Google APIs Console設定「Create」で作成
  16. 16. 手順3:Google APIs Console設定API Access→Create an Oauth 2.0 client IDbranding informationに入力するApplication Typeは「Web Application」を選択Authrorized Redirect URLs→More optionsを選択https://developers.google.com/oauthplayground を入力ClientID、Client secretを取得するClientID、Client secretを取得する
  17. 17. 手順3:Google APIs Console設定
  18. 18. 手順3:Google APIs Console設定「Service」で「Google Cloud Messaging forChrome」を「ON」にする
  19. 19. 手順4:Oauth 2.0 Playground設定Oauth 2.0Playground(https://developers.google.com/oauthplayground/) に遷移右上の設定ボタンから「Oauth Client ID」「OauthClient secret」を設定
  20. 20. 手順4:Oauth 2.0 Playground設定
  21. 21. 手順4:Oauth 2.0 Playground設定Step1 Select & authorize APIshttps://www.googleapis.com/auth/gcm_for_chrome を入力して「Authorize APIs」をクリック
  22. 22. 手順4:Oauth 2.0 Playground設定
  23. 23. 手順4:Oauth 2.0 Playground設定
  24. 24. 手順4:Oauth 2.0 Playground設定Step2 Exchange authorization code for tokensExchange authorization code for tokensボタンをクリックしてRefresh tokenとAccess tokenを入手
  25. 25. 手順4:Oauth 2.0 Playground設定
  26. 26. 手順5:通知プログラム作成ここまでの設定で以下のキーを取得しているRefresh tokenClientIDClient secretchannelId
  27. 27. 手順5:通知プログラム作成アクセストークンは1時間で使用不可になるので実行ごとにとるようにすると良いrequest = {client_id => client_id,client_secret => client_secret,refresh_token => refresh,grant_type => refresh_tokengrant_type => refresh_token}client = HTTPClient.newclient.ssl_config.verify_mode = nilres = client.post(https://accounts.google.com/o/oauth2/token,request)access_token = JSON.parse(res.body)[access_token]
  28. 28. 手順5:通知プログラム作成Chromeに通知するサンプルコードdata = {:channelId => channelId,:subchannelId => "0",:payload => "hellow!"}response = client.post(https://www.googleapis.com/gcm_for_chrome/v1/messages,data.to_json,{Content-Type => "application/json",Authorization => "Bearer #{access_token}"})
  29. 29. 手順5:通知プログラム作成
  30. 30. 今後の予定UIの作りこみChromeのNotificationはシンプル過ぎるのでサーバサイドからの通知処理キーを渡して実行するだけなのですぐできるはず

×