PowerPoint2003から2013になってちょっと戸惑いを隠せない。。。
ありきたりなスライドテンプレートもなんか嫌だし。。。
と思っていたところ、markdownでWebスライドが作れることを発見しました。
GithubでWebページを公開する方法を発見、SublimeTextも入れたので、ちょっとWebスライドを作ってみます。
完成サンプル
http://budougumi0617.github.io/reveal.js-myMaster/
#作り方
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>
</section>
たとえコードタグ内でも、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