Slidevとは?

公式サイト： https://sli.dev/

Slidevは開発者向けに設計されたスライドツールです。 以下の機能で構成されています。

• 📝 Text-based - マークダウンを使用し、スタイルを設定出来ます
• 🎨 Themable - npm packageを使用しテーマをシェア出来ます
• 🧑‍💻 Developer Friendly - コードハイライト, オートコンプリートを使用したライブコーディング
• 🤹 Interactive - Vueコンポーネントの埋め込みで表現を強化します
• 🎥 Recording - ビルトインの録画とカメラビューがあります
• 📤 Portable - PDFへのエクスポート, PNG, ホスティング可能なSPA
• 🛠 Hackable - Webページで可能なことは何でも

おすすめポイント💪

• マークダウン内にhtmlを書いていけばかなりの自由度
• Windi CSS（Tailwind CSS 2.0完全互換の動的生成コンパイラ）が内蔵されている https://windicss.org/
• ページごとに設定出来るScopedなstyle
• スライドをgit管理出来る
• 簡単にホスティング（Netlify, vercel, GitHub Pages）
• 『Webページで可能なことは何でも』の言葉とおり、VueやCSSの知識で好きなようにカスタマイズ出来る
• マークダウンなのでZenn等への転化が捗る！！！！

CSSの知識がある人は心地よくレイアウト出来るのに感動すると思う！
デザインツール的なスライド作成ツールの作業が苦手な方に非常におすすめ

【基本】始め方

With NPM:
$ npm init slidev
With Yarn:
$ yarn create slidev
With NPM:
$ npm init slidev
With Yarn:
$ yarn create slidev

components/ => このフォルダ内のVueファイルがコンポーネントとして扱える
.gitignore
.npmrc
.netlify.toml => Netlifyホスティング用
package.json
README.md
slides.md => このファイルが単一のエントリーポイントとなり、プロジェクト内で一つのスライドを生成する
vercel.json => Vercelホスティング用
yarn.lock
components/ => このフォルダ内のVueファイルがコンポーネントとして扱える
.gitignore
.npmrc
.netlify.toml => Netlifyホスティング用
package.json
README.md
slides.md => このファイルが単一のエントリーポイントとなり、プロジェクト内で一つのスライドを生成する
vercel.json => Vercelホスティング用
yarn.lock

【基本】マークダウンの記法

フォントを扱う（Google Fonts）

フォントはslides.md内の記述で適用出来る

fonts:
  # basically the text
  sans: 'Robot'
  # use with `font-serif` css class from windicss
  serif: 'Robot Slab'
  # for code blocks, inline code, etc.
  mono: 'Fira Code
fonts:
  # basically the text
  sans: 'Robot'
  # use with `font-serif` css class from windicss
  serif: 'Robot Slab'
  # for code blocks, inline code, etc.
  mono: 'Fira Code

Googleフォントは、自動でインポートされるのでfontsの記述だけでOK！

Fonts will be imported automatically from Google Fonts. That means you can use any fonts available on Google Fonts directly.

変数を扱う

$slidev.nav.currentPage（現在のページ番号）など、グローバルに用意されている変数はいくつかある https://sli.dev/custom/vue-context.html

独自の変数を使う方法は、ドキュメント内を"variable"で検索したけどなさそう？

CSSに変数を使いたいなら./style.cssもしくは./styles/xx.css（グローバルのCSSファイル）を作成し、CSS カスタムプロパティでよさそう

// style.css
:root {
  --main-color: #FB98B7;
  --main-color-sheer: #FFC0D1;
  --main-color-vivit: #FF48A5;
  --main-color-red: #FF005F;
  --main-color-blue: #4DCCD2;
  --main-color-black: #333;
}
// style.css
:root {
  --main-color: #FB98B7;
  --main-color-sheer: #FFC0D1;
  --main-color-vivit: #FF48A5;
  --main-color-red: #FF005F;
  --main-color-blue: #4DCCD2;
  --main-color-black: #333;
}

カメラのCSSを調整

<!--v-if-->
<div id="slidev-goto-dialog" class="fixed right-5 bg-main transform transition-all -top-20" shadow="~" p="x-4 y-2" border="~ transparent rounded dark:gray-400 dark:opacity-25" data-v-7df26b02="">
  <input type="number" disabled="" class="outline-none bg-transparent" placeholder="Goto..." data-v-7df26b02="">
