slidev-drawings

Slidev の描画

このスキルでは、drauu を利用した Slidev 組み込みの描画・注釈機能について説明します。プレゼンテーション中にリアルタイムでスライドに描画、ハイライト、注釈を追加できます。

このスキルを使う場面

• プレゼンテーション中に重要な内容をハイライトする
• その場で図を描く
• コードや画像に注釈を付ける
• インタラクティブな学習セッションを行う
• ビジュアルを使ってブレインストーミングする

描画を有効にする

フロントマターで設定する

---
drawings:
  enabled: true
---

詳細な設定

---
drawings:
  enabled: true
  persist: false
  presenterOnly: false
  syncAll: true
---

描画オプション

オプション	型	既定値	説明
enabled	boolean/string	true	描画を有効にします（true、false、'dev'）
persist	boolean	false	描画を .slidev/drawings/ に保存します
presenterOnly	boolean	false	プレゼンターのみが描画できます
syncAll	boolean	true	すべてのクライアント間で描画を同期します

描画ツールへのアクセス

UI から

1. ナビゲーションバーにあるペン／鉛筆のアイコンをクリックします
2. 描画ツールバーが表示されます

ツールバーのオプション

• ペン：フリーハンドで描画します
• 線：直線を描画します
• 矢印：矢印付きの線を描画します
• 長方形：長方形を描画します
• 楕円：円／楕円を描画します
• 消しゴム：描画を消します
• すべて消去：すべての描画を消します

描画ツールの詳細

ペンツール

• フリーハンドで描画します
• 線の太さを調整できます
• 色を選択できます

Usage: Click and drag to draw
Good for: Underlining, circling, quick annotations

線ツール

• 直線を作成します
• Shift キーを押しながら操作すると、水平線／垂直線を描画できます

Usage: Click start point, drag to end
Good for: Connecting elements, pointing

矢印ツール

• 矢印付きの線を描画します
• 方向を示します

Usage: Click start, drag to arrow point
Good for: Showing flow, indicating direction

長方形ツール

• 長方形／正方形を描画します
• Shift キーを押しながら操作すると、正方形を描画できます

Usage: Click corner, drag to opposite corner
Good for: Highlighting areas, boxing content

楕円ツール

• 円／楕円を描画します
• Shift キーを押しながら操作すると、正円を描画できます

Usage: Click center, drag to edge
Good for: Circling items, attention markers

消しゴム

• 特定の描画を消します
• 描画をクリックすると消去できます

Usage: Click on drawn elements to remove
Good for: Correcting mistakes, cleaning up

スタイラス／ペンのサポート

自動検出

Slidev はスタイラス入力を自動的に検出します。

• 筆圧感知（対応している場合）
• パームリジェクション
• 自然な描画体験

iPad + Apple Pencil

次の環境で快適に使えます。

• iPad の Safari
• iPad の Chrome
• Sidecar（iPad をセカンドディスプレイとして使用）

色とスタイル

色の変更

描画ツールバーのカラーピッカーをクリックします。

• プリセットカラーを使用できます
• 一部のテーマではカスタムカラーに対応しています

線の太さ

次の用途に合わせて線の太さを調整します。

• 細い線（精密さ）
• 太い線（視認性）

描画の保存

保存を有効にする

---
drawings:
  persist: true
---

保存場所

描画は次の場所に保存されます。

.slidev/drawings/[slide-number].svg

利点

• ページを再読み込みしても描画が保持されます
• エクスポート（PDF など）に含められます
• バージョン管理に適した形式（SVG）です

保存された描画を消去する

.slidev/drawings/ からファイルを削除するか、次の方法で消去します。

• 描画モードで「すべて消去」ボタンを使う
• プレゼンターモードから消去する

プレゼンター専用モード

設定

---
drawings:
  presenterOnly: true
---

動作

• プレゼンターのみが描画できます
• 描画はすべての聴衆に表示されます
• 聴衆が誤って描画することはありません

同期

すべてのクライアントを同期する

---
drawings:
  syncAll: true
---

接続中のすべてのクライアントに描画がリアルタイムで表示されます。

同期を無効にする

---
drawings:
  syncAll: false
---

プレゼンターの描画のみが聴衆に同期されます。

ベストプラクティス

1. 重要な注釈を準備する

あらかじめ何をハイライトするか決めておきます。

2. 適切なツールを使う

用途	ツール
テキストをハイライトする	ペン（下線）
何かを指し示す	矢印
要素をグループ化する	長方形
重要なものを示す	楕円

3. 色の選び方

• 赤：エラー、警告、重要な内容
• 緑：成功、正解、良い内容
• 青：情報、メモ
• 黄色：ハイライト（テーマ上で見やすい場合）

4. 使いながら整理する

• 次に進む前に、不要な描画を消します
• 描画は最小限にし、意味のあるものにします
• 新しいトピックを始めるときは「すべて消去」を使います

5. 描画の練習をする

• スタイラスの筆圧や速度を試します
• よく使う図形を練習します
• 描画のショートカットを把握します

キーボードショートカット

描画モードが有効なとき：

キー	操作
1	ペンツール
2	線ツール
3	矢印ツール
4	長方形ツール
5	楕円ツール
e	消しゴム
c	すべて消去
Esc	描画モードを終了

スライドとの連携

コードへの描画

# Code Review

```python
def calculate(x, y):
    result = x + y  # Circle this line
    return result

プレゼンテーション中に、重要な行を円で囲みます。

### Drawing Over Diagrams

```markdown
```mermaid
graph LR
    A --> B --> C

説明中に、矢印を使って流れをたどります。

### Drawing Over Images

```markdown
![Architecture](/images/architecture.png)

Annotate specific components during walkthrough.

よくあるパターン

強調して説明する

1. スライドの内容を表示します
2. 描画モードを有効にします
3. 重要なポイントを円で囲む、または下線を引きます
4. 指し示しながら説明します

図をその場で作成する

1. 空の図、または一部が完成した図を表示します
2. 説明しながら接続線を描画します
3. 長方形を使ってラベルを追加します

コードの解説

1. コードブロックを表示します
2. 実行の流れを示す矢印を描画します
3. 説明する変数を円で囲みます
4. 戻り値に下線を引きます

変更前と変更後

1. 古い方法に「X」を描きます
2. 新しい方法にチェックマークを描きます

トラブルシューティング

描画が表示されない

1. drawings.enabled: true を確認します
2. ブラウザーを更新します
3. CSS の競合がないか確認します

同期の問題

1. syncAll の設定を確認します
2. ネットワーク接続を確認します
3. すべてのクライアントを更新します

永続化が機能しない

1. persist: true を確認します
2. .slidev/ ディレクトリが存在することを確認します
3. ファイルのアクセス権を確認します

スタイラスが機能しない

1. ブラウザーの互換性を確認します
2. スタイラスが接続されていることを確認します
3. 別のブラウザーを試します

出力形式

描画を設定するとき：

---
drawings:
  enabled: true      # Enable drawing feature
  persist: true      # Save drawings between sessions
  presenterOnly: true # Only presenter can draw
  syncAll: true      # Sync to all viewers
---

スライドの描画プラン：

1. ［描画／強調するもの］
2. ［使用するツール］
3. ［色の選択］
4. ［説明中のタイミング］

クリーンアップ：

• 描画前に消去：［はい／いいえ］
• 描画後に消去：［はい／いいえ］