下記の記事をまるっと参考にさせていただいて、Markdown だけでスライドを書けるようにした。
Markdown でプレゼン資料作りたかったのと、オンラインサービスでは記載しづらい内容などもあって、ローカル上＋Markdown のみで完結することが個人的な要件。
実行環境は Windows 7 上の Cygwin64。
そもそも Ruby を入れてないので、そこら辺も併せて実施。
最終的にどうなるか
$ slideshow build sample.md -t reveal
上記コマンドを実行すると、sample.md の Markdown ドキュメントから sample.html のスライドが生成されるようになる。
slideshow のインストール
Slide Show (S9) - A Free Web Alternative to PowerPoint and Keynote in Ruby
上記 Ruby 製の slideshow をインストールするにあたり、
apt-cyg, Ruby のインストール方法も併せて以下に記載する。
apt-cyg インストール
Cygwin で apt-get ライクに使えるパッケージ管理ツール。
今回は Ruby のインストールに使う。
Cygwin の setup-x86_64.exe からインストールして済ませるならば、apt-cyg の手順は飛ばして OK。
GitHub から取ってきて /usr/local/bin に配置。
$ wget https://raw.githubusercontent.com/transcode-open/apt-cyg/master/apt-cyg
$ chmod +x ./apt-cyg
$ mv ./apt-cyg /usr/local/bin/
$ apt-cyg --version
apt-cyg version 0.59
ある時期よりチェックサム判定に失敗するようになったが、apt-get 内の md5sum を sha512sum に置き換えれば OK。
※ 2016/01/14 現在、この置換作業は行わなくても大丈夫そうだ
上記の記事とは行数が異なったが grep して置換すれば良い。
Ruby インストール
$ apt-cyg install ruby rubygems
$ ruby --version
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-cygwin]
slideshow インストール
# slideshow 本体のインストール
$ gem install slideshow
# コードハイライト用のモジュール
$ gem install coderay
# shower というテンプレートを追加
$ slideshow install shower
$ slideshow --version
:
slideshow/2.4.1 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
slideshow version 2.4.1
スライドショーを生成してみる
簡単にサンプルの Markdown ドキュメントを作成。
$ cd /tmp
$ vim sample.md
~~~~~~~~~~~~~~~ sample.md ~~~~~~~~~~~~~~~
title: サンプルです
author: 制作者名
# ページタイトル
日本語も大丈夫みたい。
1. リスト１
1. リスト２
途中の
改行は無視される。
~~~~~~~~~~~~~~~ sample.md ~~~~~~~~~~~~~~~
いざ、ビルド実行。
$ slideshow build sample.md -t shower
confutils/1.1.2 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
logutils/0.6.1 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
textutils/1.4.0 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
markdown/1.2.0 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
fetcher/0.4.5 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
slideshow-models/2.5.0 on Ruby 2.2.3 (2015-08-18) [x86_64-cygwin]
:
Done (in 0.1675213 s).
Done.
ビルド完了後、同パスに sample.html が生成されているのでブラウザで開くと以下のようなスライドができている。
スライドの一覧から選択できて、矢印キーで移動させられる。
腕毛の濃ゆい画像はテンプレートのオリジナル。
reveal.js テンプレートを適用する
shower テンプレートは少々味気ないので reveal.js を使ったテンプレートにしてみる。
Reveal.js - Slide Show
Installation の項に従ってテンプレートを追加する。
# git のインストール
$ apt-cyg install git
# reveal.js のテンプレート追加
$ cd ~/.slideshow/templates
$ git clone https://github.com/avillafiorita/slideshow-reveal.js.git
$ cd ~/.slideshow/templates/slideshow-reveal.js
$ git submodule init && git submodule update
# テンプレートとして認識されているか確認
$ slideshow list
Installed templates include:
reveal (~/.slideshow/templates/slideshow-reveal.js/reveal.txt)
どうやら reveal という識別名で登録されたようだ。
スライドショーをビルドしてみる。
$ slideshow build sample.md -t reveal
ビルド後、以下のものが成果物として出力される。
- reveal.js ディレクトリ
- sample.html ファイル
なんだか、まぁ、レイアウトはちょっとガタガタだけど、reveal.js でもスライドを作れた。
ページングする際のアニメーションは小気味良い。
slideshow のプラグインを利用する
コードハイライトさせる
Markdown 通りに ``` でコードを括るだけでハイライトした。
インストールした coderay が使われたのだろう。
左右分割させる
{% left %} … {%end}、{% right %} … {%end} を使うらしい。
Markdown ではないけど、使用頻度も低そうなので許容範囲。
画像を貼る
これまた普通の Markdown 書式で画像挿入すればいいだけだった。
出力される HTML にも、そのままのパスで出力されるから参照可能なパスに画像が必要。
ページタイトル、デカ過ぎない？
CSS で対応すべきだけど、面倒なので h2 でページングさせる。
# コードハイライト
↓ ヘッダのレベルを落とす
## コードハイライト
--h2 でページングさせるようにオプション指定してビルド。
$ slideshow build sample.md -t reveal --h2
うん、マシになった（適当w）
長いコンテンツはカットされる
スライドから溢れてしまう場合は、表示上カットされて見ることができない。
設定とかで上手に対応できるのかもしれないけど、そもそもそんなに詰め込んだスライドは見たくないので、それほど問題ではないだろう。
ひとまず、これで最低限の目標は達成。