環境
PC: MacBook Pro 2016
OS: OS X Sierra
エディタ: Visual Studio Code
言語: Node.js
フレームワーク: Express
テンプレートエンジン: pug(jade)
その他: Material Design Lite
多少環境が変わっても、だいたいやることは一緒だと思います。
node.js からgit log呼び出し
child_process を利用することで任意のコマンドを実行可能です。
http://nodejs.jp/nodejs.org_ja/api/child_process.html
のchild_process.exec(command, [options], callback) を参照
1 2 3 4 | const execSync = require('child_process').execSync;const cmd = 'git log'; // コマンドconst result = execSync(cmd).toString();console.log(result); |
取得したgit logをNode.jsで加工、表示
git logを取得するコマンド
https://git-scm.com/docs/git-log
Git の基本 - コミット履歴の閲覧
あたりを参考に実際にコマンドを叩いてみて検討してみます。
今回は以下のコマンドで取得したログを使用します。
git log -n 5 --format=%cd,%s
結果
Mon Mar 6 17:46:44 2017 +0900,commitMsg5
Mon Mar 6 17:46:24 2017 +0900,commitMsg4
Fri Mar 3 14:28:48 2017 +0900,commitMsg3
Thu Mar 2 16:52:34 2017 +0900,commitMsg2
Thu Mar 2 15:53:03 2017 +0900,commitMsg1
Mon Mar 6 17:46:24 2017 +0900,commitMsg4
Fri Mar 3 14:28:48 2017 +0900,commitMsg3
Thu Mar 2 16:52:34 2017 +0900,commitMsg2
Thu Mar 2 15:53:03 2017 +0900,commitMsg1
カンマ区切りで[日付,コミットメッセージ]の最新5件を抽出しています。
取得したgit logをテーブル表示
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | ----------------------------------/* eslint-env node, express */var express = require("express")var router = express.Router()/* GET home page. */router.get("/", /* @callback */ function (req, res, next) { const eol = require("os").EOL const execSync = require("child_process").execSync const cmd = "git log -n 5 --format=%cd,%s" // コマンド const logs = execSync(cmd).toString().split(eol) const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] let logData = [] logs.forEach(function (log) { if (log !== "") { const logDatum = log.split(",") const date = new Date(logDatum[0]) // yyyy/MM/dd hh:mm 形式 const dateText = `${date.getFullYear()}/${monthNames[date.getMonth()]}/${("00" + date.getDate()).slice(-2)} ${date.getHours()}:${date.getMinutes()}` logData.push({ date: dateText, msg: logDatum[1] }) } }) res.render("index", { title: "Watson Demos", logData: logData })})module.exports = router |
日付回りの処理が面倒なだけでやっていることは、
ログ単位で分割して
logData(配列)に{date:[コミット日], msg:[コミットメッセージ]} の形式でデータを詰めて受け渡しているだけです。
index.pug (jade)
画面のレイアウトデザインにMaterial Desigin Lite を使用しています。
1 2 3 4 5 6 7 8 9 10 11 | h2 更新履歴table.mdl-data-table.mdl-js-data-table.mdl-shadow--2dpthead tr th.mdl-data-table__cell--non-numeric 更新日付 th.mdl-data-table__cell--non-numeric 更新内容tbody each val in logData tr td.mdl-data-table__cell--non-numeric #{val[0]} td.mdl-data-table__cell--non-numeric #{val[1]} |
以下のように表示されます。
イイ感じ
