本日は Google Calendar のマッシュアップがとても簡単に作れる Google 謹製のライブラリ CalVis のご紹介です。

この CalVis ライブラリを使えば、 Google Calendar Data API の JavaScript クライアントを自動的に利用して、上の画像のようなカレンダーをほんの僅かなコーディングで表示できます。 CGI などに頼らずクライアントサイドのみで動作するうえ、ログインフォームを表示してプライベート・カレンダーに対応したり、予定のクリックやマウスオーバーなどのイベント処理もできる、なかなかの優れもの。 Google Calendar マッシュアップを手早く作るには最適のライブラリです。

以下でご紹介しているとおり、使い方もとても簡単です。皆さんも CalViz を利用して、オリジナルの Web カレンダーを作ってみませんか！

まずは普通に公開カレンダーを表示してみましょう。例として Mozilla Developer's Calendar を表示するだけのサンプルを作ってみました。 HTML ファイルの中身は以下のとおりです。

たったこれだけの HTML ですが、カレンダーの表示、年月の変更、月間ビューと週間ビューの切り替えなど、カレンダーの基本操作はすべて行えます。こちらに実際に実行できるページを用意しましたので、ぜひお試しください。

それでは、記述内容を順番に説明していきます。まずは必要な JavaScript と CSS ファイルの読み込みです。

<link rel="stylesheet" type="text/css" href="http://gcal.appspot.com/calvis/default.css" />
<script src="http://gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

ここでは CalVis のデモサイトにあるスクリプトと CSS を読み込んでいますが、もちろん自サイトにそれらを用意することも可能です。その方法は後述します。

ちょっと順番が前後しますが、次は BODY 内の記述を見てみましょう。基本的には、カレンダー本体、各種ボタンなどを配置するための DIV 要素を用意するだけです。

<div style="width:800px; margin:0px auto;">
<div id="statusControlDiv" style="text-align:right;"></div>
<div id="navControlDiv" style="float:left;"></div></td>
<div id="viewControlDiv" style="float:right;"></div></td>
<div id="calendarBodyDiv" style="clear:both;"></div>
</div>

必須なのはカレンダー本体 (calendarBodyDiv) と年月の切り替えボタン (navControlDiv) のみですが、念のためすべて用意しておいたほうが無難です。不要なものは CSS で隠してしまえばよいでしょう。

あとは CalVis ライブラリを初期化すれば、ライブラリがすべての面倒を見てくれます。まずは onload イベントの登録。

window.onload = function() {
  calvis.ready(main);
};

calvis.ready は CalVis ライブラリの初期化メソッドで、必要なライブラリを読み込んだ後に引数で指定したコールバック関数を呼び出します。

コールバック関数の中では、最初にカレンダーオブジェクトを作成しています。

var calendar = new calvis.Calendar();

次に、先ほど作成した各 DIV 要素の ID をカレンダーオブジェクトに登録し、ついでに予定クリック時のイベントハンドラも指定します。ここでは予定クリック時の処理はとくに行っていないのですが、省略できないようなので空の関数にしています。

calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');
calendar.setEventCallback('click', function() {});

表示するカレンダーを登録します。 setPublicCalendar メソッドの引数は Google Calendar のカレンダー ID です。 Google Calendar に公開カレンダーを追加する際のプレビュー画面で、 URL の src パラメータとして指定されているものです。

calendar.setPublicCalendar('pdighgf028nmbjbrno8oed8vsg@group.calendar.google.com');

これで準備が整ったので、 render メソッドでカレンダーを表示します。

calendar.render();

以上で終了。あとは CalVis ライブラリが自動的に Google Calendar Data API を呼び出してカレンダーデータを取得し、カレンダーに表示してくれます。表示年月の指定、月間ビューと週間ビューの切り替えもすべてやってくれるので、とても簡単に本格的な Web カレンダーが実現できるのがおわかりいただけたかと思います。

CalVis には、単純にカレンダーを表示するだけでなく、予定のクリック時やマウスオーバー時に任意の処理を実行する機能があります。今度はそれを利用して、予定のクリック時に詳細情報を表示する機能を追加してみましょう。

方法はとても簡単で、さきほど空の関数を指定した setEventCallback メソッドに関数を渡すだけです。第一引数には "click" 以外に "mouseover" も指定でき、後者はポップアップによる情報の表示などに便利です。ここではクリック時に処理を行いたいので、第一引数に "click" を、第二引数に関数を指定します。

calendar.setEventCallback('click', onClickEvent);

コールバック関数には引数として google.gdata.calendar.CalendarEventEntry クラスのオブジェクトが渡されるので、そのメソッドを使って予定の各種情報を取り出すことができます。ここでは getTitle, getTimes, getContent を利用して予定の名前、開始時刻、説明を取得し、それをダイアログに表示しましょう。

function onClickEvent(event) {
  var title = event.getTitle().getText();
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();
  alert(title + '\n' + date + '\n' + content);
}

これだけで予定のクリックに対応することができます。先ほどのサンプルに上記の処理を加えたものがこちらにあります。

CalVis はプライベート・カレンダーの表示も可能です。ユーザー認証の処理も実装されているので、ほんの少しの追加コードでログインフォームの表示などすべての処理を行ってくれます。実際に試してみましょう。

GData JavaScript Client Library の認証プロセスでは、アプリケーションと同じドメインにあるダミー画像が必要です。 HTML にそのような画像がもともと含まれていれば自動的にそれが使われますが、もしないようなら、適当な画像を BODY 要素内のどこかに挿入しておきましょう。

