プレゼン資料使い捨てはMOTTAINAI【エンジニア用のスライド比較】

8197 ワード
Slidev 個人開発 LT プレゼンテーション reveal.js reveal.js テキストリンク

結論

個人ブログをプレゼン用に
アレンジしたら良かった話

ターゲット

  • LTが好きなエンジニア
  • 情報発信をよくするジニア
  • 自分の活動をストック型にしたいジニア

筆者経験

Qiitaスライドを選んできた理由

LT会に参加して見られる良い資料の多くは
　その場でしか拝見できずもったいないと思っていた
Qiitaのスライドモードを使うことによって
　資料を記事として残せる！

まだもったいない？

  • Qiitaのスライドモード
    • 正直いうと自由度が低い
  • 文字の拡大や配置を自由にしたい
  • アニメーションもつけたいな

例

自分でスライドを実装したい

比較URL

この記事を参考にあまり手を加えずに比較してみる

技術 URL
Qiita Qiitaスライド記事
reveal.js ブログに付属させたサイト
Slidev https://slidev-introduction-naru.netlify.app/

※同じマークダウン形式記事をそれぞれ投稿

やりたかったこと

背景
個人ブログをNuxt ✖️ Contentful(マークダウン)で作っている

  • マークダウンで書けるスライドが欲しい
  • ContentfulのAPIを使って可変的なページでスライドを表示したい

Slidevでやってやりたかった

Slidevとは

  • 2021年5月に発表
  • マークダウンで書けるプレゼンテーションツール
  • npm init slidevだけで始められるオープンソース
  • Vite、Vue3、WindiCSSで作られる

メリット

  • 1コマンドで雛形が作れ、編集すればプレゼン資料が完成する手頃さ
  • オンライン発表に合わせたプレゼンターモードやインカメラ機能など
  • 録画機能付きでアドリブが苦手な人にも優しい

ビデオでの例

詳しくはこちら

今回選ばなかった理由

  • 個人用カスタマイズ性が低い
    • スライド1種類に対して1回buildが必要
      • つまり変更があるたびにbuild必要
    • APIでデータ渡す→スライド表示が難しい
  • サクッとつくれない（拘る場合）
    • 開発期間3日ほどしかなかった
    • リッチに作れるのが良いことだが作り込みが必要

Slidevはほぼ毎日アップデートされていてbuildをしないような変更に期待

選ばれたのはreveal.jsでした

reveal.jsとは

  • 最も有名なHTMLプレゼンテーションフレームワーク
  • マークダウンでも対応
  • スライドはPDFでエクスポート
  • dependencyとして既存アプリにインストールして使える


参考

データ構成

悔しいポイント

ContentfulのMD(マークダウン)→reveal.jsのMD読み込みはできなかった点
ContentfulのMD→VueでのMDをHTMLに変換→reveal.jsへ読み込み
参考

Twitterの埋め込みなどが対応できていない点🤮
(QiitaやSlidevなら対応できる)

余談

正直マークダウンに拘らなければSpeaker Deckも良い

  • パワポなどで作った資料をアップロードするだけ
  • SlideShareを使って簡単に埋め込みもできる

実際に見てみる

ブログにある内容がクリック先のサイトでスライドで見れる様子

補足

  • Slidevも作られたばかりで毎日のようにアップデートされている
    • 今後の変更によってはbuildをしないようなAPI構成もありえるかも
  • Twitterの埋め込みなど対応していないことが少し目立つ

結果メリット

  • 変更に強いスライドが作れた
  • ブログが同時に作れて効率化
  • UI自由度が格段に飛躍

reveal.jsを使用したVueコード

結論

記事とスライド作成を手軽に作成したいならQiita
マークダウンでリッチに書きたいならSlidev
別アプリ上でカスタマイズもしたいならReveal.js

自己紹介

個人開発について発信しています！
Twitterもフォローください👏
@1026NT
なる