麻布十番で働くデータ分析者のブログ

グロースハック、プログラミング、データ分析の色々を発信します

Rubyとmarkdownでスライド作成ができるreveal-ck

f:id:nimi0370376:20170624230859p:plain

 

今日は、Rubymarkdownでスライドを作成できる「reveal-ck」を紹介します。

具体的にイメージが湧かないと思うので、実際に確認してみてください。

 

https://fjustin.github.io/Slides-by-reveal-ck/slides/#/

 

 

 

 このようなスライドを簡単に作成することができます。また、Github Pagesと組み合わせることで、簡単に公開することができます。

 

今回はこのreveal-ckを用いて、Github Pagesに公開するところまで紹介します。

 

 

Gem reveal-ckを追加

今回は、Rubyを扱います。

Gemfileを用意して下記のように書き加えます。

 

source 'https://rubygems.org'

gem 'reveal-ck'

 

次にbundle installでgemをインストールします。

 

 

さらに、slides.mdを作成します。

 

$ reveal-ck generate

 

でそのほかのファイルを作成します。

これで、スライドの雛形は出来上がっています。

 

slides.mdに適当に何か書いてみるといいです。

ちなみに、スライドの区切りは、

 

hoge

---

foo

 

のように行います。1枚目のスライドにhoge、2枚目のスライドにfooがきます。

 

 

$ reveal-ck serve

 

でサーバーを立ち上げます。

localhost:10000 にアクセスすると、すでにスライドが出来上がっています。

 

 

Github Pagesにreveal-ckを公開

ここまできたらGithub Pagesに実際にスライドを公開してみます。

$ git commit -m "first-commit"

でコミットして、プッシュします。

 

 

リポジトリのSettingを選択します。

f:id:nimi0370376:20170624232047p:plain

 

Settingの中のGithub Pagesのところをmasterにします。下記の画像のようにしてSaveします。

 

f:id:nimi0370376:20170624232205p:plain

 

 

これで、https://ユーザー名.github.io/リポジトリ名/slides/#/

 

でスライドを確認することができます。

 

 

reveal-ck応用編

reveal-ckは、かなり融通のきくgemです。

まず、gemojiが使えます。

 

:smile: で笑顔の絵文字を作ることができます。

また、fragmentを使用したいときは、

 

<p class='fragment'>
bar
</p>

{:.fragment}
baz

上記のようにすればfragmentを利用することができます。

 

 

スタイリッシュなスライドを短時間で!

画像などが使用できるか不明ですが、かなり短い時間で作成することができます。reveal-ckはRubyのコードを1行も書かずに利用できるのが大きな利点です。

 

markdownがわからなくても、HTMLでも記述できるので便利です。

 

f:id:nimi0370376:20170624232905p:plain

 

ぜひ、利用してみてください。