slidev-addon-google-charts

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

https://github.com/ktkr3d/slidev-addon-google-charts

環境

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

利用

共通作業

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

スライド単位作業

3. スライド作成

   slides.md

   ---
   theme: default
   addons:
   - slidev-addon-google-charts
   ---
   
   # User Test Slide
   
   <GoogleCharts 
   type="Gauge"
   height="200px"
   :data="[
       ['Label', 'Value'],
       ['CPU', 85]
   ]"
   />

4. スライドを表示

   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

アドオン開発

コード更新

• クローン

  git clone https://github.com/ktkr3d/slidev-addon-google-charts.git

• コンポーネントファイル
  ./components/GoogleCharts.vue

テスト

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

  npx slidev --playground

• PDF確認