ご注意
この記事は 2014年12月12日 に書かれたものです。内容が古い可能性がありますのでご注意ください。
目次
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”] } ] |
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イベントを発生させる
1つハマった点としては、単純にテキストエリアのValueに値を入れ、保存を押しただけでは内容が反映されなかった点です。原因としては通常通りテキストボックスに書き込んだ時には呼ばれているchangeイベントが呼ばれていないから、であるようだったので、上記ソース①の箇所のように、changeイベントの作成から呼び出しまでをプログラムの中で行うようにして、保存時に内容が反映されるようにしました。
今回は動作がクライアント内で完結していますが、サーバー側と連携することで、動的にプロジェクトを追加したり、内容をデータベースに保存するといったことも可能です。
