Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (slidev-theme-ptna) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PTNA Theme for Slidev

全日本ピアノ指導者協会（PTNA）公式Slidevテーマです。

特徴

PTNAブランドカラー: メインカラー #770000（深紅）を基調としたエレガントなデザイン
音楽的な要素: 音符や五線譜などの音楽モチーフを随所に配置
日本語フォント対応: ヒラギノ角ゴシック等の日本語フォントに最適化
多様なレイアウト: プレゼンテーション用途に応じたレイアウトを多数用意（cover/default/section/intro/fact/quote/statement/two-cols/center/table-of-contents）
レスポンシブデザイン: デスクトップ・モバイル両対応

レイアウト一覧

`cover`

カバーページ用レイアウト。背景画像やグラデーションに対応し、音楽的な装飾要素を含みます。

`default`

標準的なコンテンツページ用レイアウト。ページ番号表示機能付き。

`section`

セクション区切り用レイアウト。大きなタイトルと装飾的な音楽要素でインパクトを演出。

`intro`

導入ページ用レイアウト。下部にピアノ鍵盤パターンの装飾。

`fact`

重要な数値や事実を強調表示するレイアウト。アニメーション付き音符装飾。

`quote`

引用文表示用レイアウト。五線譜と引用符を組み合わせた装飾。

`statement`

重要な宣言や声明用レイアウト。エレガントな枠線と角の音符装飾。

`two-cols`

2カラムレイアウト。中央の縦線に音符装飾付き。

`center`

中央配置レイアウト。背景に控えめな音符パターン。

`table-of-contents`

目次レイアウト。各項目の左に黒丸白字の連番バッジを自動表示し、マルチカラムにも対応します。

使用方法

インストール

npm install @slidev/theme-ptna

対応バージョン: Slidev v0.47 以上

基本設定

スライドファイル（slides.md）の冒頭に以下を追加：

---
theme: ptna # or '@slidev/theme-ptna'
highlighter: shiki
lineNumbers: false
info: |
  ## PTNAプレゼンテーション
  全日本ピアノ指導者協会のスライドテーマ
drawings:
  persist: false
transition: slide-left
---

レイアウトの使用例

---
layout: cover
background: https://example.com/image.jpg
---

# タイトル

## サブタイトル

---

## layout: section

# セクションタイトル

---

## layout: default

# 通常のコンテンツ

内容をここに記載...

カスタマイズ

CSS変数

以下のCSS変数を使用してカスタマイズできます：

:root {
  --ptna-primary: #770000; /* メインカラー */
  --ptna-primary-light: #aa0000; /* ライトカラー */
  --ptna-primary-dark: #550000; /* ダークカラー */
  --ptna-secondary: #ffffff; /* セカンダリカラー */
  --ptna-accent: #000000; /* アクセントカラー */
  --ptna-gray: #666666; /* グレー */
}

フォント設定

デフォルトで日本語フォントが設定されていますが、slidev設定でカスタマイズ可能：

---
theme: ptna
fonts:
  sans: "Hiragino Kaku Gothic ProN, Yu Gothic UI, sans-serif"
  serif: "Hiragino Mincho ProN, Yu Mincho, serif"
  mono: "Fira Code, monospace"
---

目次レイアウト（table-of-contents）

各スライドに応じて柔軟に目次を生成します。連番バッジは自動付与（1始まり）され、列をまたぐ箇所でも見切れにくいよう最適化しています。

最小構成

---
layout: table-of-contents
---

主なプロパティ（frontmatter）

columns: 列数（デフォルト: 1）。例: columns: 2
maxDepth: 取得する見出しの最大レベル。例: maxDepth: 2
minDepth: 取得する見出しの最小レベル。例: minDepth: 1
mode: 取得対象。all | onlyCurrentTree | onlySiblings（デフォルト: all）
listClass: 追加のクラスをリストへ付与（スタイルを局所的に上書きしたい場合に使用）

カラム間隔をさらに広げたい場合（例）

<style>
  .slidev-layout.table-of-contents :deep(.ptna-toc-list[style*="column"]) {
    column-gap: 6rem; /* Safari 対応なら -webkit-column-gap も */
  }
</style>

番号バッジを隠したい場合（例）

<style>
  .slidev-layout.table-of-contents :deep(.ptna-toc-list > li::before) {
    display: none;
  }
</style>

ヘッダーの差し替え

---
layout: table-of-contents
---

::title::

# この発表の流れ

::

任意の説明文をここに入れられます。

備考

カラム切り替わり時の見切れを抑制するため、リスト項目は分割されにくいスタイルになっています。
ネストされた見出しは左ラインのみのシンプル表示（トップレベルに連番）。

ECharts チャートコンポーネント

本テーマには、データ可視化のための ECharts 統合機能が含まれています。8種類の主要なチャートコンポーネントを利用できます。

利用可能なチャート

