2010年2月25日木曜日

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"をパラメータに追加!

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

0 件のコメント:

コメントを投稿