Googleカレンダーの直近スケジュールを表示させる

GoogleカレンダーにIT関連イベントを登録しているのですが、このデータをブログのサイドに表示させたかったので作ってみました。
実際に作成したものは、このブログのサイドに表示させています。

■データ取得方法
まずは、Googleカレンダーからカレンダー情報をJSONP形式で取得します。
JSONP形式のデータを取得するためには、下記URLで実現できます。
http://www.google.com/calendar/feeds/bosh0h7tg9ddmhav7a537bguh4%40group.calendar.google.com/public/full?alt=json-in-script&callback=insertCalendar

もし、自分のカレンダーで試したいのであればURLを下記のようにしてください
"http://www.google.com/calendar/feeds/" + GoogleカレンダーURL + "/public/full?alt=json-in-script&callback=insertCalendar"

これで、JSONP形式でレスポンスを得ることができました。
callback関数名はパラメータに渡したinsertCalendarになります！

ここまでくればあとちょっと！

日付順で取得したいので
"orderby=starttime&sortorder=ascending"をパラメータに追加！

未来の予定が欲しいので
"futureevents=true"をパラメータに追加！

最大件数は７件がいいので
"max-results=7"をパラメータに追加！

これでURLが完成！
http://www.google.com/calendar/feeds/bosh0h7tg9ddmhav7a537bguh4%40group.calendar.google.com/public/full?alt=json-in-script&callback=insertCalendar&orderby=starttime&max-results=7&singleevents=true&sortorder=ascending&futureevents=true

ちなみに参考API
http://code.google.com/intl/ja/apis/gdata/docs/json.html

■データ表示
前回のJSONPの使い方で紹介した方法を使い表示部分の実装していきます。

コールバック関数名がinsertCalendarなので、この関数名で実装します。
今回、このブログでは下記のソースを使用しています。

var edit = function() {
 // ① scriptタグを出力し、サーバから取得できる下記文字列をHTML上に展開させる
 // insertCalendar({jsonデータ});
 var url = 'http://www.google.com/calendar/feeds/bosh0h7tg9ddmhav7a537bguh4%40group.calendar.google.com/public/full?alt=json-in-script&callback=insertCalendar&orderby=starttime&max-results=7&singleevents=true&sortorder=ascending&futureevents=true';
 var ele = document.createElement('script');
 ele.type = 'text/javascript';
 ele.src = url;
 document.body.appendChild(ele);
 // 文字列を出力する場所を取得
 var output = document.getElementById('ak-javascript');
 return {
  disp : function(events) {
   // ③ 1個のイベント情報を表示様に整形して行く
   var title = events.title.$t;
   var content = events.content.$t;
   var start = events.gd$when[0].startTime;
   var link;
   if(content) {
    var contents = content.split('\n');
    for(var i = 0; i < contents.length; i++) {
     var con = contents[i];
     if(con.indexOf("http",0) == 0) {
      link = con;
      break;
     }
    }
   }
   var ele;
   if(link) {
    ele = document.createElement('a');
    ele.href = link;
    ele.target = '_blank';
    ele.innerHTML = title;
   } else {
    ele = document.createElement('span');
    ele.innerHTML = title;
   }
   var date = document.createElement('span');
   date.innerHTML = '・' + start + '';
   // ④ HTML上に出力する
   output.appendChild(date);
   output.appendChild(document.createElement('br'));
   output.appendChild(ele);
   output.appendChild(document.createElement('br'));
  }
 };
}();
// ② コールバック関数
function insertCalendar(data) {
 var feed = data.feed;
 if(!feed) {
  return;
 }
 var events = feed.entry;
 for(var i = 0; i < events.length; i++) {
  edit.disp(events[i]);
 }
}

■解説
ソースの①～④までが順番に呼ばれます。
①にて、scriptタグをHTML上に出力すると、urlに書かれている場所からデータをダウンロードします。
ダウンロードしたデータにはinsertCalendarを実行するように記述されたデータが返されるため、②の関数が実行されます。
②の関数の実行時に渡されるjsonデータを分解し、1個ずつの登録データに分けて出力処理を行います。
③にて、データの整形を行っています。今回はカレンダーに登録されている詳細情報からURLを抽出して、リンクをつけるように整形しています。
最後に、④にてHTML上に出力を行っています。

以上の流れで、このブログ上にGoogleカレンダーから取得したイベントデータが表示されています。

JSONPを使うことによって、このように別のサーバからデータを取得することができます。
そして、アイデア次第でいろんな便利な事ができます！
ぜひ試してみてください！