[VSCode] なるべく楽に検証記録を残しておきたい
はじめに
最近、PoC 段階の仕事などの中で 「色々と自分なりに構築・検証してみて、それをチーム内に情報共有する」機会が多く、なーんか楽に共有できる方法が無いかなぁと模索しています。
動画は操作と一緒に言葉で解説を補足できるのが良いのですが、見る側としては意外と見るのに時間がかかるし、作る側としては微妙な操作失敗をカットしたりチャプター編集するのも結構大変。
個人的には文書の方が楽ということもあり、「スクリーンショットを取得しておき、Markdown にババっとまとめる」ということを実施してみています。
「今のところ、こんな感じでやっています」というのを残しておこうと思います。チーム内レベルへの操作手順などの情報共有に悩んでおられる方に、少しでも参考になれば嬉しいです。
用意するもの
- スクリーンショット取得ツール (Optional)
- Visual Studio Code
- 最終的に Markdown にまとめる際に利用。後述のコピペ機能が便利で、下記の拡張機能を入れておくと更に便利。
- Markdown All in One 拡張機能 (Optional)
-
Markdown PDF 拡張機能 (Optional)
- 最後に PDF に変換する際に利用。共有の際に PDF に変換しなくても良い場合は不要ですね。
VSCode の設定
現在の VSCode では、Markdown を書く際に画像ファイルをドラッグ＆ドロップでコピーすると、自動で画像ファイルをフォルダにコピーして、さらに Markdown のコードも記載してくれるという機能が備わっています。
これがめちゃくちゃ便利。複数の画像ファイルでも動作してくれますので、操作しつつスクリーンショットを取得し、後でまとめてコピペすることで楽に Markdown を作成することができます。
コピー先フォルダの設定
デフォルトでは、コピーされた画像ファイルは Markdown ファイルのあるフォルダ直下に作成されます。
画像ファイル数が少なければ問題は無いでしょうが、ファイル数が多くなるとフォルダ内が分かりにくくなります。このため、わたしは画像用のフォルダ配下にコピーされるよう設定を加えています。
VSCode 上で「Settings」画面を開き、「markdown」と検索し、下記の設定箇所を探します。
「Add Item」をクリックし、設定したい構造を記述して「OK」をクリックします。
上記の設定では、Markdown ファイルのあるフォルダの「_markdown_images」配下に元のファイル名のまま画像ファイルをコピーする、という動作になります。
より詳細な仕様については、こちらの情報も合わせて確認してください。
共有資料作成のやり方
1. 操作しながらスクリーンショットを取得する
いつも通り？操作をしながらスクリーンショットを取得していきます。
2. Markdown ファイルに画像ファイルをコピペする
新しく Markdown ファイルを作成し、取得した画像ファイルをまとめて VSCode の画面に Shift キーを押しながらドラッグ＆ドロップします。
すると、画像ファイルがコピーされ、Markdown 側にも各画像ファイルを表示するコードが作成されるはずです。
3. Markdown ファイルを修正する (Optional)
必要に応じて区切りの部分で章立てを加えたり、文章で補足などを書き込みます。
Markdown ＋ 画像ファイルで共有して問題ないチームであれば、この状態で共有します。
4. Markdown ファイルを PDF に変換する (Optional)
PDF 化したほうが良いチームであれば、Markdown PDF 拡張機能を利用して PDF 化したファイルも合わせて共有します。
最後に
今のところ、こんな感じで「残す資料を作成する」ことを大事にしています。
スクショ雑務っぽく感じてしまう部分もあるかもしれませんが、作業の内容・概要を他の人に伝えたり、後々自分で何やっていたかを見返したりする機会って意外とあったりします。簡単な資料を作成しておくと、その資料を作っていた自分を褒めたくなる場面に会うと思いますので、ぜひ簡単なところからでも実践してみてください😎
もちろん、雑務感は無くしていきたいので、もっと効率的な方法 (欲を言えば、誰でも実施できる方法) がないか、ぜひ模索してみていただけると幸いです！
Discussion