Macを購入して最速でSlidevアウトプット環境を整えた作業ログ

# 前提

:::note info
- 2024年7月時点での情報です
- Mac M3 Pro
- OS: Sonoma14.5
:::


# スコープ外

:::note warn
- Macの初期設定
- Githubアカウントの作成
:::

作業ログを残すと決める前に実施しちゃってました・・

# VSCode

https://code.visualstudio.com/download

上記、公式サイトから、Mac版をダウンロードし、解凍してアプリケーションフォルダに入れる。
Launchpadから起動する。

# Git

## Gitインストール

ターミナルでgitと打って、入ってなければ以下ダイアログが出てくるので、インストールする。
※ 既に入ってる場合はusageが出るのでこの項はスルーしてください

![dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/2a318ce0-6a3c-115d-7647-2950f3d76c61.png)

## Git noreply mail setting

※ 公開しているメールアドレスを持っている人はスルーしてください。

コミットログにプライベートなメールアドレスが残るのに抵抗ある人だけ、以下GitHubのEmail Settingのページから、noreply用のダミーアドレスを控えておく。

https://github.com/settings/emails

ページ下部の「Keep my email addresses private」のあたり、
`数値+アカウント名@users.noreply.github.com`で構成されるアドレスです。

## Git 初期設定

以下コマンドで初期設定を行う。

```
% git config --global user.name 'ユーザー名'
% git config --global user.email '先ほど控えたnoreplyメールアドレス'
```

確認用のコマンドを打って、設定した内容が表示されていればOK。

```
% git config -l
user.name=ユーザー名
user.email=noreplyメールアドレス
```

# Node.js / npm

## Voltaインストール

Node.jsのバージョン管理ツール。
直接Node.jsのサイトからインストールしても良いですが、バージョン管理や切り替えが楽なので、これからセットアップする人は入れておくことをオススメします。
※ 今回はVoltaを選択してますが、その他お好みのバージョン管理ツールがあれば何でもOKです

https://docs.volta.sh/guide/getting-started

上記、公式サイトに記載のコマンドを打ってインストールする。

```
% curl https://get.volta.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 10930  100 10930    0     0   7543      0  0:00:01  0:00:01 --:--:--  7548
  Installing latest version of Volta (1.1.1)
    Checking for existing Volta installation
    Fetching archive for macOS, version 1.1.1
######################################################################## 100.0%
    Creating directory layout
  Extracting Volta binaries and launchers
    Finished installation. Updating user profile settings.
Updating your Volta directory. This may take a few moments...
success: Setup complete. Open a new terminal to start using Volta!
```

Pathが通っていることを確認。

```
% cat .zshrc

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"
```

Voltaがインストールされていることを確認。

```
% volta -v
1.1.1
```

Volta経由でNode.jsの最新安定バージョンを取得。

```
% volta install node
success: installed and set node@20.15.1 (with npm@10.7.0) as default
```

インストールされていることを確認。

```
% volta list all
⚡️ User toolchain:

    Node runtimes:
        v20.15.1 (default)

    Package managers:


    Packages:
```

nodeコマンドが使えることを確認。

```
% node -v
v20.15.1
```

npmコマンドが使えることを確認。

```
% npm -v
10.7.0
```

# Slidev

https://sli.dev/

上記、公式サイトに記載のコマンドを打ってセットアップする。
今回は「slidev-template」という名前で作成する。

```
% npm init slidev
Need to install the following packages:
create-slidev@0.49.17
Ok to proceed? (y) y


> npx
> create-slidev


  ●■▲
  Slidev Creator  v0.49.17

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

✔ Install and start it now? … yes
? Choose the package manager › - Use arrow-keys. Return to submit.
❯   npm
    yarn
    pnpm
```

セットアップが完了すると、サンプルのスライドアプリケーションが起動する。

```
  ●■▲
  Slidev  v0.49.17 

  theme       @slidev/theme-seriph
  css engine  unocss
  entry       /Users/xxx/xxx/slidev-template/slides.md

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

  shortcuts           > restart | open | edit | quit
```

ポップアップが出るのでChromeの起動を許可する。（最初だけ）