BarChart: 棒グラフ（縦棒・横棒）
LineChart: 折れ線グラフ（エリアチャート対応）
PieChart: 円グラフ（ドーナツチャート、ローズチャート対応）
ScatterChart: 散布図
RadarChart: レーダーチャート
FunnelChart: ファネルチャート（コンバージョン分析）
WaterfallChart: ウォーターフォールチャート（累積変化分析）
RaceChart: レースチャート（動的ランキング）

基本的な使い方

<script setup>
import { BarChart, LineChart, PieChart, ScatterChart, RadarChart, FunnelChart, WaterfallChart, RaceChart } from 'slidev-theme-ptna/components/charts';
</script>

<div class="h-80">
  <BarChart
    :key="$slidev.nav.currentPage"
    title="年間売上"
    :labels="['2022年', '2023年', '2024年']"
    :series="[
      { name: '製品A', data: [120, 200, 150] },
      { name: '製品B', data: [80, 90, 110] }
    ]"
    x-axis-name="年度"
    y-axis-name="売上（百万円）"
  />
</div>

重要: スライド切り替え時にアニメーションを再生するには、:key="$slidev.nav.currentPage"を追加してください。

各チャートの詳細な使い方

BarChart（棒グラフ）

<BarChart
  :key="$slidev.nav.currentPage"
  title="タイトル"
  :labels="['ラベル1', 'ラベル2', 'ラベル3']"
  :series="[
    { name: 'シリーズ1', data: [100, 120, 90] },
    { name: 'シリーズ2', data: [80, 100, 110], stack: 'グループ1' }, // stack で積み上げ
  ]"
  x-axis-name="X軸ラベル"
  y-axis-name="Y軸ラベル"
  :horizontal="false"  // true で横棒グラフ
/>

LineChart（折れ線グラフ）

<LineChart
  :key="$slidev.nav.currentPage"
  title="月次推移"
  :labels="['1月', '2月', '3月', '4月', '5月', '6月']"
  :series="[
    { 
      name: 'データ1', 
      data: [120, 132, 101, 134, 90, 230],
      smooth: true,  // 曲線にする
      areaStyle: {}  // エリアチャートにする
    },
    { 
      name: 'データ2', 
      data: [220, 182, 191, 234, 290, 330],
      smooth: false
    }
  ]"
/>

PieChart（円グラフ）

<PieChart
  :key="$slidev.nav.currentPage"
  title="割合表示"
  :data="[
    { value: 335, name: 'カテゴリA' },
    { value: 310, name: 'カテゴリB' },
    { value: 234, name: 'カテゴリC' },
    { value: 135, name: 'カテゴリD' }
  ]"
  :show-legend="true"  // 凡例の表示/非表示
  :radius="'60%'"      // 半径（文字列または配列）
  :rose-type="false"   // 'radius' | 'area' | false でローズチャート
/>

ScatterChart（散布図）

<ScatterChart
  :key="$slidev.nav.currentPage"
  title="相関分析"
  :series="[
    {
      name: 'グループA',
      data: [[10, 8.04], [8, 6.95], [13, 7.58], [9, 8.81]], // [x, y]の配列
      symbolSize: 20  // 点のサイズ
    },
    {
      name: 'グループB',
      data: [[10, 9.14], [8, 8.14], [13, 8.74], [9, 8.77]],
      symbolSize: 15
    }
  ]"
  x-axis-name="X軸（独立変数）"
  y-axis-name="Y軸（従属変数）"
/>

RadarChart（レーダーチャート）

<RadarChart
  :key="$slidev.nav.currentPage"
  title="総合評価"
  :indicators="[
    { name: '指標1', max: 100 },
    { name: '指標2', max: 100 },
    { name: '指標3', max: 100 },
    { name: '指標4', max: 100 },
    { name: '指標5', max: 100 }
  ]"
  :data="[
    { 
      name: '現在', 
      value: [80, 90, 70, 85, 75],
      areaStyle: { opacity: 0.5 }  // 塗りつぶし
    },
    { 
      name: '目標', 
      value: [90, 95, 85, 90, 85],
      areaStyle: { opacity: 0.3 }
    }
  ]"
  :shape="'polygon'"  // 'polygon' | 'circle'
/>

FunnelChart（ファネルチャート）

<FunnelChart
  :key="$slidev.nav.currentPage"
  title="コンバージョンファネル"
  :data="[
    { value: 100, name: '訪問' },
    { value: 80, name: 'クリック' },
    { value: 60, name: '閲覧' },
    { value: 40, name: '問い合わせ' },
    { value: 20, name: '購入' }
  ]"
  :sort="'descending'"     // 'ascending' | 'descending' | 'none'
  :align="'center'"        // 'left' | 'center' | 'right'
  :gap="2"                 // 各段の間隔
  :min-size="'0%'"         // 最小サイズ
  :max-size="'100%'"       // 最大サイズ
  :show-legend="true"      // 凡例の表示/非表示
/>

WaterfallChart（ウォーターフォールチャート）

