reveal.js でHTMLプレゼンテーション

「hakimel/reveal.js · GitHub」でMITライセンスで公開されているreveal.jsを使うと、結構かっこいいプレゼンテーション資料が作れます。

確認時点での最新版は2.1のようです。https://github.com/hakimel/reveal.js/tree/v2.1 へアクセスして、CodeタブのページにあるZIPボタンをクリックすると、v2.1のアーカイブファイル reveal.js-2.1.zip を入手できますhttps://github.com/hakimel/reveal.js/archive/v2.1.zip をダウンロードしてもよいでしょう。

HTMLでスライドを記述することもできますが、Markdownでも記述できるそうです。>section data-markdown<内に書けばよいそうです。ZIPを展開して、そのディレクトリへ次のファイルをsample.htmlとでも名前をつけて保存しましょう。あとは、それをWebブラウザで開いてみれば動きます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>reveal.js sample presentation</title>
    <meta name="author" content="hiro345">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/default.css" id="theme">
    <link rel="stylesheet" href="lib/css/zenburn.css">
    <script>
      document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
    </script>
    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>Reveal.js</h1>
          <h3>HTMLプレゼンテーション</h3>
          <p>
            [ESC]で全スライド表示<br />
            <small>Created by <a href="https://www.hiro345.net/blogs/hiro345/">hiro345</a> / <a href="http://twitter.com/hiro345">@hiro345</a></small>
          </p>
        </section>
        <section data-markdown>
          <script type="text/template">
          ## ページタイトル

          テキスト [hiro345 blog リンク](https://www.hiro345.net/blogs/hiro345).
          </script>
        </section>
        <section>
          <h1>おしまい</h1>
          <h3>BY hiro345 / sssg.org</h3>
        </section>
      </div>
    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>
    <script>
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        theme: Reveal.getQueryHash().theme,
        transition: Reveal.getQueryHash().transition || 'default',
        dependencies: [
          { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
          { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
        ]
      });
    </script>
  </body>
</html>