slidev-navigation

Slidev のナビゲーション

このスキルでは、キーボードショートカット、ナビゲーションバー、概要モード、ナビゲーション動作のカスタマイズなど、Slidev のすべてのナビゲーション機能を扱います。

このスキルを使う場面

• ナビゲーション操作を学ぶ
• キーボードショートカットをカスタマイズする
• プレゼンテーションのナビゲーションを設定する
• ナビゲーションバーを設定する
• カスタムナビゲーションコンポーネントを作成する

デフォルトのキーボードショートカット

基本的なナビゲーション

キー	操作
Space	次のアニメーションまたはスライドへ
→ / Right	次のアニメーションまたはスライドへ
← / Left	前のアニメーションまたはスライドへ
↑ / Up	前のスライドへ（アニメーションをスキップ）
↓ / Down	次のスライドへ（アニメーションをスキップ）

モードの切り替え

キー	操作
o	概要モードを切り替える
d	ダークモードを切り替える
f	全画面表示を切り替える
p	プレゼンターモードを切り替える

ナビゲーションジャンプ

キー	操作
g	指定したスライドへ移動
Home	最初のスライドへ移動
End	最後のスライドへ移動

その他の操作

キー	操作
Esc	全画面表示／概要／描画を終了
e	描画モードを切り替える
r	録画を切り替える

ナビゲーションバー

場所

スライドの左下（ホバーすると表示されます）。

利用可能なボタン

• ホーム：最初のスライドへ移動
• 前へ：前のスライド／アニメーションへ
• 現在／合計：クリックして移動先ダイアログを開く
• 次へ：次のスライド／アニメーションへ
• プレゼンター：プレゼンターモードを開く
• カメラ：カメラ表示を切り替える
• 録画：録画を開始／停止する
• 描画：描画モードを切り替える
• 概要：スライドの概要を開く
• ダークモード：ダーク／ライトを切り替える
• 全画面表示：全画面表示を切り替える
• エクスポート：エクスポートオプション
• 情報：プレゼンテーション情報

概要モード

開き方

• o キーを押す
• ナビゲーションバーの概要ボタンをクリックする
• /overview URL に移動する

機能

• すべてのスライドをグリッド表示
• 任意のスライドをクリックして移動
• 概要内でのキーボードナビゲーション
• スライドを検索（実装されている場合）

概要内のナビゲーション

キー	操作
← → ↑ ↓	グリッド内を移動
Enter	スライドを選択
Esc / o	概要を閉じる

移動先ダイアログ

開き方

• g キーを押す
• ナビゲーションバーのスライド番号をクリックする

使い方

1. ダイアログが開きます
2. スライド番号を入力します
3. Enter を押します

クイックジャンプ

g → 15 → Enter

スライド 15 に直接移動します。

ショートカットのカスタマイズ

設定ファイル

setup/shortcuts.ts を作成します。

import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // Keep default shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
    {
      key: 'ctrl+f',
      fn: () => nav.go(1),
    },
  ]
})

ショートカットのプロパティ

プロパティ	型	説明
key	string	キーの組み合わせ
fn	function	実行するアクション
autoRepeat	boolean	キーを押し続けたときに繰り返す

キーの構文

// Single key
{ key: 'enter', fn: () => {} }

// Modifier + key
{ key: 'ctrl+s', fn: () => {} }

// Multiple modifiers
{ key: 'ctrl+shift+s', fn: () => {} }

利用可能な修飾キー

• ctrl
• shift
• alt
• meta（Mac では Cmd）

ナビゲーション API

コンポーネント内

<script setup>
import { useNav } from '@slidev/client'

const {
  currentSlideNo,  // Current slide number (ref)
  currentPage,     // Current page number
  total,           // Total slides
  clicks,          // Current click count
  next,            // Go to next
  prev,            // Go to previous
  go,              // Go to slide number
  nextSlide,       // Next slide (skip animations)
  prevSlide,       // Previous slide (skip animations)
} = useNav()
</script>

ナビゲーション関数

