Markdownからスライド資料を作る

何か人に見せる時には資料としてPower Pointとかでスライドを作るわけですが、 普段メモもMarkdown形式で書いてく事が多くて、 簡単なもの、特に文字だけの物の場合はそのままコピペするだけみたいな ことも多いので、 直接Markdownからスライドを作る物を試してみることに。

• Markdownからスライドを作れるツール
• Pandoc
  • 対応フォーマット
  • インストール
  • PDF作成(beamerテンプレートを使う)
  • beamerのテーマについて
  • 日本語について
  • Pandocまとめ
• Slide Show (S9)
  • インストール
  • スライド用HTML作成
  • PDFにコンバート
• その他のツール
  • Marp
  • mkd2pdf
  • markdown-pdf
  • markdown2impress
  • mdslide
  • slidedeck
  • remark
  • Markdown2pdf
  • Swipe
  • Slidify
  • Markdown Editor
  • Jekyller
  • landslide
  • cleaver
  • Remark

Markdownからスライドを作れるツール

探してみると思った以上に沢山ありました。

元々PDFを作れる物を探してたのですが、 slidesやpresentationと言った物でも、 htmlにしてブラウザ上で表示するものがとても多いのが印象的でした。

確かに、最近ブラウザ内で直接動くプレゼン資料みたいのをよく見かけるな、と。

とりあえず、目についたものをメモしてみます。

Pandoc

Pandoc

取り敢えずこれをメインに使っています。

対応フォーマット

PandocはMarkdownPDFだけではなくて、 様々なインプット・アウトプットに対応しています ¹。

インストール

インストールは上のページのInstallingからインストール用パッケージを。

MacでHomebrewを使う場合はbrew-caskを使って ²

$ brew tap phinze/cask/brew-cask
$ brew cask install pandoc

でも入れられます。

$ brew cask uninstall pandoc # if you installed pandoc by cask before.
$ brew install pandoc

$ brew install pandoc

PDF作成(beamerテンプレートを使う)

Pandocでプレゼン用PDFを作るにはbeamerを使います。

元々LaTexにおいて、書いた資料をスライドにするためのクラスなのですが、 Pandocを通してbeamer形式でのスライドを色々なインプットから作れる様になっています。

使い方は簡単で、まず下にある様なMarkdown形式のファイルを作ります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

% Title
% Author Name
% 19/Feb/2014

# First page

- Item 1
- Item 2
    - Item 3: (need 4 spaces)

