UNIX的なアレ

UNIX的なこととかいろいろ

markdownからスライドを作るツールを調べてみた

markdownからスライド作成したい!

最近、非エンジニア向けのシステム研修なんてものをやっているのですが、資料はもっぱらmarkdownで作るんですよね。スライドつくるのって面倒だし、使い慣れてるツール(要するにemacs+markdown-mode)でがしがしかけるのがラク

ただ、それを研修的に教えるとなるとやっぱりスライドっぽくなっているほうが都合が良かったりします。必須ではないけど、やりやすいというくらいの話ですが。

でもそのために新規でスライドを作るのとか面倒過ぎて無理なわけです。

そんな時そういや、markdownからスライドつくるようなツールがあったよなーと思いだして、いくつか調べてみました。

slideshow

f:id:wadap:20140211152309p:plain

gemで用意されています。導入はすごく簡単。bundler経由で準備してみます。

Gemfile

source "https://rubygems.org"
gem "slideshow"

後は以下でOK。

bundle install --path vendor/bundler

テンプレートもいくつか用意されています。ただ、カッコイイテンプレートはないなぁ・・・テンプレートを追加するときは以下のようにして追加します。

bundle exec slideshow install shower

で、上記のテンプレートを使ってmarkdownからhtmlを生成するときはこんな感じ。

bundle exec slideshow build index.md -t shower

これであとはmarkdownからhtmlへ変換してくれます。ただ、今回サンプルで用意したshower以外はイマイチなテンプレートが多いですね・・・

まぁそれなら自分で作れって話ですが。こちらのサイトにありましたが、guardと組み合わせると便利ですね。実際に僕もここまで試してみましたがなかなか快適な環境でした。

Markdown × slideshow × guard で快適プレゼン資料作成 - てんてんのぶろぐ

Slide Show (S9) Guide (Book Edition)

remark.js

ちょっとユニークなのがこれ。ドキュメントにもかいてありますが、以下のようにかくだけでスライドが作れます。

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      /* Slideshow styles */
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# Title
- hoge
- fuga
---

# Agenda

1. Introduction
2. Deep-dive

    </textarea>
    <script src="http://gnab.github.io/remark/downloads/remark-0.6.0.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var slideshow = remark.create();
    </script>
  </body>
</html>

これはユニークで面白いですね。細かいところは自分でCSS書きましょうというのも潔い。ただ、markdownファイルから更にもう一度htmlファイルを作成するのがちょっと面倒ですねー。

reveal.js + markdown

さて、htmlでのプレゼンといえばreveal.jsですがそのままでは当然使えません。

そこで、pandocをつかって変換してからreveal.js用のhtmlを作成してからスライドにします。以下のサイトを参考にしてやってみました。

http://posaune.hatenablog.com/entry/2013/05/23/234731

あえてHaskellな環境を整えなくても以下にpandocのパッケージがあるので比較的手軽に試してみることができます。

Google Code Archive - Long-term storage for Google Code Project Hosting.

ちょっと試してみましたが、書いた文字数とreveal.jsで描写される文字サイズが合わずに断念。まぁそう簡単にいきませんね。

試してない

というわけで決定版がまだ見つかっていないわけですが、もうちょいいろいろ探してみようかなーと思います。