</div>
<div class="fixed z-10" style="left: 838.861px; top: 432.301px;">
  <div class="rounded-full shadow bg-gray-400 bg-opacity-10 overflow-hidden object-cover" style="width: 177px; height: 177px;">
    <video autoplay="" class="object-cover min-w-full min-h-full rounded-full" style="transform: rotateY(180deg);"></video>
  </div>
  <div class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700" style="width: 14px; height: 14px; top: 144.087px; left: 144.087px; cursor: nwse-resize;">
  </div>
</div>
<!--v-if-->
<!--v-if-->
<div id="slidev-goto-dialog" class="fixed right-5 bg-main transform transition-all -top-20" shadow="~" p="x-4 y-2" border="~ transparent rounded dark:gray-400 dark:opacity-25" data-v-7df26b02="">
  <input type="number" disabled="" class="outline-none bg-transparent" placeholder="Goto..." data-v-7df26b02="">
</div>
<div class="fixed z-10" style="left: 838.861px; top: 432.301px;">
  <div class="rounded-full shadow bg-gray-400 bg-opacity-10 overflow-hidden object-cover" style="width: 177px; height: 177px;">
    <video autoplay="" class="object-cover min-w-full min-h-full rounded-full" style="transform: rotateY(180deg);"></video>
  </div>
  <div class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700" style="width: 14px; height: 14px; top: 144.087px; left: 144.087px; cursor: nwse-resize;">
  </div>
</div>
<!--v-if-->

Windi CSSのクラスだけが並んでいる…🤔

// style.css等
#slidev-goto-dialog + div > div {
  なにかする // https://ics.media/entry/15130/ CSSアニメーションで実現！コピペで使えるマイクロインタラクション
}
// style.css等
#slidev-goto-dialog + div > div {
  なにかする // https://ics.media/entry/15130/ CSSアニメーションで実現！コピペで使えるマイクロインタラクション
}

独自のプログレスバーを作る

このページの下についているページの現在地を表すバーです😁

// global-bottom.vue
<template>
  <Progress
    v-if="$slidev.nav.currentPage !== 1 && $slidev.nav.currentLayout!== 'end'"
    :current="$slidev.nav.currentPage"
    :total="$slidev.nav.total" />
</template>
// global-bottom.vue
<template>
  <Progress
    v-if="$slidev.nav.currentPage !== 1 && $slidev.nav.currentLayout!== 'end'"
    :current="$slidev.nav.currentPage"
    :total="$slidev.nav.total" />
</template>

// components/Progress.vue
<template>
    <div class="absolute z-50 bottom-5 left-0 right-0 flex justify-center">
        <div class="w-50 relative h-1 bg-green-500/50 rounded-full overflow-hidden">
            <span class="absolute h-full bg-gray-500 transition-all duration-300" :style="style"></span>
        </div>
    </div>
</template>

<script lang="ts">
  export default {
    name: "Progress",
    // propsを受け取る
    computed: {
      style() {
        return {
          width: `${100 / (this.total - 1)}%`,
          left: `${100 / (this.total - 1) * (this.current - 2)}%`,
        }
      }
    }
  };
// components/Progress.vue
<template>
    <div class="absolute z-50 bottom-5 left-0 right-0 flex justify-center">
        <div class="w-50 relative h-1 bg-green-500/50 rounded-full overflow-hidden">
            <span class="absolute h-full bg-gray-500 transition-all duration-300" :style="style"></span>
        </div>
    </div>
</template>

<script lang="ts">
  export default {
    name: "Progress",
    // propsを受け取る
    computed: {
      style() {
        return {
          width: `${100 / (this.total - 1)}%`,
          left: `${100 / (this.total - 1) * (this.current - 2)}%`,
        }
      }
    }
  };

endを変更する

最後のスライドはslides.mdでは管理できない…🤔

<template>
  <div class="slidev-layout default">
    // なにかする
  </div>
</template>
<template>
  <div class="slidev-layout default">
    // なにかする
  </div>
</template>

総括

Slidevは『Hackable』な名に恥じない開発者にとってはかゆいところに手が届く 素晴らしいスライド作成ツールだった！

Slidevは開発中なので、まだAPI等は固まっていないようです。

Slidev is still under heavy development. API and usages are not set in stone yet.

今後にも期待！