<WaterfallChart
  :key="$slidev.nav.currentPage"
  title="月次収支の推移"
  :data="[
    { name: '期初残高', value: 1000, type: 'total' },
    { name: '売上1', value: 450 },
    { name: '売上2', value: 380 },
    { name: '経費1', value: -220, type: 'expense' },  // 負の値またはtype: 'expense'
    { name: '売上3', value: 300 },
    { name: '経費2', value: -180, type: 'expense' },
    { name: '売上4', value: 250 },
  ]"
  :show-total="true"        // 最終合計の表示/非表示
  :positive-color="'#5cb85c'"  // プラス値の色
  :negative-color="'#d9534f'"  // マイナス値の色
/>

RaceChart（レースチャート）

<RaceChart
  :key="$slidev.nav.currentPage"
  title="売上ランキングの推移"
  :data="[
    { 
      name: '製品A', 
      values: [
        { period: '2021年', value: 120 },
        { period: '2022年', value: 200 },
        { period: '2023年', value: 150 },
        { period: '2024年', value: 180 }
      ],
      color: '#5470c6'  // オプション：バーの色
    },
    // ... 他の製品データ
  ]"
  unit="百万円"           // 単位表示
  :max-bars="10"         // 最大表示バー数
  :update-frequency="1500"  // アニメーション速度（ミリ秒）
  :auto-play="true"      // 自動再生
/>

チャートの高さ設定

チャートはコンテナの高さに自動的に適応します。Tailwind CSS のクラスを使用して高さを設定してください：

h-64: 256px
h-80: 320px
h-96: 384px
h-full: 親要素の100%

アニメーション効果

各チャートには異なるアニメーション効果が設定されています：

BarChart: elasticOut - 弾むような効果
LineChart: linear - 滑らかな描画
PieChart: scale - 拡大アニメーション
ScatterChart: backOut - 跳ねるような効果
RadarChart: sinusoidalInOut - 波のような動き
FunnelChart: expansion - 拡張アニメーション
WaterfallChart: cubicOut - キュービックアウト効果
RaceChart: linear - スムーズな動的ランキングアニメーション

動的データ更新

Slidev の機能と組み合わせて、インタラクティブなチャートを作成できます：

<div class="h-80" v-click>
  <LineChart
    :key="$slidev.nav.currentPage"
    title="クリックで更新"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May']"
    :series="[{ 
      name: 'データ', 
      data: $slidev.nav.clicks > 0 ? [100, 180, 140, 200, 160] : [50, 60, 55, 70, 65],
      smooth: true,
      areaStyle: { opacity: 0.3 }
    }]"
  />
</div>

複数チャートの配置

グリッドレイアウトを使用して複数のチャートを配置できます：

<div class="grid grid-cols-2 gap-4">
  <div class="h-64">
    <BarChart 
      :key="$slidev.nav.currentPage + '_bar'"
      ... 
    />
  </div>
  <div class="h-64">
    <PieChart 
      :key="$slidev.nav.currentPage + '_pie'"
      ... 
    />
  </div>
</div>

BaseChartで任意のEChartsオプションを使用

提供されているチャートコンポーネント以外の複雑なチャートが必要な場合、BaseChartを直接使用して、任意のEChartsオプションを渡すことができます：

<script setup>
import { BaseChart } from 'slidev-theme-ptna/components/charts';
</script>

<div class="h-80">
  <BaseChart
    :key="$slidev.nav.currentPage"
    :option="{
      // 任意のEChartsオプション
      title: { text: 'カスタムチャート' },
      series: [{
        type: 'gauge',  // ゲージチャートなど
        data: [{ value: 50, name: 'Progress' }]
      }]
    }"
  />
</div>

これにより、EChartsがサポートするすべてのチャートタイプ（ゲージ、ツリーマップ、サンキー図、グラフなど）を使用できます。

トラブルシューティング

チャートが表示されない: コンテナに高さを設定してください（例: class="h-80"）
アニメーションが再生されない: :key="$slidev.nav.currentPage"を追加してください
複数チャートで同じアニメーション: keyに識別子を追加（例: :key="$slidev.nav.currentPage + '_chart1'"）

Mermaid 図表の利用

本テーマは Slidev の Mermaid 対応を前提にそのまま利用できます。コードブロックに mermaid を指定してください。

フローチャート例

flowchart LR
  A[入会申込] --> B{資格確認}
  B -->|有資格| C[基礎研修]
  B -->|無資格| D[基礎講習]

ガントチャート例

gantt
  title 年間スケジュール
  dateFormat  YYYY-MM-DD
  企画 :a1, 2024-01-01, 2024-02-15
  実施 :a2, 2024-02-16, 2024-03-31

シーケンス図例

sequenceDiagram
  participant S as 生徒
  participant T as 講師
  S->>T: 予約の確認

円グラフ（pieChart）例

pie showData
  title 参加者構成
  "幼児・小学生" : 35
  "中学生" : 25
  "高校生" : 20
  "大学生" : 10
  "一般" : 10

開発

ローカル開発

git clone <repository-url>
cd slidev-theme-ptna
npm install
npm run dev

ローカルテーマとして試す（このリポジトリ直下の theme-ptna/example.md を開くか、別の Slidev プロジェクトで theme: ./ を指定）

ビルド

npm run build

プレビュー

npm run preview