4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

動機

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

サーベイ中に書いたメモはどこへ、なんてことにならないように、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

こんな感じで動きます。

実装

  • bibtexParseJsにより、bibjsonに変換しています。
  • markdowngulp-markdownによりhtmlにした後、iframe で読み込んでいるだけなので、ここを参考にちゃんと対応したいと思いつつ。。。
  • timeline.json を生成するためのgulpのプラグインも自作しました。

参考

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?