HTMLとJavaScriptでスライドを作るならimpress.jsやhtml5slidesなんか使ってゴリゴリとタグで書いたりするけど面倒くさいのでmarkdownとかで書いてガッと変換して欲しい。
のでいろいろ探してひと通り試してみた。
markdown-slider
参照：markdownからHTMLスライドをつくるgemを書いた
- gem
- html5slidesに吐き出すだけのシンプルな構成
- markdown記法がgithubライクなので個人的にとっつきやすかった
mdslide
参照：Markdownテキストからスライドが作れるymrlのmdslideが便利
- gem
- テーマ指定やら出力オプションを指定できるっぽい
- サーバも立てれる
- ruby1.9.2入れてなかったので結局使わなかった
markdown2impress
- perl
- impress.js専用なので特有のpositionやrotateなんかもコメントで指定できる
slideshow
結局コレ使った。解説してる日本語エントリが見つからなかったので細かく解説しようと思います。
- gem
- textile,markdown対応（オプションでreStructuredTextも対応）
- 豊富なテンプレートパック
- オプションでシンタックスハイライト可能（勝手は悪い）
インストール
$gem install slideshow
コンバート
index.md
#markdownでスライドつくりたい
markdownでかく
* らくちん
* きれい
#slideshowを使おう
gemからインストールしてほげほげ
markdownで書いた場合、h1にあたる一番大きなヘッダ(#)が各スライドの見出しになるよう分割されます。
$slideshow index.md
それをslideshowコマンドでコンバートすることでhtmlやらCSSやらを吐き出してくれます。
出力オプション
- -t
- 各種テンプレートパックを指定可能
- 事前にテンプレートをインストールしておく（後述）
- -o
- 出力先ディレクトリ
テンプレート
標準のデザインは非常にシンプルなものですが、それ以外のJSスライドライブラリが利用可能です。
テンプレートをインストールする
$slideshow -f shower
~/.slideshow配下にインストールされます。-lでインストール済みのテンプレが見られます。
コンバート時にテンプレートを適用する
$slideshow -t shower index.md
コンバート時にインストール済みのテンプレ名を指定します。~/.slideshow/templates/*/slides.html.erbがそれぞれのテンプレートのひな形になるのでカスタマイズも可能です。
deck.jsやimpress.js、CSSSなどが利用可能です。公式のテンプレートパックリストから選択できます。 また、テンプレートのなかにはタイトルや作成者のヘッダ情報を要求するものがありますので、元ファイルの先頭にヘッダ情報を挿入する必要があります。ヘッダ情報のシンタックスは以下の通り
index.md
% Slide Show Headers
title: markdownでスライドつくりたい
author: @crifff
% Slides Start Here
#markdownでスライドつくりたい
先頭に%がついてる行はただのコメント扱いなので無くても問題ないです。コンテンツより先にyamlで必要な要素を指定してあげれば大丈夫なはずです。
シンタックスハイライト
coderayかultravioletが利用可能。以下はcoderayの例
gem install coderay
シンタックスハイライトを利用する場合、通常のコードと記法が違います。
index.md
#slideshowでシンタックスハイライト
<% coderay do %>
def hello
print "hello"
end
<% end %>
ここだけerbで書くのかよと突っ込まざるをえない。そしてS6とか標準のテンプレート系でないとまともにスタイルがあたらない。自分でCSS書くしかないのでちょっとアレ。
codeを埋め込むときの注意
githubやQiitaでしかmarkdown書いたことなかったので詰まったポイント。githubのmarkdownエンジンはRedCarpetを利用しているが、slideshowはKramdownを採用しているのでどうやら記法に差異があるみたい。githubでコードを埋め込む際にはチルダかバッククォートが使えますがslideshowの場合チルダしか使えないです。
細かいことはできないけどやっぱ楽だよ
1pxの配置にこだわりたいデザイナーさんとかには歯がゆいですが、markdownでサラリと書けてさっとスライドにできるので重宝してます。htmlだとgithub上で晒すのも簡単だしね！実際に社内勉強会で簡単なスライドつくりましたが、impress.jsとかつかってhtmlちまちま書いてた時より格段の手軽さです。
