LoginSignup
60
72

VSコード / マークダウン記法で資料作成する時に重宝するツール

Posted at

ごきげんよう、百合宮桜です。
今日は、マークダウン記法で資料作成する時に重宝するツールを紹介したいと思います。

画像作成ツール

私が仕事で作成する資料は、ハンズオンの手順書とかアプリの設計書とか、スクリーンショットが必要なものが多いです。よって、効率的に画像作成できるツールはとても大事✨
以下の2つを気分によって使い分けています。

Screenpresso

みんな大好き「Screenpresso」です。
https://www.screenpresso.com/ja/

image.png

「見せられないヨ!」ってところにモザイクをかけたり、注目してほしいところに赤枠をつけたりが簡単にできます。
確定ボタンを押すと、そのままクリップボードにコピーされていて、Ctrl + V で資料に貼り付けられるのも魅力('ω')
無償版と有償版があり、有償版には一度確定したものを再度編集する機能がついています。
有償版は買い切りで、サブスクのように月々の支払いがないので、まずは無償版で試してみて、楽しく使えるようなら有償版を買うことをおすすめします♪
ゆりみーも有償版ガチ勢です(*'▽')

ZoomIt

プレゼンガチ勢に人気な「ZoomIt」さん!
https://learn.microsoft.com/ja-jp/sysinternals/downloads/zoomit
プレゼンテーションする時に注目してほしいところを拡大したり、赤枠をつけたりと大活躍ですが、この枠を付ける機能や矢印を表示させる機能をスクリーンショット作成にも使っています。
あくまでも一時的に枠や矢印を表示させているだけなので、編集のようなリカバリーが効きません。なので、1か所だけ赤枠をつけたいとか作業量が少ない時に使っています。
インストールや使い方は、こちらの記事が分かりやすかったです。
https://webtan.impress.co.jp/e/2015/01/27/19185

VSコードの拡張機能

Markdown All in One

おそらく使っていない人はいないであろう、超メジャー拡張機能ですね!
目次の作成やドキュメントの階層化など様々な機能があり、大変重宝しています。

image.png

Markdown PDF

こちらもわりとメジャーだと思います。
名前の通り、マークダウンで書いた資料をPDFにする拡張機能です。
ヘイシャア の資料は PDFでお客様に提供する事が多いので、秒でPDF化できるのはとても助かります!

image.png

Paste Image

これも有名ですね。
撮影したスクリーンショットを Ctrl + Alt + V でマークダウン資料に貼り付けできる拡張機能です。
最初の1枚を貼り付けた時に、マークダウンが保存してある場所に画像格納用フォルダを自動生成して、その中に貼り付けた画像を保存していってくれます。
素敵なところはいくつかありますが、特に推しているのが……

  • 画像の命名規則を自分で指定できる
    image.png

    自分で分かりやすい名前を付けられるの嬉しいです。

  • 貼り付ける時のパターンを自分で指定できる
    image.png

    <img src='${imageOriginalFilePath}' width="100%">
    

    HTML でパターンを作ると、画像の大きさを調整できるのです。
    資料のクオリティが爆上がりです!

この2つが特に便利ですね!

Excel to Markdown table

最近見つけたのですが、慣れれば便利です!
資料に表(テーブル)を載せたい……でもマークダウンでテーブルを書くのは面倒(´・ω・`)という悩みを秒で解決できます!
image.png

あまり情報がないので、使い方も書いておきます。

  1. Excel 表を書きます
    image.png

    1セル1データで適当に作ればOKです

  2. Excelに書いた表をVSコード側にコピペします
    image.png

  3. テーブル化したい範囲を選択し、コマンドパレットから「Excel to Markdown table」を呼び出します
    image.png

    image.png
    ※コマンドパレットは ctrl + shift + P で呼び出せます

  4. テーブルの出来上がりです
    image.png

    image.png

Markdown Preview Enhanced

プレビュー時の背景色を変えてくれる拡張機能です。
image.png

その他に色々機能はあるみたいですが、今のところ使いきれてないです(´・ω・`)
https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/

ゆりみー自身は、背景が黒だろうと、ピンクだろうと大して気にしないのですが💦
ヘイシャア資料は、PDFでご提供する関係上、白背景での見栄えも気にした方が良いかなと思って、この拡張機能を入れています。
設定の「Preview Theme」から好きな背景色を選択できます。
ゆりみーは「one-light.css」を愛用なうです!

image.png

また、便利なものを見つけたら、追記していきます。
ごきげんよう(^-^)

60
72
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
60
72