ターゲット

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

筆者経験

• LT会の主催者
• これまでQiitaを使ってLTをしてきた

https://qiita.com/naruqiita/items/7888b931beeaaa6b39e7

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

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

まだもったいない？

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

例

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

比較URL

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

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

やりたかったこと

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

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

http://naruhero.site/

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を使って簡単に埋め込みもできる

実際に見てみる

ブログがクリック先でスライドとして表示される様子

結果メリット

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

補足

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

自己紹介

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