<template>
  
  <button @click="nav.prev()">Previous</button>
  <button @click="nav.next()">Next</button>
  <button @click="nav.go(1)">Go to Start</button>
  <button @click="nav.go(total.value)">Go to End</button>
</template>

<script setup>
import { useNav } from '@slidev/client'
const nav = useNav()
</script>

カスタムナビゲーションコンポーネント

スライド進捗バー

<script setup>
import { computed } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo, total } = useNav()
const progress = computed(() =>
  (currentSlideNo.value / total.value) * 100
)
</script>

<template>
  <div class="fixed top-0 left-0 right-0 h-1 bg-gray-200">
    <div
      class="h-full bg-blue-500 transition-all"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

カスタムページ番号

<script setup>
import { useNav } from '@slidev/client'
const { currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 right-4 text-sm">
    {{ currentSlideNo }} / {{ total }}
  </div>
</template>

ナビゲーションボタン

<script setup>
import { useNav } from '@slidev/client'
const { prev, next, currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 flex gap-2">
    <button
      @click="prev()"
      :disabled="currentSlideNo === 1"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      Previous
    </button>
    <button
      @click="next()"
      :disabled="currentSlideNo === total"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      Next
    </button>
  </div>
</template>

タッチナビゲーション

デフォルトの動作

• 左にスワイプ：次のスライド
• 右にスワイプ：前のスライド

タッチ領域

画面は次のように分割されます。

• 左 3 分の 1：前へ
• 右 3 分の 2：次へ

マウスナビゲーション

クリック領域

• スライドの左側：前へ
• スライドの右側：次へ

クリックによるナビゲーションを無効にする

---
# In frontmatter
---

無効にするカスタム CSS：

.slidev-page {
  pointer-events: none;
}

URL ナビゲーション

スライドへ直接アクセス

http://localhost:3030/5      # Slide 5
http://localhost:3030/10     # Slide 10

プレゼンターモード

http://localhost:3030/presenter
http://localhost:3030/presenter/5  # Presenter at slide 5

概要モード

http://localhost:3030/overview

スライド番号

デフォルトの番号付け

スライドには、並び順に基づいて 1 から N まで番号が付けられます。

カスタムスライド ID

---
routeAlias: introduction
---

次のようにしてアクセスします。

http://localhost:3030/introduction

ID を指定してスライドにリンクする

[Go to Introduction](/introduction)

ナビゲーションイベント

ナビゲーションの監視

<script setup>
import { watch } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo } = useNav()

watch(currentSlideNo, (newSlide, oldSlide) => {
  console.log(`Navigated from ${oldSlide} to ${newSlide}`)
})
</script>

ベストプラクティス

1. 基本的なショートカットを覚える

スムーズなプレゼンテーションに不可欠です。

• Space / → - 進む
• ← - 戻る
• o - 概要
• g - 移動

2. 自分のスタイルに合わせてショートカットをカスタマイズする

// If you prefer Enter/Backspace
{
  key: 'enter',
  fn: () => nav.next(),
}

3. すっきりしたプレゼンテーションにするためにナビゲーションを非表示にする

ナビゲーションバーを非表示にする CSS：

.slidev-nav {
  display: none;
}

4. 進捗インジケーターを追加する

進捗を表示する全体共通の下部コンポーネントです。

5. ナビゲーションの練習

プレゼンテーションを行う前に：

• すべてのスライドを通して操作します
• 概要からのジャンプを練習します
• カスタムショートカットがあればテストします

出力形式

ナビゲーションを設定する場合：

// setup/shortcuts.ts
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // Keep defaults

    // Custom shortcuts
    { key: '[key]', fn: () => nav.[action]() },
  ]
})

ナビゲーション計画：

• 前へ：[キー]
• 次へ：[キー]
• 概要：[キー]
• ジャンプ：[方法]

カスタムコンポーネント：

• 進捗バー：[はい／いいえ]
• ページ番号：[はい／いいえ]
• カスタムボタン：[はい／いいえ]