何も知らないがmarkdownでスライドを作りたい人がreveal.jsを使えるようにする
パワーポイント以外のスライドツールに触りたくなったので、reveal.jsを触ってみました。 その導入や使い方備忘録。
本記事の目指すところ・対象層。
- markdownでいい感じにスライドが書けると嬉しいと思っている
- 理屈はいいので、とにかくどうすれば動く環境になるか知りたい
reveal.jsとは
https://revealjs.com/ のような感じのスライドをhtml、css、jsで作れるすごいやつ。 markdownの記法が利用できるので、今回選んでみました。
準備編
準備編では自分が今の環境を作るこれはいらないので消そうなど、考えたことを色々記入していきます。
動くのそのままが欲しい人用に、以下の作業を行なった後の自分のテンプレートを置いておきます。
使い方は次節。
reveal.jsをインストールする
https://github.com/hakimel/reveal.js/ ソースコードをダウンロードします。
ターミナルを開いて以下を実行します。
$ git clone https://github.com/hakimel/reveal.js
実行するとめちゃくちゃ色々なものがついてきて割と困惑すると思います。(しました。) しゅっと使うだけならこんなに色々要らないのですが、これだけのものをカバーしているよと言う感じです。
ダウンロードしたものから色々抜粋する
インストール直後のiindex.html
は、利用されていないプラグインや、markdown対応などされていません。
別にそのままでもいいのですが使っているものだけ管理したいので…と言うタイプなので、
使わないものを削除、使うものはその理由を解説しながらそれに合わせてコードも少しずついじります。
ファイル構成
大きく変わったのは以下です、詳しくは解説します。
- トップディレクトリをindex.html
を残して全て削除、index.md
を追加
- pluginディレクトリ内のものの削除
┣ css/ ┃ ┣ print/ ┃ ┣ thema/ ┃ ┣ reset.css ┃ ┣ reveal.css ┃ ┗ reveal.scss ┃ ┣ js/ ┃ ┗ reveal.jd ┃ ┣ lib/ ┃ ┣ css/ ┃ ┣ font/ ┃ ┣ js/ ┃ ┣ plugin/ ┃ ┣ highlight/ ┃ ┣ markdown/ ┃ ┣ math/ ┃ ┣ note/ ┃ ┗ print-pdf/ ┃ ┣ index.md ┗ index.html
cssフォルダについて
内容物に関して特に変更はしていません。 入っているものの用途は以下。
print/
:後述するpdf出力用のcssthema/
:見えている見栄えの部分を構成するcss、自作してもいいですが一旦そのまま使いたいので消してません。つかわわない奴は消してもいいかもreset.css
:ブラウザ間の差を消すためいろんなプロパティをリセットしてくれるやつreveal.css
:スライドのレイアウトとかを定義している(っぽい)cssreveal.scss
:reveal.css
を生成するscssファイル
jsフォルダについて
内容物に関して特に変更はしていません。 入っているものの用途は以下。
reveal.js
:スライドの動きとかを定義している(っぽい)js、というか本体
libフォルダについて
内容物に関して特に変更はしていません。 入っているものの用途は以下。
css/
:後述するシンタックスハイライトで使うmonokai.css
が入っています、zenburn.css
は何に使ってるか不明です(参照はされていないよう)font/
:フォントが入っています、一旦中に入っているもので作ればいいかなと思っているのでそのままjs/
:ie9用にhyml5shiv.js
とこれまた呼ばれていないpromise.js
が入っています、両方消してもいいもしれません
pluginフォルダについて
使いたいもの以外削除してます、入っているものの用途は以下。
highlight/
:シンタックスハイライト用markdown
:マークダウンを読み込ませる用math/
:数式用note/
:スピーカーノート用print-pdf/
:pdf出力用……らしいのですが使ってるのをみたことがない、とりあえずおいてあるだけ
index.htmlとindex.md
本文を記述するindex.md
と、
上のプラグインやindex.md
の読み込みのために編集をしたindex.html
です
markdownの記法設定は各々変えられるのでその部分だけ解説。
body以下に以下のコードを記述します
<div class="reveal"> <div class="slides"> <section data-markdown="index.md" data-separator="^\n---\n$" data-separator-vertical="^\n>>>\n$" data-separator-notes="^Note:"> </section> </div> </div>
data-markdown
:マークダウンのファイルdata-separator
:スライドの横の切り替え境界を表す記号、今回は改行
->---
->改行
でスライドの変更をしますdata-separator-vertical
:スライドの縦の切り替え境界を表す記号、今回は改行
->>>>
->改行
でスライドの縦の境界変更をしますdata-separator-notes
:スピーカーノートの記述設定、今回はNote:
以降をスピーカーノートにしています
使い方
markdownではなく直書きする場合はそのままindex.html
をひらけばいいのですが、markdownを読ませる場合はローカルサーバーを立てないといけません。
これまたなんでもいいのですが自分はpythonでサーバを立てます。
index.html
とindex.md
のあるディレクトリで
python2系なら
python -m SimpleHTTPServer 8000
python3系なら
python -m http.server 8000
でサーバーを起動します。
あとは、http://localhost:8000
にアクセスすれば動作を確認できるはずです。
あとはmdファイルをよしなにしましょう。
その他知っておくと便利なこと
edc
キーを押すと、スライドの全体が見れる/?print-pdf#/
を後ろにつけてアクセスするとpdf出力モード- 例えば
http://localhost:8000/?print-pdf#/
- 真っ黒な画面になるが、pdfで印刷をかけるといい感じに出力される
- 例えば