BETA

json形式でタスクを記述するWebガントチャート用ボイラープレート「Vanargantt」

投稿日:2019-03-10
最終更新:2019-03-12
※この記事は外部サイト(https://labor.ewigleere.net/2019/03/10/van...)からのクロス投稿です

以前、MarkdownからPDFドキュメントを生成してホットリロードで確認できる「Kamimai」を自分のブログで取り上げました。

それとは別に、記事にはしていませんがreveal.jsを使用したWebの技術でスライド作成&ホットリロード確認できる「Benten」というボイラープレートも作ってあります。

さて、PDFドキュメントによる資料、スライド資料と来て、今回はガントチャートです。

ガントチャートは、プロジェクトや生産管理などで用いられる作業計画表で、時間を横軸にした棒グラフの見た目のものですね。ガントという人が考案したチャートだからガントチャートというそうです。

ということで今回作ったのが「Vanargantt」になります。読み方は「ヴァナルガン」。

名前の由来

元ネタは「Vanargandr(ヴァナルガン)」で、北欧神話でラグナロクの際にオーディンを飲み込むことで有名な狼フェンリルの別名です。

何故この名前にしたかと言うと

  • 「ガント」に引っかけたネーミングにしたかったが、ガンでは良い案が思い浮かばなかったのでガン(北欧の指差し等の魔術)から探した
    • 結果、「Vanargandr(ヴァナルガンド)」と「Jörmungandr(ヨルムンガンド: ラグナロクの際にトールと相打ちになるミッドガルズオルムの別名)」が候補に
  • やること(タスク(task))を工程に並べるので、タスクの音から牙(tusk)を連想
    • どちらも牙を持つが、より直感的にイメージが湧いたのは蛇(ヨルムンガンド)より狼(フェンリル)

ということでVanargandr(ヴァナルガンド)に軍配が上がり、「Vanargandr(ヴァナルガンド) + Ganttchart(ガントチャート)」で「Vanargantt(ヴァナルガント)」としました。

機能

  • ガントチャート用JSライブラリを使用し、Web上でガントチャートを表示
  • タスクはjsonファイルに分離し一元管理
  • gulpタスクによりビルド&ホットリロード。ガントチャートの見た目を確認しながらガントチャートの作成に専念できます

といったところが主な機能になります。

作ったといっても、Ususamaにガントチャート用のライブラリを突っ込んで調整しただけですのであまり大したことはしていません。その代わり比較的シンプルではあると思います。

ガントチャート用ライブラリとしてfrappe/gantt: Open Source Javascript Ganttを使用させて頂きました。

使用方法などはfrappe-ganttを使ってガントチャートを作成する方法 - utamaro’s blogの記事を参考に。

その上で、frappe/ganttはJSにタスクを直書きしていましたが、上述したように、これをjsonファイルに分離、gulpタスクでビルドとホットリロードが走っていれば、jsonファイルを上書きを自動検知してガントチャートページを再生成・表示しなおししてくれるように修正したのが今回のVanarganttになります。

ディレクトリ階層

Vanargantt/                          //ルート  
    ├ bin/                           //Ususamaで用意されているディレクトリ(sg/まで)  
    ├ dist/                          //ページ生成先  
    ├ gulp/                          //各機能ごとに分離したgulpタスク  
    ├ sg/                            //スタイルガイド用ディレクトリ  
    ├ src/  
    │    ├ config/                   //ejs・js・Scss共通仕様の設定ファイル  
    │    ├ contents/  
    │    │   └ task.json             //タスクファイル  
    │    ├ ejs/                      //ページ用のejs  
    │    ├ favicon/  
    │    ├ img/                      //画像ファイル置き場(デフォルトでは使用していません)  
    │    ├ js/                       //js(Bootstrap, jQuery使用)  
    │    └ scss/                     //Scss(Bootstrap使用)  
    └ .gitignore, gulpfile.js, package.json, readme.md

ディレクトリ構造は上記の通り。特に注目する場所はsrc/contents/task.json。これがタスクのデータ本体になりますので、このファイルさえ編集すればガントチャートを作れるようになっています。

見た目を変えたり機能を追加したりしたい場合は都度src/下のejsjsscss辺りを編集して頂ければ。

使い方

初回

  1. プロジェクトをgit clone
  2. npm i -D
  3. npm start
  4. src/contents/task.jsonを編集

2回目以降

  1. npm test
  2. src/contents/task.jsonを編集

以上となります。

これでドキュメント・スライド・ガントチャートと企画や管理といった事務作業でよく使いそうなものが出そろいましたかね。これらを駆使して作業をサクサクっと進めたいものです。

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!