先般Markdownが如何に便利かというエントリーを書きました。
これだけも充分なのですが、最近流行りのHTML形式へのプレゼンも簡単にできることを知ったので、メモ。
reveal.jsを導入する
色々なサイトを参考にしましたが、素人にはどれも難しく、、、このサイトをとても参考にさせて頂きました。
先ずはこちらで「Basic setup」の方をダウンロードし解凍します。
導入は以上です。
HTMLを直接編集する
これが最初わからなかったのですが、HTMLファイルでプレゼンするのですからHTMLファイルを直接編集すればいいのです。
リンクで参照するので解凍したフォルダ内から移動させずに作業します。
「index.html」を好きなファイル名に変更し、それをテキストエディタで編集します。
markdown用の記述
「div class="slides"」の後ろ変更します。Markdownだよ、ということや、ページ区切りの文字は「(改行)---(改行)」にするよ!といったことを記述します。
コピペ時の注意事項はこちらを参考にしました。
<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ファイルを開くとプレゼンテーションになります。
デフォルトのテーマで作るとこのような感じです。「→」のキーでページをめくれます。
好き嫌いあるかもしれませんが、個人的には好きなテイスト。きっといじればフォントサイズも調整できるのでしょう。
縦方向のスライド
HTMLファイルでのプレゼンの醍醐味は縦方向にもいスライドすることなのですが、何故か私、上手くいきませんでした。。。 *1 こちらのサイト yoghurt1131.hatenablog.com の通り
data-separator-vertical=">>>$"
とすれば下方向へスライドできます
PDFにする
PDFにすることも簡単です。
HTMLをブラウザで開き、URLの所を書き換えます
「#」の前に「?print-pdf」を入れます。
この段階ではレイアウトが崩れますが、Google ChromeのPDF保存機能でPDFにすれば、綺麗なPDFになります。
PDFからPowerPointにする
これは前回 MarkdownのWordにもPowerPointにもなる汎用性の高さに感動 - 広告/統計/アニメ/映画 等に関するブログ と手法は同じです。
無事、PPTにできるので、誰とでも共有できるわけですが、残念ながら微妙に使いづらいところは使いづらいです。
その他
もっとReveal.js自体の勉強をしたら面白いプレゼンが出来そうです。
そもそもPowerPointでプレゼンする必要性などないのですから。
*1:2016/9/22更新。