Markdown でスライドを書く


下記の記事をまるっと参考にさせていただいて、Markdown だけでスライドを書けるようにした。

> [Markdown × slideshow × guard で快適プレゼン資料作成 - てんてんのぶろぐ](http://tenten0213.hatenablog.com/entry/2013/08/12/200945)

Markdown でプレゼン資料作りたかったのと、オンラインサービスでは記載しづらい内容などもあって、ローカル上＋Markdown のみで完結することが個人的な要件。

実行環境は Windows 7 上の Cygwin64。
そもそも Ruby を入れてないので、そこら辺も併せて実施。

最終的にどうなるか
---

``` bash
$ 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](http://slideshow-s9.github.io/)

上記 Ruby 製の slideshow をインストールするにあたり、
apt-cyg, Ruby のインストール方法も併せて以下に記載する。

### apt-cyg インストール

Cygwin で `apt-get` ライクに使えるパッケージ管理ツール。
今回は Ruby のインストールに使う。

Cygwin の setup-x86_64.exe からインストールして済ませるならば、apt-cyg の手順は飛ばして OK。

> [apt-cyg - A command-line software installer for Cygwin](https://code.google.com/p/apt-cyg/)

GitHub から取ってきて /usr/local/bin に配置。

``` bash
$ 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 現在、この置換作業は行わなくても大丈夫そうだ

> [Cygwinのapt-cygで”MD5 sum did not match”が出てエラーになる現象と対処法](http://nulltaba.com/computer/windows-management/apt-cyg-error-md5sum/)

上記の記事とは行数が異なったが grep して置換すれば良い。

### Ruby インストール

``` bash
$ apt-cyg install ruby rubygems

$ ruby --version
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-cygwin]
```

### slideshow インストール

``` bash
# 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 ドキュメントを作成。

``` bash
$ cd /tmp
$ vim sample.md

~~~~~~~~~~~~~~~ sample.md ~~~~~~~~~~~~~~~
title: サンプルです
author: 制作者名

# ページタイトル
日本語も大丈夫みたい。

1. リスト１
1. リスト２

途中の
改行は無視される。
~~~~~~~~~~~~~~~ sample.md ~~~~~~~~~~~~~~~
```

いざ、ビルド実行。

``` bash
$ 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 が生成されているのでブラウザで開くと以下のようなスライドができている。

![スクリーンショット_011416_102701_AM.jpg](https://qiita-image-store.s3.amazonaws.com/0/48194/cdece0cc-d85b-5430-84fe-bf94c23be978.jpeg)

スライドの一覧から選択できて、矢印キーで移動させられる。
腕毛の濃ゆい画像はテンプレートのオリジナル。


reveal.js テンプレートを適用する
---

shower テンプレートは少々味気ないので reveal.js を使ったテンプレートにしてみる。

> [Reveal.js - Slide Show](https://github.com/avillafiorita/slideshow-reveal.js)
**Installation** の項に従ってテンプレートを追加する。

``` bash
# 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` という識別名で登録されたようだ。
スライドショーをビルドしてみる。

``` bash
$ slideshow build sample.md -t reveal
```

ビルド後、以下のものが成果物として出力される。

* reveal.js ディレクトリ
* sample.html ファイル

![スクリーンショット_011416_103513_AM.jpg](https://qiita-image-store.s3.amazonaws.com/0/48194/338d7919-0f0b-ac2b-7cfe-4f057de89e3d.jpeg)

なんだか、まぁ、レイアウトはちょっとガタガタだけど、reveal.js でもスライドを作れた。
ページングする際のアニメーションは小気味良い。


slideshow のプラグインを利用する
---

> [Plugins, Helpers and Extensions - Slide Show (S9)](http://slideshow-s9.github.io/plugins.html)

### コードハイライトさせる

![スクリーンショット_011416_010745_PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/48194/81a3db6d-667b-057a-6fde-303cee82c6b9.jpeg)

Markdown 通りに ```` ``` ```` でコードを括るだけでハイライトした。
インストールした `coderay` が使われたのだろう。

### 左右分割させる

![スクリーンショット_011416_104424_AM.jpg](https://qiita-image-store.s3.amazonaws.com/0/48194/d2c48f67-0517-7293-a5fc-c8d0ab90f70d.jpeg)

`{% left %} … {%end}`、`{% right %} … {%end}` を使うらしい。
Markdown ではないけど、使用頻度も低そうなので許容範囲。

### 画像を貼る

これまた普通の Markdown 書式で画像挿入すればいいだけだった。

```
![sample](sample.jpg "サンプル画像")
```

出力される HTML にも、そのままのパスで出力されるから参照可能なパスに画像が必要。

ページタイトル、デカ過ぎない？
---

CSS で対応すべきだけど、面倒なので `h2` でページングさせる。

``` markdown
# コードハイライト

    ↓ ヘッダのレベルを落とす

## コードハイライト
```

`--h2` でページングさせるようにオプション指定してビルド。

``` bash
$ slideshow build sample.md -t reveal --h2
```

うん、マシになった（適当w）

![スクリーンショット_011416_010623_PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/48194/ea1a0d99-1b04-aa74-235c-0b32ec0e82ba.jpeg)

長いコンテンツはカットされる
---

スライドから溢れてしまう場合は、表示上カットされて見ることができない。

![スクリーンショット_011416_011740_PM.jpg](https://qiita-image-store.s3.amazonaws.com/0/48194/15869189-521f-358b-d085-96e7f7243adc.jpeg)

設定とかで上手に対応できるのかもしれないけど、そもそもそんなに詰め込んだスライドは見たくないので、それほど問題ではないだろう。

ひとまず、これで最低限の目標は達成。