My External Storage

ソフトウェアエンジニア向けTips。Qiitaにもメモ

Reveal.js、Markdown、Githubでスライドを作成する。

コラム Tips GitHub

PowerPoint2003から2013になってちょっと戸惑いを隠せない。。。
ありきたりなスライドテンプレートもなんか嫌だし。。。

と思っていたところ、markdownでWebスライドが作れることを発見しました。
GithubでWebページを公開する方法を発見、SublimeTextも入れたので、ちょっとWebスライドを作ってみます。

完成サンプル
http://budougumi0617.github.io/reveal.js-myMaster/

slide.png

作り方

Reveal.jsというJavaScriptライブラリを利用します。

  • GitHubからreveal.jsのプロジェクトzipをGET
  • index.htmlをテキストエディタで開く。
  • <div class="slides">タグ内の<section>内容を削除
  • 後述のオプション付き<section>を記載する
  • <section>内にMarkdownでゴリゴリ書く

これだけ！！

Markdown用のsection定義。

以下の<section>定義でmarkdownを使用してスライドが書けます。
もちろん、通常の<section>定義でHTMLを利用してスライドを作成することも可能です。
---を入れることで右に次のページを作成。
--を入れることで下に次のページを作成。

<section data-markdown
    data-separator="\n---\n$"
    data-vertical="\n--\n">
    <script type="text/template">
ここにmarkdownを記載していく。
    </script>
</sectin>

たとえコードタグ内でも、markdown記載中に</script>がでるとバグる点だけ気をつけてください。

Markdown記述部分を別ファイルにしておけばindex.htmlは使いまわすことも可能です。

<section data-markdown="./md/firstpage.md"
    data-separator="\n---\n$"
    data-vertical="\n--\n">
    <script type="text/template">
    </script>
</section>

編集後はGithubで公開

あとはGithubで新規のリポジトリ作成。
clone,init後にzipの中身を全てコピーして、gh-pagesブランチにpushすればGithub上にスライドが公開できます。
＃今回コミットはSourceTreeで行なったので、コマンドログは割愛。

その他

<iframe>で埋め込みしたいときなどはおとなしくHTML使う必要があります。
その他Reveal.jsの詳細な使い方はGitHubのREADME.mdを参照してください。

ちなみにブラウザでスライド確認中は、escかoでスライドを一覧表示にできるのですが、
ViChrome使っていると競合して動かないので注意。
Ctrl + escでViChromeをエマージェンシーモードにしてからoで一覧表示ができます。

参考

今回は以下の情報を参考にさせていただきました！

本家のデモ
http://lab.hakim.se/reveal-js/#/

なんかかっこいいプレゼンテーションテンプレートを探しているならreveal.js使ってみろって
http://qiita.com/ryurock/items/9c6de36b9d6a716e7992

reveal.js+Markdown
http://qiita.com/siguremon/items/c717eca388070215712c

reveal.jsで格好いいプレゼンを作ってみた
http://d.hatena.ne.jp/zebevogue/20121110/1352521622