広告/統計/アニメ/映画 等に関するブログ

広告/統計/アニメ/映画 等に関するブログ

【備忘録】Markdownとreveal.jsでプレゼン資料を作ってみる

先般Markdownが如何に便利かというエントリーを書きました。

yyhhyy.hatenablog.com

これだけも充分なのですが、最近流行りのHTML形式へのプレゼンも簡単にできることを知ったので、メモ。

reveal.jsを導入する

色々なサイトを参考にしましたが、素人にはどれも難しく、、、このサイトをとても参考にさせて頂きました。

qiita.com

先ずはこちらで「Basic setup」の方をダウンロードし解凍します。

github.com

導入は以上です。

HTMLを直接編集する

これが最初わからなかったのですが、HTMLファイルでプレゼンするのですからHTMLファイルを直接編集すればいいのです。

リンクで参照するので解凍したフォルダ内から移動させずに作業します。

「index.html」を好きなファイル名に変更し、それをテキストエディタで編集します。

markdown用の記述

「div class="slides"」の後ろ変更します。Markdownだよ、ということや、ページ区切りの文字は「(改行)---(改行)」にするよ!といったことを記述します。

コピペ時の注意事項はこちらを参考にしました。

qiita.com

<div class="reveal">
    <div class="slides">
        <section data-markdown
                data-separator="^\n---\n$"
                data-separator-vertical=">>>$"
                data-vertical="^\n--\n">
            <script type="text/template">
  ~ここに本文~
            </script>
    </div>
</div>

本文のところに丸っとMarkdown記法で書いた本文をコピペします。

注意

Markdownファイルを呼びこむこともできますが、それにはサーバーの設定が必要なので、とても面倒そうでした。そこまでするなら、コピペでも良いかなと想います。

デフォルトでのプレゼン

ブラウザでHTMLファイルを開くとプレゼンテーションになります。

デフォルトのテーマで作るとこのような感じです。「→」のキーでページをめくれます。

f:id:yyhhyy:20160911203002j:plainf:id:yyhhyy:20160911203009j:plainf:id:yyhhyy:20160911203015j:plain

好き嫌いあるかもしれませんが、個人的には好きなテイスト。きっといじればフォントサイズも調整できるのでしょう。

縦方向のスライド

HTMLファイルでのプレゼンの醍醐味は縦方向にもいスライドすることなのですが、何故か私、上手くいきませんでした。。。 *1 こちらのサイト yoghurt1131.hatenablog.com の通り

data-separator-vertical=">>>$"

とすれば下方向へスライドできます

PDFにする

PDFにすることも簡単です。

HTMLをブラウザで開き、URLの所を書き換えます

f:id:yyhhyy:20160911203158j:plain

f:id:yyhhyy:20160911203520j:plain

「#」の前に「?print-pdf」を入れます。

この段階ではレイアウトが崩れますが、Google ChromeのPDF保存機能でPDFにすれば、綺麗なPDFになります。

PDFからPowerPointにする

これは前回 MarkdownのWordにもPowerPointにもなる汎用性の高さに感動 - 広告/統計/アニメ/映画 等に関するブログ と手法は同じです。

無事、PPTにできるので、誰とでも共有できるわけですが、残念ながら微妙に使いづらいところは使いづらいです。

f:id:yyhhyy:20160911204006j:plain

その他

もっとReveal.js自体の勉強をしたら面白いプレゼンが出来そうです。

そもそもPowerPointでプレゼンする必要性などないのですから。

yoghurt1131.hatenablog.com

*1:2016/9/22更新。