html-to-ppt

HTML/Markdown から PowerPoint への変換スキル

概要

このスキルを使うと、Marp（Markdown Presentation Ecosystem）を利用して、Markdown または HTML からプロフェッショナルな PowerPoint プレゼンテーションを作成できます。シンプルな Markdown 構文と CSS ベースのテーマで、美しく一貫性のあるスライドを作成できます。

使い方

1. スライド用に構成された Markdown コンテンツを用意します
2. 必要に応じてテーマやカスタムスタイルを指定します
3. PowerPoint、PDF、または HTML のスライドに変換します

プロンプトの例：

• 「この Markdown を PowerPoint プレゼンテーションに変換してください」
• 「このアウトラインから Marp を使ってスライドを作成してください」
• 「メモを gaia テーマのプレゼンテーションにしてください」
• 「この Markdown から PDF のスライド資料を生成してください」

ドメイン知識

Marp の基本

Marp では、シンプルな構文で --- をスライドの区切りとして使います。

---
marp: true
theme: default
---

# Slide 1 Title

Content for first slide

---

# Slide 2 Title

Content for second slide

コマンドラインの使い方

# Convert to PowerPoint
marp slides.md -o presentation.pptx

# Convert to PDF
marp slides.md -o presentation.pdf

# Convert to HTML
marp slides.md -o presentation.html

# With specific theme
marp slides.md --theme gaia -o presentation.pptx

スライドの構成

基本スライド

---
marp: true
---

# Title

- Bullet point 1
- Bullet point 2
- Bullet point 3

タイトルスライド

---
marp: true
theme: gaia
class: lead
---

# Presentation Title

## Subtitle

Author Name
Date

フロントマターのオプション

---
marp: true
theme: default          # default, gaia, uncover
size: 16:9              # 4:3, 16:9, or custom
paginate: true          # Show page numbers
header: 'Company Name'  # Header text
footer: 'Confidential'  # Footer text
backgroundColor: #fff
backgroundImage: url('bg.png')
---

テーマ

組み込みテーマ

---
marp: true
theme: default   # Clean, minimal
---

---
marp: true
theme: gaia      # Colorful, modern
---

---
marp: true
theme: uncover   # Bold, presentation-focused
---

テーマクラス

---
marp: true
theme: gaia
class: lead     # Centered title slide
---

---
marp: true
theme: gaia
class: invert   # Inverted colors
---

書式設定

テキストのスタイル設定

# Heading 1
## Heading 2

**Bold text** and *italic text*

`inline code`

> Blockquote for emphasis

リスト

- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Second item
   1. Nested numbered

コードブロック

# Code Example

\`\`\`python
def hello():
    print("Hello, World!")
\`\`\`

表

| Feature | Status |
|---------|--------|
| Tables  | ✅     |
| Charts  | ✅     |
| Images  | ✅     |

画像

基本的な画像

![](image.png)

サイズ指定した画像

![width:500px](image.png)
![height:300px](image.png)
![width:80%](image.png)

背景画像

---
marp: true
backgroundImage: url('background.jpg')
---

# Slide with Background

高度なレイアウト

2 列レイアウト

---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
---

# Two Column Layout

<div class="columns">
<div>

## Left Column
- Point 1
- Point 2

</div>
<div>

## Right Column
- Point A
- Point B

</div>
</div>

背景の分割

---
marp: true
theme: gaia
class: gaia
---



<div class="columns">
<div style="color: white;">

# Dark Side

</div>
<div>

# Light Side

</div>
</div>

ディレクティブ

ローカルディレクティブ（スライドごと）

---
marp: true
---



# Special Slide

スコープ付きスタイル

---
marp: true
---

<style scoped>
h1 {
  color: red;
}
</style>

# This Title is Red

Python との連携

import subprocess
import tempfile
import os

def markdown_to_pptx(md_content, output_path, theme='default'):
    """Convert Markdown to PowerPoint using Marp."""
    
    # Add marp directive if not present
    if '---\nmarp: true' not in md_content:
        md_content = f"---\nmarp: true\ntheme: {theme}\n---\n\n" + md_content
    
    # Write to temp file
    with tempfile.NamedTemporaryFile(mode='w', suffix='.md', delete=False) as f:
        f.write(md_content)
        temp_path = f.name
    
    try:
        # Convert using marp
        subprocess.run([
            'marp', temp_path, '-o', output_path
        ], check=True)
        
        return output_path
    finally:
        os.unlink(temp_path)

# Usage
md = """
# Welcome

Introduction slide

---

# Agenda

- Topic 1
- Topic 2
- Topic 3
"""

markdown_to_pptx(md, 'presentation.pptx')

Node.js/marp-cli API

const { marpCli } = require('@marp-team/marp-cli');

// Convert file
marpCli(['slides.md', '-o', 'output.pptx']).then(exitCode => {
    console.log('Done:', exitCode);
});

ベストプラクティス

1. スライドごとに 1 つのアイデア：スライドの焦点を絞ります
2. 視覚的な階層を活用する：見出しのレベルを一貫させます
3. テキストを絞る：1 枚のスライドにつき箇条書きは最大 6 項目にします
4. 画像を含める：視覚的なコンテンツは記憶の定着を高めます
5. 出力をテストする：最終エクスポートの前にプレビューします

よく使われるパターン

プレゼンテーションの生成

def create_presentation(title, sections, output_path, theme='gaia'):
    """Generate presentation from structured data."""
    
    md_content = f"""---
marp: true
theme: {theme}
paginate: true
---



# {title}

{sections.get('subtitle', '')}

{sections.get('author', '')}

"""
    
    for section in sections.get('slides', []):
        md_content += f"""---

# {section['title']}

"""
        for point in section.get('points', []):
            md_content += f"- {point}\n"
        
        if section.get('notes'):
            md_content += f"\n\n"
    
    md_content += """---



# Thank You!

Questions?
"""
    
    return markdown_to_pptx(md_content, output_path, theme)

スライドの一括生成

def generate_report_slides(data_list, template, output_dir):
    """Generate multiple presentations from data."""
    import os
    
    for data in data_list:
        content = template.format(**data)
        output_path = os.path.join(output_dir, f"{data['name']}_report.pptx")
        markdown_to_pptx(content, output_path)

例

例 1：技術プレゼンテーション

---
marp: true
theme: gaia
class: lead
paginate: true
---

# API Documentation

## REST API Best Practices

Engineering Team
January 2024

---

# Agenda

1. Authentication
2. Endpoints Overview
3. Error Handling
4. Rate Limiting
5. Examples

---

# Authentication

All requests require an API key:

```http
Authorization: Bearer YOUR_API_KEY

