画像付きマークダウンを手軽に共有する方法

要約

• マークダウンで画像つきの資料を作る方法を共有したい。

こんな人に

• 資料を不特定多数に共有することがよくある。
• Excel,PowerPoint,Wordではなく、マークダウンで展開したい
  

前提

• Windows環境です。
• 拡張機能等は、2023年4月現在の情報です。

きっかけ

1.資料での伝達がメインになってきた。

手順やナレッジを人に伝えたい時、
コロナ前までは、会議での口頭説明でＯＫでしたが、
最近は、文章や資料にまとめて非同期で伝達が多くなりました。

その際、画面での設定手順など、画像をつけたほうが圧倒的に通じやすいので、
「画像つきの資料」を作成する必要性がでてきた。

2.資料形式の傾向

画像つきの資料といえば、Excel,PowerPoint,Word が主流でしたが、
最近は、MS製品はダサい、履歴管理ができない、編集できないなどの理由からマークダウンで残すのが推奨とされてきました。

3.画像添付の問題

しかし、いざマークダウンで資料を作って連携しようとすると、画像添付の問題にあたります。
「.md」形式のファイルに画像を添付すると、同じフォルダに下記のように画像を保存する必要があります。
さらに、これを共有する場合は画像ファイルも一緒に共有する必要があります。

↓共有したい資料一式

↓メールやチャットでこれ一式送らないといけない。

もし画像を一緒にしないと、せっかくの手順が伝わらないものになります。

↓画像つき(手順が明確に伝わる)

↓画像なし（手順が伝わるかどうか不安）

しかし、メールやチャットで画像一式送るのは、なんかメンドくさいし、
zip圧縮して送るのも手間だし、それならExcel使う？となり、
せっかくマークダウンで資料作っても、画像添付するだけで共有するハードルがあがってしまう状態でした。
これがどうにかならないかと、いろいろ設定してみて、とりあえずの形ができました。

解決方法

• VSCode拡張機能で、添付画像をmdファイルに埋め込みしたhtmlファイルを作ります。
  

解決にあたって

• マークダウンエディタは多数ありますが、一番ポピュラーで拡張機能も豊富なvsCodeを使います。
• VSCodeで「.md」ファイルを編集して、完成したら、htmlファイルを出力します。
• htmlファイルにはbase64埋め込みされた画像が含まれるので、画像ファイルを共有する必要がありません。

やること(1/2)

VSCodeに拡張機能をインストール

• Markdown All in One → マークダウンまわりの設定用
• Paste Image → 画像貼り付け用
• ※Markdown関係でよく「Markdown Preview Enhanced」が使われますが、本用途には不要なので、アンインストールしておきます。

やること(2/2)

VSCodeの設定

1.画像保存フォルダの設定

Paste ImageのBase Path設定に、「${currentFileDir}/img/」を設定します。

• 貼り付けた画像を保存する場所を指定します。
• デフォルトは、同じ場所ですが、ごちゃごちゃするので、/img フォルダにします。
  • 画像保存フォルダが一緒の場合
    
  • 画像保存フォルダをimgにする場合
    

2.base64変換チェックオン

Markdown > Extension > Print:img to Base64 をオンにします。

• これをすることで、html出力時に、画像ファイルがbase64変換して埋め込みます。

3.自動出力 チェックオン

Markdown > Extension > Print:On File Save をオンにします。

これをする事で、.md ファイルを保存すると、自動でhtmlファイルが作成されます。

実際にやってみる

• Qiitaログイン手順を作りました。「手順.md」というファイル名にします。

# Qiitaログイン手順

## 1.Qiitaを開く
　https://qiita.com/

### 2.「ログイン」をクリック
![](./img/2023-05-07-10-29-40.png)

### 3.ID,メールアドレス、パスワードを入力
![](./img/2023-05-07-10-32-12.png)

### 4.Qiitaにログインをクリック
![](./img/2023-05-07-10-33-36.png)

VSCode上は↓こうなります。（右側はプレビュー）

保存すると、同じファイル名のhtmlファイルが自動で出力されます。

• 出力したhtmlを開くとこうなります。
  

• htmlのソースを開くと下記のように画像がbase64変換されて埋め込まれます。
  

• こうすることで、画像を添付しなくても、htmlファイルだけで、共有が可能になります。
  ↓もし、base64の設定がない場合は下記のように画像へのパスが書かれる事になります。
  この場合、画像ファイルがそこに存在していないと、画像が表示されません。
  

base64埋め込みされた状態のhtmlを、画像がないフォルダに保存してみても

画像が表示されます。

base64埋め込みすれば、画像ファイルを添付しなくても、画像表示可能となることが確認できました。

やってみて

• とりあえず当初の目的は達成でき、共有できるようになりました。
• 同じ形で、pdf形式も可能です。どちらにするかは共有先の環境とか、好みの問題になります。
• 共有したものをだれでも編集できるようにするには、「.md」を共有することになりますが、その人が同じ設定をしてないと、同じhtmlは作れません。なので今回の方法はあくまで一方向の共有向きです。
• notionやGitHubやMS365やSharePointとか、元々共同作業環境があるのであれば、今回の方法は必要ないかもしれません。
• あくまで「手元でさらっと書いたものを、手軽に共有（そのあと一人歩きしてもよい）」というスタイルにこだわりたかった。
• 出力したhtmlがそっけなさ過ぎて、装飾したい時には追加のcssを設定することもできます
  追加のCSS
  
• 同じ悩みを抱えている誰かの一助になれば幸いです。