Slidev用のGoogle Charts用アドオンを作成してみました。

アドオンのテストをしながら、オリジナルのスライドテーマを作るのが楽しい。

環境

  • Windows
    • npm 12.0.2
      • @slidev/cli 52.19.1
  • Arch Linux
    • npm 12.0.2
      • @slidev/cli 52.19.1

利用

共通作業

  1. プロジェクトフォルダを作成 
    mkdir slidev-workspace
    cd slidev-workspace
  2. Slidevを初期化 
    npm init -y && npm install @slidev/cli
  3. Google Chartsアドオンをインストール 
    npm install -allow-git=root ktkr3d/slidev-addon-google-charts

スライド単位作業

  1. スライド作成
    slides.md
    ---
    theme: default
    addons:
    - slidev-addon-google-charts
    ---

    # User Test Slide

    <GoogleCharts 
    type="Gauge"
    height="200px"
    :data="[
        ['Label', 'Value'],
        ['CPU', 85]
    ]"
    />
  2. スライドを表示 
    npx slidev slides.md
    http://localhost:3030で待ち受けます。
    vscodeであればリンクをCtrl+左クリックで表示されます。

PDF エクスポート方法

  1. Chromeで開く
    http://localhost:3030/export/
  2. PDFボタン
  3. Startボタン
  4. チェック
    • Choose “Save as PDF” as the Destination. (Not “Microsoft Print to PDF”)
    • Choose “Default” as the Margin.
    • Toggle on “Print backgrounds”.
  5. 保存ボタン

トラブルシュート

  • Windows環境でnpx slidev slides.mdがエラー 
    16:27:31 [vite] (client) error while updating dependencies:
    Error: EBUSY: resource busy or locked, rename 'C:\repos\slidev-workspace\node_modules\.vite\deps_temp_48c83c54' -> 'C:\repos\slidev-workspace\node_modules\.vite\deps'
    サーバーを停止した状態で実行 
    rm -rf node_modules
    npm cache clean --force
    npm install

アドオン開発

アドオンの作成ガイド

https://ja.sli.dev/guide/write-addon

コード更新

  • クローン 
    git clone https://github.com/ktkr3d/slidev-addon-google-charts.git
  • コンポーネントファイル
    ./components/GoogleCharts.vue

テスト

  • テスト用スライドファイル
    ./playground/slides.md
  • 表示確認 
    npx slidev -f ./playground/slides.md

その他

  • スタイルを指定するには
    ラッパークラスと:deep()で指定
    GoogleCharts.vue
    <style scoped>
    .slidev-google-chart-wrapper :deep(.google-visualization-table-table) {
        color: #333333 !important;
        background-color: #ffffff !important;
    }
    </style>
  • リモートから接続する場合の起動方法 
    npx slidev slides.md --remote
    3031ポートで待ち受けます。スライドの更新も可能です。