RooCodeを活用したReveal.jsスライド作成

スライド作成ガイド

Ryo Nakagami

2025年05月20日

環境セットアップ

環境セットアップ
Reveal.jsスライドの作成

動作環境セットアップ

必要ツール

Quarto

ドキュメントやスライド作成のためのオープンソースツール
Reveal.jsスライドの生成が可能

VSCode

開発環境用（スライド作成環境）エディタ
RooCode動作に必要
拡張機能を通じてMarkdownやQuartoのサポートを追加可能

インストール手順

下記の方法はUbuntu 22.04LTSでのインストールを想定
macOSやWindowsの場合は公式ドキュメントを参照してください

# VSCodeのインストール
sudo apt update
sudo apt install code

# Quartoのインストール
export QUARTO_VERSION="1.5.54"
sudo mkdir -p /opt/quarto/${QUARTO_VERSION}
sudo curl -o quarto.tar.gz -L \
    "https://github.com/quarto-dev/quarto-cli/releases/download/v${QUARTO_VERSION}/quarto-${QUARTO_VERSION}-linux-amd64.tar.gz"
sudo tar -zxvf quarto.tar.gz \
    -C "/opt/quarto/${QUARTO_VERSION}" \
    --strip-components=1
sudo rm quarto.tar.gz

# Quartoの動作確認
/opt/quarto/"${QUARTO_VERSION}"/bin/quarto check

# Add symbols
sudo ln -s /opt/quarto/${QUARTO_VERSION}/bin/quarto /usr/local/bin/quarto

Quartoスライド作成に必要なツール: RooCodeとReveal.js

RooCode

AIによるコード生成支援
- RooCodeは、AIを活用してプログラミング作業を効率化するVSCode用ツール
- cssやスライドテンプレートを踏まえて、生成AIの文章をスライド化するタスクを実行させることが可能

VSCode拡張機能経由インストール
- ext install RooVeterinaryInc.roo-cline

Reveal.js

ウェブベースのスライドフレームワーク
- Reveal.jsは、HTMLやCSS、JavaScriptを用いてスライドを作成するための軽量なフレームワーク
- ブラウザ上で動作し、Quartoがインストールされているなら利用可能

カスタマイズ性
- css、プラグインを活用して、スライドのデザインや機能を自由にカスタマイズ可能

多言語対応
- 複数のプログラミング言語に対応
- jsを用いた可視化など、スライドごとの細かなニーズに対応可能

Reveal.jsスライドの作成

環境セットアップ
Reveal.jsスライドの作成

Roo Code用Slide generator modeの作成

要約やテンプレートフォーマットを効率的に行うためのスライド生成に特化したモードを定義

Roo Code custom mode setting

{
  "slug": "slide-generator",
  "name": "📝 Slide Generator",
  "roleDefinition": "You are Roo, a slide generation assistant specializing in summarizing content and formatting it into predefined templates. Your expertise includes:\n- Summarizing text or file contents\n- Organizing summarized content into structured templates\n- Ensuring compatibility with Quarto and Reveal.js formats\n- Ensuring the output is concise, structured into sections (e.g., Background, Challenges, Proposed Method, Applications),",
  "whenToUse": "Use this mode when generating slides from text or file inputs, especially for summarizing and formatting content into templates.",
  "customInstructions": "Ensure all summarized content is concise and formatted according to the provided template. Validate compatibility with Quarto and Reveal.js.",
  "groups": [
    "read",
    [
      "edit",
      {
        "fileRegex": "\\.qmd$",
        "description": "Quarto Markdown files only"
      }
    ],
    "mcp"
  ],
  "source": "global"
}

Configの説明

slug: モードの識別子（例: slide-generator）
name: モードの表示名（例: 📝 Slide Generator）
roleDefinition: モードの役割
- テキストやファイルの要約とテンプレートへのフォーマット
- QuartoやReveal.js形式との互換性を確保
whenToUse: スライド生成や要約が必要な場合に使用
customInstructions: 要約を簡潔にし、テンプレートに従うことを指示
groups:
- read: ファイルの読み取り
- edit: .qmdファイルの編集
- mcp: 高度な操作を許可
source: グローバル設定からのモード

Azure summaryスライドの作成

Roo Code自動生成結果

背景

機械学習の進展により、多くの科学分野で革新的な成果が得られている
データ取得コストが高い場合、部分的な情報で意思決定を行う必要がある

課題

少量データでは従来の機械学習手法が収束性やロバスト性に欠ける
非線形問題において、既存のガウス過程回帰法には限界がある

提案手法

物理法則を組み込んだニューラルネットワークを活用
自動微分技術を用いて、入力座標やモデルパラメータに基づく微分を実現

応用

データ駆動型の偏微分方程式の解法と発見
新しい数値解法やモデル反転手法の開発

Roo Code Prompt

Prompt

1. Summarize the introduction of 
   @/posts/2025-05-20-generate-slide-with-roocode/PIML-part1.pdf  
   into Japanese. 

2. Format the summary using the @/template/azureblue-summary.qmd file. 

3. Ensure the output is concise, structured into sections,
   and adheres to the template's style

hop-step-jumpスライドの作成

Roo Code自動生成結果

1 Step

分析設計

プロジェクトの目標を明確にし、必要なデータと分析手法を設計します

目的

分析の方向性を定め、必要なリソースを特定する

成果物

分析計画書

2 Step

ベースラインモデル作成

基本的なモデルを構築し、初期のパフォーマンスを評価します

目的

モデルの基準となるパフォーマンスを確立する

成果物

ベースラインモデルとその評価結果

3 Step

モデル精緻化

モデルを改良し、最適化してパフォーマンスを向上させます

目的

モデルの精度と信頼性を向上させる

成果物

最適化されたモデルとその評価結果

Roo Code Prompt

Prompt

1. summarize 3 steps for datascience 
   project into japanese

2. Format the summary using the 
   @/template/hop-step-jump.qmd  file. 

3. insert contensts at <!-- insert contents --> 
   in @/posts/2025-05-20-generate-slide-with-roocode/index.qmd

/template/hop-step-jump.qmd

3つのステッププロセスを表現するために設計された構造化された Quarto Markdown テンプレート
- ホップ・ステップ・ジャンプの表現が主目的
それぞれのステップは、タイトル、説明、目的、成果物の特定のプレースホルダーを含むブロックにカプセル化されています