<img src='dot.gif' style='position:absolute; top: -1000px;'>

dot.gif の内容はなんでもかまいません。 1x1 サイズの画像でじゅうぶんです。

次に、ログインフォームを配置するための DIV 要素を追加します。挿入場所は BODY 要素内ならどこでもかまいません。ログインフォームを表示したい場所に配置してください。

<div id="loginControlDiv"></div>

そして、 calvis.ready から呼ばれるコールバック関数内で、ログインフォーム DIV の ID を登録します。

calendar.setLoginControl('loginControlDiv');

最後に、 setPublicCalendar の代わりに setPrivateCalendar を呼ぶようにすれば作業完了です。カレンダー ID には "default" を指定すれば、ログインしたユーザーのデフォルトカレンダーが自動的に選択されます。

calendar.setPrivateCalendar('default');

こちらにプライベート・カレンダーを表示するサンプルを用意しました。サンプルでは実装していませんが、ユーザー認証が済んでいるので、 Calendar Data API を利用してカレンダーの内容を編集することも可能なはずです。そちらはぜひご自分で実装してみてください。

ここまでは CalVis のチュートリアルに従い、デモサーバーから calvis.js などのファイルを読み込んできました。しかし、とくに安定性を重視する場合は、他のサーバーに依存するのは避けたいものです。また、表示スタイルなどをカスタマイズするにも不便ですよね。そこで、スクリプトなどのファイルを自サーバーにコピーして、そちらを使う方法をご紹介します。

まずは Subversion を使って CalVis のファイル群をダウンロードしてください。

svn export http://calvis.googlecode.com/svn/trunk/ calvis

もし Subversion が使えない場合は、 こちらのページから 1 ファイルずつダウンロードすることもできます。

次に、自サーバーの適当なディレクトリに以下のファイルをコピーしてください。

• calvis-core.js
• calvis.js
• default.css
• gdata.js
• jquery.js

calvis.js の最初のあたりでスクリプトファイルのパスが定義されているので、適切に書き換えてください。最後のスラッシュは必須なのでご注意を。

// URL paths of scripts to be loaded
calvis.baseUrl = 'http://www.example.com/path/to/scripts/';

あとは、 HTML で読み込む CSS / JavaScript ファイルの URL を適切に変更すれば完了です。

<link rel="stylesheet" type="text/css" href="http://www.example.com/path/to/scripts/default.css" />
<script src="http://www.example.com/path/to/scripts/calvis.js" type="text/javascript"></script>

これで外部のスクリプトに依存せずに CalVis を利用できます。実際に単独動作するようにしたサンプルがこちらにありますので、参考にしてください。 "hosted.html" をクリックすればアプリケーションを実行できます。

現在配布されている CalVis を Opera で実行すると、同じイベントが複数表示されてしまうという不具合が発生します。これは、 SCRIPT タグによるスクリプトの遅延ロードで読み込み完了を検出するときに、 onload と onreadystatechange の両方にコールバックを設定しているために起こっているようです。そこで、 Opera のときは onload のみ設定するようにすれば、きちんと動作するようになります。

具体的には、 calvis.js の以下の部分を変更します。

  // IE 6 & 7
  if(!/^Opera/.test(navigator.userAgent)) {    // ← この行を追加
    script.onreadystatechange = function() {
      if (script.readyState == 'loaded' || script.readyState == 'complete') {
        callback();
        //console.log(url + ' is loaded, state= ' + script.readyState);
      }
    };
  }                                            // ← この行を追加

さきほどの自サーバーでホストするサンプルの calvis.js には上記の変更が適用されています。

最後に calvis.Calendar クラスのメソッドをまとめておきます。すでにほとんどのメソッドはサンプルで使っていますので、具体的な使い方はそちらをご覧ください。基本的に全て calvis.ready のコールバック関数内で呼び出すことが想定されているようです。

setCalendarBody(id)

カレンダー本体を挿入する DIV 要素を指定します。 id は要素の ID 属性の値です。

setStatusControl(id)

読み込み中などのステータスを挿入する DIV 要素を指定します。 id は要素の ID 属性の値です。

setNavControl(id)

表示する年月などを指定するフォームを挿入する DIV 要素を指定します。 id は要素の ID 属性の値です。

setViewControl(id)

月間カレンダーと週間カレンダーの切り替えボタンを挿入する DIV 要素を指定します。 id は要素の ID 属性の値です。

setLoginControl(id);

ログインフォームを挿入する DIV 要素を指定します。 id は要素の ID 属性の値です。

setEventCallback(event, func)

予定をクリックした際の処理を指定します。 event は "click" か "mouseover" のいずれかです。

setPublicCalendar(calendarID)

表示する公開カレンダーを指定します。

setPrivateCalendar(calendarID)

表示するプライベートカレンダーを指定します。プライベートカレンダーを表示する際は、ログインフォームとダミー画像が必須となります。

setDefaultView(view)

最初に表示するビューを指定します。 view は "month" か "week" のいずれかで、それぞれ月間カレンダーと週間カレンダーの指定になります。デフォルトは "month" です。

render()

実際にカレンダーを表示します。

以上、本日は Google Calendar のマッシュアップを簡単に構築できる CalVis ライブラリをご紹介しました。とても手早くカレンダーアプリケーションの土台が作れることがおわかりいただけたのではないでしょうか。 Google Calendar は、数ある Google アプリの中でも実用的なマッシュアップが作りやすいもののひとつだと思います。ぜひ CalVis を利用して、便利なカレンダーアプリを作ってみてください！