• DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • CLOUD COMPUTING STAGE
gihyo.jp » CLOUD COMPUTING STAGE » 連載 » ［公式］Evernote API徹底活用レシピ » 第17回　ノートの情報をTimelineに表示する

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

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

2011年12月29日

, , , , , ,

この記事を読むのに必要な時間：およそ 3 分

しばらくの間特別編が続きましたが，今回は第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の魅力の一つだと思います。

タイムライン表示

タイムライン表示

, , , , , ,

著者プロフィール

加藤文彦（かとうふみひろ）

国立情報学研究所新領域融合研究センター特任研究員。普段はWebの研究に従事しており，Web上のデータを型付リンクで繋いでいくLinked Dataがトレンドになると信じて日々活動している。LinkedData.jp主宰。

twitter：fumi1

URL：http://fumi.me

コメント

コメントの記入