reveal.jsでプレゼン資料を作ってみました

プレゼンテーション

この記事は最終更新日から1年以上が経過しています。

背景

先日dotsのイベントにてLTをやることになったので資料を作ることに。

reveal.jsとは

こちらにサンプルがあります。

reveal.jsの選択理由

  • pptに依存したくなかった。
  • コードでプレゼン資料作れるのが面白そうだった。
  • speakerモードの機能が優れていた。
  • PDFに簡単に出力できる。

実装について

htmlを直接編集ではなくjadeで書いてgulpでhtmlにしてみました。
コードはこんな感じ
extends layout/_layout
 
block content
  section
    h1
      | AWS移行してみたけどぶっちゃけどうよ。
    h3
      | 株式会社レコチョク
    p
      | 近藤　圭太
  section
    h2 アジェンダ
    .fragment ・AWSって
    .fragment ・移行するにあたって
    .fragment ・使ってみて思うこと
  section
   h2 AWSって
   .fragment
       |こちらをご覧ください
       br
       a(href="https://aws.amazon.com/jp/","target=_blank") https://aws.amazon.com/jp/
  section
    h2 移行するにあたって
    .fragment どんなシステムを持っていったのか
 
・・・

またこのような感じでノートも書けます。
section
    h1 やってよかった
    aside(class="notes")
      |インフラ的な知識の底上げによる、システム構築の質やスピードの向上だけでなくCIやデプロイ含めてもっとより良い方法手段に取取り組もうという姿勢がメンバーにも浸透していって>いるんではないか

使ってみて

この仕様に則って書くことで、非常にシンプルな資料が作れる。気がします。
ブラウザさえあれば見れるのは緊急時にテンパらないし、speakerモードは時間がわかるしノートがあるし次のスライドが見えたりと便利！
画像をふんだんに使ったりアニメーションが大好きな人は不向きかもしれません。
よかったら使ってみてください。

そういやmarkdownで書けるんだった。。

この記事を書いた人

近藤 圭太サーバサイドエンジニア
酒好き。　貝類、特に牡蠣に目がない。
釣り始めました。

プレゼンテーション