Qiitaの記事の画像をGit管理するTips

はじめに

こんにちは、梅雨です。

今回は、Qiita に投稿する記事の画像を Git で完全に管理するための Tips を紹介していこうと思います。

ここでいう画像とは、カメラで撮影される写真やパソコンのスクリーンショットのようなものではなく、複数の写真やテキスト、図形などの組み合わせによって構成されるものを指しています。

ちなみに、この方法は Qiita に限らず基本的にもどの投稿サイトやフロントエンドでも活用できるものになっているのでぜひ最後まで読んでみてください。

Draw.io とは？

今回、画像を Git 管理する上で重要となってくるツールがDraw.ioです。

Draw.io は無料の作図ツールで、Figma や Google Drawings のようなツールを想像してもらえれば問題ないです。

Draw.io 自体はそこまで高機能なわけではなく、そこそこ多くのアセットやテンプレートが用意されているシンプルなツールなのですが、VSCode の拡張機能である Draw.io Integration を用いると作図の体験が一気に変わります。

実際に VSCode でこの拡張機能を使ってみましょう。

プロジェクト内に .drawio.svg または .drawio.png を拡張子とするファイルを作成すると、Draw.io Integration がこれを認識して専用のエディタを起動してくれます。

このエディタで作図を行うことができます。

今回のデモでは以下のような画像を作ってみました。

画像の作成ができたら GitHub にリポジトリを作成しプッシュしましょう。

GitHub リポジトリの画像を マークダウンに埋め込む

ここまでできたらあと一息です。

以下の画像のように、リポジトリ内の画像のパーマリンクをコピーします。

今回の場合、パーマリンクは以下のようになりました。

https://github.com/tsuyuni/drawio-demo/blob/742eae7cecb43170da96f4eea6ea483e94abb361/sample.drawio.png

ぱっと見、URL が .png で終わっているためそのまま画像として使えそうですが、ここで一工夫が必要となります。

<!-- このままでは画像として展開されない -->
![](https://github.com/tsuyuni/drawio-demo/blob/742eae7cecb43170da96f4eea6ea483e94abb361/sample.drawio.png)

<!-- URLの末尾に "?raw=true" をつける -->
![](https://github.com/tsuyuni/drawio-demo/blob/742eae7cecb43170da96f4eea6ea483e94abb361/sample.drawio.png?raw=true)

URL末尾に ?raw=true をつけることによって、以下のように画像が使えるようになりました。

おわりに

以上が、Qiita に投稿する記事の画像を Git で完全に管理するための Tips となります。

久しぶりに Qiita の記事を更新しようと思った時に、元の画像データがどこかいってしまっていた、なんてことを防げるのでぜひ積極的に活用してみてください。