App::revealupで作成したスライドをHTMLとして出力する

Nov 5, 2014   #blog 

[追記 開始]

記事の公開後にいろいろ調べた結果この手順は非常に無駄が多い事が判明しました。
こちらの手順を採用される事をオススメします。

[追記 終了]

先日のkichijojipmで発表したLT資料を、yusukebeさんのApp::revealupで作成したのですが、 いざブログに埋め込もうとしたとき、どうやってHTMLとして出力すればいいの?と試行錯誤したので今後のための 備忘録。

スライド作成

$ vi slide.md

まずはともあれスライドの作成をします。
この辺は上記のyusukebeさんのブログのリンクや、revealjsのREADME等を参考によしなに。

HTML出力用ディレクトリ作成

適当にディレクトリを作成し、githubからreveal.jsをclone。
サンプルのindex.htmlは不要なので削除

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

revealup server slide.md

revealupコマンドで、サーバを立ち上げてスライドが動く状態にします。
僕はテーマをsky、アニメーションなしにするのが好きなので、以下コマンドで起動

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

スライド実行時HTMLの取得

ここちょっとローテクなんですが、Chrome等のディベロッパーツールでHTMLコピーしてindex.htmlにペースト。
「たまにやる簡単な作業は自動化すべきではない」ってなんかに書いてあったし、これでおk。

index.htmlの参照&失敗

よっしゃ!完成!!
と思いきや、作成したindex.htmlをブラウザ起動したのがこんな感じ…

…真っ白

index.htmlの編集

試行錯誤した結果、以下の手順でスライドとして機能するHTMLとなる模様

  1. themeのパスを修正

    <link rel="stylesheet" href="theme/sky.css" id="theme"> 
    

    <link rel="stylesheet" href="css/theme/sky.css" id="theme"> 
    
  2. sectionタグを修正

    <section data-markdown="" data-markdown-parsed="true" class="future" style="top: -20px; display: none;">
    

    <section>
    

これだけやれば最低限、静的ファイルでスライドとして機能するHTMLが作成できると思います。

まとめ

<section>の変更については、この編集がどういう意味なのかまだはっきり理解していない点もありますが、 HTMLを抽出しブログに含む事のできる形式に加工する事ができたので、ひとまずゴールとすることにしました。

今後は不明点を排除しつつ、スクリプト等で自動化できるところ(sectionの置換)は自動化していきたいと思ってます。

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