![popup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/7e73ef71-3fa9-6f68-81d2-e334fd13f077.png)


スライドが自動で立ち上がる。

![slidev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/6ffbd106-c65b-00f6-7e14-95e33b2f6d09.png)

# GitHubで管理する

作成した「slidev-template」をVSCodeから開いて、「Initialize Repository」を行う。

![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/faaf17af-0efa-32d0-745b-ee3167ca3683.png)

Messageのところのに「first commit.」 と入力して、Commitを押す。

![commit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/da1f0107-02ca-a151-68b2-32925ee23a84.png)

全てCommit対象とするため、Yesを選択。

![staged.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/213dbcf4-d248-48f1-a736-b11eaa161c97.png)

Publishする。

![スクリーンショット 2024-07-20 15.22.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/d281d55d-a868-ab9e-7822-930f06f29644.png)

GitHubにサインインするダイアログが出るので、指示に従って完了させる。

![スクリーンショット 2024-07-20 15.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/6d9aabaa-103e-d7e9-f4ac-128f2f7b2dbb.png)

![スクリーンショット 2024-07-20 15.23.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/fb5a523f-517c-7bcb-8d57-cca93fee76c7.png)

VSCodeに戻ってきたら、publicかprivateか選択する画面になるので、publicを選択。
※ privateでも構わないですが、後述するGitHub Pagesが利用出来なくなるためそこだけ注意

![スクリーンショット 2024-07-20 15.25.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/5e2b83c9-43c2-ef44-0e2c-1080a098cdb6.png)

GitHubへのPushまで完了。

![スクリーンショット 2024-07-20 15.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/e1ca3d3f-3e91-1840-204d-66158c65f286.png)


# テンプレートリポジトリの設定

テンプレートリポジトリとして使用するため、設定を追加する。

GitHubで先ほど作成したRepositoryを開き、Settings > General から「Template repository」にチェックをつける。

![スクリーンショット 2024-07-20 15.31.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/aa21fcd8-9f25-4d24-2412-fb0c120ea738.png)

右上に「Use this template」のボタンが出てればOK

![スクリーンショット 2024-07-20 15.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/d8ee3760-f6da-9352-d1b3-e28443baf21f.png)

# 拡張機能追加

https://sli.dev/features/vscode-extension

公式の拡張機能があるので、それを使っていきます。

メリット

- サイドメニューでスライドをプレビューができる
- スライドの一覧が確認できる
- スライドの並び替えができる
- すぐにスライドアプリケーションの起動ができる

Extensionsタブで「Slidev」と検索すると出てくるので、Installする。

usage![スクリーンショット 2024-07-20 16.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/5100ce8d-96ed-25be-74bb-7c56203dd783.png)


# Building and Hosting

https://sli.dev/guide/hosting#github-pages

ローカルでbuildして静的ファイルを作成し、自前でhostingすることも可能ですが、
今回は公式にも記載されている、GitHub ActionsとGitHub Pagesを使ってhostingしていきたいと思います。

一度構築してしまえば、あとはpushするたびに自動で最新化されるため便利に使えます。

公式サイトに記載の通り、deploy.yamlを準備する。

https://github.com/kazu-kichi-67/slidev-template/blob/main/.github/workflows/deploy.yaml

Setting > Pages から、「Build and deployment」のSourceをGitHub Actionsに変更する。

![スクリーンショット 2024-07-31 5.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615784/e1e7b28f-e0b7-a089-6dbb-c3802648070c.png)

完成したPagesが[こちら](https://kazu-kichi-67.github.io/slidev-template/)。

https://kazu-kichi-67.github.io/slidev-template/

# PDFダウンロード

https://sli.dev/guide/exporting

PDF出力にも対応しているので、SpeakerDeckやDocswellなどにあげるのも良いでしょう。

注意点

- アニメーションなどは動かない
- コンテンツを重ねていると、うまく表示できない

# （おまけ）DockerでSlidevを動かす

https://github.com/slidevjs/container

実際に試せてないですが、ローカルPC上で動かすのではなくDocker上で動かすためのイメージも提供されているようです。

これであれば、ローカルPCを汚さずに開発できそうです。


こちらからは以上です。