ATNDから自分の参加するイベント一覧を取得してみた

私はATND というサービスをよく利用します。
このサイトは、イベントの参加登録ができるサイトで、よく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は便利です！
知っておいて損はないなー

・ガジェットのソース

view plainprint?

1. var atndEdit = function() {  
2.  //jsonp  
3.  var url = 'http://api.atnd.org/events/?user_id=21348&count=5&callback=atndCallback&format=jsonp';  
4.  var ele = document.createElement('script');  
5.  ele.type = 'text/javascript';  
6.  ele.src = url;  
7.  document.body.appendChild(ele);  
8.  //今日の日付作製  
9.  var nowDate = new Date();  
10.  var month = (nowDate.getMonth() + 1);  
11.  month = month.length === 2 ? month : '0' + month;  
12.  var day = nowDate.getDate();  
13.  day = day.length === 2 ? day : '0' + day;  
14.  var nowStrDate = nowDate.getFullYear() + month + day;  
15.  //出力先  
16.  var output = document.getElementById('atnd-div');  
17.  var count = 0;  
18.  return {  
19.   disp : function(events) {  
20.    var eventDate = events.ended_at.substring(0, 10).replace(/-/g, '');  
21.    if(eventDate < nowStrDate) {  
22.     if(count == 0) {  
23.      output.innerHTML = '<span style="font-size:12px;">参加予定のイベントはありません</span>';  
24.     }  
25.     return;  
26.    }  
27.    count++;  
28.    var title = events.title;  
29.    var url = 'http://atnd.org/events/' + events.event_id;  
30.    var start = events.ended_at.substring(0, 10);  
31.   
32.    var ele = document.createElement('a');  
33.    ele.href = url;  
34.    ele.target = '_blank';  
35.    ele.innerHTML = title;  
36.   
37.    var date = document.createElement('span');  
38.    date.innerHTML = '<b>・' + start + '</b>';  
39.    output.appendChild(date);  
40.    output.appendChild(document.createElement('br'));  
41.    output.appendChild(ele);  
42.    output.appendChild(document.createElement('br'));  
43.   }  
44.  };  
45. }();  
46. function atndCallback(data) {  
47.  var events = data.events;  
48.  for(var i = 0; i < events.length; i++) {  
49.   var eventDate = events[i].ended_at.substring(0, 10).replace(/-/g, '');  
50.    atndEdit.disp(events[i]);  
51.  }  
52. }  

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]);
 }
}