Posted at

bibファイルから簡単な年表を可視化

More than 1 year has passed since last update.


動機

過去にイントロ、関連研究を書くのに苦労した時の話です。

サーベイ中に書いたメモはどこへ、なんてことにならないように、bibとメモを一緒に管理しておいて、それらをまとめて年表にしてくれるのが欲しかったです。

とは言ったものの

以前、 なるものを作ろうとしましたが、構想が大きすぎ開発が全く進んでおりません。

そんな中、今パッと作れて使えるものを考えた時に、とりあえず、bibとメモをセットで年表にしよう!と思ったのでした。

そんなの作ってる時間あったらもう一回関連研究の論文読めって今は思います。


UI

時間軸のUIで使えそうなもの。


Ben Bederson's Publication

https://gyazo.com/9beb4307ad490c6c084550e1b34da403

メモとの連携という要素がなければ、めちゃくちゃ素晴らしいのですが、諦めました。


Vertical Timeline

https://gyazo.com/4e4e6e875c70e6e0e41309164ed35cd4

見た目がとてもかっこよくレスポンシブ対応で素晴らしいのですが

同じ年のものを並列に並べられなさそうなので

別の機会にとっておくことにしました。


TimelineJS3

https://gyazo.com/d6dedcb3f510946a290de247c59e2afb

結局、TimelineJS3を使ってみることにしました。


セットアップ&起動

特定のフォルダに bib ファイルを置いて、あるコマンドを打つと自動で bib たちを解析してくれて年表を表示してくれます。

https://gyazo.com/208d597acc7587af181a00ba10b2ced6

cp <your bib file> app/bib/

gulp timeline:generate
gulp serve

こんな感じで動きます。


実装

https://github.com/paper-yggdrasil-project/bibtimeline/



  • bibtexParseJsにより、bibjsonに変換しています。


  • markdowngulp-markdownによりhtmlにした後、iframe で読み込んでいるだけなので、ここを参考にちゃんと対応したいと思いつつ。。。


  • timeline.json を生成するためのgulpのプラグインも自作しました。


参考