弊社では定期的に社内勉強会を開いています。
10分程度のLTを行うことが多いのですが、たかがLTといっても資料を作るのはなかなか骨が折れます。
そこで、出来るだけ手軽にプレゼン用スライドが用意出来るよう試行錯誤しているのですが、現在は以下のようなやり方で落ち着いてます。

HTMLでスライドを作成する
生成したHTMLファイルは、GitHub Pagesで公開
CicleCIを利用して生成から公開まで自動化する

実際に運用してみるとなかなか快適ですので、簡単にではありますがご紹介したいと思います。

HTMLでスライドを作成する

HTMLでスライドが作る為のツールはいくつかありますが、以下のものが有名でしょうか。

私の場合、Cleaverを利用しています。
node製のツールで、以下の点が個人的に気に入っています。

Markdownで書ける
デザインがシンプル
Htmlファイル１つにまとめられてアウトプットされる
テーマを切り替えることで簡単にデザインが変更できる

30-second slideshows for hackers

と謳われている通り、エンジニアにとって使いやすいツールだと思います。

Github Pages

生成されたスライドはHTMLですので、ローカルのPCでブラウザで開けば見ることが可能です。
折角HTMLになっているのですから、どこかにアップロードしておくと何かと便利かと思います。
そこで、GitHub Pagesを利用します。

Github Pagesは、Github上にあるリポジトリの特定のブランチ（gh-pages）にある静的ファイルをホスティングしてくれるサービスです。
つまりHTMLで作成されたスライドであれば、gh-pagesブランチにプッシュするだけで、スライドを公開することができます。
発表内容が必然的に公開されてしまうという点に注意は必要ですが、一度公開してしまえばインターネットさえ繋がればブラウザ一つで確認出来るというのは、個人的に魅力的です。

CirleCI

Cleaverのビルドコマンドを実行しHTMLを生成
gh-pagesブランチに切り替えて、生成したファイルをコミット＆プッシュ

という手順を踏めば、無事スライドを公開することが出来るのですが、実際にやってみると意外に面倒です。
そこで、CircleCIを利用して

スライドの作成から公開まで、自動化してみたいと思います

主な設定手順

CircleCIからGithubにプッシュ出来るようにする

CircleCIからGithubへプッシュする為には、書き込み権限のある公開鍵を用意して設定する必要があります。

SSHの公開鍵を生成
Githubへ書き込み権限を許可して公開鍵を登録する
CircleCIへ秘密鍵を登録する（Hostnameはgithub.comとする）

これで、CircleCIから、Githubへプッシュ出来るようになります。

ビルドスクリプトを用意する

Cleaverは１つのスライドを生成するコマンドは用意されているので、それを補助して良い感じにファイルを配置してくれる簡単なスクリプトを用意しました。

#/bin/bash

root=$(pwd)
output_base_dir="$1"
if [ "$output_base_dir" = "" ]; then
  output_base_dir="./"
fi

for md in $(find . -type f -name slide.md);
do
  dir=$(dirname $md)
  base_dir=$(basename $dir)
  output_dir="$output_base_dir/$base_dir/"
  mkdir -p $output_dir
  ./node_modules/cleaver/bin/cleaver $md --output=$output_base_dir/$base_dir/index.html
done;

やっていることはシンプルで

/slide1
/slide1/content.md
/slide2
/slide2/content.md
/slide3
/slide3/content.md

みたいにMarkdownファイルを配置しておくと

/slide1
/slide1/index.html
/slide2
/slide2/index.html
/slide3
/slide3/index.html

このように任意のディレクトリへ出力してくれます。

ツールによっては、これらの機能が既に備わっている場合もあるかと思いますが、その場合は勿論不要です。

circle.ymlの準備

最終的に以下の様なファイルを作成します。

machine:
  timezone: Asia/Tokyo
  node:
    version: 5.1.0

test:
  override:
    - exit 0

deployment:
  publish:
    branch: master
    commands:
      - git config --global user.name "circle-ci"
      - git config --global user.email "circle-ci@users.noreply.github.com"
      - ./build.sh /tmp/_slides/
      - git checkout -t origin/gh-pages
      - git clean -dxf
      - git rm $(git ls-files)
      - cp -r /tmp/_slides/* .
      - |
        cat <<EOF > ./circle.yml
        general:
          branches:
            ignore:
              - gh-pages
        EOF
      - git add -A
      - git commit -m "Slide updated at $(date +'%Y.%m.%d %H:%M:%S')" --allow-empty
      - git push origin gh-pages

細かく説明したいと思います。

machine

machine:
  timezone: Asia/Tokyo
  node:
    version: 5.1.0

nodeを利用する設定とtimezoneも設定してあります。

test

test:
  override:
    - exit 0

CircleCIはテストがないとエラーになってしまいます。
テストはないのでひとまずこんな感じで設定してあります。

deployment

deployment:
  publish:
    branch: master
    commands:
      - git config --global user.name "circle-ci"
      - git config --global user.email "circle-ci@users.noreply.github.com"
      - ./build.sh /tmp/_slides/
      - git checkout -t origin/gh-pages
      - git clean -dxf
      - git rm $(git ls-files)
      - cp -r /tmp/_slides/* .
      - |
        cat <<EOF > ./circle.yml
        general:
          branches:
            ignore:
              - gh-pages
        EOF
      - git add -A
      - git commit -m "Slide updated at $(date +'%Y.%m.%d %H:%M:%S')" --allow-empty
      - git push origin gh-pages

やっていることは以下の通りです。

今回はmasterブランチにプッシュされたタイミングでデプロイする
Gitのユーザー情報の設定
スライドのビルド
gh-pagesブランチに切り替え
.gitディレクトリ以外を全て削除
スライドファイルのコピー
gh-pagesへのプッシュはビルド対象から外したいので、その為のcircle.ymlを生成
スライドファイルとcircle.ymlファイルのコミット
gh-pagesブランチへのプッシュ

結構泥臭いことをやっています。
これらの処理をシェルスクリプトにまとめてしまうことも出来ると思いますが、私の場合はCirleCI上でやってます。

CircleCI

該当リポジトリをビルド対象に設定する。

以上の設定で、masterブランチにプッシュする度に、スライドが自動生成されて公開されます。
あとは

http://{username}.github.io/{repository-name}/slide1/

のようなURLにブラウザでアクセスすれば、スライドが見えるはずです。いやあ、便利ですね！

まとめ

いかがでしたでしょうか。
今回はCleaverを使ってHTML製スライドを公開してみましたが、Github Pagesで公開できるものなら色々応用することが出来そうですね。
また、スライドをビルドする環境をわざわざ構築しなくても、Githubにプッシュするだけでスライドを作成＆公開できるのも、何かと心強いかと思います。
もしよろしかったら試してみてください！

QUARTETCOM TECH BLOG カルテットコミュニケーションズ開発部ブログ

GitHub Pages + CircleCIでプレゼン用スライド作成を自動化する