GitHub Profile用にGit Graph風の職務経歴書を作った
こんにちは、ryoooです
GitHub Profile、綺麗にしている人をちらほらお見かけしていましたが、自分は何も手を入れてなかったので思い切って整えました
せっかく整えるならなにか工夫したくて、Git Graph風の職務経歴書を作ってみましたので、本記事ではどのように実現したのかを紹介します
Git Graphとは
こんな感じのやつですね
現在の業務は様々なプロジェクトを並列で進めているのでこんな感じの表示がエンジニアらしくていいんじゃないかと思って試してみました
ツールの選定
gitgraph.jsを使う案（不採用）
検索してみるとgitgraph.jsというツールが見つかりました
このツールを使えば以下のような仕上がりになるようです。
デザインも修正しやすそうだったんですが、もっとターミナル感がほしいと思ってしまい、一方私はデザイン力が高くないのでこの案は不採用としました
git-graph（採用）
次にrust製のgitビジュアライズ用のコマンドラインツールのgit-graphが見つかりました
こういうのがエンジニアっぽいと思いこれを使いたくなりました
自分の職務経歴をコミットコメントに入れてgit-graphで描画したらそれっぽくなりそう？と思い、早速作ってみることにしました。
termshot（採用）
ターミナルでgit-graphで描画しても、そういえばターミナルをスクロールしながらスクリーンショットしたことないな...ということで検索してtermshotがみつかりました
termshot -- (撮影したいコマンド)
↑こんな感じで実行すれば、↓以下のような画像が取れるツールです
処理のイメージ
以下の流れでいけそうです
- gitリポジトリに職務経歴を登録
- それをgit-graphで描画
- termshotで撮影
素材は揃った、あとは作るだけだ！と思っていました。そう、このときまでは...
開発
gitリポジトリの作成スクリプト(sh)
まずは自分の職務経歴をgitリポジトリに登録しようということでここはshで実装しました
抜粋すると以下のような感じで、shを叩くたびに新規gitリポジトリを作成して、ブランチを切ったりマージしたりしながら職務経歴を作っていくような実装です
mkdir history
cd history
rm -rf .git
git init
# committer-dateをauthor-dateに合わせるコマンド
alias committer-date-is-author-date="git rebase HEAD^ --committer-date-is-author-date"
git checkout -b main
git commit --allow-empty --date "2007-03-31 0:00:00" -m "✨大学卒業"
committer-date-is-author-date
git checkout -b consulting-firm
git commit --date "2007-04-01 0:00:00" --allow-empty -m "✨入社"
committer-date-is-author-date
・
・
・
このような形で、17年間の職務経歴を思い出しながら簡単な内容で入力します
git-graphのfork (rust)
ここでgit-graphの表示をカスタマイズしたい気持ちになり、本家をforkして以下の2点を修正しました
- 日付表示を"Y年m月"形式に修正（デフォルトだとYYYY-mm-dd）
- 日付の左にブランチ色と合わせた◆マークを表示（視認性を上げるため）
termshotのfork (go)
次にtermshotを使ってみたのですが、こちらは日本語に対応できていませんでした...
issueみてもしばらく対応されなさそう
絵文字も文字化けする...
文字ばっかだと読みにくい仕上がりになっていたのでなんとか絵文字は表示したい...
そこでtermshotの方も、forkして以下の2点を修正しました
-
日本語化
- Hackフォントがembedで入っている状況だったので、これはhm-fontというピッタリのものを採用させていただきました(感謝)
HM Font. 「日本語文字も表示できる Hack」がコンセプトの日本語フォントです。 Hack をベースに、Hack に含まれない文字をM+ 1m のグリフで補っています。
-
絵文字対応
- canvasに文字を描画していくような実装（goのggという2d描画ライブラリを利用）だったので、Googleフォントのnoto-emojiを使い、絵文字の場合はHackフォントで描画せずnoto-emojiの画像をサイズ合わせて転写する実装に修正しました
これにより日本語とnoto-emojiに入っている絵文字はすべて表示されるように修正できました
(余談)termshotの便利だった点
termshotは-eオプションをつけると「撮影した内容を画像変換する前に、viでカスタマイズできる機能」が使えました
※ -eをつけると以下のようにgit-graphの結果をカラーコード含めてviでカスタマイズするフェーズが有効になり、カスタマイズ後の状態で画像を作成してくれます
これ細かいひと手間ですが、望んだ形でscreenshotが取れるのでとても良い機能だと思いましたし、ツール利用者に一定の自由度を認めるような機能があると便利なツールになると改めて感じました。
自分の場合は見出しのコマンドをそれっぽく"git tree"に変えて以下のようにしました
完成品
いろいろ対応が必要でしたが結果的に日本語・絵文字・ターミナル風でgit graph風の職務経歴書ができたので良しとします！
画像がでかすぎて読めない...！
文字化けしていないバージョンはこちらでご覧いただけます
上部だけ一部抜粋すると以下のような仕上がりです
絵文字対応しておじさん構文っぽくなった気もしますが、まぁ良しとします！
その他制作物
- 職務経歴のgit historyを作成するsh
- git-graphのカスタマイズ版
- termshotのカスタマイズ版
最後までみてくださりありがとうございました :)
これからも個人制作や技術周りの情報をポストしますので、よろしければxアカウントryoooをフォローいただけると嬉しいです
Discussion