このサイトは、イベントの参加登録ができるサイトで、よくIT系のイベントが登録されています。
ATNDはAPIが公開されており、APIを使って自由に検索ができるようになっています。
http://api.atnd.org/
そこで、私自身が参加しようとして登録してあるイベント一覧をこのブログに載せるガジェットを作ってみました。
とりあえず、自分自身が参加登録している一覧を取得するには下記のURLを使用します。
http://api.atnd.org/events/?user_id={個人のID}
私の場合はIDが21348なので
http://api.atnd.org/events/?user_id=21348
となります。
今回はjavascriptで全て実装したいので、jsonp形式でレスポンスをうけとります。
http://api.atnd.org/events/?user_id=21348&count=5&callback=atndCallback&format=jsonp
JSONPについては以前紹介した物がありますので、そちらを参照ください。
JSONPの使い方
作成したガジェット自体は、右の"参加予定のイベント"がそれになります！
javascriptだけで、これだけできるのでやっぱりjavascriptは便利です！
知っておいて損はないなー
・ガジェットのソース
var atndEdit = function() {
//jsonp
var url = 'http://api.atnd.org/events/?user_id=21348&count=5&callback=atndCallback&format=jsonp';
var ele = document.createElement('script');
ele.type = 'text/javascript';
ele.src = url;
document.body.appendChild(ele);
//今日の日付作製
var nowDate = new Date();
var month = (nowDate.getMonth() + 1);
month = month.length === 2 ? month : '0' + month;
var day = nowDate.getDate();
day = day.length === 2 ? day : '0' + day;
var nowStrDate = nowDate.getFullYear() + month + day;
//出力先
var output = document.getElementById('atnd-div');
var count = 0;
return {
disp : function(events) {
var eventDate = events.ended_at.substring(0, 10).replace(/-/g, '');
if(eventDate < nowStrDate) {
if(count == 0) {
output.innerHTML = '参加予定のイベントはありません';
}
return;
}
count++;
var title = events.title;
var url = 'http://atnd.org/events/' + events.event_id;
var start = events.ended_at.substring(0, 10);
var ele = document.createElement('a');
ele.href = url;
ele.target = '_blank';
ele.innerHTML = title;
var date = document.createElement('span');
date.innerHTML = '・' + start + '';
output.appendChild(date);
output.appendChild(document.createElement('br'));
output.appendChild(ele);
output.appendChild(document.createElement('br'));
}
};
}();
function atndCallback(data) {
var events = data.events;
for(var i = 0; i < events.length; i++) {
var eventDate = events[i].ended_at.substring(0, 10).replace(/-/g, '');
atndEdit.disp(events[i]);
}
}
