CalVis: Google カレンダー用にカスタマイズした AJAX UI を作成

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

注 - これは Google 社員によって開始されたオープンソース プロジェクトであり、公式にサポートされているライブラリではありません。参加して貢献することにご関心のあるすべての方のご参加をお待ちしています。

はじめに

Google カレンダーのデータを使って独自のカレンダー エクスペリエンスをウェブサイトで作成したいが、カレンダー データを視覚的に表示する方法がわからない場合は、このジレンマを共有するデベロッパーも多数いるようです。Google Calendar Data API は Google カレンダーのあらゆるデータを活用できる強力なウェブサービス API ですが、データの可視化を必要とせず、純粋な読み取り/書き込みデータ API のままです。

この記事では、この問題を軽減するために作成したサンプル ライブラリをご紹介します。Google は、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 - Calendar Visualization ライブラリを読み込む

まず、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 コンポーネントです。
  • ビュー コントロール
    このリリースでは、カレンダー ビューの選択をレンダリングする 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 がデータを pull する 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('');
}
最後に、カレンダーのデフォルト ビュー（「month」ビューまたは「week」ビュー）を設定し、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 マップと YouTube API のマッシュアップを作成する方法を説明しています。

投稿

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

リソース