My blog is: [rcmdnk's blog](http://rcmdnk.github.io/)

# Second page

## Sub title

This is second page.

![my logo](http://rcmdnk.github.io/images/MacApp/MacLogo.jpg)

最初のタイトル部分だけ特殊で、%に続いて、 タイトル、発表者名、日時の順で書きます。

その後は#に対応するタイトル部分によってページが区切られます ³。

それから、リスト表示の時に、普段は2文字字下げで書いてたんですが、 4文字字下げにしないと上手くインデントしてくれない場合があります。 (特に2つ以上のレベルでインデントがある場合。) ⁴

また、Pandoc特有の記法などもあるので 数式(Math)だとか覚えておくとより便利に使えそうです: pandoc-markdown。 上のタイトルページもpandoc-markdownの1つです。

これをスライドにするには

$ pandoc  -t beamer -V theme:Singapore -o slides.pdf memo.md

とすれば良いだけ。

-tによってアウトプットのテンプレートを指定します。 ここではbeamerを指定することでスライドPDFが出来ます。

アウトプットファイルの指定は-oで。オプションのついてない最後のmemo.mdが インプットです。

-V theme:Singaporeはbeamerでのテーマ指定です。

beamerのテーマについて

下のページにデフォルトで使えるテーマが良くまとまっています。

Beamer Theme Matrix

縦の方がthemeで指定できる名前で、横はcolorthemeで指定できるものです。 これらの組み合わせで上のページにあるようなアウトプットになります。

ここで、上のテーマについて、デフォルトだとちょっと足りなかったので 手を加えてみました。

テーマファイルは

$ ls $(dirname $(which pandoc))/../texlive/2012/texmf-dist/tex/latex/beamer/themes/theme/

にあるかと思います(Macで普通に入れたら/usr/local/texlive/...)。

$ kpsewhich beamerthemeSingapore.sty
/usr/local/texlive/2014/texmf-dist/tex/latex/beamer/themes/theme/beamerthemeSingapore.sty

ここにあるbeamerthemeSingapore.styが上で使ってるテーマなので、この中に、

1
2
3
4
5
6
7
8

 \addtoheadtemplate{\pgfuseshading{beamer@headfade}\vskip-1.25cm}{}

 \beamertemplatedotitem

+\hypersetup{colorlinks=true, linkcolor=blue, urlcolor=blue}

 \mode
 <all>

と、\hypersetup{colorlinks=true, linkcolor=blue, urlcolor=blue} を加えます。 これはリンクとURLのカラーを青色にしています。

デフォルトのままだとリンクは作成されてクリックできるようになるのですが、 色が他と一緒で見分けが付かなかったので。

出来上がったものはこんな感じ(下の絵はpdfファイルへのリンクになっています):

簡単に作るにはこの程度でもいい感じの資料が出来ます。

日本語について

Pandocまとめ

自分用のBeamerテーマを作ると更にはかどりますが、 取り敢えずはこの程度で。 そのうちもっと使う様になったら凝るかも。

以前プレゼン資料をLaTex Beamerに完全移行しようと思って やっぱり面倒で辞めた事があるんですが、 Markdownからでも行けるとなると結構便利なので テーマ作ってより常用するようにしたいかもとは思い始めました。

また、Pandocはインプットもアウトプットも様々な物があるので 覚えておいても損はなさそうです。

最近流行り？の reveal.js (hakimel/reveal.js) への変換も出来るのでWebで公開したい資料作りもはかどります。

また、reveal.jsと並んで人気の impress.js についても、デフォルトだと入っていませんが、 カスタムテンプレートを別途インストールすることで作ることが可能な様です。

Creating impress.js slide shows with pandoc · jgm/pandoc Wiki

こんな感じでテンプレートを別途用意して追加出来る様なので、 上に挙げた変換意外にも探せば変換できるものがまだあるかもしれません。

現在のところ非公式みたいですが、日本語でユーザーガイド を全訳したページもありました。

Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User’s Association

Slide Show (S9)

Welcome - Slide Show (S9) - A Free Web Alternative to PowerPoint and Keynote in Ruby

Rubyで書かれたプレゼン資料作りツール。

インストール

RubyGemsがインストールされてる環境なら

$ gem install slideshow

とすればインストール出来ます。

ただし、pdfを作りたい場合にはpdf変換用のツールも必要で wkhtmltopdfやprinceなどの HTML to PDFのコンバーターが必要

wkhtmltopdfはMacならHomebrewで

$ brew install wkhtmltopdf

QTが必要で一緒にインストールされます。

スライド用HTML作成

slideshowでも上のホームページにあるように幾つかテンプレートが用意されていて、 -t <template>で指定が出来ます。

何もしないとs6と言うテンプレートが使われて

$ slideshow build memo.md
...
$ ls
memo.css      memo.html     memo.md       memo.pdf.html s6

こんな感じでmemo.htmlと memo.pdf.htmlと言う二つの htmlファイルが出来ます。 (タイトルページについては上でやったPandoc+beamerとはまた違うので この場合はタイトル部分は無視されます)

memo.htmlはJavaScriptを使って ブラウザ上でプレゼンテーションを行うページです。 ページ右下にカーソルを持って行くとページ移動のボタンが出てきます。

memo.pdf.html の方はここからPDFを作るためのページ。 memo.htmlと違って、 外部ファイルに依存してないのでこのファイルだけ置いても見ることが出来ます。

PDFにコンバート

これを

$ wkhtmltopdf -O Landscape memo.pdf.html slides.pdf

とするか(-OオプションでLandscapeを指定して横向きA4(デフォルト)に)

$ prince memo.pdf.html -o slides.pdf

とすれば良いはずなんですが、 wkhtmltopdfだと横向きPDFにはなるんですが、区切りが上手く行かず 中途半端な所でページが切り替わります。

-O Landscapeを外すと、1ページ1枚にきちんとなるんですが、 縦向きになるので駄目。

princeの方は、memo.pdf.htmlの中に Prince: Page Size にあるように

/*
for princexml (CSS3 paged media support)
@page { size: A4 landscape }
*/

とlandscape指定があるんですが、何故か縦向きにしかならず駄目。

取り敢えずPandocの方が便利だったのでこちらはここまでで断念。

その他のツール

Marp

mkd2pdf

jdodds/mkd2pdf

MarkdownからHTMLを介してPDFへ変換する簡単なシェルスクリプト。 Markdownパーサーとwkhtmltopdf等PDFコンバーターが別途必要。

markdown-pdf

alanshaw/markdown-pdf

MarkdownからPDFを作るNodeのモジュール。

Grunt用プラグインもあります。

alanshaw/grunt-markdown-pdf

markdown2impress

yoshiki/markdown2impress

PDFではありませんが、impress.js形式にMarkdownから変換出来るperlのスクリプト。

プレゼンをmarkdownで書いたらええやん - Clouder::Blogger http://blog.clouder.jp/archives/001146.html

mdslide

ymrl/mdslide

Rubyで書かれたプレゼン作成ツール。 reveal.jsとかみたいにブラウザ用の資料が出来ます。

slidedeck

rmcgibbo/slidedeck

pythonベースのMarkdown to htmlプレゼンツール。

remark

gnab/remark

ウェブに置くプレゼンですが、 設置するHTMLファイルにMarkdown形式でプレゼン内容を書いて、 JavaScriptでその場でプレゼンに変換するJavaScriptのライブラリです。

reveal.jsなんかでもMarkdown領域のタグを使うと同じ様な事が出来ますが、 こちらはMarkdownを使うことに特化している感じです。

Markdown2pdf

jiho/Markdown2pdf

MarkdownをPDFにするMac用アプリです。ローカルでAppを作ります。

Appを作ってしまったら、後はそのアプリにDrag & DropするだけでPDFが出来る様になります。

Swipe

Swipe – simple, easy, interactive presentations. https://www.swipe.to/?alloweb

これはちょっと変わって、Webでのプレゼンを作れる Webサービスの様です。

開発の規模が大きそうで 派手にしたい場合には色々出来そうな感じ。

Slidify

Slidify

R Markdown からスライドを作るツール。 Rベースなので、Rを使ってる人には便利なのかも。

同じような物でknitrというものもありました。

Markdown Editor

Jekyller

landslide

cleaver

Remark

他にも便利そうな物があれば追加していきます。