rcmdnk's blog
Last update

プロフェッショナルプレゼン。 相手の納得をつくるプレゼンテーションの戦い方。

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

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

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

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

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

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

Pandoc

Pandoc

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

対応フォーマット

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

インストール

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

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

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

でも入れられます。

追記: 2015/03/10

現在はコンパイルされたバージョンがHomebrewのFormulaの方に用意されています。

https://github.com/Homebrew/homebrew/blob/master/Library/Formula/pandoc.rb

https://github.com/caskroom/homebrew-cask/blob/master/Casks/pandoc.rb

現時点では同じバージョンですが、 pandoc自体はアプリケーションというよりはコマンドなので brew installでやった方が良いと思います。

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

追記ここまで

追記: 2022/06/21

現在のファイルはこちら。

https://github.com/Homebrew/homebrew-core/blob/master/Formula/pandoc.rb

$ brew install pandoc

追記ここまで

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

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

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

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

memo.md
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)

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

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

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

また、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/...)。

追記: 2015/04/23

これだと2012の部分が変わってしまってたりしますが、 スタイルファイルなどは全て

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

と、kpsewhichコマンドを使うことで探すことが出来ます。

追記ここまで

ここにある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ファイルへのリンクになっています):

slides

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

日本語について

追記: 2015/04/23

pandocコマンドでそのまま上の様なコマンドでは日本語が使えません。

LaTexエンジンを変更したりスタイルをちょっといじったりする必要があります。

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

追記ここまで

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変換用のツールも必要で wkhtmltopdfprinceなどの 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.htmlmemo.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

追記: 2016/08/08

Marp - Markdown Presentation Writer

ビューワーを備えたMarkdownでのプレゼン作成ツール。

MacDown (またはMou: http://25.io/mou/ ) の様にリアルタイムでMarkdownを書いたその場で右に スライドを表示してくれるというもの。 通常のMarkdown表示も出来ます。

Electronを使って作られていて、Windows、Macに加えLinuxでも動くので便利。

改ページが空白行に挟まれた---によって挿入されると言う仕様がありますが、 基本的には GitHub Flavored Markdown をベースにしているということです。

追記ここまで

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

追記: 2014/02/20

Windows ストア の Windows 用 Markdown Editor アプリ

名前がまんまなので検索しにくいですが、 Windows8.1用のMarkdwonエディタで、リアルタイム表示ができ、 スライド形式として表示することもできるので、 それを使ってそのままプレゼンにも使える、とのことです。

追記ここまで

Jekyller

追記: 2014/02/20

shower/jekyller

はてなブックマークのコメントで言及されていたツール。

MarkdownからShower と言うHTMLのプレゼン資料を作ってくれます。

このShowerは上で挙げた Slide Show (S9)slideshow-shower というテンプレートを加えて挙げることでも作る事が出来ます。

追記ここまで

landslide

追記: 2014/02/22

adamzap/landslide

Pythonベース。HTMLベースですが、 Prince を使ってPDFにエキスポートするオプションあり。

追記ここまで

cleaver

追記: 2014/02/22

jdan/cleaver

Nodeをつかって作るブラウザ用スライド。

追記ここまで

Remark

追記: 2014/02/22

gnab/remark

ブラウザベースのスライド。

追記ここまで

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

Sponsored Links
  1. $ pandoc -h
    pandoc [OPTIONS] [FILES]
    Input formats:  docbook, haddock, html, json, latex, markdown, markdown_github,
                    markdown_mmd, markdown_phpextra, markdown_strict, mediawiki,
                    native, opml, rst, textile
    Output formats: asciidoc, beamer, context, docbook, docx, dzslides, epub, epub3,
                    fb2, html, html5, json, latex, man, markdown, markdown_github,
                    markdown_mmd, markdown_phpextra, markdown_strict, mediawiki,
                    native, odt, opendocument, opml, org, pdf*, plain, revealjs,
                    rst, rtf, s5, slideous, slidy, texinfo, textile
                    [*for pdf output, use latex or beamer and -o FILENAME.pdf]
    ...
    

  2. Homebrewの拡張:brewdler, tap, cask

  3. --base-header-level=NUMBERオプションでこの区切りの レベルを変えられます。デフォルトは1(つまり#一個)。

  4. 公式 にはインデントについて書いてないように見えますが、 他の場所では4文字スペースと書いてある所も多いので (Markdown - Wikipediaとか) 今後はこれにそって書いていくように気をつけた方が良いかも。 ただ、コード書く時もそうですが、なるべく少ないインデントが好きで Pythonとかも大概4文字下げで書きますが、自分だけで書くなら2文字にしたい とか思ったり思わなかったり。。。

Sponsored Links

« GNU screenでのレイアウトの整理 GitHubレポジトリのアクセス解析: 公式に解析ツールが追加されていた »

}