社内プレゼンの資料作成時、いつもパワポを使用しているのですが、個人的には以下の課題があったので脱却したいと考えていました。
課題
調べたところ、この課題を満たすためにreveal.jsというモノを見つけたので今回はこちらについて紹介していきます。
reveal.jsとは
HTMLを使用して美しいプレゼンテーションを簡単に作成するためのフレームワークです。公式を見ると確かに美しく納得です。
reaveal.jsを単体で使うにあたって問題はないのですが、公式のREADMEを読むとhtmlとMarkdownが混在している作法でした…これは正直気持ち悪いなと感じたので調査したところ…以下記事内にreveal-ckとなるモノがあり、解決出来そうです。
こちらはreveal-ckの公式
jedcn.github.io
コンセプトページなどを見ると、1ファイルで完結することが出来るとのこと。非常にシンプルですね。早速reveal-ckを導入していきましょう。
また、以降のreveal-ckインストール手順からスライド作成までの手順を、GitHub Pagesにアップしました。
reveal-ck×Markdownで実際に作成したスライドはこちら
tanabebe.github.io
GitHubはこちら
GitHub - tanabebe/reveal-ck-install-manual at gh-pages
reveal-ck インストール手順
Rubyがインストールされているか確認する
私は以下のVersionでしたが、問題なくインストール可能でした。
❯❯❯ ruby -v ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]
reveal-ckをインストールする
sudoしないとエラーになるので注意を。
❯❯❯ sudo gem install reveal-ck
reveal-ckがインストールされているか確認する
❯❯❯ reveal-ck -v reveal-ck version 3.9.2
問題なくインストールされました。これでMarkdownで心置きなく書いていくことができます。早速スライドの作成に取り掛かって行きましょう。
スライドを作成していく
ディレクトリの作成
❯❯❯ mkdir reveal-sample ❯❯❯ cd reveal-sample/
Markdownファイルの作成
ファイル名がslides.*でないと後のreveal-ck gen時にエラーとなるので注意が必要です。
# OKパターン ❯❯❯ touch slides.md ❯❯❯ touch slides.sample.md # NGパターン ❯❯❯ touch index.md
ここでは一旦ファイル内へ何かしら書き込んでおきます。
❯❯❯ echo "# Hello!" > slides.md
スライド用ファイルの自動生成を行う
❯❯❯ reveal-ck gen Generating slides for 'slides.md'..
ローカル環境で動作を確認する
❯❯❯ reveal-ck serve [ reveal-ck ] Serving up slide content in 'slides/'. [ reveal-ck ] Open your browser to 'http://localhost:10000'. [ reveal-ck ] Press CTRL-C to stop.
http://localhost:10000にアクセスするとスライドにアクセス出来ます。reveal-cs serveを止めずにファイル編集をするとリロードが走りますが、ページが複数あったとしても1番最初のページからスタートします。
まとめ
Markdownのみでプレゼン資料を作成することがこれで出来たので、私が抱えている課題は全て解決することが出来ました。mdファイル1つで完結出来るのでとてつもなく膨大なスライドではない限り、Markdownでのスライド作成が捗ります。GitHub Pagesにも問題なくアップが出来るのでこれを気にパワポ資料作成から脱却するのも１つの手段と考えてはどうでしょうか？
躓いた点など
reveal.jsにはThemeが複数用意されていますが、各Theme毎にCSSが設定されており、不要と思ったCSSの除去や上書きが必要でした。見出しはデフォルトで中央寄せになっているのと、画像をはめ込む時は画像サイズをカスタムするが必要があり。一旦は時間がなかったため、無理やり作成しましたが、今後はもう少し掘り下げる必要性を私は感じました。
