講義資料を楽して作りたい
昨年、某サークルで新入生向けにプログラミングを教えることになりました。当時、「ん〜、時間がない！！！」と思ったことから「いかに楽してイイ感じの講義資料を作るか」を考え始めました。その備忘録を記事にしたいと思います。
ここでは、以下のような講義資料を作ること目標とします。
- 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ユーザー会
Markdown記法 サンプル集 - Qiita
またエディタは『Visual Studio Code』（以下、VSCode）を利用します。私は試していませんが、Atomでも同じように利用できるでしょう。
# 3. Markdown Preview Enhanced
VSCode の拡張機能として『 Markdown Preview Enhanced 』（以下、MPE）を導入します。MPE は Markdown のプレビューや書き出し、ファイルの埋め込みなど、様々な機能を拡張してくれる非常に強力なプラグインです。
Introduction - Markdown Preview Enhanced
VSCodeの「拡張機能」から検索すると出てくるので、インストールしましょう。
# 4. 資料作りに役立つタグ （ただの Markdown）
通常のMarkdownで私がよく使うテンプレートです。「おい、Markdownどこいった？」と思う程度には、HTMLタグを多用します。
日付や著者名
書類を作るときは、日付や著者名などを右寄せにして載せたいことがあります。そのときは素直に<div style="text-align: right;">で括ってあげます。
# 講義名
## 第n回 タイトル - Title -
<div style="text-align: right;">
サークル名
<br>
担当：なまえ
<br>
20XX-XX-XX
</div>
どんどん、HTML タグを使っていきましょう。
改ページ
PDFや印刷するときに、任意の位置で改ページしたいシーンが多々あります。そのときは<div style="page-break-before:always"></div>を使います。
# ページ１
<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>
# ページ２
後に登場する@importと組み合わせれば、ヘッダーの一括編集なんかもできそうです。
# 5. MPE でもっとスマートになる
Import external files @import "file_path"
MPE で一番好きな機能です。
@import "file_path"の構文で、画像やソースファイルなど様々なファイルを埋め込むことができます。
画像だけでなく、ソースコードもそのまま埋め込めるので、いちいちコピペする必要がありません。Markdown も埋め込めちゃうので、ヘッダーなどの共通して使う部分をパーツとして分割して使うこともできそうです。
詳細は公式ドキュメントを読むと良いでしょう。非常にシンプルで強力な機能で、手軽に楽ができます。
File Imports - Markdown Preview Enhanced
また、{}で attribute を指定できます。{width=50%}のような画像のサイズ指定が手軽にできるので、面倒なリサイズも必要ありません。
Table of Contents [TOC]
Table of Contents はいわゆる目次を Header Tag （# タイトル など） から自動で生成してくれる機能です。[TOC] の５文字で目次が書けちゃいます。
ファイル冒頭に設定を記述することで、表記する範囲をカスタマイズすることも可能です。
---
toc:
depth_from: 1
depth_to: 6
ordered: false
---
とくに記事化するときなんかは楽ですね。
Diagrams
MPE は Flow Charts や PlantUML といった Markdown とは異なる「図形を書くコンポーネント」に対応しています。
Diagrams - Markdown Preview Enhanced
いやー、神ですね。
ただし、それぞれの記法に勉強コストがかかるため、私は「書きなれる機会があれば使う」くらいの心持ちでいます。
# ６. 書き出し
MPE には Pandoc や PhantomJS のような非常に様々な書き出しコンポーネントに対応しています。それぞれのコンポーネントは、必要に応じでインストールや設定が必要です。通常は、多少面倒でもこれらのコンポーネントを利用したほうがお得でしょう。
しかし、ここでは究極に手抜きをします。
- MPE で開く
- 右クリックから「Open In Browser」を選択
- ブラウザで開いたら、印刷をする
- 印刷からPDFに書き出す
これです。
スマートな方法とは言い難いですが、エラーが出ることはないので甘んじて使っています。参考程度にどうぞ。
また、サンプルで使った 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 はまだまだ素晴らしい機能を持っています。状況に応じて最適な「楽」は異なると思うので、ベストな楽環境を考えてみてはいかがでしょうか。もし「こういう楽もあるよ」といった情報がありましたら、コメントなどに投げて頂けると嬉しいです。
少しでも皆さんの「楽」につながったら嬉しいです。よき「楽ライフ」を！