API Platform
1# 1. MCP サーバーを登録 2# Claude Code / Codex / Grok Build ユーザーは該当する1行でOK 3npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude 4npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codex 5# Grok Build 6npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok 7 8# 2. Skills をインストール(使うツールの行だけ実行) 9npx skills add https://html2pptx.app -a claude-code # Claude Code 10npx skills add https://html2pptx.app -a codex # Codex 11npx skills add https://html2pptx.app -a cursor # Cursor 12npx skills add https://html2pptx.app -a windsurf # Windsurf 13# Grok Build 14npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok 15 16# 3. あとは自然言語で指示するだけ 17# 「この会議メモからプレゼンを作って」 18# → エージェントが自動で HTML 生成 → PPTX 変換
サービス概要
html2pptx.app とは
html2pptx.app はスライド向けHTML/CSSをPowerPointへ変換します。対応するテキストやシンプルな図形は編集可能ですが、SVG、アイコン、一部の複雑な構造は画像化されます。Flexbox、Grid、グラデーション、シャドウは公開HTML契約の範囲で利用できます。ブラウザとPowerPointでは描画が異なる場合があるため、各出力を確認してください。
アーキテクチャ
html2pptx.app は、リクエスト処理、ジョブ状態、レンダリング、配信を分離した段階的なパイプラインを採用しています:
3つの統合チャネル
REST API
HTML-to-PPTX エクスポートジョブの作成とステータスポーリングのための標準HTTPエンドポイント。バックエンド統合、社内ツール、SaaS組み込みに最適。curl、JavaScript、Python、Go、Rubyなど、あらゆる言語で利用可能。creator-owned template draft作成は REST API の役割ではありません。
Skills
Claude Code や Codex などのエージェントツール向けに html2pptx スキルを登録。エージェントがHTMLの診断、書き換え、エクスポート、ローカル編集、HTMLテンプレートdraftの作成・保存まで内蔵のremote MCPワークフローで実行。AIワークフローでエージェントがパイプライン全体を管理する場合に最適。
MCP (Model Context Protocol)
MCPプロトコル経由でAIエージェントにバックエンドを公開。remote HTTP MCP (`/mcp`) はエクスポート、docs、catalog、creator-owned template draft作成に使い、local stdio MCP はローカルHTMLを edit-slide で開く場合だけ使います。HTMLテンプレートdraftは、検証後にremote MCP経由で作成します。
html2pptx.app と他社の比較
| 項目 | html2pptx.app | 他の一般的な方法 |
|---|---|---|
| 変換方式 | 対応要素はPPTXオブジェクトへ変換し、一部は画像化 | オブジェクト変換またはスライド画像など実装により異なる |
| テキスト編集 | 対応テキスト要素は編集可能 | 変換方式により異なる |
| CSS対応 | Flexbox、Grid、グラデーション、シャドウ、transformを含む公開サブセット | 提供元により異なる |
| SVG処理 | PNGへ画像化 | 提供元により異なる |
| ファイルサイズ | 埋め込み・画像化された素材量に依存 | 出力方式と画像量に依存 |
| フォント処理 | システムフォントをマッピング。公開RESTは外部Webフォントを取得しない | 提供元により異なる |
対応CSSプロパティ
| カテゴリ | サポート内容 |
|---|---|
| レイアウト | display: flex, display: grid, position: absolute/relative, gap, align-items, justify-content |
| ボックスモデル | padding, margin, width, height, box-sizing, overflow: hidden |
| 背景 | background-color, linear-gradient(), radial-gradient(), background-image (URL/base64) |
| ボーダー | border, border-radius (各角個別指定対応), border-color, border-width |
| シャドウ | box-shadow (単一・複数対応), text-shadow |
| タイポグラフィ | font-family, font-size, font-weight, color, text-align, line-height, letter-spacing |
| トランスフォーム | transform: rotate(), scale(), translate(), skew() |
| ビジュアル | opacity, visibility, z-index, object-fit |
ユースケース
- •ライブデータからの自動レポート生成
- •テキストプロンプトからのエージェント連携プレゼン作成
- •定期スライドデッキの社内ツール統合
- •SaaSダッシュボードからPPTXへのエクスポート機能
- •ブランド準拠テンプレートへの動的コンテンツ投入
- •AIエージェントによる会議メモからプレゼン変換
対応機能
- インラインSVGはPNGへ画像化され、PowerPoint上のベクターとしては編集不可
- システムフォントをマッピングし、代替フォントと改行位置は出力後に確認
- 公開サブセット内のFlexbox / CSS Gridに対応。変換後のレイアウト確認が必要
- HTML契約の範囲でグラデーション・シャドウ・border-radiusに対応。ブラウザとの同一描画は保証されません
- Base64データURI / 絶対URL画像に対応
- 明示サイズのスライドキャンバスに対応。1600x900px (13.333in x 7.5in) はデフォルト例で、width / height / layout によるカスタムサイズも利用可能
- マルチスライド対応(各 .slide 要素が1枚のPPTXスライドに)
- 日本語フォント対応(Noto Sans JP、游ゴシック、メイリオ)
- Studio と Hosted Web Export をブラウザからそのまま利用可能
クイックスタート
4ステップで最初の認証付きエクスポート
REST API は非同期です。まずジョブを作成し、状態をポーリングし、completed になったら downloadUrl から .pptx をダウンロードします。
サインアップ
html2pptx.app でアカウントを作成します。Free Preview でもAPIキー1個・月10回までの限定API評価が可能です。継続利用や商用利用では Founder Beta 以上へ進みます。
APIキーの取得
ダッシュボードに移動し、「APIキーを作成」をクリック。コピーして安全に保管してください。キーは一度だけ表示されます。sk_live_ で始まるキーはシークレットとして扱ってください。
最初のリクエストを送信
HTMLスライドコンテンツを /api/export/jobs にPOSTします。Authorizationヘッダーにアプリキーを含めてください。APIはエクスポートを追跡するためのjobIdを返します。
PPTXをダウンロード
GET /api/export/jobs/{jobId} をポーリングし、statusが "completed" になるまで待ちます。通常はレスポンスに含まれる downloadUrl から .pptx を取得します。URLを生成できない場合のみ、ワーカーが fileBase64 を代替として返すことがあります。
コード例
1curl -X POST https://html2pptx.app/api/export/jobs \ 2 -H "Authorization: Bearer sk_live_xxxx" \ 3 -H "Content-Type: application/json" \ 4 -H "Idempotency-Key: my-unique-request-id-123" \ 5 -d '{ 6 "fileName": "quarterly-review.pptx", 7 "html": "<section class=\"slide\" style=\"width: 1600px;height: 900px;padding: 64px\"><h1>Hello</h1><p>Generated via API</p></section>", 8 "css": ".slide { font-family: Arial, sans-serif; background: #fff; }", 9 "autoEmbedFonts": false, 10 "metadata": { 11 "channel": "api", 12 "source": "docs-quickstart" 13 } 14 }' 15 16# Response (200 OK): 17# { 18# "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32", 19# "status": "queued", 20# "createdAt": "2026-04-02T10:30:00Z", 21# "fileName": "quarterly-review.pptx", 22# "slideCount": 1 23# } 24# Response headers include: x-request-id: req_abc123... 25 26# Poll for completion: 27curl -s https://html2pptx.app/api/export/jobs/5d934729-a0db-4aa9-bc65-e7a3e7e52b32 \ 28 -H "Authorization: Bearer sk_live_xxxx" 29 30# Response (200 OK, when completed): 31# { 32# "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32", 33# "status": "completed", 34# "createdAt": "2026-04-02T10:30:00Z", 35# "completedAt": "2026-04-02T10:30:12Z", 36# "fileName": "quarterly-review.pptx", 37# "slideCount": 1, 38# "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation", 39# "downloadUrl": "https://storage.example.com/quarterly-review.pptx?token=..." 40# }
APIリファレンス
接続情報
ベースURL: ベースURL: https://html2pptx.app
Content-Type: エクスポートジョブの作成・状態確認・プラン確認は application/json を使用します。PPTXインポートはファイルを含む multipart/form-data または pptxBase64 を含む application/json に対応します。正確な契約はOpenAPI仕様を確認してください。作成エンドポイントはトップレベルの html または同一キー所有の templateId に加え、data、css、fileName、サイズ指定を受け取り、payload ラッパーは使いません。
認証
商用エクスポートエンドポイントには認証が必要です。ダッシュボードでAPIキーを作成・失効し、以下のいずれかのヘッダーで送信してください。キーは秘密情報として保管します。
AuthorizationBearer sk_live_xxxx推奨 -- ほとんどのHTTPクライアント・ライブラリで使用される標準的なBearerトークン形式X-API-Keysk_live_xxxx代替 -- Authorizationが予約されている環境(APIゲートウェイ、プロキシなど)向け運用上のポイント
- POST /api/export/jobs は同期完了ではなく、queued 状態のジョブ記述子を即時返します。
- ジョブ確認は GET /api/export/jobs/{jobId} を使用してください。上流ワーカー由来の内部URLには依存しないでください。
- REST の completed レスポンスには通常 downloadUrl が含まれます。URLを生成できない場合のみ fileBase64 が代替として返ることがあり、公開RESTではレスポンス形式を指定できません。
- ジョブ参照は、作成した API キーまたは remote MCP principal に結び付けられています。別キーでは同じ jobId を読めません。
- スライド数制限は、サニタイズ後の .slide 数からサーバー側で再計算され、クライアント申告値は使われません。
レート制限
商用エクスポートでは、プラン解決後のレスポンスにレート・クォータ関連ヘッダーが付与されます。利用できるヘッダーはプランとレスポンス経路によって異なります。REST は API キー単位、remote MCP は認証済み principal 単位で制限されます。
| Header | 説明 |
|---|---|
x-request-id | エクスポートエンドポイントが追跡用に返すリクエスト識別子。デバッグやサポートへの問い合わせ時に保持してください。 |
X-Plan-Id | このリクエストに適用されたプランID。 |
X-RateLimit-Limit | 現在の1分ウィンドウで許可される最大リクエスト数。 |
X-RateLimit-Remaining | 現在のウィンドウの残りリクエスト数。 |
Retry-After | 429 を受けたあとに再試行するまで待つ秒数。 |
X-Daily-Limit | 日次ジョブ上限を持つプランで返される。 |
X-Daily-Remaining | 現在のUTC日次ウィンドウで残っているジョブ数。 |
X-Monthly-Used | 現在のUTC月次ウィンドウで受け付けたジョブ数。 |
X-Fair-Use-State | normal / review / upgrade_recommended のような月次公平利用状態。 |
/api/v1/import/pptxPPTXをHTMLに取り込み
既存の .pptx を編集可能なHTMLスライドへ変換します(エクスポートの逆方向)。テーマ色(ダークスライドの clrMap/clrMapOvr 反転を含む)、マスターのテキストスタイル、フォントファミリーを解決します。同期処理で、1回のレスポンスでHTMLを返します。POST /api/import/pptx でも利用可能。
リクエストボディ
filefilemultipart/form-data: .pptx ファイル(最大25MB)。pptxBase64 とどちらか一方。
pptxBase64stringapplication/json: base64エンコードした .pptx(data URL も可)。JSON-RPC / MCP クライアント向けに推奨。
fileNamestringラベル用の元ファイル名(任意)。
デフォルト: presentation.pptx
エラーコード
400ファイル欠如/不正、base64不正、または不正なOOXML。401APIキー未指定。Authorization: Bearer または X-API-Key を設定してください。403APIキーがAPIアクセス可能なプランに紐づいていません。413PPTXが25MBの上限を超えています。1{ 2 "fileName": "deck.pptx", 3 "plan": "api_starter", 4 "slideCount": 13, 5 "slides": [{ "index": 1, "html": "<section class=\"slide\">...</section>" }], 6 "html": "<!doctype html>...", 7 "css": "...", 8 "warnings": [] 9}
/api/export/jobsエクスポートジョブの作成
インライン HTML/CSS または同一APIキーが所有する再利用可能な templateId からPPTXエクスポートジョブを作成します。レスポンスは queued 状態のジョブ記述子で、最終結果は GET /api/export/jobs/{jobId} で取得します。
リクエストボディ
fileNamestring生成されるPPTXの出力ファイル名。.pptx拡張子で終わる必要あり。
デフォルト: export.pptx
htmlstring.slide要素を1つ以上含むスライド向けHTML。同一APIキーが所有する再利用テンプレートを templateId で解決できる場合は省略可能。
cssstring送信したHTMLにグローバル適用されるCSS。
デフォルト: ""
templateIdstringtpl_ で始まり、同一APIキーに登録された再利用エクスポートテンプレートID。html の代わりに指定できます。
dataobjectサニタイズ前に html/css または再利用テンプレートへマージするテンプレート変数。
デフォルト: {}
autoEmbedFontsboolean互換性のためレンダラーへ渡す入力。公開RESTでは @font-face を除去し外部フォント取得を遮断するため、Google FontsやカスタムWebフォントは取得しません。
デフォルト: false
slideCountinteger後方互換用の非推奨入力。公開ゲートウェイでは無視され、サニタイズ後の .slide 要素から実際の枚数を再計算します。
widthnumberPPTXスライド幅(インチ)。カスタムサイズ指定時は height とセットで使用。
heightnumberPPTXスライド高さ(インチ)。カスタムサイズ指定時は width とセットで使用。
layoutstringPPTXレイアウトのプリセットまたはカスタム名。代表例: LAYOUT_16x9, LAYOUT_16x10, LAYOUT_4x3, LAYOUT_WIDE。
aspectRatiostring16:9、16:10、4:3 のいずれか。区切りは :、x、× に対応し、非対応値は無視されます。
metadataobjectワーカーへ透過的に渡される任意メタデータ。追跡用途に便利です。
デフォルト: {}
callbackUrlstring完了・失敗の通知ヒントを受け取るHTTPS URL。payloadは jobId/status と、成功時の fileName または失敗時の message で、完全な結果ではありません。現在、顧客が検証できるWebhook署名契約は公開していないため、コールバックを未認証として扱い、認証が必要なステータスendpointから結果を取得してください。https:// URLのみ受け付けます。
エラーコード
400無効なリクエストボディ -- 必須フィールドの欠落または JSON 形式不正。401APIキーが未設定または無効。AuthorizationまたはX-API-Keyヘッダーに有効なsk_live_キーが設定されているか確認。403APIキーにこの操作の権限がない。プラン制限またはキースコープを確認。404指定した再利用可能な templateId がこのAPIキーに見つかりません。413リクエストエンティティが大きすぎる。プラン上限またはワーカーのハード上限を超過しています。422サニタイズ後のHTMLがプランの最大スライド数を超えています。429レート制限、日次上限、月次公平利用ポリシー、または concurrentJobs の上限を超えています。Retry-After や usage ヘッダーを確認してください。502バッドゲートウェイ -- ワーカーバックエンドが一時的に利用不可。短い遅延後にリトライ。503サービス利用不可 -- システムがメンテナンス中または高負荷状態。指数バックオフでリトライ。1{ 2 "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32", 3 "status": "queued", 4 "createdAt": "2026-04-02T10: 30: 00Z", 5 "fileName": "quarterly-review.pptx", 6 "slideCount": 1 7}
/api/export/jobs/{jobId}ジョブステータスの確認
エクスポートジョブの現在のステータスを取得します。status が "completed" または "failed" になるまでポーリングしてください。completed レスポンスには通常 downloadUrl が含まれ、fileBase64 は代替として返る場合があります。
パスパラメータ
jobIdstringRequiredPOST /api/export/jobs から返されたジョブID。
ステータス値
queuedジョブが処理キューで待機中。
processingワーカーがHTMLのレンダリングとPPTXシェイプへの変換を実行中。
completed変換が正常に完了。通常は downloadUrl が利用でき、fileBase64 が代替として含まれる場合があります。
failed変換失敗。message フィールドに人間が読める説明が入ります。
エラーコード
401APIキーが未設定または無効404ジョブが見つからない -- jobIdが無効か、別のAPIキーに属するジョブ429ステータスポーリングのレート制限超過。1{ 2 "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32", 3 "status": "completed", 4 "createdAt": "2026-04-02T10: 30: 00Z", 5 "completedAt": "2026-04-02T10: 30: 12Z", 6 "fileName": "quarterly-review.pptx", 7 "slideCount": 3, 8 "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation", 9 "downloadUrl": "https://storage.example.com/quarterly-review.pptx?token=..." 10}
/api/export/plansプラン一覧の取得
recommendedPlanId を含む公開プランカタログを返します。認証不要です。
1{ 2 "recommendedPlanId": "founding_beta", 3 "plans": [ 4 { 5 "id": "free_web", 6 "name": "Free Preview", 7 "includes": { "api": true, "skills": true, "mcp": true }, 8 "limits": { 9 "requestsPerMinute": 3, 10 "dailyRequestLimit": 10, 11 "monthlyRequestLimit": 10, 12 "monthlyReviewThreshold": 0, 13 "monthlyUpgradePromptThreshold": 0, 14 "maxSlidesPerJob": 20, 15 "concurrentJobs": 1, 16 "apiKeys": 1, 17 "maxPayloadBytes": 1048576 18 } 19 } 20 ], 21 "note": "Free Preview is generous for personal use. Paid tiers unlock commercial operation, team sharing, automation throughput, and support." 22}
/api/openapi.jsonOpenAPI仕様
html2pptx.app APIのOpenAPI 3.x仕様を返します。クライアントSDKの生成、Postmanへのインポート、APIスキーマの参照に便利です。
1// OpenAPI 3.x JSONドキュメント全体を返します
HTML契約
信頼性の高い変換のために、送信するHTMLは以下のルールに従う必要があります。
- 各スライドには .slide クラスが必要 -- これがスライド分割の境界マーカー
- 各 .slide には明示サイズが必要。1600px x 900px (16:9比率、13.333in x 7.5in) はデフォルト例で、API/MCP では width / height / layout による縦長・カスタム出力も指定可能
- 対応CSS: flexbox、grid、linear-gradient、radial-gradient、box-shadow、text-shadow、border-radius、transform (rotate、scale、translate、skew)、opacity
- フォント: レンダラーと対象PowerPoint環境に存在するフォントを使用。公開RESTでは @font-face を除去し外部フォント取得を遮断するため、代替フォントと改行位置を確認
- 画像: base64データURIと絶対URLの両方に対応。相対パスは失敗する -- 必ず絶対URLを使用
- SVG: インラインSVG要素に対応。高品質なPNG画像に変換されます
- 避けるもの: scriptタグ、iframe、script依存のcanvas、外部URLのvideo、アンカータグ、form要素、SVG外部参照、CSSアニメーション、@keyframes、ランタイム依存のstate
- ネスト: 深くネストされた要素(10レベル超)は出力品質に影響する可能性あり。HTML構造はできるだけフラットに
- テキスト折り返し: テキストボックスはデフォルトで折り返しなし(nowrap)。長い段落など折り返しが必要な場合は、その要素に white-space: normal を指定してください
エラーレスポンス形式
商用エクスポートのエラーはRFC 9457 Problem Details形式を使用し、後方互換用のレガシーフィールドも含みます。一部の旧API・クリエイター向けAPIは、より小さいエラーオブジェクトを返します:
1{ 2 "type": "https://html2pptx.app/errors/slides-limit-exceeded", 3 "status": 422, 4 "title": "Slides limit exceeded", 5 "detail": "Plan Starter supports up to 200 slides per job. You submitted 260 slides.", 6 "instance": "/api/export/jobs", 7 "error": "slides_limit_exceeded", 8 "message": "Plan Starter supports up to 200 slides per job.", 9 "slideCount": 260 10}
対応HTML要素
対応要素は以下の方式で変換されます。編集性は要素ごとに異なり、画像へマッピングされる行はPowerPoint上でラスター画像になります。
| HTML要素 | PPTX出力 | 備考 |
|---|---|---|
div, section, article | シェイプ(塗りつぶし) | 背景色、グラデーション、ボーダー、角丸が保持されます。 |
p, h1-h6, span, b, em, strong, i, small | テキストボックス | テキストは編集可能なPowerPointテキストボックスになります。対応するフォント・配置・行間プロパティがマッピングされます。エクスポート後に折り返しと間隔を確認してください。インライン要素(span, b, em等)は同じテキストボックス内のスタイル付きテキストランになります。 |
img | 画像 | 絶対URLとbase64データURIに対応。CSS object-fit(contain, cover, fill, scale-down)とobject-positionが適用されます。角丸はクリッピングで再現。 |
table, tr, td, th | ネイティブPPTXテーブル | テーブル契約の範囲で、セル単位のテキストスタイル、背景塗りつぶし、ボーダー(solid/dashed/dotted)、パディング、テキスト配置、colspan/rowspanに対応します。複雑な表はエクスポート後に確認してください。 |
ul, ol, li | 箇条書き / 番号リスト | シンプルなリストは編集可能な箇条書き・番号リストに変換。複雑なリスト(画像やflex/gridを含む場合)は画像として変換されます。 |
svg | 画像(PNG) | インラインSVGはPNGへ画像化され、ベクターとしては編集できません。 |
video | 再生可能メディアまたはポスター画像 | base64 data:video はPowerPointメディアとして埋め込み可能。外部video URLは取得しません。base64 data:image のposterはカバーまたは代替表示に使えます。 |
canvas | Hosted REST/MCPでは非対応 | canvasのbitmap状態はHTML文字列に直列化されません。送信前にPNGへ変換し、許可されたdata:imageを持つ<img>として埋め込んでください。 |
アイコン要素(FontAwesome, Material Icons等) | 画像 | 検出されたアイコンフォントは画像へ変換され、テキストやベクターとしては編集できません。 |
非対応または除去される要素
以下の要素は入力サニタイズで除去されるか、レンダラーで対応していません。スライドHTMLでは使用しないでください:
script, iframe, object, embedセキュリティ: アクティブコンテンツを除去
外部URLのvideo、script依存のcanvas外部videoは取得せず、送信されたscriptは除去されます
link, meta, baseセキュリティ: 外部参照を除去
formインタラクティブ要素はPPTX非対応
styleインラインスタイルまたはcssパラメータを使用してください
aセキュリティ: アンカータグを除去
foreignobject, image (SVG), feimage, useSVG外部参照を除去
animate, animateMotion, animateTransform, set, discard, mpathSVGアニメーションは非対応
Skills統合ガイド
Skillsとは
Skillsは、AIコーディングエージェントにドメイン固有の知識とワークフローを追加するパッケージ機能です。html2pptx.app のスキルをインストールすると、エージェントがスライド用HTMLの作成方法を理解し、PPTX変換契約に対する検証を行い、必要に応じてlocal stdio MCPでローカル Visual Editorを開き、remote MCPでエクスポートし、remote MCPで検証済みのcreator-owned HTML template draftを作成できます。確認済みdraftはdashboardでunlisted共有にできますが、新規public gallery公開は現在停止中です。生成されたPPTXは出力候補であり、配布前にマークアップ検証と目視確認が必要です。
仕組み
スキルには4つのコア機能がバンドルされています: (1) HTMLオーサリング知識 -- 公開されたPowerPoint変換契約の範囲でHTML/CSSを書くためのルール、(2) remote MCPベースのエクスポート自動化 -- hosted html2pptx.app MCPでジョブ作成・ステータスポーリング・結果取得を行う仕組み、(3) ローカル Visual Editor -- local stdio MCPのeditor open/stopツールとlocalhost bridgeを使い、PPTX出力前のHTMLを目視確認・微調整する仕組み、(4) テンプレートdraft作成 -- 公開サポート契約では、認証済みremote MCPのvalidate/saveループを使う仕組みです。legacyまたはhidden Web surfaceはこの公開契約の対象外です。local MCP の追加はユーザーのMCP設定を変更するため、エージェントは必ず事前に確認します。
Claude Code、Codex、Cursor、VS Code (GitHub Copilot)、Grok Build、Antigravity 等 18以上のAIエージェントに対応。Claude Code、Codex、Cursor は skills CLI コマンドを使います。Grok Build は下に表示している Grok 専用の skills installer を使います。
ワークフロー
- 1エージェントがユーザーリクエストを受信(例: 「この会議メモからデッキを作成して」)
- 2エージェントがスキル定義を読み取り、html2pptx.appのHTML契約を理解
- 3エージェントが .slide クラス要素と明示サイズ付きのスライドセーフHTMLを生成。1600x900 はデフォルト例
- 4エージェントが変換契約に対してマークアップを検証
- 5目視確認が必要な場合は、CLI または local stdio MCP で edit-slide を開き、編集後のHTMLをディスクから再読み込み
- 6エージェントが remote MCP に接続し html2pptx_create_export_job を呼び出し
- 7エージェントが html2pptx_wait_for_export_job で完了をポーリング
- 8HTMLテンプレートdraftを作る場合は、html2pptx スキルと remote MCP でHTMLから題名・タグを推定し、AIセキュリティ事前診断、検証、エラー修正、下書き保存を行い、draftUrlを返却
- 9エージェントが completed 状態のジョブサマリーをユーザーに返却
ローカル Visual Editor
edit-slide スキルを使うと、エージェントが作成したローカルHTMLスライドを、http://localhost:<port> のような空き loopback origin で動くPowerPoint風のノーコード編集画面で開けます。ローカルファイル編集に hosted edit-slide は使えません。ローカル dev script が空きポートを選び、現在のプロジェクト内の .html2pptx/edit-slide/editor-server.json に登録します。スライドHTMLファイルはユーザーのPC上に残り、CLI または local stdio MCP が起動する localhost bridge 経由で読み書きされます。local MCP が未設定の場合、エージェントはMCP設定を変更することを説明し、ユーザー確認を取ってから追加します。
1# スライドHTMLがあるプロジェクトで実行 2node scripts/dev-studio.mjs 3npx --yes https://html2pptx.app/downloads/html2pptx-cli-0.4.0.tgz edit ./html2pptx/slides.html 4 5# npm から html2pptx-cli@0.4.0+ を使える場合 6npx --yes html2pptx-cli edit ./html2pptx/slides.html 7 8# CLIをグローバルインストール済みの場合 9html2pptx edit ./html2pptx/slides.html 10 11# ブラウザを自動で開かず、URLだけ表示 12html2pptx edit ./html2pptx/slides.html --no-open
ローカル編集の仕組み
通常のPPTX出力、docs、template、usage 取得は remote MCP を使えます。ローカル `.html` / `.htm` を edit-slide で開いて編集する必要がある場合だけ local stdio MCP を使います。local MCP が未設定なら、追加前にユーザーへ確認します。
`html2pptx edit <file>` または `html2pptx_open_local_slide_editor` が `127.0.0.1` に小さなHTTPサーバーを起動します。ポートは指定しない限りOSが選ぶ空きポートになります。アクセス範囲はコマンドを実行したカレントディレクトリ内に限定されます。
コマンドが `http://localhost:<editor-port>/edit-slide?file=...&bridge=http://127.0.0.1:<bridge-port>#bridgeToken=...` を開きます。ワンタイム token は URL fragment に置かれ、起動後にエディタがアドレスバーから消します。
ブラウザの編集画面が token を提示し、localhost bridge から対象の `.html` / `.htm` ファイルを取得します。マーケットプレイス下書きや公開ページは作成されません。
スライド上の要素をクリックし、右パネルからテキスト、タイポグラフィ、色、サイズ、余白、角丸、ボーダー、不透明度などを調整できます。
編集内容はHTMLとして再シリアライズされ、楽観的ロック用のファイルハッシュ付きで同じHTMLファイルへ保存されます。バージョン履歴、バックアップ、監査ログは作成されません。
ユーザーが画面で編集した後は、エージェントがHTMLファイルを再読み込みします。PowerPoint出力が必要なら、html2pptx skills を使う別のエージェント作業として実行します。
プライバシーとファイルアクセス
- bridge は `127.0.0.1` のみに bind します。ネットワーク上の他ユーザーはその bridge を開けません。
- bridge 起動ごとにセッショントークンを生成し、エディタはローカル読み書き時にその token を提示する必要があります。表示URLからは起動後に token を除去します。
- スライドプレビューは no-referrer を使うため、外部画像やフォントに token 付き editor URL が送られにくくなっています。
- 読み書きできるのは、カレントディレクトリ配下の `.html` / `.htm` ファイルだけです。
- `app/`、`components/`、`lib/`、`.git/`、`.next/`、`node_modules/` などのプロジェクトソースや内部ディレクトリはブロックされます。
- ノーコード編集だけではデッキは公開・アップロードされません。Export PPTX ボタンは `Claude Codeや各エージェントに、html2pptx skillsを使って、HTMLをPowerPoint出力してください。` という案内だけを表示し、直接変換は行いません。
- local stdio MCP の追加はユーザーのエージェント環境設定を変更します。Skills やエージェントは黙って追加せず、事前に確認してから実行します。
- エディタ状態はプロジェクトごとに `.html2pptx/edit-slide/` に保存されます。バージョン履歴、バックアップ、監査ログは作成されません。
よくあるつまずき
`node scripts/dev-studio.mjs` を起動してから `npx --yes https://html2pptx.app/downloads/html2pptx-cli-0.4.0.tgz edit ./path/to/slides.html` を使うか、`html2pptx-cli@0.4.0+` をグローバルインストールしてください。
すでに設定済みの local stdio MCP ツール `html2pptx_open_local_slide_editor` を使うか、local MCP を追加する前にユーザーへ確認してください。local MCP も使えない場合は、npm またはグローバル `html2pptx` CLI を先に使える状態にします。
コマンドを実行したディレクトリからの相対パスになっているか、拡張子が `.html` / `.htm` かを確認してください。
ターミナルで起動している `html2pptx edit` を終了しないでください。bridge が止まると保存できません。
先にユーザーへ確認してください。local MCP は MCP 経由でローカル edit-slide を開く場合だけ必要です。remote MCP だけでもPPTX出力はできます。
同じHTMLを複数タブで編集して競合しないよう、エディタはタブロックを使います。編集権限のあるタブを使うか、画面上の移譲操作を行ってください。
セットアップ
実際に使うエージェントのタブを開き、そのコマンドだけ実行してください。skills CLI は Claude Code / Codex / Cursor / VS Code (GitHub Copilot) / Antigravity に対応し、Grok Build のみ Grok 専用 installer を使います。タブの並びは下の MCP セットアップと同じ順序にしてあるので、同じエージェントは両セクションの同じ位置にあります。
Claude Code
html2pptx Skill をインストール
公開済みの html2pptx skills を skills CLI から Claude Code に登録します。
1npx skills add https://html2pptx.app -a claude-code
インストールせずに一覧確認
実際に追加される skills を事前に確認したい場合はこのコマンドを使います。
1npx skills add https://html2pptx.app --list
Tip: `--yes` は検出された全エージェントのディレクトリへ入るため、エージェントを明示する `-a` フラグを優先してください。
利用可能なスキル
html-to-pptx-slide-authoringスライド用HTML/CSSの作成・診断・修正。HTMLがPPTXに正しく変換されるかを事前チェックし、問題があれば自動で書き換え。
- HTML診断(safe / needs-rewrite / out-of-scope)
- マークアップ自動書き換え
- スライドHTML新規生成
- 入力バリデーション
pptx-studio-export-automationAPIジョブの作成・ステータス管理・エラーハンドリング。REST API / MCP の使い分け判断も含む。
- エクスポートジョブ作成
- ポーリング&完了待機
- エラー分析&リトライ
- プラン制限の事前チェック
edit-slideローカルHTMLスライドをlocalhost上のvisual editorで開き、localhost bridge 経由で同じファイルに保存。
- html2pptx edit <file>
- PowerPoint風UIで視覚編集
- ローカルHTMLへの自動保存
- 変更検知と競合防止
スキルの機能詳細
HTML診断
エクスポート前にマークアップをsafe、needs-rewrite、out-of-scopeに分類。.slide要素の欠落、非対応CSS、動的コンテンツなどの問題を検出。
マークアップ書き換え
Web形式のHTML(レスポンシブレイアウト、パーセントベースのサイジング、スクロールコンテナ)をPPTX変換に適した固定サイズの.slide構造に変換。
スライド生成
テキストプロンプト、トピックアウトライン、データペイロードからスライドセーフHTMLを新規作成。視覚的階層と可読性のベストプラクティスを適用。
出力検証
生成されたHTMLを html2pptx.app のHTML契約に対してプリフライトチェックし、無効な入力によるエクスポートクォータの無駄遣いを防止。
テンプレートdraft作成
creator-owned HTML draftの公開サポート手順は、html2pptx スキル内のAIセキュリティ事前診断、認証済みremote MCP検証、draft作成です。CLI、local MCP、汎用RESTはdraft作成の公開契約ではなく、legacyまたは非公開のWeb surfaceもこの手順の対象外です。確認後はunlisted共有にできますが、新規public gallery公開は停止中です。
MCP統合ガイド
インストール
Claude Code はこの1行でOK(remote export + local edit-slide)
npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claudeCodex はこの1行でOK(remote export + local edit-slide)
npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codexGrok Build はこの1行でOK(remote export + local edit-slide)
npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grokMCPとは
MCP (Model Context Protocol) は、標準化されたツールインターフェースを通じてAIエージェントにバックエンド機能を公開するオープンプロトコルです。html2pptx.app は2種類のMCPサーフェスを提供します。remote HTTP MCP (`/mcp`) はエクスポート、PPTXインポート、usage、docs、templates、catalog、creator-owned HTML template draft作成に使います。local stdio MCP が公開するのは、localhost bridge経由のedit-slide用 `html2pptx_open_local_slide_editor` と `html2pptx_stop_local_slide_editor` だけです。エクスポートジョブ作成、PPTXインポート、ジョブのポーリング、HTMLテンプレートdraft作成にはremote MCPを使います。local stdio MCPは、ユーザーPC上の `.html` を開く、プレビュー・編集する、または編集セッションを停止する場合だけ使います。
インストール & セットアップ
Claude Code、Codex、Grok Build は1コマンドで remote export と local edit-slide の両方を登録できます。remote MCP は hosted service 側の更新が反映され、local MCP は html2pptx-local-mcp@latest 経由で起動するため、次回起動時に新しい公開パッケージへ追従できます。
Claude Code
Claude Codeユーザーはこの1行でOK
`html2pptx` として remote export を登録し、`html2pptx-local` として local edit-slide を Claude Code の user config に直接書き込みます。
1npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude
remote だけ手動セットアップ
PPTX出力などのホスト側ツールだけ必要な場合はこちらを使います。
1claude mcp add --scope user --transport http html2pptx https://html2pptx.app/mcp
local edit-slide 互換セットアップ
Claude Code の stdio 登録が不安定な場合も、このインストーラーが local server 設定を直接書き込みます。
1npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude
Tip: このインストーラーは remote MCP を user scope で登録し、互換性のため local stdio MCP は Claude Code の user config に直接書き込みます。
認証方法
MCPサーバーは2つの認証方法に対応しています。用途に合わせて選択してください。APIキーはエクスポート、docs、usage、catalog には使えますが、html2pptx_publish_template は作成者IDが必要なため WorkOS-bound user token が必要です。
APIキー(推奨)
ダッシュボードで発行したAPIキーを使用します。APIキーには有効期限がない(設定しない限り)ため、再認証の必要がありません。エクスポート、docs、catalog の日常的なMCP利用にはこちらを推奨します。作成者所有のテンプレートdraftは作成できません。
ダッシュボードでAPIキーを発行し、Bearerトークンとして設定してください。ほとんどのMCPクライアントはサーバー追加時に自動で処理します。
- ✓トークン期限切れなし — 安定した長期セッション
- ✓シンプルな設定 — キーを貼るだけ
- ✓日常利用や自動化に最適
OAuth(ブラウザログイン)
WorkOS AuthKit経由でGoogleアカウントやメールアドレスでログインします。アクセストークンの有効期限は24時間で、期限切れ後は再認証が必要です。html2pptx_publish_template にはこの identity-bound な認証が必要です。
MCPサーバーを追加すると、ブラウザでログイン画面が自動的に開きます。サインインして認証を完了してください。
- ✓APIキー管理が不要
- ✓お試しや評価に最適
OAuthセッションは24時間で期限切れになります。途切れないアクセスが必要な場合は、APIキーの利用を推奨します。
利用可能なMCPツール
| ツール名 | 説明 |
|---|---|
html2pptx_list_export_plans | 現在の商用プラン一覧と推奨プランを取得。 |
html2pptx_create_export_job | HTML/CSS からエクスポートジョブを作成。width、height、layout、waitForCompletion、pollIntervalMs(1〜60秒)、timeoutMs(最大300秒)、responseFormat ("url" | "base64" | "both") などのオプションにも対応。MCPのinline配信は2 MiBまでで、超過時は警告付き署名URLへ切り替わります。 |
html2pptx_import_pptx | remote MCP専用。既存の .pptx を pptxBase64 で渡し、編集可能なHTMLスライドへ変換します。local stdio MCPはこのツールを公開せず、filePathも受け付けません。テーマ色・マスターのテキストスタイル・フォントを解決します。 |
html2pptx_get_export_job | jobId を指定してジョブの現在状態を取得。 |
html2pptx_wait_for_export_job | 1〜60秒の間隔で完了・失敗・最大300秒のタイムアウトまでポーリングします。通信・レート制限エラーは呼び出し元へ返し、内部で自動リトライやバックオフは行いません。 |
html2pptx_get_docs | html2pptx.app のドキュメントを取得。API契約、HTML要件、統合ガイドを理解するために使用。 |
html2pptx_get_usage | 現在のプランの使用状況とクォータを取得。日次・月次エクスポート数、残りクォータ、プラン制限、リセット情報を表示。 |
html2pptx_list_templates | 利用可能なマーケットプレイステンプレートを、メタデータと任意のカテゴリ絞り込み付きで取得。 |
html2pptx_get_template_html | テンプレートのHTMLソースとデザインプロンプトを取得。エージェントが研究・リミックスするために使用。 |
html2pptx_validate_template_html | AIセキュリティ事前診断後に行うマーケットプレイスHTMLのdry-run検証。HTMLテンプレートdraft作成前に必須。 |
html2pptx_publish_template | 検証済みHTMLをアップロードし、不足している題名・説明・カテゴリ・タグを推定して、作成者所有のHTML draftを作成します。draftUrlを返し、ユーザーはdashboardで確認してunlisted共有にできます。新規public gallery公開は現在停止中です。 |
html2pptx_open_local_slide_editor | ローカル stdio MCP 専用。既存CLIの localhost bridge をローカル .html/.htm スライドファイル向けに起動し、HTMLを公開せずノーコードエディタを開く。remote /mcp ではユーザーPC上のファイルにアクセスできないため、このツールは提供されません。 |
html2pptx_stop_local_slide_editor | ローカル stdio MCP 専用。html2pptx_open_local_slide_editor で開始したローカル編集 bridge セッションを停止。 |
MCP Resources(ドキュメント参照)
MCPサーバーはドキュメントをResourcesとして提供します。エージェントはエクスポート前にこれらを読み込んで、API契約やHTML要件を理解できます。
| URI | リソース名 | 説明 |
|---|---|---|
docs://html2pptx/overview | サービス概要 | アーキテクチャ、CSS対応、他社比較 |
docs://html2pptx/quickstart | クイックスタート | 4ステップで最初のAPIコール |
docs://html2pptx/api-reference | APIリファレンス | エンドポイント、認証、エラーコード |
docs://html2pptx/html-contract | HTML契約 | HTML構造要件と対応CSSプロパティ |
docs://html2pptx/skills | Skills統合 | AIエージェント向けスキル定義 |
docs://html2pptx/mcp | MCP統合 | MCPサーバーの設定と使い方 |
llms.txt(AI向けドキュメント)
html2pptx.app は、コミュニティで提案されている llms.txt 形式でドキュメントを公開しています。AIエージェントやLLM向けのMarkdown資料であり、llms.txt は公式なWeb標準ではありません。
簡潔なMarkdownインデックス — サービス概要、API契約、対応CSS
公開ドキュメントの各セクションを収録した拡張Markdown資料
使用例
1# Example conversation in Claude Desktop with html2pptx.app MCP: 2 3User: "Create a presentation about our Q1 2026 results." 4 5Claude (via MCP): 61. Calls html2pptx_list_export_plans to inspect available plans 72. Generates slide HTML from the conversation context 83. Calls html2pptx_create_export_job with the HTML payload 94. Calls html2pptx_wait_for_export_job to poll until completion 105. Returns the resulting PPTX payload or follow-up instructions 11 12# Behind the scenes, the MCP tools handle: 13# - Authentication with your configured API key 14# - Proper HTML contract formatting (.slide class, explicit slide dimensions) 15# - Status polling with exponential backoff 16# - Error handling and retry logic
CLIツール
インストール
グローバルインストール
npm install -g html2pptx-clinpxで直接実行
npx html2pptx-cli convert slides.htmlCLIとは
html2pptx CLI を使えば、ターミナルから直接HTMLファイルをPowerPointに変換し、ローカルHTMLを edit-slide で開き、テンプレートを参照できます。初めてのユーザー向けの対話モード(ガイド付きプロンプト)と、スクリプト・CI/CD・AIエージェント(Claude Code等)向けのダイレクトモード(フラグ指定)の両方に対応しています。公開サポートされるcreator-owned HTML template draft作成フローは認証済みremote MCPで提供し、CLIからのdraft作成は意図的に拒否します。legacyまたはhidden Web surfaceはこの公開契約の対象外です。
初期設定
ファイルを変換する前に、APIキーを設定してください。この設定は一度だけ行えば ~/.html2pptx/config.json に保存されます(所有者のみアクセス可)。
1html2pptx initコマンド一覧
| コマンド | 説明 |
|---|---|
html2pptx login | APIキーを対話的に設定します。ダッシュボードへのリンクが表示され、キーを生成できます。 |
html2pptx logout | 保存されたAPIキーを ~/.html2pptx/config.json から削除します。 |
html2pptx convert [file] | HTMLファイルをPPTXに変換します。引数なしで対話モード、ファイルパス指定でダイレクトモードになります。 |
html2pptx status | 現在の使用量、残りクォータ、レート制限、プラン詳細を確認します。 |
html2pptx whoami | APIキーの有効性を検証し、認証状態・プラン名・使用量を表示します。 |
html2pptx config | 現在の設定(APIキー、ベースURL)を表示します。 |
html2pptx templates list | 利用可能なテンプレート一覧を表示します。 |
html2pptx templates get <id> | テンプレートの詳細を取得します。--prompt でデザインプロンプト、--html でソースコードを含めます。 |
html2pptx templates publish | 無効化されています。公開サポートされるcreator-owned HTML template draft作成フローは認証済みremote MCPです。legacyまたはhidden Web surfaceはこの公開契約の対象外です。 |
html2pptx --help | ヘルプとコマンド一覧を表示します。 |
html2pptx --version | インストール済みのCLIバージョンを表示します。 |
convert オプション
| フラグ | 説明 |
|---|---|
-o, --output <file> | 出力PPTXファイル名(デフォルト: 入力ファイル名の拡張子を .pptx に変更) |
-s, --size <size> | スライドサイズ: "16:9"、"4:3"、またはカスタム "WxH"(例: 1920x1080) |
--css <file> | HTMLと一緒に適用する外部CSSファイル |
--json | スクリプトやCI/CDパイプライン向けにJSON形式で結果を出力 |
--open | 変換後にPPTXファイルを自動で開く |
--base-url <url> | APIベースURL(デフォルト: https://html2pptx.app) |
使用例
ダイレクトモード(スクリプト・AIエージェント向け)
1# ワンライナーで変換 2html2pptx convert ./slides.html -o presentation.pptx -s 16: 9 3 4# 外部CSSを指定 5html2pptx convert ./slides.html --css ./styles.css -o deck.pptx 6 7# JSON出力(スクリプト連携用) 8html2pptx convert ./slides.html --json 9# {"success":true,"file":"slides.pptx","size":"1.2 MB","duration":"3.2s"}
対話モード(初めてのユーザー向け)
1# 引数なしで実行するだけ 2html2pptx convert 3 4# CLIがガイドします: 5# > 変換するHTMLファイル 6# > スライドサイズの選択 7# > 出力ファイル名
アカウント管理
1# 認証状態を確認 2html2pptx whoami 3# Plan: Starter 4# Usage: 1 / 120 exports today 5# Remaining: 119 6 7# 詳細な使用量を確認 8html2pptx status 9# Plan: Starter 10# Daily Usage: 42 / 120 exports ████████████░░░░░░░░ 11# Remaining: 78 12# Rate Limit: 5 req/min 13# Max Slides: 50 per job 14 15# ログアウト 16html2pptx logout
テンプレート
1# テンプレート一覧 2html2pptx templates list 3 4# デザインプロンプト付きで取得 5html2pptx templates get atlantis-pizza-corp --prompt 6 7# HTMLソース付きでJSON出力 8html2pptx templates get atlantis-pizza-corp --prompt --html --json 9 10# 公開サポートされる下書き作成フローは認証済みremote MCP: 11# AI security preflight -> html2pptx_validate_template_html -> html2pptx_publish_template -> dashboard review 12# legacy/hidden Web surfaceはこの公開契約の対象外
活用事例
html2pptx.app は自動化された反復可能なスライド生成のために設計されています。最も一般的な統合パターンをご紹介します:
四半期レポートの自動生成
ライブデータから四半期パフォーマンスデッキを自動生成。データベースからメトリクスを取得し、チャートやKPIカードを含むスライドHTMLにフォーマットしてAPI経由でエクスポート。cronやBIパイプラインから実行し、配布前に検証と出力確認を行います。
1const slides = quarterly_data.map((quarter, i) => ` 2 <section class="slide" style="width: 1600px;height: 900px;padding: 60px;font-family:'Noto Sans JP',sans-serif;"> 3 <h2 style="color:#1a1a2e;font-size: 36px;">Q${i+1} Results</h2> 4 <div style="display:grid;grid-template-columns: 1fr 1fr;gap: 40px;margin-top: 40px;"> 5 <div style="background:#f0f4ff;border-radius: 16px;padding: 32px;"> 6 <p style="font-size: 14px;color:#6b7280;">Revenue</p> 7 <p style="font-size: 48px;font-weight: 700;color:#1a1a2e;">${quarter.revenue}</p> 8 </div> 9 <div style="background:#f0fdf4;border-radius: 16px;padding: 32px;"> 10 <p style="font-size: 14px;color:#6b7280;">Growth</p> 11 <p style="font-size: 48px;font-weight: 700;color:#16a34a;">${quarter.growth}%</p> 12 </div> 13 </div> 14 </section> 15`).join("\n"); 16 17const resp = await fetch("/api/export/jobs", { 18 method: "POST", 19 headers: { "Authorization": "Bearer sk_live_xxxx", "Content-Type": "application/json" }, 20 body: JSON.stringify({ fileName: "q-report.pptx", html: slides }), 21});
営業提案書のテンプレート化
ブランド準拠のスライドテンプレートをHTML/CSSで一度定義し、キャンペーンやクライアントピッチごとに動的コンテンツを投入。会社名、プロジェクト詳細、価格などの変数は生成時にインジェクション。マーケティングチームがテンプレートを管理し、利用前にブランドとレイアウトの整合性を確認します。
1// Sales proposal template with dynamic client data 2function generateProposal(client) { 3 return ` 4 <section class="slide" style="width: 1600px;height: 900px;padding: 60px;background:linear-gradient(135deg,#1a1a2e,#16213e);"> 5 <h1 style="color:#fff;font-size: 48px;">${client.companyName} 御中</h1> 6 <p style="color:#a0aec0;font-size: 24px;margin-top: 20px;">ご提案書 - ${client.projectName}</p> 7 <div style="position:absolute;bottom: 60px;left: 60px;color:#718096;font-size: 14px;"> 8 ${new Date().toLocaleDateString('ja-JP')} | Confidential 9 </div> 10 </section> 11 <section class="slide" style="width: 1600px;height: 900px;padding: 60px;"> 12 <h2 style="font-size: 36px;color:#1a1a2e;">提案概要</h2> 13 <div style="display:grid;grid-template-columns: 1fr 1fr 1fr;gap: 30px;margin-top: 40px;"> 14 ${client.features.map(f => ` 15 <div style="background:#f7fafc;border-radius: 12px;padding: 24px;"> 16 <h3 style="font-size: 20px;color:#2d3748;">${f.title}</h3> 17 <p style="font-size: 14px;color:#718096;margin-top: 8px;">${f.description}</p> 18 </div> 19 `).join('')} 20 </div> 21 </section> 22 `; 23}
AIエージェントによるプレゼン自動作成
AIエージェントに会議メモ、リサーチサマリー、プロジェクト概要からプレゼンテーションデッキを作成させます。Skills またはMCP統合により、エージェントは html2pptx.app のHTML契約を理解し、準拠したスライドを生成してダウンロードリンクを提供。ユーザーは自然言語で欲しいものを説明するだけ。
SaaSアプリへのPPTXエクスポート機能追加
SaaS製品に「PowerPointにエクスポート」機能を追加。ダッシュボード、分析ビュー、レポートをスライドHTMLとしてレンダリングし、バックエンドから html2pptx.app API を呼び出します。ユーザーはフラットなスクリーンショットではなく、編集可能なテキストとシェイプを含むネイティブPPTXファイルを取得。
1// Backend route: POST /api/dashboard/export-pptx 2app.post("/api/dashboard/export-pptx", async (req, res) => { 3 const { dashboardId } = req.body; 4 const dashboard = await getDashboard(dashboardId); 5 6 // Render each widget as a slide 7 const slides = dashboard.widgets.map(widget => ` 8 <section class="slide" style="width: 1600px;height: 900px;padding: 40px;"> 9 <h2 style="font-size: 28px;color:#1a1a2e;">${widget.title}</h2> 10 <div style="margin-top: 20px;">${widget.renderToHTML()}</div> 11 </section> 12 `).join(""); 13 14 // Call html2pptx.app API 15 const job = await fetch(process.env.HTML2PPTX_API_URL + "/api/export/jobs", { 16 method: "POST", 17 headers: { 18 "Authorization": `Bearer ${process.env.HTML2PPTX_API_KEY}`, 19 "Content-Type": "application/json", 20 }, 21 body: JSON.stringify({ 22 fileName: `${dashboard.name}.pptx`, 23 html: slides, 24 }), 25 }); 26 27 const { jobId } = await job.json(); 28 res.json({ jobId, statusUrl: `/api/export/jobs/${jobId}` }); 29});
プラン・料金
利用状況に合ったプランを選択してください。現在の公開カタログはコードで定義されており、requests per minute、日次ガードレール、最大スライド数、concurrentJobs、API キー数、payload サイズがプランごとに異なります。
| プラン | エクスポート数 | スライド数 | サポート | 料金 |
|---|---|---|---|---|
| Free Preview | 月10件 / 3 rpm | 20枚/ジョブ | コミュニティ | 0円 |
| Founder Beta | 月300件 / 5 rpm | 50枚/ジョブ | セルフサービス | 980円/月 |
| Starter | 月3,000件 / 15 rpm | 100枚/ジョブ | メール | 2,980円/月 |
| Business | 月20,000件 / 60 rpm | 200枚/ジョブ | 優先 | 9,800円/月 |
| Enterprise / OEM | 個別設計 | 500枚+/ジョブ | 専任 | 49,800円/月〜 |
ダッシュボードからいつでもアップグレード可能。変更は即時反映され、日割り請求となります。ダウングレードは現在の請求期間終了時に適用。
プラン別レート制限・クォータ
各プランには以下の制限が適用されます。全チャネル(REST API、Skills、MCP)で共通のクォータです。
| プラン | RPM | 日次 | 月次 | スライド/ジョブ | 同時実行 | APIキー | ペイロード | 公平利用 |
|---|---|---|---|---|---|---|---|---|
| Free Preview | 3回/分 | 10回/日 | 10回/月 | 20枚 | 1ジョブ | 1個 | 1 MB | 月10回のハードキャップ(超過後はアップグレード) |
| Founder Beta | 5回/分 | 50回/日 | 300回/月 | 50枚 | 2ジョブ | 3個 | 2 MB | 月300回のハードキャップ |
| Starter | 15回/分 | 300回/日 | 3,000回/月 | 100枚 | 5ジョブ | 10個 | 5 MB | 月3,000回のハードキャップ |
| Business | 60回/分 | 2,000回/日 | 20,000回/月 | 200枚 | 20ジョブ | 50個 | 10 MB | 月20,000回のハードキャップ |
| Enterprise / OEM | 120回/分 | 個別設計 | 個別設計 | 500枚 | 50ジョブ | 100個 | 25 MB | 個別契約 |
* remote MCPのexport toolはプランRPM、read-only toolは認証主体ごとに30回/分です。template publishとvalidateには別の環境設定可能な上限(既定値5回/分・12回/分)があります。initialize、tools/list等のprotocol messageはこれらのtool上限へ加算されません。
セキュリティ・制限
公開 API、Skills、MCP、Studio、Hosted Web Export は、同じ変換パイプラインの上にあります。実際に重要なのは、認証、ジョブ所有権、SVG 方針、ワーカー隔離、サーバー側制限の理解です。
認証と認可
REST API は API キー、remote MCP は商用 API キーまたは WorkOS 認証済みセッションを利用します。ジョブ参照は、そのジョブを作成した API キーまたは principal に紐付きます。
SVG と未信頼マークアップ
公開 API と MCP は受信HTMLをサニタイズし、インライン SVG を安全に処理します。SVG は高品質な PNG 画像に変換されます。
ワーカー隔離
プライベートワーカーは分離ブラウザコンテキストでレンダリングし、任意の外部ネットワーク要求を遮断し、リクエストボディ上限と job TTL を適用します。
利用制御
1分あたりのリクエスト数、日次ガードレール、月次の公平利用レビュー閾値、1ジョブあたりの最大スライド数、最大 payload サイズ、同時実行数はすべてサーバー側で強制されます。
本番運用での推奨事項
- API キーはシークレットとして扱い、露出時はダッシュボードからローテーションしてください。
- バックエンド自動化には REST API を使い、Hosted Web Export はファーストパーティのブラウザ用サーフェスとして扱ってください。
- status ポーリングはプラン上限に収まる間隔(通常は20秒から)で開始し、429では Retry-After に従ってください。
- スライドHTMLは明示サイズ、決定的な CSS、ランタイム依存の少ない構造にしてください。1600x900 はデフォルト例です。
- MCPが完成PPTXをinline配信する上限は2 MiBです。明示的に responseFormat: "base64" または "both" を指定していても、超過時は巨大な応答を返さず、機械可読な警告と署名付きdownload URLへ自動的に切り替わります。
- remote /mcpの認証済みHTTP POSTはJSON-RPC messageを最大32件、tools/callを1件まで受け付けます。追加のtool callは別POSTで送り、操作別rate limitが正しく適用されるようにしてください。
- エージェント連携では、ローカル stdio MCP と remote /mcp のどちらを使うかを事前に決めてください。
FAQ
他社のHTML-to-PPTXソリューションとの違いは?
html2pptx.app は、スライド全体を1枚のスクリーンショットにするのではなく、対応するテキスト、シンプルな図形、表、CSSプロパティをPowerPointオブジェクトへマッピングします。インラインSVG、アイコン、一部の複雑なリストは画像化されます。出力は公開HTML契約に従うため、エクスポート後に目視確認してください。
どんなHTMLでもPPTXに変換できますか?
安定した変換は保証されません。html2pptx.app は .slide クラス要素と明示サイズを持つスライド指向のHTMLに最適化されています。1600x900 はデフォルト例ですが、縦長やカスタムサイズにも対応しています。任意のWebページ、インタラクティブアプリ、スクロールベースのレイアウト、JavaScript依存のレンダリングを持つページは非対応です。HTML契約セクションに正確な要件が記載されています。
何が1枚のスライドになりますか?
.slide クラスを持つ各要素が出力PPTXの1スライドになります。HTMLに class="slide" を持つ要素が5つあれば、出力は5スライドになります。予測可能な結果のために、明確なスライド境界を定義してください。
エクスポート後のコンテンツはPowerPointで編集可能ですか?
対応テキストは編集可能なPowerPointテキストボックスになり、対応するシンプルな図形も調整できます。インラインSVG、検出されたアイコン、一部の複雑な構造は画像として出力されるため、テキストやベクターとしては編集できません。
エクスポートにはどのくらい時間がかかりますか?
所要時間はスライド数、レイアウトの複雑さ、画像処理によって変わります。プラン上限に収まる間隔でジョブ状態を確認し、429では Retry-After に従い、completed または failed で停止してください。
どのフォントに対応していますか?
Arial、Helvetica、Times New Romanなどは、レンダラーと対象PowerPoint環境に存在する場合に利用できます。公開RESTでは @font-face を除去し外部フォント取得を遮断するため、autoEmbedFonts でGoogle Fontsや任意のWebフォントURLを取得することはありません。適切なフォントスタックを指定し、代替・字形・改行位置を確認してください。
無料プランはありますか?
はい。Free PreviewではAPIキー1個・月10回まで、制限付きで API / Skills / MCP を利用できます。正確な上限はコードと GET /api/export/plans のレスポンスが正です。
スライドでSVGは使えますか?
はい。インラインSVGに対応しています。公開APIでは安全のためPNG画像に変換されます。
最大ファイルサイズは?
HTMLペイロードは5MB以下を推奨。生成されるPPTXファイルはコンテンツにより異なりますが、通常100KB〜10MBの範囲です。多数の高解像度画像をbase64で埋め込んだジョブはファイルサイズが大きくなります。大きな画像にはURL参照の使用を検討してください。
セキュリティ対策は?
複数の防御を実装しています。ワーカーの外部要求遮断、ジョブ所有者バインディング、APIキーのハッシュ保存、リクエストボディ上限、同時実行数制限、公開SVGのサニタイズとPNG化などです。バックエンド自動化では Hosted Web Export ではなく REST API を使うのが推奨です。
日本語テキストやCJK文字に対応していますか?
日本語、中国語、韓国語のテキストに対応しています。CSSでCJKフォントスタックを指定し(例: font-family: "Noto Sans JP", sans-serif)、対象PowerPoint環境で字形の有無と改行位置を確認してください。
エラーの対処方法は?
ジョブステータスエンドポイントを確認してください。statusが "failed" の場合、errorまたはmessageフィールドに人間が読める説明が含まれます。商用エクスポートのエラーはRFC 9457 Problem Detailsと後方互換用のerror・messageフィールドを使用しますが、一部の旧API・クリエイター向けAPIはより小さいJSONエラーを返します。一般的な問題: .slide要素の欠落 (400)、APIキーの不足・無効 (401/403)、レート制限超過 (429)、コンテンツの超過サイズ (413)。
CSS Gridで複雑なスライドレイアウトは作れますか?
対応するCSS Gridの範囲には grid-template-columns、grid-template-rows、gap、グリッド配置プロパティが含まれます。明示的なスライドサイズを使い、複雑なブラウザレイアウトや非対応プロパティの組み合わせは描画が異なる場合があるため、出力PPTXを確認してください。
ジョブ完了のWebhookはありますか?
はい。POST /api/export/jobs に callbackUrl(HTTPSのみ)を追加すると、jobId/status と、成功時の fileName または失敗時の message が通知されますが、これは配信ヒントです。現在、顧客が検証できるWebhook署名契約は公開していないため、コールバックを未認証として扱い、完全な結果は認証が必要な GET /api/export/jobs/{jobId} から取得してください。ステータスポーリングを正本として残し、プラン上限に収まる間隔と429時の Retry-After を守ってください。MCPの wait tool は一定間隔でポーリングし、通信・レート制限エラーを呼び出し元へ返します。
トラブルシューティング
| 問題 | 解決策 |
|---|---|
| ジョブが "queued" ステータスのまま | プライベートワーカーがオフラインまたは過負荷の可能性があります。30秒待ってリトライしてください。続く場合はダッシュボードからワーカーの状態を確認するか、サポートにお問い合わせください。 |
| スライドが空白で表示される | HTMLに class="slide" を持つ要素が含まれ、それらの要素に可視コンテンツがあることを確認。CSSがペイロードに含まれ、外部スタイルシートに依存していないかも確認。 |
| PPTXでフォントが異なる | 公開RESTは外部Webフォントを取得しません。レンダラーと対象PowerPoint環境の双方で利用可能なフォントスタックを使い、代替と改行位置を確認してください。 |
| 429レート制限エラー | Retry-After ヘッダーがある場合はその秒数を待ち、ステータス確認間隔を延ばしてください。上限が不足する場合はプラン変更を検討してください。 |
| レイアウトがブラウザプレビューと異なる | .slide要素にはインラインスタイルで明示サイズを指定してください。1600x900 はデフォルト例ですが、width / height / layout と一致するカスタム比率でも問題ありません。レスポンシブ/パーセントベースのレイアウト、メディアクエリ、ビューポート相対単位(vh、vw)は避けてください。 |
| 画像がPPTXに表示されない | 画像には絶対URL(https://...)またはbase64データURIを使用。相対パスやlocalhostのURLは失敗します。画像URLがワーカーから公開アクセス可能であることを確認。 |
| PPTXファイルサイズが大きすぎる | 大きなファイルは通常、埋め込みbase64画像や画像の多いコンテンツが原因。代わりにURL参照を使用するか、埋め込み前に画像を圧縮してください。 |