結論
個人ブログをプレゼン用に
アレンジしたら良かった話
ターゲット
- LTが好きなエンジニア
- 情報発信をよくするジニア
- 自分の活動をストック型にしたいジニア
筆者経験
- LT会の主催者
- これまでQiitaを使ってLTをしてきた
Qiitaスライドを選んできた理由
LT会に参加して見られる良い資料の多くは
その場でしか拝見できずもったいないと思っていた
Qiitaのスライドモードを使うことによって
資料を記事として残せる！
まだもったいない？
- Qiitaのスライドモード
- 正直いうと自由度が低い
- 文字の拡大や配置を自由にしたい
- アニメーションもつけたいな
例
自分でスライドを実装したい
比較URL
この記事を参考にあまり手を加えずに比較してみる
| 技術 | URL |
|---|---|
| Qiita | Qiitaスライド記事 |
| reveal.js | ブログに付属させたサイト |
| Slidev | https://slidev-introduction-naru.netlify.app/ |
※同じマークダウン形式記事をそれぞれ投稿
やりたかったこと
背景
個人ブログをNuxt ✖️ Contentful(マークダウン)で作っている
- マークダウンで書けるスライドが欲しい
- ContentfulのAPIを使って可変的なページでスライドを表示したい
Slidevでやってやりたかった
mark downでスライドを作れるサービスを見つけて
— なる(ハチドリの一滴)個人開発の人 (@1026NT) August 24, 2021
おもちゃを与えられた子供状態
けど意外と拡張カスタマイズは難しいのかも。。
あと公式も変更をかなり入れてるみたいで
これから注目したいものが増えた👀https://t.co/QxpTl7TIYT pic.twitter.com/UjQ7XC2E5u
Slidevとは
- 2021年5月に発表
- マークダウンで書けるプレゼンテーションツール
-
npm init slidevだけで始められるオープンソース - Vite、Vue3、WindiCSSで作られる
メリット
- 1コマンドで雛形が作れ、編集すればプレゼン資料が完成する手頃さ
- オンライン発表に合わせたプレゼンターモードやインカメラ機能など
- 録画機能付きでアドリブが苦手な人にも優しい
ビデオでの例
詳しくはこちら
今回選ばなかった理由
- 個人用カスタマイズ性が低い
- スライド1種類に対して1回buildが必要
- つまり変更があるたびにbuild必要
-
APIでデータ渡す→スライド表示が難しい
- スライド1種類に対して1回buildが必要
- サクッとつくれない（拘る場合）
- 開発期間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自由度が格段に飛躍
結論
記事とスライド作成を手軽に作成したいならQiita
マークダウンでリッチに書きたいならSlidev
別アプリ上でカスタマイズもしたいならReveal.js
自己紹介
個人開発について発信しています！
Twitterもフォローください👏
@1026NT
なる
