スライドを軽率に作成しよう

Marp + GitHub Actions + Claude自動化システム

発表者: ムツミックス
日付: 2025-08-21
時間: 5分

コンセプト

• 目標: 布団から出ずにプレゼン準備完了
• 起点: GitHub Issues からスライド作成開始
• 仕組み: Issues → Claude生成 → 自動PDF化
• 哲学: 軽率な使用のための複雑な準備

技術スタック

核となる4つのコンポーネント

• Claude Code GitHub Actions: Issuesで@claudeメンションでAI作業
• Marp: Markdown → スライド変換エンジン
• GitHub Actions: 自動ビルド・デプロイパイプライン
• GitHub Pages: Issue作成後すぐにプレビュー表示

実装手順（優先度順）

1. リポジトリ準備（必須・最優先）

• このリポジトリをForkまたはテンプレート使用
• 新規リポジトリ作成でもOK

2. Claude Code GitHub Actionsインストール

1. Claude Code GitHub Actions にアクセス
2. Install をクリック
3. 先ほど作成したリポジトリを選択

3. 基本設定

• GitHub Pagesを有効化（Settings → Pages → Source: GitHub Actions）
• CLAUDE.md作成（リポジトリルールの定義）

Issue Template設計

Issue Templates が起点の核心

---
name:  新規スライド作成
about: GitHub Issueからスライドを自動生成
title: "[SLIDE] "
---

**プレゼンタイトル:** 
**発表時間:** [ ] 5分 [ ] 10分 [ ] 30分
**テーマ:** [ ] standard [ ] business [ ] casual
**対象者:** 

**コンテンツ:**
（AI生成したMarkdownコンテンツをここに貼り付け）

@claude 上記の設定でスライドを作成してください

ディレクトリ構造

日付ベースの自動管理

slides/
├── themes/              # CSSテーマ
├── templates/           # ベーステンプレート  
└── 2025-08-21_軽率にスライドを作成しよう/
    ├── slide.md        # Marpソース
    ├── slides.html     # Web表示用
    └── slides.pdf      # 配布用

日付取得: TZ='Asia/Tokyo' date +"%Y-%m-%d"で日本時間

プレビュー解決策

3つのアプローチ

1. GitHub Pages（推奨）

   • 自動デプロイでスマホから即座に確認
   • https://user.github.io/repo/2025-08-21_title/

2. artifact.ci

   • GitHub App1回インストール
   • HTML/PDF直接ブラウザ表示

3. HTML Preview Action

   • PRコメントに直接リンク生成

実際の使用フロー

起点はIssue作成から！

1. **Issues タブ**で新しいスライド作成
2. 「新規スライド作成」テンプレート選択
3. フォーム入力：タイトル・テーマ・時間・内容
4. @claudeメンションでAI作業開始
5. 1-3分待機（コーヒータイム）
6. プレビューURLで確認・修正

修正が必要な場合

• Issueにコメントで修正指示 → @claudeで再生成

期待される効果

生産性向上の実現

• テンプレート化で一貫性確保
• バージョン管理で履歴追跡
• 軽率さの実現: 布団から出ずにプレゼン準備
• 複雑な作業はすべて自動化

軽率にスライドを作成する準備完了！