ここ半年くらいプレゼンのスライドはreveal-ckというのを使ってます。
reveal-ck は、ブラウザ上のプレゼンツール reveal.js を簡単に使えるようにしたものです。
LinuxでもFirefoxが色付き絵文字を使えるようになったのをきっかけに、Markdownで書けてブラウザ上で動くプレゼンツールもいいかなーと。細かい調整とかもCSSで自由にできますし。
以下、まとめとかないと忘れるのでメモです。
インストール
% gem install reveal-ck
スライド作成
% mkdir hoge % cd hoge % touch slides.md % reveal-ck generate Generating slides for 'slides.md'.. % reveal-ck serve
これでブラウザから http://localhost:10000/ にアクセスするとスライドが表示されます。
slides.md が空なので最初は何も表示されませんが、エディタで slides.md に Markdown を書いて保存すると自動的にブラウザの画面が更新されます。Markdown で書きながらもすぐにスライドを確認できるのが便利です。
スライドのページ区切りは ---(マイナス記号3個)です。マイナス記号を4個以上書くとスライド内の水平線になります。
ページ区切りを *** で書くとそれ以降のスライドは下に進みます。もう一度 *** を書くと右に進むように戻ります。
画像は images ディレクトリを作って、その下に置きます。Markdownの中では次のようにして参照できます。
Markdown中で個別にスタイルを記述するには次のように書けば良いようです。
赤い文字
{:style="color:red"}
この記述方法は詳しくはわかってませんが、Markdown のパーサーは kramdown というライブラリを使っているようなので、細かい記述方法はそれを見るのが良いと思います。
いざとなったらMarkdown中に直接HTMLを記述することもできます。
fragment
自分はあまり使わないんですけど、reveal.js は fragment というのを使うと色々な効果を指定できるようです。
class 属性を指定すれば良いので、Markdown だと次のような感じで指定できます。
フェードイン文字列
{:class="fragment fade-in"}
フェードアウト文字列
{:class="fragment fade-out"}
設定
slides.md と同じところに config.yml ファイルを置けばスライドのタイトルやテーマを設定できます。
theme: "white" title: "たいとる" author: "作者名"
reveal.js の設定は revealjs_config として記述できます。
theme: "white" title: "たいとる" author: "作者名" revealjs_config: controls: true postgress: true slideNumber: true history: true overview: true enter: true touch: false loop: false rtl: false fragments: true autoSlide: 0 autoSlideStoppable: false mouseWheel: false transition: 'default' transitionSpeed: 'fast'
テーマは slides/css/theme の下にある CSS ファイルです。CSS なので適当なテーマファイルをコピーして加工して好みのテーマを作るのも簡単にできます。
公開
slides 配下は静的なコンテンツなので、まとめて置いておけば reveal-ck がなくてもスライドとして表示できます。GitHub Pages とかで簡単に公開できます。
http://localhost:10000?print-pdf にアクセスすると PDF用のページが表示されるので、そのページをブラウザの印刷機能でPDFとして保存すればPDFができあがります。
私の環境だと Firefox の印刷機能にバグがあるようで、2ページ目以降のスライドの文字が中心ではなく上によってしまう問題が起こりました。
試行錯誤したところ、slides/css/print/pdf.css に次のように記述すればうまくいきました。
.reveal .slides .pdf-page { border: solid 0.1px white; }
あとブラウザで表示したときよりもPDFだとビミョーに文字間が広くてプレゼン時は1行に収まっていたのが2行になったりしたので、ちょっと調整してます。これはフォントや環境によるかもしれません。
body { letter-spacing: -1px; }
