ChromeExtensionを使ってGoogleCalendarに追加項目を設定してみる

ご注意

この記事は 2014年12月12日 に書かれたものです。内容が古い可能性がありますのでご注意ください。

みなさん、こんにちは。

今回の記事では、Chrome ExtensionからGoogle CalendarのUIを操作してみたいと思います。

ご存じの方も多いかと思いますが、Chrome Extensionとはブラウザを拡張して、より便利に使えるようにするものです。また、主にHTML/CSS/Javascript（JQuery）の知識があればChrome Extensionを開発することが出来ます。今回詳しい説明は省略しますが、概要や作り方などは以下の公式ドキュメントが詳しいので参考にしてみてください。

OverView: https://developer.chrome.com/extensions/overview
Getting Started Tutorial: https://developer.chrome.com/extensions/getstarted

では早速、やってみましょう。

1 ChromeExtensionからGoogleCalendarのUIを操作
2 まとめ

ChromeExtensionからGoogleCalendarのUIを操作

今回はGoogleカレンダーでイベントを登録する際に何らかのプロジェクトと紐付けたいというケースを想定しています。結果的には以下のようなUIになります。

右上のセレクトボックスでプロジェクトを選択し、選択した内容によって「説明」のテキストエリアにそのプロジェクトのIDを書き込み、保存する、というシンプルなものです。
※以下のコード例では特に明記はありませんがJQueryを使用しています。

1.マニフェストファイルの作成

まず、Chrome Extensionとして動作させるためにはマニフェストファイルと呼ばれるものが必要になります。その中身は例えば、calendar.jsという（任意の）Javascriptコードを特定のURL（https://www.google.com/calendar/render/*）で動作させるには、manifest.jsonという名称のファイルに以下のように記述する必要があります。

“content_scripts”:[
{“matches”:[“https://www.google.com/calendar/render/*”],
“js”:[“js/jquery-1.11.1.min.js”,”calendar.js”]
}
]

以下、calendar.jsの中身を説明していきます。

2.セレクトボックスの追加

次に、GoogleCalendarの予定詳細ページに追加項目を設定していきます。今回は”予定のタイトル”を入力するテキストボックスの右側に、プロジェクトを選択するセレクトボックスを追加します。

まず、上記の赤枠部分のHTMLは以下のようになっています。

[html]
<div class="ui-sch ep-title"><input id=":40" name=":40" title="予定のタイトル" type="text" class="textinput"></div>
[/html]

ここで、<div>はブロック要素なので、まずCSSでdisplay:inlineを指定します。その後< select >の中身を作成し、最後にdiv要素のセレクタに作成したセレクトボックスをappendしています。

[js]
var title = $(".ep-title");
var block = $(".ep-title *");
block.css("display", "inline");var select = $("<select style="float: right;">
<option value="-1">–プロジェクト・業務を選択–</option>
</select>");
var projects = [{name:”Project1”,id:”1111”}, {name:”Project2”, id:”2222”}, {name:”Project3”, id:”3333”}];
for (var i = 0; i < projects.length; i++) {
var opt = $("" + projects[i].name + "");
select.append(opt);
}
…
title.append(select);
[/js]

結果、テキストボックスの右側にセレクトボックスを設置することが出来ました。

3.テキストエリアへの書き込み

次に、選択したセレクトボックスに応じたプロジェクトのIdを下記の赤枠部分に書き込む部分を説明します。

ソースは以下のようになります。
動作としては、

書き込むテキストエリアをセレクタとして指定する
対象のシンボル（今回で言うと”$()”）とマッチしたら中身を書き換える
changeイベントを発生させる

です。

[js]
var description = selectDescription(); // セレクタを指定
select.change(function (event) {　　　//セレクトボックスの値が変わったら
var currentValue = description.val();
if (select.val() == "-1") {
currentValue = currentValue.replace(reg, "");
currentValue = currentValue.replace(br, "");
} else {
if (currentValue.match(reg)) {
currentValue = currentValue.replace(reg, "$(" + select.val() + ")");
} else {
currentValue = "$(" + select.val() + ")\n" + currentValue;
}
}
description.val(”);
description.val(currentValue);　　//テキストエリアのvalueを書き換える
var e = document.createEvent("Event");
e.initEvent(‘change’, true, true);
description[0].dispatchEvent(e);　　//イベントを発生させる・・①
});

function selectDescription(){
var description = $("div[id*=descript] div textarea");
if (!description[0]) {
description = $("div[id*=descript] div div");
description.click();
description = $("div[id*=descript] div textarea")
}

return description;
}
[/js]

1つハマった点としては、単純にテキストエリアのValueに値を入れ、保存を押しただけでは内容が反映されなかった点です。原因としては通常通りテキストボックスに書き込んだ時には呼ばれているchangeイベントが呼ばれていないから、であるようだったので、上記ソース①の箇所のように、changeイベントの作成から呼び出しまでをプログラムの中で行うようにして、保存時に内容が反映されるようにしました。
今回は動作がクライアント内で完結していますが、サーバー側と連携することで、動的にプロジェクトを追加したり、内容をデータベースに保存するといったことも可能です。

まとめ

今回はChrome ExtensionによりGoogle Calendarにカスタム項目を追加した例を紹介しました。
作成したChromeExtensionは今回で言うとmanifest.jsonとcalendar.jsの２つのファイルをフォルダに入れ、ブラウザの「設定」→「拡張機能」→「パッケージ化されていない拡張機能を読み込む」からフォルダを指定してあげることで自分の環境でのみ動作するようになります。また、一般公開は以下のURLから可能です。（初回のみ$5かかります）。

https://chrome.google.com/webstore/developer/dashboard

冒頭でも述べましたが、Calendarに限らずChrome Extensionを使うことによってブラウザやWebページを簡単に拡張し、より便利に使うことが可能です。もし興味をお持ちになった方はhttps://developer.chrome.com/extensions/getstartedを参考に作成してみてはいかがでしょうか？