👨‍🏫

Slidevのインストール方法と基本的な使い方

2022/11/25に公開

Markdown

プレゼンテーション

Slidev

tech

Slidev(読み方: スライディブ)はコンテンツとビジュアルの分離をコンセプトとした、開発者向けのスライド作成およびプレゼンテーションツールです。Markdownベースで簡単にスライドを作成することができます。また、プレゼンテーションモードでは、レコーディング機能やカメラビューもあります。

Slidevのインストール

Slidevを使うにはNode.js >= 14.0が入っている必要があります。

Node.jsのバージョンの確認方法

node -v

または

node --version

npmコマンドを使ってインストールすることができます。

npm init slidev

yarnコマンドでもインストールすることができます。

yarn create slidev

以下のように表示されたら、プロジェクト名とパッケージマネージャを設定します。(チェック印のところ)

$ npm init slidev@latest
npx: installed 22 in 2.462s

  ●■▲
  Slidev Creator  v0.22.7

✔ Project name: … slidev-test
  Scaffolding project in slidev-test ...
  Done.

✔ Install and start it now? … yes
✔ Choose the agent › npm

以下のような表示が出たら、Slidevが利用可能です。

  ●■▲
  Slidev  v0.22.7 

  theme   @slidev/theme-seriph
  entry   /home/loft/dev/slidev/slidev-test/slides.md

  slide show      > http://localhost:3030/
  presenter mode  > http://localhost:3030/presenter
  remote control  > pass --remote to enable

  shortcuts       > restart | open | edit

グローバルインストール

以下のコマンドを実行するとグローバルにインストールすることができ、どこでもslidevコマンドを使えるようになります。

npm i -g @slidev/cli

スライドを開く

以下のコマンドでスライドを開くことができます。実行するとlocalhostが立ち上がります。

npm run dev

yarnコマンドの場合は以下の通りです。

yarn run dev

スライドを作る

スライドは./slides.mdに記述していきます。Slidevでは拡張されたMarkdownで記述します。

SlidevのMarkdown記法は以下をご覧ください。

Slidev for Visual Stadio Code

エディタとしてVS Codeを使用する場合、拡張機能が提供されています。スライドの順序を入れ替えたり、折り畳み機能が使えたりし便利です。

プレゼンする

npm run dev(もしくはyarn run dev)で立ち上げたlocalhost上でプレゼンすることができます。

ナビゲーションバーの使い方は以下をご参照ください。

スライドをエクスポートする

スライドをエクスポートするにはPlaywright-chromiumをインストールする必要があります。

npm i -D playwright-chromium

以下のコマンドを使用してスライドをPDFにエクスポートします。

npm run export

Slidevをグローバルにインストールしている場合は、以下のコマンドでもエクスポート可能です。

slidev export

--format pngオプションを指定すると、各スライドをPNG画像として出力できます。

npx slidev export --format png

または(グローバルにインストールしている場合)

slidev export --format png