VSCode + MPE で楽に講義資料を作る

# 講義資料を楽して作りたい

昨年、某サークルで新入生向けにプログラミングを教えることになりました。当時、「**ん〜、時間がない！！！**」と思ったことから「**いかに楽してイイ感じの講義資料を作るか**」を考え始めました。その備忘録を記事にしたいと思います。

ここでは、以下のような講義資料を作ること目標とします。

- PDFにして配布ができる
- 印刷して配布ができる
- あわよくば、記事化できる

また、今回ご紹介する『Markdown Preview Enhanced』は、非常に便利な拡張機能がたくさんあります。ここでは「とにかく楽したい」という考えのもと、多くは説明しません。ですが、興味がある方は公式ドキュメント（英語）を読むことを強くオススメします。

# # 1. 環境

参考までに私の環境を載せておきます。

- Mac OSX または Windows10
- Visual Studio Code v1.32.3
- Markdown Preview Enhanced v0.3.12

# # 2. Markdown と VSCode

Markdownは、とっても書きやすいHTMLみたいなものです。ここでは詳しい説明は致しません。代わりに参考ページを載せておきます。

[Markdownとは · 日本語Markdownユーザー会](http://www.markdown.jp/what-is-markdown/)
[Markdown記法 サンプル集 - Qiita](https://qiita.com/tbpgr/items/989c6badefff69377da7)

またエディタは『Visual Studio Code』（以下、VSCode）を利用します。私は試していませんが、Atomでも同じように利用できるでしょう。

# # 3. Markdown Preview Enhanced

VSCode の拡張機能として『 Markdown Preview Enhanced 』（以下、MPE）を導入します。MPE は Markdown のプレビューや書き出し、ファイルの埋め込みなど、様々な機能を拡張してくれる非常に強力なプラグインです。

[Introduction - Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/)

VSCodeの「拡張機能」から検索すると出てくるので、インストールしましょう。
![install](https://qiita-image-store.s3.amazonaws.com/0/201931/d62b0864-a167-737e-955b-e40b9a34ed80.gif)


# # 4. 資料作りに役立つタグ （ただの Markdown）

通常のMarkdownで私がよく使うテンプレートです。「おい、Markdownどこいった？」と思う程度には、HTMLタグを多用します。

## 日付や著者名

書類を作るときは、日付や著者名などを右寄せにして載せたいことがあります。そのときは素直に`<div style="text-align: right;">`で括ってあげます。

``` markdown
# 講義名

## 第n回 タイトル - Title -

<div style="text-align: right;">
サークル名
<br>
担当：なまえ
<br>
20XX-XX-XX
</div>
```

![date_writer](https://qiita-image-store.s3.amazonaws.com/0/201931/2afb7961-1016-b442-a987-d8fc838ace10.png)

どんどん、HTML タグを使っていきましょう。

## 改ページ

PDFや印刷するときに、任意の位置で改ページしたいシーンが多々あります。そのときは`<div style="page-break-before:always"></div>`を使います。

``` markdown
# ページ１

<div style="page-break-before:always"></div>

# ページ２
```
![kaigyo](https://qiita-image-store.s3.amazonaws.com/0/201931/ff9b3eba-00b2-ca3d-fbd5-2dd7b334845f.png)

この１行で改ページができるので、スニペットを定義してもいいかもしれません。

## ヘッダーのようなもの

「サークル内だけで共有したい講義資料なので、すべてのページにコメントを載せたい」ということで、先ほどの改ページと組み合わせつつ使います。

``` markdown
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

# ページ１

<div style="page-break-before:always"></div>
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

# ページ２
```
![header](https://qiita-image-store.s3.amazonaws.com/0/201931/84a3ca0e-d4f2-c025-ab07-6903c8499bb4.png)
![header](https://qiita-image-store.s3.amazonaws.com/0/201931/24097b0a-b873-9de1-8766-a5a07e617a79.png)

後に登場する`@import`と組み合わせれば、ヘッダーの一括編集なんかもできそうです。

# # 5. MPE でもっとスマートになる

## Import external files `@import "file_path"`

MPE で**一番**好きな機能です。
`@import "file_path"`の構文で、画像やソースファイルなど様々なファイルを埋め込むことができます。
![@import](https://qiita-image-store.s3.amazonaws.com/0/201931/84844fd4-42fe-667e-900d-6970c15fb299.gif)

画像だけでなく、**ソースコードもそのまま埋め込める**ので、いちいちコピペする必要がありません。Markdown も埋め込めちゃうので、ヘッダーなどの共通して使う部分をパーツとして分割して使うこともできそうです。

詳細は公式ドキュメントを読むと良いでしょう。非常にシンプルで強力な機能で、手軽に楽ができます。

[File Imports - Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/file-imports)

また、`{}`で attribute を指定できます。`{width=50%}`のような画像のサイズ指定が手軽にできるので、面倒なリサイズも必要ありません。

## Table of Contents `[TOC]`

Table of Contents はいわゆる目次を Header Tag （`# タイトル` など） から自動で生成してくれる機能です。`[TOC]` の５文字で目次が書けちゃいます。

ファイル冒頭に設定を記述することで、表記する範囲をカスタマイズすることも可能です。

``` markdown
---
toc:
  depth_from: 1
  depth_to: 6
  ordered: false
---
```

とくに記事化するときなんかは楽ですね。
![TOC](https://qiita-image-store.s3.amazonaws.com/0/201931/07619427-1071-2a1d-5018-456edc28dac1.gif)

## Diagrams

MPE は Flow Charts や PlantUML といった Markdown とは異なる「図形を書くコンポーネント」に対応しています。

[Diagrams - Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/diagrams)

いやー、神ですね。
![PlantUML](https://qiita-image-store.s3.amazonaws.com/0/201931/335d9020-25cb-2344-c493-ccc9581a1f8b.png)

ただし、それぞれの記法に勉強コストがかかるため、私は「書きなれる機会があれば使う」くらいの心持ちでいます。

# # ６. 書き出し

MPE には Pandoc や PhantomJS のような非常に様々な書き出しコンポーネントに対応しています。それぞれのコンポーネントは、必要に応じでインストールや設定が必要です。通常は、多少面倒でもこれらのコンポーネントを利用したほうがお得でしょう。

しかし、ここでは究極に手抜きをします。

1. MPE で開く
2. 右クリックから「Open In Browser」を選択
3. ブラウザで開いたら、印刷をする
4. 印刷からPDFに書き出す

これです。

![Mar-19-2019 02-30-49.gif](https://qiita-image-store.s3.amazonaws.com/0/201931/5c5f85e1-c501-3791-dac8-05cb2399404b.gif)

スマートな方法とは言い難いですが、エラーが出ることはないので甘んじて使っています。参考程度にどうぞ。

また、サンプルで使った Markdown もここに貼っておきます。

``` markdown
---
toc:
  depth_from: 3
  depth_to: 5
  ordered: false
---
<!-- ヘッダー -->
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

# 講義名

## 第n回 タイトル - Title -

<div style="text-align: right;">
サークル名
<br>
担当：なまえ
<br>
20XX-XX-XX
</div>

## Index

[TOC]

### ページ１

拙者親方と申すは、御立会の内に御存知の御方も御座りましょうが、
御江戸を発って二十里上方、相州小田原一色町を御過ぎなされて、
青物町を上りへ御出でなさるれば、欄干橋虎屋藤右衛門、只今では剃髪致して圓斎と名乗りまする。

<!-- 改行 -->
<div style="page-break-before:always"></div>

<!-- ヘッダー -->
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

### ページ２

元朝より大晦日まで御手に入れまする此の薬は、
昔、珍の国の唐人外郎と云う人、我が朝へ来たり。
帝へ参内の折から此の薬を深く込め置き、用うる時は一粒ずつ冠の隙間より取り出だす。
依ってその名を帝より「透頂香」と賜る。
即ち文字には頂き・透く・香と書いて透頂香と申す。

<!-- 改行 -->
<div style="page-break-before:always"></div>

<!-- ヘッダー -->
<div style="text-align: right; font-size: 8px;">サークル外持出禁止</div>

### ページ３

只今では此の薬、殊の外、世上に広まり、方々に偽看板を出だし、
イヤ小田原の、灰俵の、さん俵の、炭俵のと色々に申せども、
平仮名を以って「ういろう」と記せしは親方圓斎ばかり。
もしや御立会の内に、熱海か塔ノ沢へ湯治に御出でなさるるか、
又は伊勢御参宮の折からは、必ず門違いなされまするな。
```
# まとめ

「楽をする」ことに注目しつつ、私なりの講義資料の作り方をご紹介させていただきました。VSCode や Markdown 、そして MPE はまだまだ素晴らしい機能を持っています。状況に応じて最適な「楽」は異なると思うので、ベストな楽環境を考えてみてはいかがでしょうか。もし「こういう楽もあるよ」といった情報がありましたら、コメントなどに投げて頂けると嬉しいです。

少しでも皆さんの「楽」につながったら嬉しいです。よき「楽ライフ」を！