Enviar búsqueda
Cargar
Web技術勉強会 20130525 - Google Cloud Messaging入門
•
1 recomendación
•
1,418 vistas
龍一 田中
Seguir
Google Cloud Messagingの紹介とサンプルの作成について。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 30
Recomendados
MOONBlockでプログラミング体験
MOONBlockでプログラミング体験
Jun Shimura
Osm trackerの使い方
Osm trackerの使い方
Nozomi Ichikawa
Web技術勉強会 第37回
Web技術勉強会 第37回
龍一 田中
Web技術勉強会 20110723
Web技術勉強会 20110723
龍一 田中
Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
Web技術勉強会 20110611
Web技術勉強会 20110611
龍一 田中
Web技術勉強会 20111112
Web技術勉強会 20111112
龍一 田中
Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
Recomendados
MOONBlockでプログラミング体験
MOONBlockでプログラミング体験
Jun Shimura
Osm trackerの使い方
Osm trackerの使い方
Nozomi Ichikawa
Web技術勉強会 第37回
Web技術勉強会 第37回
龍一 田中
Web技術勉強会 20110723
Web技術勉強会 20110723
龍一 田中
Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
Web技術勉強会 20110611
Web技術勉強会 20110611
龍一 田中
Web技術勉強会 20111112
Web技術勉強会 20111112
龍一 田中
Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
Web技術勉強会 20110528
Web技術勉強会 20110528
龍一 田中
Web技術勉強会 20110514
Web技術勉強会 20110514
龍一 田中
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
Web技術勉強会 第38回
Web技術勉強会 第38回
龍一 田中
Web技術勉強会 第34回
Web技術勉強会 第34回
龍一 田中
Web技術勉強会 第33回
Web技術勉強会 第33回
龍一 田中
Web技術勉強会 第31回
Web技術勉強会 第31回
龍一 田中
Web技術勉強会 第30回
Web技術勉強会 第30回
龍一 田中
Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
Web技術勉強会 第28回
Web技術勉強会 第28回
龍一 田中
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
Web技術勉強会23回目
Web技術勉強会23回目
龍一 田中
Web技術勉強会 第19回
Web技術勉強会 第19回
龍一 田中
Web技術勉強会 第18回
Web技術勉強会 第18回
龍一 田中
Web技術勉強会12回目
Web技術勉強会12回目
龍一 田中
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
Más contenido relacionado
Más de 龍一 田中
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
Web技術勉強会 20110528
Web技術勉強会 20110528
龍一 田中
Web技術勉強会 20110514
Web技術勉強会 20110514
龍一 田中
Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
Web技術勉強会 第38回
Web技術勉強会 第38回
龍一 田中
Web技術勉強会 第34回
Web技術勉強会 第34回
龍一 田中
Web技術勉強会 第33回
Web技術勉強会 第33回
龍一 田中
Web技術勉強会 第31回
Web技術勉強会 第31回
龍一 田中
Web技術勉強会 第30回
Web技術勉強会 第30回
龍一 田中
Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
Web技術勉強会 第28回
Web技術勉強会 第28回
龍一 田中
Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
Web技術勉強会23回目
Web技術勉強会23回目
龍一 田中
Web技術勉強会 第19回
Web技術勉強会 第19回
龍一 田中
Web技術勉強会 第18回
Web技術勉強会 第18回
龍一 田中
Web技術勉強会12回目
Web技術勉強会12回目
龍一 田中
Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
Más de 龍一 田中
(20)
WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20110528
Web技術勉強会 20110528
Web技術勉強会 20110514
Web技術勉強会 20110514
Web技術勉強会 20100925
Web技術勉強会 20100925
Web技術勉強会 20100424
Web技術勉強会 20100424
Web技術勉強会 第38回
Web技術勉強会 第38回
Web技術勉強会 第34回
Web技術勉強会 第34回
Web技術勉強会 第33回
Web技術勉強会 第33回
Web技術勉強会 第31回
Web技術勉強会 第31回
Web技術勉強会 第30回
Web技術勉強会 第30回
Web技術勉強会 第29回
Web技術勉強会 第29回
Web技術勉強会 第28回
Web技術勉強会 第28回
Web技術勉強会 第26回
Web技術勉強会 第26回
Web技術勉強会 第25回
Web技術勉強会 第25回
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会 第19回
Web技術勉強会 第19回
Web技術勉強会 第18回
Web技術勉強会 第18回
Web技術勉強会12回目
Web技術勉強会12回目
Web技術勉強会11回目
Web技術勉強会11回目
Web技術勉強会 20130525 - Google Cloud Messaging入門
1.
Web技術勉強会 Ryuichi TANAKA/@mapserver2007/summer-lights.jp Google Cloud
Messaging for Chrome入門
2.
GCM(Google Cloud Messaging)とは デバイスに対してPUSH通知するGoogleの技術。 Androidではすでに実装済み ついにChromeでも! GCMを使うと、 WebアプリからPUSH通知できる。仕組みは全部Google任せで アプリの機能だけにフォーカスすればいい。アプリの機能だけにフォーカスすればいい。 AndroidやiPhoneだと普通にできるが、ブラウザだと…。 Chrome限定だがブラウザPUSHできる。 ポーリングやロングポールはどうしてもやりたくなかったので待 望の仕組み。
3.
PUSHできて嬉しいこと 会社のブロックを通過できる(はず) 2ch、Twitter、Evernoteなど使用禁止。見ることすらできない。 まあ見る方法(限定的に)はあるんだけど…。 とりあえずやってみたかったのが、Twitterのリアルタイム監視 iPhoneとかならTheWorldとかあるけどブラウザでさり気なく監視し たい。 それ意外にも通知系アプリならなんでもいける
4.
PUSHするまでの準備 Chromeをインストールする 当然だけど Chrome Extentionを作る 拡張を経由して通知するので必須。初回登録時のみ5ドル必要。 OAuth2.0の設定をする アクセスキーなどを作るアクセスキーなどを作る
5.
手順1:ChromeExtension作成 内容はChromeに通知ウインドウを出すだけ。 作るファイル manifest.json test.js
6.
手順1:ChromeExtension作成 manifest.json { "manifest_version": 2, "name": "GCM
Test", "description": "It's test extension", "version": "1.0.1", "permissions": ["permissions": [ "pushMessaging", "notifications" ], "background": { "scripts": ["test.js"] } }
7.
手順1:ChromeExtension作成 test.json chrome.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.
手順1:ChromeExtension作成 manifest.json、test.jsをzip圧縮する。 ファイル名はなんでもOK 作成は以上で完了。
9.
手順2:ChromeExtension登録 Chromeウェブストア (https://chrome.google.com/webstore/developer/da shboard)に登録する。 初回時に5ドル必要なので払ってください。 公開範囲は「テスターに公開」にする。 いきなり全体に公開するのは避けるいきなり全体に公開するのは避ける テスターは自分を設定する
10.
手順2:ChromeExtension登録
11.
手順2:ChromeExtension登録
12.
手順2:ChromeExtension登録 ChannelIdを取得する Chrome拡張画面を開く 「デベロッパーモード」にする(右上チェックボックス) ビューを調査をクリック
13.
手順2:ChromeExtension登録 ChannelIdを取得する
14.
手順3:Google APIs Console設定 Google
APIs Console (https://code.google.com/apis/console)。 APIのOauth認証の設定を行う
15.
手順3:Google APIs Console設定 「Create」で作成
16.
手順3:Google APIs Console設定 API
Access→Create an Oauth 2.0 client ID branding informationに入力する Application Typeは「Web Application」を選択 Authrorized Redirect URLs→More optionsを選択 https://developers.google.com/oauthplayground を入力 ClientID、Client secretを取得するClientID、Client secretを取得する
17.
手順3:Google APIs Console設定
18.
手順3:Google APIs Console設定 「Service」で「Google
Cloud Messaging for Chrome」を「ON」にする
19.
手順4:Oauth 2.0 Playground設定 Oauth
2.0 Playground(https://developers.google.com/oauthpla yground/) に遷移 右上の設定ボタンから「Oauth Client ID」「Oauth Client secret」を設定
20.
手順4:Oauth 2.0 Playground設定
21.
手順4:Oauth 2.0 Playground設定 Step1
Select & authorize APIs https://www.googleapis.com/auth/gcm_for_chrome を入 力して「Authorize APIs」をクリック
22.
手順4:Oauth 2.0 Playground設定
23.
手順4:Oauth 2.0 Playground設定
24.
手順4:Oauth 2.0 Playground設定 Step2
Exchange authorization code for tokens Exchange authorization code for tokensボタンをクリックし てRefresh tokenとAccess tokenを入手
25.
手順4:Oauth 2.0 Playground設定
26.
手順5:通知プログラム作成 ここまでの設定で以下のキーを取得している Refresh token ClientID Client secret channelId
27.
手順5:通知プログラム作成 アクセストークンは1時間で使用不可になるので実行ごと にとるようにすると良い request = { 'client_id'
=> client_id, 'client_secret' => client_secret, 'refresh_token' => refresh, 'grant_type' => 'refresh_token''grant_type' => 'refresh_token' } client = HTTPClient.new client.ssl_config.verify_mode = nil res = client.post( 'https://accounts.google.com/o/oauth2/token', request ) access_token = JSON.parse(res.body)['access_token']
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.
手順5:通知プログラム作成
30.
今後の予定 UIの作りこみ ChromeのNotificationはシンプル過ぎるので サーバサイドからの通知処理 キーを渡して実行するだけなのですぐできるはず