Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@sosuke

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

More than 3 years have 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

こんな感じで動きます。

実装

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

参考

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sosuke

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?