CalVis: Google カレンダー用のカスタム AJAX UI を作成する

Austin Chau、Google デベロッパー プログラム
2008 年 6 月

注 - これは、Google 社員が開始したオープンソース プロジェクトであり、公式にサポートされているライブラリではありません。ご興味のある方はぜひご参加ください。

はじめに

Google カレンダーのデータを使用してウェブサイトでカスタマイズされたカレンダー エクスペリエンスを作成したいが、カレンダー データを視覚的に表示する方法がわからないという経験はありませんか？このジレンマを共有しているデベロッパーは多いようです。Google カレンダー データ API は、すべての Google カレンダー データの豊富さを活用できる強力なウェブ サービス API ですが、データ可視化の機能がない純粋な読み取り/書き込みデータ API です。

この記事では、この問題を軽減するために作成したサンプル ライブラリを紹介します。私は、Google カレンダー アカウントのデータを表示するための簡単でカスタマイズ可能なユーザー インターフェース（UI）を提供することを目的としたオープンソース プロジェクト、Calendar Visualization（CalVis）を開始しました。CalVis は、Google Calendar Data API を介して Google カレンダー アカウントから直接データを取得します。（編集者注: v3 以降、Google カレンダーでは Google データ形式は使用されなくなりました）。このライブラリは、内部で Google Data JavaScript クライアント ライブラリを使用して Google カレンダーと通信し、カスタマイズの柔軟性を最大限に高めるように設計されています。

CalVis は、デベロッパーがリッチなカレンダー UI エクスペリエンスを再作成する必要がないように設計されています。デベロッパーは、カスタマイズ可能なテンプレート コンテナとして使用して、Google カレンダーのデータをオーバーレイできます。デベロッパーは CalVis を使用してカレンダー データをレンダリングし、サイトとの高度なカスタマイズ統合を実現できます。CalVis をベースに構築されたインターフェースは、JavaScript、HTML、CSS を使用して完全にカスタマイズできます。デベロッパーは、カレンダー データをレンダリングするための基本的なカレンダー コントロール コンポーネントのセットを使用して、カスタマイズされたカレンダー インターフェースをすばやく簡単にデプロイできます。

CalVis の使用

次の手順は、開発で CalVis の使用を開始する際に役立ちます。

ステップ 1 - カレンダーの可視化ライブラリを読み込む

まず、HTML ファイルにローダーを含める必要があります。このローダーは、CalVis のコアクラスと依存ライブラリ（Google Data JavaScript クライアント ライブラリなど）を動的に読み込みます。

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

ステップ 2 - CSS スタイルシートを使用してスタイル属性を記述します。

デフォルトの CSS ファイルは、この例のようなデフォルトのルック アンド フィールを生成します。この CSS ファイルをダウンロードしてカスタマイズすると、まったく異なるルック アンド フィールを実現できます。

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

ステップ 3 - HTML を使用してカレンダー インターフェースの視覚構造をレイアウトする

CalVis には、カレンダー インターフェースを構成する事前定義されたビジュアル コンポーネントがいくつかあります。これらのインターフェース コンポーネントの構造的な配置は、HTML レイアウトによって定義されます。

CalVis の UI コンポーネントは次のとおりです。

  • ログイン コントロール（非公開カレンダーのみ）
    ログイン/ログアウト リンクを提供する HTML コンポーネントです。
  • ステータス コントロール
    ステータス情報またはエラーを提供する HTML コンポーネントです。
  • ナビゲーション コントロール
    これは、現在のビューに応じてカレンダー ナビゲーションをレンダリングする HTML コンポーネントです。
  • View Control
    : カレンダー ビューの選択をレンダリングする HTML コンポーネントです。このリリースでは、月単位または週単位のビューのみが利用可能です。
  • Calendar Body
    これは、実際のカレンダーをレンダリングする HTML コンポーネントです。個々の日付セルを指定するグリッド。
  • イベント表示
    イベント トリガー時にイベントの詳細をレンダリングする HTML コンポーネントです。このリリースでは、「クリック」と「マウスオーバー」のイベント トリガーのみがサポートされています。

基本的な HTML テーブル構造を使用してこれらのコンポーネントを視覚的に配置する方法の例 - 

  <table style="width: 800px;">
    <tr>
      <td colspan="2" valign="top">
        <div style="float: left;" id="loginControlDiv"></div>
        <div style="float: right;" id="statusControlDiv"></div>
      </td>
    </tr>      
    <tr>
      <td valign="top">
        <div id="navControlDiv"></div>
      </td>
      <td valign="top" align="right">
        <div id="viewControlDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="calendarBodyDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="eventDisplayDiv"></div>
      </td>
    </tr>
  </table>

ステップ 4 - JavaScript で CalVis を初期化して構成する

JavaScript を使用して、動作や外観をカスタマイズできます。JavaScript でオブジェクトを変更する前に、ブラウザでオブジェクトを読み込む必要があります。そのため、まず CalVis ローダーで依存ライブラリがすべて読み込まれるまで待つ必要があります。これは calvis.ready() メソッドで行います。このメソッドは、すべてのライブラリが読み込まれ、CalVis を使用する準備が整ったときに呼び出されるコールバック メソッドを受け取ります。

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

コールバック関数内で、calvis.Calendar オブジェクトのインスタンスをインスタンス化します。次に、さまざまな CSS ID（手順 3 の HTML レイアウトで定義）を対応するカレンダー UI コンポーネントにマッピングする必要があります。

var calId = 'developer-calendar@google.com';

var calendar = new calvis.Calendar();

// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');

これで、CalVis がデータを取得する Google カレンダー アカウントを指定できるようになりました。一般公開カレンダーを指定するには - 

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

非公開カレンダーを指定するには、ログインボタンに対応する HTML コンポーネントも指定する必要があります。

// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');

イベントの詳細を表示するには、コールバック メソッドを指定する必要があります。これにより、カレンダーのイベント リストがトリガーされると（「クリック」または「マウスオーバー」イベント）、コールバックが呼び出されてイベントの詳細が表示されます。イベント表示コールバックの例 - 

calendar.setEventCallback('click', displayEvent);

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  
  var eventHtml = [;
  eventHtml.push(date.toString());
  eventHtml.push('<br><br>');
  eventHtml.push('<b>Event title:</b> ');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 11px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');
  eventHtml.push('<br>');

  document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}
最後に、カレンダーのデフォルト ビュー（「月」ビューまたは「週」ビュー）を設定し、render() メソッドを呼び出してカレンダー UI を表示します。
// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

スタイルをカスタマイズする

個々の日付セルのサイズ、色、スタイルをカスタマイズするには、事前に定義されたいくつかの CSS クラスの CSS スタイリング属性を変更するだけです。たとえば、デフォルトの CSS クラス monthViewCell と contentCell をオーバーライドすることで、月ビューの各日付セルの幅と高さを変更できます。

デモ

このデモでは、デフォルトのスタイル設定で CalVis を使用する方法を示します。

このデモでは、CalVis をカスタマイズして Google Maps と YouTube API をマッシュアップする方法を示します。

投稿

CalVis はオープンソース プロジェクトです。ソースコードは、Google Code Project Hosting の Subversion を介してダウンロードできます。

リソース