しゃちの備忘録

プログラミングを中心とした技術関連の備忘録です(今のところ)

何も知らないがmarkdownでスライドを作りたい人がreveal.jsを使えるようにする

パワーポイント以外のスライドツールに触りたくなったので、reveal.jsを触ってみました。 その導入や使い方備忘録。

本記事の目指すところ・対象層。

  • markdownでいい感じにスライドが書けると嬉しいと思っている
  • 理屈はいいので、とにかくどうすれば動く環境になるか知りたい

reveal.jsとは

https://revealjs.com/ のような感じのスライドをhtml、css、jsで作れるすごいやつ。 markdownの記法が利用できるので、今回選んでみました。

準備編

準備編では自分が今の環境を作るこれはいらないので消そうなど、考えたことを色々記入していきます。

動くのそのままが欲しい人用に、以下の作業を行なった後の自分のテンプレートを置いておきます。

github.com

使い方は次節。

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出力用のcss
  • thema/：見えている見栄えの部分を構成するcss、自作してもいいですが一旦そのまま使いたいので消してません。つかわわない奴は消してもいいかも
  • reset.css：ブラウザ間の差を消すためいろんなプロパティをリセットしてくれるやつ
  • reveal.css：スライドのレイアウトとかを定義している(っぽい)css
  • reveal.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で印刷をかけるといい感じに出力される