App::revealup作成したスライドをHTMLとして出力する【改訂版】

Nov 6, 2014   #blog 

昨日のApp::revealup作成したスライドをHTMLとして出力するで紹介した方法でもスライドが見れるHTML出力できるのですが、 複雑に考えすぎた結果余計な事しまくっているので、(恐らく)ちゃんとした方法を再度まとめていきます。

HTML出力手順

reveal.jsの取得

githubからreveal.jsをcloneし、サンプルのindex.htmlは不要なので削除。

$ git clone git@github.com:hakimel/reveal.js.git
$ rm reveal.js/index.html

スライド記述

ここは変わらず。
slide.mdとかテキトーな名前つける。

revealup実行

以下のコマンドでrevealup起動。例によって僕はテーマはsky、アニメーションはナシにします。

$ revealup server slide.md --theme css/theme/sky --transition none 

昨日と変わった点としては、--themeオプションで指定しているパス。

HTMLのコピー

ブラウザ開いて「ソースを見る」でソース開いてコピるだけ。簡単です。
デベロッパーツールで開くとか余計なことしなくてOKでした。

コピったらindex.htmlにペーストします。

ファイルの配置と稼働確認

reveal.jsのディレクトリにindex.htmlとslide.mdを配置。
いざ稼働確認ですがindex.html起動時に、slide.mdのMarkdownをAjaxで読みにいくのでhttpサーバが必要になります。

手早く確認するなら下記コマンドでサーバ起動後、localhost:5000/index.htmlにアクセス。

$ revealup server slide.md

ちゃんとスライドが表示されていればOKです。

注意事項

上記方法で、HTMLファイルの出力が完了になりますが、httpサーバが必要になるのでサーバの用意できない環境に公開したい場合、やはり昨日紹介した手順を行うのが良いと思います。
自分の場合ブログに含めたかったので、今回の方法をとる事にしました。

経緯とこれから

経緯

昨日のブログを読んで頂いた感想として

「ならApp::revealupのソースにプルリク送るか!」というつもりで意気込んでgithub読んでたんでんすが、App::revealupってなんか何も問題ないというか、自分にも何やってるかわかるくらいやってることがシンプルで

「あ、これ間違ってるのは自分だ…」と気づきました。

これから

現状ブラウザからコピペで足りるんですが、コピペしてるのが自分だけじゃないって考えると確かにほしい機能なので どうにかしたいなーと思います。

このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク