Zenn
🖼️

コマンド一発で GitHub, GitLab の README.md に画像を入れる

2022/07/24に公開
GitHub
GitLab
Zsh
tech

要旨

funasoul/git-add-screenshot.zsh を使えばターミナルだけで github, gitlab の README.md に指定した画像を埋め込むことができるので便利。

背景

GitHub や GitLab の README.md にスクリーンショットなどの画像を埋め込みたいことがよくある。今までは GithubGist のディスカッションに出ていた方法を使っていた。まとめると、

  1. 空のbranch(images)を作る
  2. images branch に画像を置く
  3. github に push して画像のURLを取得
  4. README.md に3.で取得したURLを記述

となる。この方法は画像ファイルはコードのbranch (master や main) からは見えないのでrepositoryがきれいで大変よい。他の方法として Issue に画像をアップロードし、URLを取得する方法があるが、github と gitlab 間でリポジトリを行き来することがあるので git 単体の機能で実現できる上記 別branchを作る方法を利用していた。

で、実際にやってみるとわかるがこの手順はかなり面倒なので自動化する zshの関数(git-add-screenshot)を書いた。

git-add-screenshot.zsh

GitHub Gist の URL はこちら。

これを ~/.zshrc に追加し、以下の様に実行。

実行例

% git-add-screenshot ~/Downloads/screenshot.png

実行結果

色々表示されるが、色がついた箇所に注目すればOK。

...
## Screenshot
![screenshot](https://github.com/funasoul/testrepo/raw/images/screenshot.png)
...

上記のような水色の文字列が表示されるのでこの2行をコピーして README.md にペーストすればよい。macOS を使っているなら自動的に上記2行がクリップボードにコピーされているので直接 README.md を開いてペーストするだけ。
あとはメッセージに表示されるように

git add README.md
git commit -m 'Add screenshot to README'
git push origin main

を実行すればよい。だいぶ楽になった。

考察

Todo は以下の通り。

  • GitHub, GitLab 以外の CMS への対応
  • エラーハンドリングは十分か再確認する
  • Linux でも README.md にペーストすべき内容を自動的にクリップボードにコピーするように(pbcopy の箇所を xsel --clipboard --input とすればできる気がするが未確認)
  • $EDITOR README.md で README.md も自動的に開いてその後 git add なども実行しちゃえば良い気がするが、やりすぎな気もするので保留

Discussion