Slidevはmarkdownで書いた内容がパワポのようなスライド資料になります！
Slidevの特徴として
- markdownで記載する
- レイアウトを組む際はhtml+cssの知識が必要
など、
エンジニアに向けた仕様の印象。
逆にこの辺りの知識さえあれば、
サクッと共有したい資料作りには便利そうに感じたため使ってみました！
検証した環境
| 1 | Slidev | 0.35.2 |
Slidevについて
Slidevはmarkdownで記載した内容をスライド資料にしてくれるnodeのパッケージです。
機能がかなり豊富で今回記載する事もそのうちの一部しか書けてません。
しかも2022/08/06現在まだβ版なのでこれからも機能がドンドン追加されるのでは、という予想です！
出来る事の一覧は公式ページをご参考に
メリデメ
メリット
- markdownに書く事でプレゼン資料が作れる。お手軽！
- GitHubなどでコード管理が可能
- テーマが複数の中から選択可能
- Vueで作ったコンポーネントを使用出来る（！）
デメリット
- 凝ったレイアウトを行いたい際には、html・cssの知識が必要
- パワポ・keynoteのようなUI上からの操作は出来ない
- animationやレイアウトなど、凝った事をしたい際にはkeynoteなどの方がお手軽
.pptx形式での書き出しが出来ない
Slidevでスライドを作成してみる
npm init slidevでSlidevを始める環境が作れます
$ npm init slidev
Need to install the following packages:
create-slidev@0.35.2
Ok to proceed? (y)
●■▲
Slidev Creator v0.35.2
? Project name: › slidev-sampleCUIの質問内容に答えていったあと、
yarn run devを実行するとlocalhostが立ち上がります。
これだけできれいですね！✨
自動的に作成されたファイル・フォルダ構成は以下のようになっています
.
├── README.md
├── components
│ └── Counter.vue
├── netlify.toml
├── node_modules
│ ├── @ampproject
・・・
├── package.json
├── slides.md
├── vercel.json
└── yarn.lockスライドの内容はslides.mdに記載します。
（詳細は後ほど）
また、yarn run buildを実行するとdist/フォルダにhtmlやcssなどの成果物が書き出されます。
「netlify.toml」や「vercel.json」がセットになっているのでweb上への公開も簡単に出来ます！
スライドを作る
スライドの作成はslides.mdを編集する事で行えます
ページを区切る
--- がページの区切りになります
# page 1
ページ1の内容
---
# page 2
ページ2の内容コードを書く
markdownでコードを記載するように ``` を用います。
# code
```js
// js
function say() {
const name = 'taro'
console.log(`hello ${name}`)
}
`` `
クリック毎にコードをハイライトする事も簡単に出来るようになっています。
言語の指定の後に{all|4|7-13}のように記述をするだけ！
```tsx {all|4|7-13|all}
import { VFC } from 'React'
export type Props = {
text: string
}
const Sample: VFC<Props> = props => {
return (
<div>
<p>{props.text}</p>
</div>
)
}
`` `テーマを設定する
テーマはFront Matterに設定します
---
# try also 'default' to start simple
theme: bricks
---
さきほどまで使っていたseriphというテーマに比べてポップで可愛い ☺️
テーマは公式ページに公開されていて自分で作る事も可能
β版の時点で結構な種類が用意されていてすごい！
レイアウトを整える
レイアウトを整えるのはcssを用います
素のcssを書く事も可能ですし、Windi CSSかUno CSSを使う事も可能
# レイアウト
<div class="flex">
<div class="w-1/2">
左の内容
</div>
<div class="w-1/2">
右の内容
</div>
</div>
この部分はUI上直感的な操作が出来るパワポやkeynoteの方に軍配が上がりそうですね
Vueのコンポーネントを使う
Vueのコンポーネントが使えます！
デフォルトでCounter.vueが同梱されているので使ってみると
# Vueのコンポーネントを使う
<Counter :count="10" />Vueのコンポーネントがプレゼン資料で動く、新鮮。笑
コンポーネントを追加する場合はcomponentsフォルダ中に作成
作成後は自動で読み込めるようになります。
slidevはVue3で書かれているので.tsxにも対応しているんですね
Conventions: ./components/*.{vue,js,ts,jsx,tsx,md}
プロフィールのような頻繁に使うものをサッと読み込む事が出来るのでいいですね！