• キーの有効期限は 90 日です
• 安全に保管し、git にコミットしないでください
• 定期的にローテーションしてください

---

エンドポイントの概要

メソッド	エンドポイント	説明
GET	/users	すべてのユーザーを一覧表示
POST	/users	ユーザーを作成
GET	/users/:id	ユーザーの詳細を取得
PUT	/users/:id	ユーザーを更新
DELETE	/users/:id	ユーザーを削除

---

エラー処理

{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Invalid email format",
    "details": ["email must be valid"]
  }
}

---

ご質問はありますか？

[email protected]

### Example 2: Business Pitch
```python
def create_pitch_deck(company_data):
    """Generate investor pitch deck."""
    
    md = f"""---
marp: true
theme: uncover
paginate: true
---





# {company_data['name']}

{company_data['tagline']}

---

# The Problem

{company_data['problem_statement']}

**Market Pain Points:**
"""
    
    for pain in company_data['pain_points']:
        md += f"- {pain}\n"
    
    md += f"""
---

# Our Solution

{company_data['solution']}

![width:600px]({company_data.get('product_image', 'product.png')})

---

# Market Opportunity

- **TAM:** {company_data['tam']}
- **SAM:** {company_data['sam']}
- **SOM:** {company_data['som']}

---

# Traction

| Metric | Value |
|--------|-------|
| Monthly Revenue | {company_data['mrr']} |
| Customers | {company_data['customers']} |
| Growth Rate | {company_data['growth']} |

---

# The Ask

**Seeking:** {company_data['funding_ask']}

**Use of Funds:**
- Product Development: 40%
- Sales & Marketing: 35%
- Operations: 25%

---



# Let's Build the Future Together

{company_data['contact']}
"""
    
    return md

# Generate deck
pitch_data = {
    'name': 'TechStartup Inc',
    'tagline': 'AI-Powered Document Processing',
    'problem_statement': 'Businesses waste 20% of time on manual document work',
    'pain_points': ['Manual data entry', 'Error-prone processes', 'Slow turnaround'],
    'solution': 'Automated document processing with 99.5% accuracy',
    'tam': '$50B',
    'sam': '$10B',
    'som': '$500M',
    'mrr': '$100K',
    'customers': '50',
    'growth': '20% MoM',
    'funding_ask': '$5M Series A',
    'contact': '[email protected]'
}

md_content = create_pitch_deck(pitch_data)
markdown_to_pptx(md_content, 'pitch_deck.pptx', theme='uncover')

制限事項

• 複雑なアニメーションには対応していません
• PowerPoint 固有の一部の機能は利用できません
• カスタムフォントには CSS の設定が必要です
• 動画の埋め込みには制限があります
• 発表者ノートのサポートは基本的なものです

インストール

# Using npm
npm install -g @marp-team/marp-cli

# Using Homebrew
brew install marp-cli

# Verify installation
marp --version

リソース

• Marp ドキュメント
• Marp CLI GitHub
• Marpit フレームワーク
• テーマ CSS ガイド