Closed7

【Slidev】Slidevを使ってリッチなプレゼン資料を作ってみる

1zushun1zushun

モチベーション

  • 忘年会で高校サッカー部の同級生と会った
  • 投資周りの話題になって筆者が積立NISA(新NISA)をやっていたこともあり、新NISAの勉強会をすることになった
  • 証券口座作ってお金入れる導線のサポートだけにしても良いが、せっかくなら他の人にも説明する前提で新NISAに関する資料を作ってみたい
  • 今まではNotionのWunderpresentationというものでプレゼン資料を作っていたけど新しいものに触れてみたい(パワポは使いたくない)
  • 以前LTを視聴した際にSlidevという開発者向けのプレゼンツールがあったのでそちらを試してみる
  • Slidevの環境構築や実装のTipsなどを投げていく予定
  • 投資周りの話になるのでデプロイURLをスクラップに貼るかは検討中
1zushun1zushun

ツールに関する調査とかメモ

学生の頃は発表ツールとしてパワポを使っていたが、短期留学の時に現地の学生がPreziを使っていたをみて、コンテンツがリッチになるのが魅力的でよく使っていた。けど結局教授に提出するのはパワポ形式でないといけないだったりで他人への共有時に問題があるツールだなと思った。

Prezi

https://prezi.com/ja/

エンジニアになって社内勉強会でwunderpresentationを使っていたメンバーがいてNotionからプレゼン資料を生成できるのは楽だなと思って使い始めた。けれどあくまでNotionの拡張ということで痒いところに手が届かない感じ。といっても代替手段がないこともあり長く使っていた。

wunderpresentation

https://wunderpresentation.com/

確か次のコンパスでSlidevを使ったプレゼンをみて面白そうと思った。発表資料自体をどこで管理するかも迷っていてGitHubで管理できるのは魅力的だなと思って何か資料を作るきっかけを待っていた。

https://rakus.connpass.com/event/234673/

Slidev

https://sli.dev/

1zushun1zushun

環境構築

最新バージョン(確かv0.46くらいだったはず)でサーバー立ち上げ時にエラーが発生した。調査してみるとv0.42くらいでも失敗しているisuueがあり「v0.40.12試してみて」とSlidevメンバーから助言があったのでそちらに従い実装を進める。

$ npm init slidev@v0.40.12

https://github.com/slidevjs/slidev/issues/954#issuecomment-1513172478

1zushun1zushun

GitHub Pagesにデプロイする

GitHub Pagesでデプロイしようと思っていたが、日本語訳された方のドキュメントはアップデートされていなかった。英語のドキュメントを踏襲してデプロイできたので念の為今後もドキュメントを見るときは英語版の方を見ることとする。

https://sli.dev/guide/hosting.html

1zushun1zushun

ディレクトリ構成

Slidevの機能を使うため(ビルトインの機能と共存させるため)にある程度ディレクトリ構成には縛りがあるっぽい。

https://sli.dev/custom/directory-structure.html

layouts

例えばオリジナルのlayoutsを作りたいときはlayoutsディレクトリにslotを使ったvueファイルを作る必要がある。でもビルトインのlayoutsで足りるような気がする。

https://github.com/slidevjs/slidev/tree/main/packages/client/layouts

https://sli.dev/builtin/layouts.html

このスクラップは4ヶ月前にクローズされました