reveal.js

wiki, tech, tech, productivity
Page content

Reveal.jsとは

  • webでプレゼンテーションを出来るjavascript suite.
  • Markdownでコンテツ部分を切り出して記述が可能。
  • スライドも２次元?に連結可能
  • シンプルながら悪くない見た目である。
  • awesome-fontとか使えるからわりといいもの作れる

使い方

  • reveal.js を git clone してくる
    $ git clone https://github.com/hakimel/reveal.js
  • マークダウンファイルを見るように index.html を編集
    <head>
  ...
  css/reveal.css の直後でテーマを指定
  <!-- Themes: check right under css/. -->
  <link rel="stylesheet" href="css/theme/league.css">
  ...
  font-awesome が使えますよ (link の書き方や最新バージョンは font-awesome 公式を参照)
  	<!-- font-awesome -->
  	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  ...
</head>
<body>
  <div class="reveal">
    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">
      ★ここで markdown を読むように設定
      <section data-markdown="./md/content.md"
      data-separtor="\n---\n$"
      data-separator-vertical="\n--\n">
      <script type="text/template">
      </script>
      </section>
    </div>
  </div>
  ...
</body>
  • マークダウンはここに格納
    $ mkdir md
$ vim md/content.md
  • ファイルの書き方
    • 基本的に markdown 準拠.
    • data-separator, data-separator-vertical に指定した記号 (---, --) でスライドを区切る。
    • md 以外の要素としては、アニメーションとか font-awesome も使えるよ
    • md 以外の要素は、 デモ付きの使い方のイメージ を参考にしてほしい
  • 依存性を解決して起動！
    $ npm install
$ npm start

PDF印刷

webサーバを起動して作った資料のurlをGoogle Chromeで開く。 たとえば、ブラウザでプレゼンをするとき、 http://localhost:8080/test-presentation/# というurlになるのであれば、PDF出力する際には http://localhost:8080/test-presentation/?print-pdf/# というurlをまずChromeで表示する。 print-pdfという文字列を挿入する必要がある理由は、index.htmlに記述があるためである。

同種のツール

  • Remark.js: reveal.js よりシンプルらしい。同じく手元で動かせるし、 pdf 出力も可能。未使用だけど reveal.js に慣れてれば乗り換える必要はないか？？
  • GitPitch: github, bitbucket, gitlab 等のパブリックなリポジトリに一定の規則で置かれたファイルからプレゼンテーションを生成する SaaS