連載
» 2013年05月24日 17時00分 公開

Google Cloud Messaging for Chrome入門(1):Chrome拡張機能にpush通知をしよう (2/2)

[郷田 まり子,鳥人間]
前のページへ 1|2       

作ってみよう! Chrome拡張

 本記事は「既存のChrome拡張にGCM機能を追加する」という内容になっておりますので、ここで、下地となるごくシンプルなChrome拡張を作っておきます。

 「いままでGoogle Chrome Extensionの開発をやったことがないけれど、GCM for Chromeのサービス開始を機に通知機能付きの拡張を作ってみたい!」という方も、この節を読んで開発の流れを把握してください。

 Google Chrome Extensionは、HTMLやJavaScriptを使い、Web開発とほぼ同じような気分で作ることができます。Googleアカウントを持っていれば、zipで固めてアップロードするだけで、Chrome Web Storeで拡張を公開することができます。

 こちらの資料もせひ参考にしてください。

ディレクトリを準備する

 まず、空のディレクトリを用意します。その中に、次のような構造でファイルを配置します。

HelloGCM/
	manifest.json
	index.html
	background.html
	src/
		index.js
		background.js

manifest.jsonを書く

 manifest.jsonは、拡張の基本的な設定を記述するファイルです。

{
  "name" : "Hello GCM", //……(1)
  "version" : "1.0.0", //……(2)
  "manifest_version": 2, //……(3)
  
  "description" : "GCM for Chrome Extension Demo", //……(4)
  
  "browser_action": { //……(5)
      "default_title": "Hello, GCM!",
      "default_popup": "index.html"
  },
  "background": { //……(6)
      "page":"background.html"
  },
  "permissions" : ["background"] //……(7)
}
manifest.json

 (1) は、拡張の名前、(4) は拡張の説明文です。ここに記述した文言は、拡張管理画面(chrome://extensions/ )やChrome Web Storeに表示されます。

 (2) は、拡張のバージョンです。Chrome Web Storeでアップデートする場合は、このバージョンを前のものよりも上げなければなりません。

 (3) は、マニフェストバージョンです。これから開発をする場合は、最新のバージョンである“2”を選んでください(旧バージョンはまもなく廃止されます)。

 いままでManifest version1で開発をしたことのある方は、Manifest version 2に移行することをおすすめします。

 (5) の“browser_action”は、Chromeのツールバーに表示されるアイコンをクリックしたときに表示される小さなポップアップ画面を定義しています。

 “default_title”プロパティで、アイコンにマウスオーバーしたときに表示される文字列を指定することができます。

 “default_popup”プロパティでは、ポップアップ画面の中に表示されるHTMLのパスを指定します。

(拡張のポップアップの一例

 (6) は、パーミッションです。Chromeに搭載されている機能は細分化されており、そのうちのどれを使うことができるかを指定します。また、XHRでアクセス可能なURLもここで指定します。

 ユーザは、拡張をインストールする際、その拡張の要求するパーミッションを確認することができます。パーミッションは、複数指定することができます。

 ここでは、バックグラウンドページ(後述)を利用するために“background”パーミッションを指定しています。

 (7) バックグラウンドページのパスです。「バックグラウンドページ」とは、ポップアップや設定画面、Webサイトにアタッチされた拡張のスクリプトなどが実行されていない間でも常に陰で動き続けるというものです。

ポップアップの実装

 ポップアップには、ごくシンプルなHTMLが表示されるようにします。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="./src/index.js"></script>
		<title>Hello GCM for Chrome!</title>
	</head>
	<body style="width:480px;height:240px;">
		<h1>
			Hello GCM for Chrome!
		</h1>
	</body>
</html>
src/index.js
function init () {
	console.log("Hello Chrome Extention!");
}
window.onload = init;
index.html

 実際には、次のように表示されます。

 なお、ポップアップをデバッグするときは、アイコンの上からコンテキストメニューを出して“Inspect Popup”を選択してください。

バックグラウンドページの実装

<script type="text/javascript" src="src/background.js"></script>
background.html
console.log("background.js is working!");
src/background.html

 これで、ごく簡単な拡張ができました。

インストール

 ローカルで開発中の拡張を実際にChromeにインストールするには、右上のアイコンから”Tools > Extensions”を開きます。

 もしくは、URL欄に

chrome://extensions

 と入力します。

 拡張管理画面が開きますので、右上の“Developer mode”をチェックし、“Load unpacked extension……”ボタンをクリックします。

 インストールが済むと、拡張一覧の中に“Hello GCM”が表示されます。

 忙しい方のために、zipで固めたものをご用意しました。ダウンロードして解凍してください。次の回から先を読みながらすぐにGCM for Chromeを体験できます。

★Download:忙しい人のためのHello Chrome Extension.zip

著者プロフィール

郷田 まり子(ごうだ まりぽ)

株式会社鳥人間

1980年東京生まれ、プログラマ。人工衛星のトラッキングから面白ガジェットの開発まで手広くカバーする。

エンジニア夫婦による会社・株式会社鳥人間にて、ソフトやハードの開発、ときどき技術書の執筆を行っている。


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。