2014年4月1日火曜日

reveal.jsでスライドを作成してみた

■環境
CentOS release 6.5 (Final)

■事前準備
yum -y update
yum -y install httpd
yum -y install git

■reveal.jsインストール
cd /var/www/html/
git clone https://github.com/hakimel/reveal.js.git
mv reveal.js/ reveal
    この状態で http://localhost/reveal/ にアクセスするとサンプルを確認することができるかと思います

■スライド作成
cd /var/www/html/reveal/
vim index.html

   既存のindex.htmlを編集すると楽です
  • <div class="slides">直下の<section>タグ内にHTMLを使ってスライドの内容を記載していくことができます
  • <section data-markdown="">を使用するとmarkdownを使ってスライドを作成することができます
  • その他、サンプルのsectionタグにいろいろな命令があるのでそれらを使うと簡単に作成できるかと思います
   index.htmlを 編集 -> 保存 してブラウザで内容を確認しながらやるといいと思います

■Tips
  • 日本語のスライドを作成する場合はindex.htmlの冒頭にある<html lang="en">を<html lang="jp">に書き換えたほうがいいです
  • その他デフォルトの段階から書き換えたほうが良さそうな部分
    • <title>タグの変更
    • <meta name="description">タグの変更
    • <meta name="author">タグの変更
  • <section>内に更に<section>を記載すると縦に移動できるスライドを作成することができます

■参考サイト

0 件のコメント:

コメントを投稿