revealjs_custom

View Github Repository Open presentation in a new window

stapleworks

See all presentation from stapleworks

revealjs_custom

0 0

revealjs_custom

generator-revealで作成したスライドを自分用にカスタマイズしたものです。 テキストベースでスライドを作成できるツールです。

On Github stapleworks / revealjs_custom

Reveal.js

サブタイトル

右キーで次のスライドに移ります

次のスライドを作成するときは---の前後は改行しないと別のスライドと認識してくれないので注意

これは・・・？

  • 基本的にmarkdown形式のテキストファイルだけでスライドを作れるツールです(Reveal.js)
  • generator-revealから生成したものをカスタマイズしています

メリット

テキストだけで 簡単に スライドが作成できる!! Powerpointで見づらいコードの表示が キレイ !! バージョン管理するときに 差分表示 が明確!!
  • Powerpointだとどのスライド変えたかの差分管理がしづらい
スライドのファイルを分割できるので別の資料に流用するときに 便利 !! ブログなどの 別媒体 に展開するときに展開しやすい!! この辺，もうちょっと増やす リストの行の高さが狭いので広げたい

デメリット

図が書きづらい 画像貼るのがちょっと面倒 複雑なスライドを作るときはフロントエンドで頑張る必要がある
  • 1スライドにコンテンツがたくさん並ぶとか
  • レイアウトを凝りたいとか
  • アニメーションを多用したいとか（ある程度はできます）

動作環境

Grunt

入っていなければ設定しましょう

スライドサンプル

スライドの種類

下にスライドできます

さらに下に

右キーを押すと隣のスライドに

操作

キー 動作 Escキー スライド全体を表示 ←(h)キー 左のスライドに移動 ↓(j)キー 下のスライドに移動 ↑(k)キー 上のスライドに移動 →(l)キー 右のスライドに移動

※右下の矢印のナビを見ればどの方向に動けるかわかります

コード表示サンプル

HTML

<html>
  <head></head>
  <body>
    <div class="img_wrapper">
      <a href="/"><img src="img/sample.jpg" alt="sample"/></a>
    </div>
  </body>
</html>

Jade

mixin link_img(href, src, alt)
  .img_wrapper
    a(href="#{href}")
      img(class="attributes.class", src="#{src}", alt="#{alt}")
html
  head
  body
    +link_img('/', 'img/sample.jpg', alt='sample')

コード表示サンプル2

CSS

body{
  background: #000;
}

Stylus

body
  background #000

※hightlight.jsを使っているので，好きなカラースキームを使用可能

発表者だけみれる記述

markdownでの編集

詳しくはこのスライドで読み込んでいるmarkdownファイルを参照してください

markdownで描画できること

  • h1~h6見出しの作成
  • リストの作成
  • 区切り線の作成
  • スライドの切り分け方
  • notes（発表者だけ見えるテキスト）の作成
  • リンクの貼り方
  • コードの表示方法
  • etc...

詳しいところは

スライドサンプル

Example Presentations

Thanks!

d3.jsを用いたグラフ作成(update: 15/08/30)

スライドに欠かせないグラフをjsで描画するためにd3.jsを用いて実装します．

棒グラフ

コード一式：barchart.html

円グラフ

コード一式：piechart.html

CSVデータを読み取ってます．slides/d3sample/data.csv

<55-1314-1718-2425-4445-64=<65

更新予定

  • グラフ単体に値を設定する
  • y軸，x軸に目盛りを表示する
  • 複合したグラフを描画する
  • イベントなどでデータを動的に取得する
Reveal.js サブタイトル 右キーで次のスライドに移ります 次のスライドを作成するときは---の前後は改行しないと別のスライドと認識してくれないので注意