JSPで行こう！

Googleからイベントの取得

FullCalendarでGoogleカレンダーとの連携を実装する

イベントを渡す方法で一番簡単なのは、初期ロード時。
まず、これを考えよう。
仕様書から、

$('#calendar').fullCalendar({
  events: [
    {
      title  : 'event1',
      start  : '2010-01-01'
    },
    {
      title  : 'event2',
      start  : '2010-01-05',
      end    : '2010-01-07'
    },
    {
      title  : 'event3',
      start  : '2010-01-09T12:30:00',
      allDay : false // will make the time show
    }
  ]
});

なので、ここに Ajax を当てはめれば良いことになります。
ドキュメントでは、もう少し機能があって、

$('#calendar').fullCalendar({

  eventSources: [

    // your event source
    {
      url: '/myfeed.php', // use the `url` property
      color: 'yellow',    // an option!
      textColor: 'black'  // an option!
    }

    // any other sources...

  ]

});

といった具合に、Ajax呼び出しを行ってくれる書き方があるようです。
上記の php を jsp にしてしまえば良い訳です。

JSPでAjaxを書く

ということで、早速 JSP で Googleカレンダーから取得するコードを書いてみましょう。
実装にあたっては、まず「認可」をどうするかです。
FullCalendar から Ajax を投げて、そこから google の「認可」を呼び出すのは画面遷移が生ずるのでまずいです。
ですので、ここは「Refreash Token」が予め保存されている前提で実装します。
リフレッシュトークンの取得方法については、OAuth2.0の解説を参照してください。

リフレッシュトークンからアクセストークンを取得できますので、
後はアクセストークンを使って、Googleカレンダー情報を取得します。

実装例

リフレッシュトークンからアクセストークンを取得して Googleカレンダーからイベントを取得する
JSP での実装例です。

<%@ page contentType="application/json; charset=UTF-8" %>
<%@ page trimDirectiveWhitespaces="true"%>

<%
  request.setCharacterEncoding("UTF-8");

  String scope = "https://www.googleapis.com/auth/calendar";
  String calendars_url = "https://www.googleapis.com/calendar/v3/calendars";
  String body = "";
  String url = AUTH_URL;
  SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd");
  String locale_offset = "T09:00:00Z";

  String calendar_id = (String)request.getParameter("calendar_id");
  String from = (String)request.getParameter("start");
  String to = (String)request.getParameter("end");

  if( calendar_id == null ) {
      calendar_id = CALENDAR_ID;
  }
  if( from == null ) from = "2018-09-01";
  if( to   == null ) to   = "2018-11-01";

  // GMT形式に変換
  if( from.indexOf("T") < 0 ) {
    from = from + locale_offset;
  }
  if( to.indexOf("T") < 0 ) {
    to = to + locale_offset;
  }

  // リフレッシュトークンからアクセストークンの取得
  String access_token = getAccessToken( TOKEN_URL, CLIENT_ID, CLIENT_SECRET, CALENDAR_REFRESH_TOKEN);

  if( access_token != null ) {
    RestOAuth oauth = new RestOAuth();
    oauth.setAccessToken( access_token );

    url = calendars_url + "/" + calendar_id + "/events"   ;
    url = url + "?timeMin=" + from + "&timeMax=" + to;

    // カレンダー情報を取得する
    body = oauth.doGet( url );

    ObjectMapper mapper = new ObjectMapper();
    CalendarEvents events = mapper.readValue(body, CalendarEvents.class);

   // JSON文字列を作成する
    out.println("[");
    for( int i = 0; i < events.items.size(); i++ ) {
      CalendarItem event = events.items.get(i);
      out.println("{");
      out.println( "\"title\" : \""+event.summary+"\"," );
      out.println( "\"start\" : \""+event.start.dateTime+"\"," );
      // out.println( "\"end\" : \""+sdf1.format(CalendarUtil.gmt_str2local_date(event.end.dateTime))+"\"" );
      out.println( "\"end\" : \""+event.end.dateTime+"\"" );
      out.print("}");
      if( i < events.items.size()-1 ) out.print(",");
    }
    out.println("]");

  } else {
    out.print( "{}" );
  }
%>
<%!
  // クラス定義
  @JsonIgnoreProperties(ignoreUnknown=true)
  private static class CalendarEvents {
    public List<CalendarItem> items;
    public String nextPageToken;
    public int resultSizeEstimate;
  }

  @JsonIgnoreProperties(ignoreUnknown=true)
  private static class CalendarItem {
    public String id;
    public String summary;
    public DateItem start;
    public DateItem end;
  }

  @JsonIgnoreProperties(ignoreUnknown=true)
  private static class DateItem {
    public String dateTime;
    public String timeZone;
  }
%>

処理の流れとしては、

class 化したところはコードを端折っています。
"RestOAuth" クラスはこれまで出てきた httpclient の操作を自分でまとめたものです。
Google からのイベント情報は、いったんJackson で java のクラスに変換しています。
JSON文字列の作成は今回は簡単なのでJacksonを使わず、自分で直接作成しています。

FullCalendar側

$(function() {

  $('#calendar').fullCalendar({

    eventSources: [
      {
        url: 'calendar_json.jsp',
        color: 'yellow',   // an option!
        textColor: 'black' // an option!
      }
    ]

  })

});

たったこれだけです。
ajax を明示して使わなくても、eventSource で指定することで、適宜問い合わせてくれるようです。
パラメータは"start"と"end"で日付範囲が渡されるので、JSP側でそれを受けて、Google 側に
問い合わせします。FullCalendar は良く出来ていると思います。

« 前頁 次頁 »