しばらくの間特別編が続きましたが、今回は第12回までのGoogle App Engineの続きとして、ノートの情報をTimelineに表示してみたいと思います。TimelineはMITのSIMILEグループによって開発されている、時系列データを表示するためのJavaScriptライブラリです。今回の完全なソースコードは17_timeline.zipとしてダウンロードできます。
まず、IndexHandler
クラスのgetメソッドに、以下のようにタイムライン表示へのリンクを追加します。
また、def main()の該当箇所を以下のように変更します。
そうすると、OAuth認証後のメニュー画面に、タイムライン表示用の項目が追加されます。
次に/timeline
を処理するためのTimelineHandler
クラスを作ります。
このクラスではTimeline表示用のHTMLを出力しています。Timelineの実際の処理は、出力されたHTMLで読み込む/js/evernote-timeline.js
に書かれており、その結果がdiv#evernote-timeline
の箇所に表示されます。Timelineは以下のようなJSONを読む込むことで、イベントごとのデータをTimeline上に表示できるようになっています。
このイベントデータ用JSONは/js/evernote-timeline.js
から/timeline_events
を呼び出して取得しています。/timeline_events
の処理は、以下のTimelineEventsHandler
クラスで行っています。
ここで重要なのは、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の魅力の一つだと思います。