はじめに
はてなブログを書き始めたのと、職場、プライベート共に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: 15C50MacBook-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は上記の通りデフォルトで入ってるので、動かすだけなら、カンタンなんですね、動かすだけなら。。。
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のほうが手番多いぐらい)
reveal.jsの設定
最後にもう一手間。サンプルのindex.htmlは消してしまいましょう。
43行目の
そして以下を削除した箇所に追加します。
<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ページ目
2ページ目
参考サイト
終わりに
今日は最速の導入手番というところで、ここまで。
以後もう少し細かい設定をしたいと思います。黒背景嫌だし。
chromeでpdfエクスポートできるらしいし。
あと勉強会で発表するLTもできたら公開します。