gihyo.jpサイトのロゴ

［公式］Evernote API徹底活用レシピ

第17回ノートの情報をTimelineに表示する

2011-12-29

しばらくの間特別編が続きましたが、今回は第12回までのGoogle App Engineの続きとして、ノートの情報をTimelineに表示してみたいと思います。TimelineはMITのSIMILEグループによって開発されている、時系列データを表示するためのJavaScriptライブラリです。今回の完全なソースコードは17_timeline.zipとしてダウンロードできます。

まず、IndexHandlerクラスのgetメソッドに、以下のようにタイムライン表示へのリンクを追加します。

        if "oauth_token" in session:
            self.response.out.write('<li><a href="/list">ノートブック一覧</a></li>')
            self.response.out.write('<li><a href="/timeline">タイムライン表示</a></li>')
        self.response.out.write('<li><a href="/reset">リセット</a></li>')

また、def main()の該当箇所を以下のように変更します。

             ('/list', ListHandler),
             ('/timeline', TimelineHandler),
             ('/timeline_events', TimelineEventsHandler),
             ('/error', ErrorHandler),

そうすると、OAuth認証後のメニュー画面に、タイムライン表示用の項目が追加されます。

メニュー
メニュー

次に/timelineを処理するためのTimelineHandlerクラスを作ります。

class TimelineHandler(webapp.RequestHandler):
    """ノートをタイムライン上に表示"""
    def get(self):
        session = sessions.Session()
        if not check_authenticated_user(session):
            self.redirect("/error")
            return

        self.response.out.write('<html><head>')
        self.response.out.write('<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">')
        self.response.out.write('<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>')
        self.response.out.write('<script src="/js/evernote-timeline.js" type="text/javascript"></script>')
        self.response.out.write('<title>タイムライン表示</title>')
        self.response.out.write('</head><body onload="onLoad()" onresize="onResize()">')
        self.response.out.write('<h1>タイムライン表示</h1>')
        self.response.out.write('<div id="evernote-timeline" class="timeline-default" style="height: 300px; "></div>')
        self.response.out.write('<p><a href="/">トップページに戻る</a></p></body></html>')

このクラスではTimeline表示用のHTMLを出力しています。Timelineの実際の処理は、出力されたHTMLで読み込む/js/evernote-timeline.jsに書かれており、その結果がdiv#evernote-timelineの箇所に表示されます。Timelineは以下のようなJSONを読む込むことで、イベントごとのデータをTimeline上に表示できるようになっています。

{
    "dateTimeFormat": "iso8601",
    "events": [
        { "start": "2011-12-01T12:00:00Z",
	  "durationEvent": False,
	  "title": "イベント例",
	  "description": "イベントの説明" },
        { "start": "2011-12-02T15:00:00Z",
	  "durationEvent": False,
	  "title": "イベント例",
	  "description": "イベントの説明" },
        ……
    ]
}

このイベントデータ用JSONは/js/evernote-timeline.jsから/timeline_eventsを呼び出して取得しています。/timeline_eventsの処理は、以下のTimelineEventsHandlerクラスで行っています。

class TimelineEventsHandler(webapp.RequestHandler):
    def get(self):
        session = sessions.Session()
        if not check_authenticated_user(session):
            self.redirect("/error")
            return

        notestore = get_notestore(session)
        notebooks = notestore.listNotebooks(session["oauth_token"])
        noteList = notestore.findNotesMetadata(session["oauth_token"], NoteFilter(), 0, 20,
                                               NotesMetadataResultSpec(True, False, True, True, False,
                                                                       False, False, False, False, False))

        timeline_data = { "dateTimeFormat": "iso8601", "events": [] }
        for note in noteList.notes:
            event = { "start": time.strftime("%Y-%m-%dT%H:%M:%S%z", time.localtime(note.created / 1000)),
                      "durationEvent": False,
                      "title": note.title,
                      "description": ""}
            timeline_data["events"].append(event)
            
        self.response.headers["Content-Type"] = "application/json; charset=utf-8"
        self.response.out.write(simplejson.dumps(timeline_data, ensure_ascii=False))

ここで重要なのは、notestore.findNotesMetadataです。このメソッドは以前説明したnotestore.findNotesとは異なり、ノートの作成日や更新日など、ノートに付随するメタデータのリストを取得するものです。具体的にどのメタデータを取得するかを、第5引数のNotesMetadataResultSpecクラスで指定します。ここではタイトル、作成日時、更新日時のみを取得するようにしてあります。

findNotesMetadataメソッドを通して取得したメタデータを、Timelineのイベントデータ用JSONの構造に合わせます。作成日時を基準に表示するために、作成日時をISO8601形式に変換した後にstartに設定しています。

1つ注意事項として、Evernoteではミリ秒単位のUNIX時間として保存されていますので、pythonのtimeに渡す前に1000で割る必要があります。また、ミリ秒部分は常に'000'になっています。

durationEventは期間表示をするかどうかです。もし期間表示をTrueにする場合は、endも設定します。titleにはTimelineに表示するタイトルを指定します。ここではノートのタイトルを指定しています。descriptionにはタイトルをクリックしたときに表示するポップアップの文を指定します。ここではとりあえず空にしていますが、ノートの内容や画像を表示するといったことが考えられます。

完成後にブラウザでタイムライン表示にアクセスすると、以下のような画面が表示されるはずです。このように、Evernoteのデータを異なる方法で可視化できるようになるのが、Evernote APIの魅力の一つだと思います。

タイムライン表示
タイムライン表示

おすすめ記事

記事・ニュース一覧