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

Web技術勉強会
Ryuichi TANAKA/@mapserver2007/summer-lights.jp
Google Cloud Messaging for Chrome入門

GCM(Google Cloud Messaging)とは
デバイスに対してPUSH通知するGoogleの技術。
Androidではすでに実装済み
ついにChromeでも！
GCMを使うと、
WebアプリからPUSH通知できる。仕組みは全部Google任せで
アプリの機能だけにフォーカスすればいい。アプリの機能だけにフォーカスすればいい。
AndroidやiPhoneだと普通にできるが、ブラウザだと…。
Chrome限定だがブラウザPUSHできる。
ポーリングやロングポールはどうしてもやりたくなかったので待
望の仕組み。

PUSHできて嬉しいこと
会社のブロックを通過できる(はず)
2ch、Twitter、Evernoteなど使用禁止。見ることすらできない。
まあ見る方法(限定的に)はあるんだけど…。
とりあえずやってみたかったのが、Twitterのリアルタイム監視
iPhoneとかならTheWorldとかあるけどブラウザでさり気なく監視し
たい。
それ意外にも通知系アプリならなんでもいける

PUSHするまでの準備
Chromeをインストールする
当然だけど
Chrome Extentionを作る
拡張を経由して通知するので必須。初回登録時のみ5ドル必要。
OAuth2.0の設定をする
アクセスキーなどを作るアクセスキーなどを作る

手順1：ChromeExtension作成
内容はChromeに通知ウインドウを出すだけ。
作るファイル
manifest.json
test.js

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"]
}
}

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);

manifest.json、test.jsをzip圧縮する。
ファイル名はなんでもOK
作成は以上で完了。

手順2：ChromeExtension登録
Chromeウェブストア
(https://chrome.google.com/webstore/developer/da
shboard)に登録する。
初回時に5ドル必要なので払ってください。
公開範囲は「テスターに公開」にする。
いきなり全体に公開するのは避けるいきなり全体に公開するのは避ける
テスターは自分を設定する

ChannelIdを取得する
Chrome拡張画面を開く
「デベロッパーモード」にする(右上チェックボックス)
ビューを調査をクリック

ChannelIdを取得する

手順3：Google APIs Console設定
Google APIs Console
(https://code.google.com/apis/console)。
APIのOauth認証の設定を行う

「Create」で作成

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を取得する

「Service」で「Google Cloud Messaging for
Chrome」を「ON」にする

手順4：Oauth 2.0 Playground設定
Oauth 2.0
Playground(https://developers.google.com/oauthpla
yground/) に遷移
右上の設定ボタンから「Oauth Client ID」「Oauth
Client secret」を設定

Step1 Select & authorize APIs
https://www.googleapis.com/auth/gcm_for_chrome を入
力して「Authorize APIs」をクリック

Step2 Exchange authorization code for tokens
Exchange authorization code for tokensボタンをクリックし
てRefresh tokenとAccess tokenを入手

手順5：通知プログラム作成
ここまでの設定で以下のキーを取得している
Refresh token
ClientID
Client secret
channelId

アクセストークンは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']

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}"
}
)

今後の予定
UIの作りこみ
ChromeのNotificationはシンプル過ぎるので
サーバサイドからの通知処理
キーを渡して実行するだけなのですぐできるはず

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

Recommended

Recommended

More Related Content

More from 龍一田中

More from 龍一田中 (20)

Recently uploaded

Recently uploaded (9)