12/15 社内 LT 会

全人類タコスを食え


ぶりお @burio_16

というスライドを
reveal.jsを使用して作成しました。

社内LT会


自分だけの
スライドデッキを作ってみた


ぶりお @burio_16

スライド作成して、登壇したら
PDFにして共有するのめんどくさくないですか？

作成したら、 自動的に
公開されるようになってほしい

https://slide.burio16.com

自分のスライドを公開できる
自分だけのスライドデッキを作りました。

説明

自分だけのものって
かっこいいし、イケてるし、クール
じゃないですか？

技術スタック

reveal.js

できること

  • Next.js
    • スライドごとのOGP画像を設定する
  • Reveal.js
    • プレゼンター表示
    • フルスクリーン表示
  • Cloudflare
    • GitHub連携により、Mainブランチ
      マージ時に自動デプロイ
ogp画像

reveal.jsよかった点

  • HTMLでもMarkdownでもスライド作成可能
  • スライドを縦と横に展開可能
  • Googleスライドでできることと同等のことができる

<section
  data-background-image={BG_CONTENT}
  data-background-size="contain"
>
  <div className="flex h-full flex-col items-center justify-center">
    <h2 className="text-left text-white">reveal.jsよかった点</h2>
    <ul className="text-white">
      <li>HTMLでもMarkdownでもスライド作成可能</li>
      <li>スライドを縦と横に展開可能</li>
      <li>Googleスライドでできることと同等のことができる</li>
    </ul>
  </div>
</section>

<!-- .slide: style="color: white; text-align: left;" -->

## ぶりおがタコスを好きな理由<!-- .element: style="color: white;" -->

- 肉の種類
- 豊富なトッピング
- お酒との相性

---

こいつが縦のスライドです。
余談に使いやすい

reveal.js残念だった点

  • PDF出力が動作しない
  • Tailwind競合して文字色が変わらなかった
ogp画像

まとめ

  • reveal.jsはスライドをマークダウンやHTMLでかけるだけでなく、
    プレゼンのための機能を提供してくれる
  • 作成から登壇、共有まで全てを担えるものを作れる
  • 自分だけのスライドデッキめちゃくちゃカッコいい！