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なので、この関数名で実装します。
今回、このブログでは下記のソースを使用しています。

view plainprint?

1. var edit = function() {  
2.  // ① scriptタグを出力し、サーバから取得できる下記文字列をHTML上に展開させる  
3.  // insertCalendar({jsonデータ});  
4.  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';  
5.  var ele = document.createElement('script');  
6.  ele.type = 'text/javascript';  
7.  ele.src = url;  
8.  document.body.appendChild(ele);  
9.  // 文字列を出力する場所を取得  
10.  var output = document.getElementById('ak-javascript');  
11.  return {  
12.   disp : function(events) {  
13.    // ③ 1個のイベント情報を表示様に整形して行く  
14.    var title = events.title.$t;  
15.    var content = events.content.$t;  
16.    var start = events.gd$when[0].startTime;  
17.    var link;  
18.    if(content) {  
19.     var contents = content.split('\n');  
20.     for(var i = 0; i < contents.length; i++) {  
21.      var con = contents[i];  
22.      if(con.indexOf("http",0) == 0) {  
23.       link = con;  
24.       break;  
25.      }  
26.     }  
27.    }  
28.    var ele;  
29.    if(link) {  
30.     ele = document.createElement('a');  
31.     ele.href = link;  
32.     ele.target = '_blank';  
33.     ele.innerHTML = title;  
34.    } else {  
35.     ele = document.createElement('span');  
36.     ele.innerHTML = title;  
37.    }  
38.    var date = document.createElement('span');  
39.    date.innerHTML = '<b>・' + start + '</b>';  
40.    // ④ HTML上に出力する  
41.    output.appendChild(date);  
42.    output.appendChild(document.createElement('br'));  
43.    output.appendChild(ele);  
44.    output.appendChild(document.createElement('br'));  
45.   }  
46.  };  
47. }();  
48. // ② コールバック関数  
49. function insertCalendar(data) {  
50.  var feed = data.feed;  
51.  if(!feed) {  
52.   return;  
53.  }  
54.  var events = feed.entry;  
55.  for(var i = 0; i < events.length; i++) {  
56.   edit.disp(events[i]);  
57.  }  
58. }  

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