【Slidev】Slidevを使ってリッチなプレゼン資料を作ってみる
モチベーション
- 忘年会で高校サッカー部の同級生と会った
- 投資周りの話題になって筆者が積立NISA(新NISA)をやっていたこともあり、新NISAの勉強会をすることになった
- 証券口座作ってお金入れる導線のサポートだけにしても良いが、せっかくなら他の人にも説明する前提で新NISAに関する資料を作ってみたい
- 今まではNotionのWunderpresentationというものでプレゼン資料を作っていたけど新しいものに触れてみたい(パワポは使いたくない)
- 以前LTを視聴した際にSlidevという開発者向けのプレゼンツールがあったのでそちらを試してみる
- Slidevの環境構築や実装のTipsなどを投げていく予定
- 投資周りの話になるのでデプロイURLをスクラップに貼るかは検討中
ツールに関する調査とかメモ
学生の頃は発表ツールとしてパワポを使っていたが、短期留学の時に現地の学生がPreziを使っていたをみて、コンテンツがリッチになるのが魅力的でよく使っていた。けど結局教授に提出するのはパワポ形式でないといけないだったりで他人への共有時に問題があるツールだなと思った。
Prezi
エンジニアになって社内勉強会でwunderpresentationを使っていたメンバーがいてNotionからプレゼン資料を生成できるのは楽だなと思って使い始めた。けれどあくまでNotionの拡張ということで痒いところに手が届かない感じ。といっても代替手段がないこともあり長く使っていた。
wunderpresentation
確か次のコンパスでSlidevを使ったプレゼンをみて面白そうと思った。発表資料自体をどこで管理するかも迷っていてGitHubで管理できるのは魅力的だなと思って何か資料を作るきっかけを待っていた。
Slidev
環境構築
最新バージョン(確かv0.46くらいだったはず)でサーバー立ち上げ時にエラーが発生した。調査してみるとv0.42くらいでも失敗しているisuueがあり「v0.40.12試してみて」とSlidevメンバーから助言があったのでそちらに従い実装を進める。
$ npm init slidev@v0.40.12
GitHub Pagesにデプロイする
GitHub Pagesでデプロイしようと思っていたが、日本語訳された方のドキュメントはアップデートされていなかった。英語のドキュメントを踏襲してデプロイできたので念の為今後もドキュメントを見るときは英語版の方を見ることとする。
ディレクトリ構成
Slidevの機能を使うため(ビルトインの機能と共存させるため)にある程度ディレクトリ構成には縛りがあるっぽい。
layouts
例えばオリジナルのlayoutsを作りたいときはlayoutsディレクトリにslotを使ったvueファイルを作る必要がある。でもビルトインのlayoutsで足りるような気がする。
みてる
評価基準
The following graphs compare the number of stars added on GitHub over the last 12 months.
vue-ecosystemでNuxt.jsに次ぐ第二位だった
一旦プレゼン資料を作り切ったのでクローズさせます。