読者です 読者をやめる 読者になる 読者になる

ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

reveal.js + markdownでクールにらくらくプレゼン!

はじめに

はてなブログを書き始めたのと、職場、プライベート共にAtomを使うようになって常にmarkdownで文章を書くようになりました。これはとても良いことです。 reveal.jsはhtmlでカッコ良いプレゼンがwebでできるツールです。これも以前からやっていましたがなんだかんだ放置してました。(図もよく書くので結局keynote使ってた)

ただ最近はてなブログにmarkdownでネタをためてることから、このままreveal.jsで写せば勉強会でLT楽じゃない?と思って久しぶりに導入に至ります。

環境

MacBook-Air:Sites take$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.11.2
BuildVersion: 15C50

MacBook-Air:Sites take$ apachectl -v
Server version: Apache/2.4.16 (Unix)
Server built: Jul 31 2015 15:53:26

reveal.jsは以下でDL
Releases · hakimel/reveal.js · GitHub
v3.2をBasic Setupですね。導入が楽でないといけない。

localでapacheを動かす

macは上記の通りデフォルトで入ってるので、動かすだけなら、カンタンなんですね、動かすだけなら。。。

MacBook-Air:Sites take$ sudo apachectl start

http://localhostにアクセスするとでかでかとIt Works!と言われるはずです。よしよし確かに動いている。

が、これはroot権限でアクセスできる/Library/WebServer/Documents/index.html.enを見ています。 ユーザ環境で使えないとうっとおしいんでぱぱっと変更しましょう。

/etc/apache2/httpd.confを修正

以下2点をコメントイン * LoadModule userdir_module libexec/apache2/mod_userdir.so * Include /private/etc/apache2/extra/httpd-userdir.conf

/etc/apache2/extra/httpd-userdir.confを修正

16行目を追加します。**.confの部分はユーザ名をいれてください。

 10 UserDir Sites
 11 
 12 #
 13 # Control access to UserDir directories.  The following is an example
 14 # for a site where these directories are restricted to read-only.
 15 #
 16 Include /private/etc/apache2/users/take.conf
 17 
 18 <IfModule bonjour_module>
 19        RegisterUserSite customized-users
 20 </IfModule>

/etc/apache2/users/**.confを作成

ルート権限で作成しましょう。takeの部分は自分のユーザ名を入れてください。

  1 <Directory "/Users/take/Sites/">
  2 AllowOverride All
  3 Options Indexes MultiViews
  4 Options +FollowSymLinks
  5 Require all granted
  6 </Directory>

/Users/take/Sitesの作成

ここにファイルを置いて、http://localhost/~take/Sites/でアクセスできます。

参考サイト

OSX 10.10 YosemiteでWeb共有を有効にする - ザリガニが見ていた...。

reveal.jsの導入

reveal.jsの配置

ようやくwebサーバの設定ができたところで(こんなに手番がいるとは思わなかった)次はreveal.jsです。回答したら適当にリネームしてさきほど設定した場所に置きましょう。

MacBook-Air:Sites take$ pwd
/Users/take/Sites
MacBook-Air:Sites take$ ls
index.html reveal-js

reveal-jsとrenameしました。

サンプルにアクセス

http://localhost/~take/reveal-js/にアクセスするとcoolなスライドが現れるはずです。 なんとこれだけ、導入カンタンですね。(apacheのほうが手番多いぐらい)

f:id:take_she12:20160105194540p:plain:w500

reveal.jsの設定

最後にもう一手間。サンプルのindex.htmlは消してしまいましょう。 43行目の

から376行目の
までを削除します。

そして以下を削除した箇所に追加します。

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

(ちなみに会社のcentos環境だとdata-separatorは"---"でないと正しく動かなかった。ハマった。)

slidesのdivの間ですね。

そして以下のsampleを同じパスに置きます。

MacBook-Air:Sites take$ vi reveal-js/sample.md 

  1 # test
  2 # test2
  3 
  4 ---
  5 
  6 # test3
  7 * いち
  8 * に
  9 * さん

ページ区切りが---、縦の区切りが--ですね、これをブラウザで見るとはいできあがり。

1ページ目
f:id:take_she12:20160105195453p:plain:w500

2ページ目
f:id:take_she12:20160105195458p:plain:w500

参考サイト

reveal.js+Markdown - Qiita

終わりに

今日は最速の導入手番というところで、ここまで。
以後もう少し細かい設定をしたいと思います。黒背景嫌だし。
chromeでpdfエクスポートできるらしいし。
あと勉強会で発表するLTもできたら公開します。