API Platform
1# 1. MCP サーバーを登録 2# Claude Codeユーザーはこの1行でOK 3npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude 4 5# 2. Skills をインストール(使うツールの行だけ実行) 6npx skills add https://html2pptx.app -a claude-code # Claude Code 7npx skills add https://html2pptx.app -a codex # Codex 8npx skills add https://html2pptx.app -a cursor # Cursor 9npx skills add https://html2pptx.app -a windsurf # Windsurf 10 11# 3. あとは自然言語で指示するだけ 12# 「この会議メモからプレゼンを作って」 13# → エージェントが自動で HTML 生成 → PPTX 変換
サービス概要
html2pptx.app とは
html2pptx.app はHTML/CSSを完全に編集可能なPowerPointファイルに変換します -- スクリーンショットではありません。テキストは編集可能なまま、レイアウトは保持され、Flexbox、Grid、グラデーション、シャドウなどのCSSプロパティが忠実に再現されます。結果は本番利用可能なプレゼンテーションファイルです。
アーキテクチャ
html2pptx.app は信頼性とスケーラビリティのために関心事を分離した4段階パイプラインを採用しています:
3つの統合チャネル
REST API
HTML-to-PPTX エクスポートジョブの作成とステータスポーリングのための標準HTTPエンドポイント。バックエンド統合、社内ツール、SaaS組み込みに最適。curl、JavaScript、Python、Go、Rubyなど、あらゆる言語で利用可能。テンプレート公開は 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、テンプレート公開に使い、local stdio MCP はローカルHTMLを edit-slide で開く場合だけ使います。HTMLテンプレートdraftは、検証後にremote MCP経由で作成します。
html2pptx.app と他社の比較
| 項目 | html2pptx.app | 他の一般的な方法 |
|---|---|---|
| 変換方式 | 完全に編集可能なPowerPoint出力 | スクリーンショット/ラスター画像 |
| テキスト編集 | 完全に編集可能なテキストボックス | フラット画像 -- テキスト編集不可 |
| CSS対応 | Flexbox、Grid、グラデーション、シャドウ、transform | 限定的または非対応 |
| SVG処理 | 高品質なPNG画像に変換 | PNG画像に変換 |
| ファイルサイズ | 通常はコンパクト(埋め込み画像量に依存) | 大きい(埋め込み画像) |
| フォント埋め込み | 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は高品質な画像に変換され、安定した出力を実現
- Webフォント自動埋め込み(Google Fonts、カスタムフォント)
- Flexbox / CSS Grid レイアウトのPowerPointへの忠実な再現
- グラデーション・シャドウ・border-radiusのPowerPointでの忠実な再現
- Base64 / 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利用が必要になったら Founder Beta へ進みます。
APIキーの取得
ダッシュボードに移動し、「APIキーを作成」をクリック。コピーして安全に保管してください。キーは一度だけ表示されます。sk_live_ で始まるキーはシークレットとして扱ってください。
最初のリクエストを送信
HTMLスライドコンテンツを /api/export/jobs にPOSTします。Authorizationヘッダーにアプリキーを含めてください。APIはエクスポートを追跡するためのjobIdを返します。
PPTXをダウンロード
GET /api/export/jobs/{jobId} をポーリングし、statusが "completed" になるまで待ちます(通常5-15秒)。レスポンスに含まれる downloadUrl から .pptx ファイルをダウンロードします。responseFormat: "base64" を指定すれば 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 "responseFormat": "url", 11 "metadata": { 12 "channel": "api", 13 "source": "docs-quickstart" 14 } 15 }' 16 17# Response (200 OK): 18# { 19# "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32", 20# "status": "queued", 21# "createdAt": "2026-04-02T10:30:00Z", 22# "fileName": "quarterly-review.pptx", 23# "slideCount": 1 24# } 25# Response headers include: x-request-id: req_abc123... 26 27# Poll for completion: 28curl -s https://html2pptx.app/api/export/jobs/5d934729-a0db-4aa9-bc65-e7a3e7e52b32 \ 29 -H "Authorization: Bearer sk_live_xxxx" 30 31# Response (200 OK, when completed with responseFormat "url"): 32# { 33# "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32", 34# "status": "completed", 35# "createdAt": "2026-04-02T10:30:00Z", 36# "completedAt": "2026-04-02T10:30:12Z", 37# "fileName": "quarterly-review.pptx", 38# "slideCount": 1, 39# "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation", 40# "downloadUrl": "https://storage.example.com/quarterly-review.pptx?token=..." 41# }
APIリファレンス
接続情報
ベースURL: ベースURL: https://html2pptx.app
Content-Type: すべてのリクエスト・レスポンスボディは application/json を使用します。作成エンドポイントは html/css/fileName に加えて optional な width / height / layout もトップレベルで受け取り、payload ラッパーは使いません。
認証
すべての商用APIエンドポイントは認証が必要です。以下のいずれかのヘッダーに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 が含まれます。responseFormat: "base64" を指定した場合は fileBase64 も含まれます。
- ジョブ参照は、作成した API キーまたは remote MCP principal に結び付けられています。別キーでは同じ jobId を読めません。
- スライド数制限は、サニタイズ後の .slide 数からサーバー側で再計算され、クライアント申告値は使われません。
レート制限
すべてのREST APIレスポンスには、現在の1分ウィンドウ、日次上限、月次の公平利用状態を示すヘッダーが含まれます。REST は API キー単位、remote MCP は認証済み principal 単位で制限されます。
| Header | 説明 |
|---|---|
x-request-id | すべてのAPIレスポンスに含まれるリクエスト識別子。デバッグやサポートへの問い合わせ時に有用。 |
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/export/jobsエクスポートジョブの作成
トップレベルの HTML/CSS フィールドと optional なプレゼンサイズ指定から新しいPPTXエクスポートジョブを作成します。レスポンスは queued 状態のジョブ記述子で、最終結果は GET /api/export/jobs/{jobId} で取得します。
リクエストボディ
fileNamestring生成されるPPTXの出力ファイル名。.pptx拡張子で終わる必要あり。
デフォルト: export.pptx
htmlstringRequired.slideクラスを持つ要素を1つ以上含むHTMLコンテンツ。各 .slide が1枚のPPTXスライドに変換されます。
cssstring送信したHTMLにグローバル適用されるCSS。
デフォルト: ""
autoEmbedFontsbooleanフォントを検出してPPTXへ埋め込むかどうか。
デフォルト: false
widthnumberPPTXスライド幅(インチ)。カスタムサイズ指定時は height とセットで使用。
heightnumberPPTXスライド高さ(インチ)。カスタムサイズ指定時は width とセットで使用。
layoutstringPPTXレイアウトのプリセットまたはカスタム名。代表例: LAYOUT_16x9, LAYOUT_16x10, LAYOUT_4x3, LAYOUT_WIDE。
metadataobjectワーカーへ透過的に渡される任意メタデータ。追跡用途に便利です。
デフォルト: {}
responseFormatstring完成したPPTXの配信方法を制御。"url"(デフォルト)は署名付きダウンロードURL、"base64"はインラインbase64、"both"は両方を返します。非推奨の includeFileBase64 パラメータを置き換えます。
デフォルト: "url"
callbackUrlstringジョブ完了/失敗時にWebhook POSTを受け取るHTTPS URL。ワーカーがジョブ結果をこのURLにPOSTし、x-signature-sha256 HMACヘッダーで検証可能。https:// URLのみ受け付け。
エラーコード
400無効なリクエストボディ -- 必須フィールドの欠落または JSON 形式不正。401APIキーが未設定または無効。AuthorizationまたはX-API-Keyヘッダーに有効なsk_live_キーが設定されているか確認。403APIキーにこの操作の権限がない。プラン制限またはキースコープを確認。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" になるまでポーリングしてください。REST API では completed 時に fileBase64 が返ります。
パスパラメータ
jobIdstringRequiredPOST /api/export/jobs から返されたジョブID。
ステータス値
queuedジョブが処理キューで待機中。
processingワーカーがHTMLのレンダリングとPPTXシェイプへの変換を実行中。
completed変換が正常に完了。fileBase64 と mimeType が利用可能。
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": 100, 11 "monthlyRequestLimit": 0, 12 "monthlyReviewThreshold": 1000, 13 "monthlyUpgradePromptThreshold": 2000, 14 "maxSlidesPerJob": 50, 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
- フォント: システムフォント (Arial、Helvetica、Noto Sans JP) はデフォルトで動作。Google Fontsやカスタム@font-face宣言にはautoEmbedFontsを有効化
- 画像: base64データURIと絶対URLの両方に対応。相対パスは失敗する -- 必ず絶対URLを使用
- SVG: インラインSVG要素に対応。高品質なPNG画像に変換されます
- 使用不可: scriptタグ、iframe、canvas要素、アンカータグ、form要素、SVG外部参照、CSSアニメーション、@keyframes、ランタイム依存のstate
- ネスト: 深くネストされた要素(10レベル超)は出力品質に影響する可能性あり。HTML構造はできるだけフラットに
- テキスト折り返し: テキストボックスはデフォルトで折り返しなし(nowrap)。長い段落など折り返しが必要な場合は、その要素に white-space: normal を指定してください
エラーレスポンス形式
すべてのエラーレスポンスはRFC 9457 Problem Details形式に従い、後方互換性のためのレガシーフィールドも含みます:
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要素
各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画像に変換されます。 |
canvas | 画像(PNG) | Canvas内容はPNG画像として埋め込まれます。 |
アイコン要素(FontAwesome, Material Icons等) | 画像 | アイコンフォントは自動検出され、画像に変換されます。 |
使用禁止要素
以下の要素はセキュリティと互換性のため、入力サニタイズ時に自動的に除去されます:
script, iframe, object, embedセキュリティ: アクティブコンテンツを除去
link, meta, baseセキュリティ: 外部参照を除去
formインタラクティブ要素はPPTX非対応
styleインラインスタイルまたはcssパラメータを使用してください
aセキュリティ: アンカータグを除去
foreignobject, image (SVG), feimage, useSVG外部参照を除去
animate, animateMotion, animateTransform, set, discard, mpathSVGアニメーションは非対応
Skills統合ガイド
インストール
Step 1: skill一覧を確認
npx skills add https://html2pptx.app --listStep 2: Claude Code にインストール
npx skills add https://html2pptx.app -a claude-codeStep 2: Codex にインストール
npx skills add https://html2pptx.app -a codexStep 2: Cursor にインストール
npx skills add https://html2pptx.app -a cursorStep 2: Windsurf にインストール
npx skills add https://html2pptx.app -a windsurfその他 / 複数指定は対話形式で選択
npx skills add https://html2pptx.appStep 3: Claude Codeユーザーはこの1行でOK
npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claudeSkillsとは
Skillsは、AIコーディングエージェントにドメイン固有の知識とワークフローを追加するパッケージ機能です。html2pptx.app のスキルをインストールすると、エージェントがスライド用HTMLの作成方法を理解し、PPTX変換契約に対する検証を行い、必要に応じてローカル Visual Editor を開き、remote MCP または local MCP のワークフローでエクスポートし、内蔵のremote MCP公開ワークフローでHTMLテンプレートdraftを作成できます。自然言語の指示だけで、本番品質のPowerPointファイルや作成者所有のHTML draftを生成できます。
仕組み
スキルには4つのコア機能がバンドルされています: (1) HTMLオーサリング知識 -- 高品質なPowerPointに変換されるHTML/CSSの書き方ルール、(2) MCPベースのエクスポート自動化 -- remote MCP または local stdio MCP に接続してジョブ作成・ステータスポーリング・結果取得を行う仕組み、(3) ローカル Visual Editor -- ユーザーがPPTX出力前にHTMLを目視確認・微調整したい場合に edit-slide を localhost bridge 経由で開く仕組み、(4) テンプレート公開 -- HTML draft を remote MCP の validate/publish ループに限定する仕組みです。local MCP の追加はユーザーのMCP設定を変更するため、エージェントは必ず事前に確認します。
Claude Code、Cursor、GitHub Copilot、Windsurf、Cline、Codex 等 18以上のAIエージェントに対応。使うエージェントに対応する skills CLI コマンドを選ぶか、その他の対応エージェントは対話形式で選択します。
ワークフロー
- 1エージェントがユーザーリクエストを受信(例: 「この会議メモからデッキを作成して」)
- 2エージェントがスキル定義を読み取り、html2pptx.appのHTML契約を理解
- 3エージェントが .slide クラス要素と明示サイズ付きのスライドセーフHTMLを生成。1600x900 はデフォルト例
- 4エージェントが変換契約に対してマークアップを検証
- 5目視確認が必要な場合は、CLI または local stdio MCP で edit-slide を開き、編集後のHTMLをディスクから再読み込み
- 6エージェントが remote MCP または local stdio 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を複数タブで編集して競合しないよう、エディタはタブロックを使います。編集権限のあるタブを使うか、画面上の移譲操作を行ってください。
セットアップ
MCP + スキルをインストール
Claude Code、Codex、Cursor、Windsurf のうち、実際に使うエージェントのコマンドを選んで実行してください。その他の対応エージェントや複数指定の場合は対話形式で選択します。--yes は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。
1# 使うエージェントのコマンドを選択 2# Claude Code 3npx skills add https://html2pptx.app -a claude-code 4 5# Codex 6npx skills add https://html2pptx.app -a codex 7 8# Cursor 9npx skills add https://html2pptx.app -a cursor 10 11# Windsurf 12npx skills add https://html2pptx.app -a windsurf 13 14# インストールせずに公開Skillを確認 15npx skills add https://html2pptx.app --list 16 17# その他のエージェント / 複数指定は対話形式で選択 18npx skills add https://html2pptx.app 19 20# Claude Codeユーザーはこの1行でOK 21npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude
APIキーの設定
html2pptx.app ダッシュボードでAPIキーを作成し、環境変数に設定します。
1# 環境変数にAPIキーを設定 2export HTML2PPTX_API_KEY="sk_live_xxxx" 3 4# または .env ファイルに追加 5echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env
使ってみる
エディタを起動して、自然言語でスライド作成を指示するだけ。スキルが自動でHTMLの生成・検証・API呼び出し・PPTX出力まで処理します。
1# 例: Claude Code でスライド作成 → PPTX出力 2 3> 「この会議メモから5枚のプレゼンを作って、PPTXで出力して」 4 5# エージェントが自動で実行するフロー: 6# 1. SKILL.md を読み込み、html2pptx.app のHTML契約を理解 7# 2. 会議メモを解析し、スライド構成を設計 8# 3. .slide クラス + 明示サイズ付きのスライドセーフHTMLを生成(1600x900 はデフォルト例) 9# 4. diagnose でマークアップを検証(safe / needs-rewrite / out-of-scope) 10# 5. html2pptx.app API にエクスポートジョブを送信 11# 6. 完了をポーリングし、completed payload をユーザーに返却 12 13# APIキーの設定(環境変数) 14export HTML2PPTX_API_KEY="sk_live_xxxx"
利用可能なスキル
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契約に対してプリフライトチェックし、無効な入力によるエクスポートクォータの無駄遣いを防止。
テンプレート公開
マーケットプレイス向けHTML draftは、html2pptx スキル内のAIセキュリティ事前診断、remote MCP検証、draft作成フローで扱います。Web、CLI、local MCP、汎用RESTではテンプレートdraftを作成しません。
MCP統合ガイド
インストール
Claude Codeユーザーはこの1行でOK(remote export + local edit-slide)
npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claudeMCPとは
MCP (Model Context Protocol) は、標準化されたツールインターフェースを通じてAIエージェントにバックエンド機能を公開するオープンプロトコルです。html2pptx.app は2種類のMCPサーフェスを提供します。remote HTTP MCP (`/mcp`) はエクスポート、usage、docs、templates、catalog、HTMLテンプレート公開に使います。local stdio MCP は同じエクスポート系ツールに加えて、localhost bridge 経由でローカルHTMLを edit-slide で開くために使います。HTMLをPPTXに変換する、またはHTMLテンプレートdraftを作るなら remote MCP、ユーザーPC上の `.html` を開いてプレビュー・編集するなら local MCP を選びます。local MCP はテンプレート公開には使いません。
インストール & セットアップ
Claude Codeユーザーは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、timeoutMs、responseFormat ("url" | "base64" | "both") などのオプションにも対応。 |
html2pptx_get_export_job | jobId を指定してジョブの現在状態を取得。 |
html2pptx_wait_for_export_job | 完了または失敗までジョブを自動ポーリング。内部でリトライとバックオフを処理。 |
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で押します。 |
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ドキュメントを提供します。
簡潔なインデックス(約100行)— サービス概要、API仕様、対応CSS一覧
完全なドキュメント(約900行)— 全セクションの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等)向けのダイレクトモード(フラグ指定)の両方に対応しています。テンプレートdraft作成はHTMLのみremote MCP限定で、CLIでは意図的に拒否します。
初期設定
ファイルを変換する前に、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 | 無効化されています。テンプレート公開はHTMLのみremote MCP経由です。 |
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
活用事例
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 | 日100件 / 3 rpm | 50枚/ジョブ | コミュニティ | 0円 |
| Founder Beta | 日300件 / 5 rpm | 100枚/ジョブ | セルフサービス | 980円/月 |
| Starter | 日1,000件 / 15 rpm | 200枚/ジョブ | メール | 2,980円/月 |
| Business | 日5,000件 / 60 rpm | 300枚/ジョブ | 優先 | 9,800円/月 |
| Enterprise / OEM | 個別設計 | 500枚+/ジョブ | 専任 | 49,800円/月〜 |
ダッシュボードからいつでもアップグレード可能。変更は即時反映され、日割り請求となります。ダウングレードは現在の請求期間終了時に適用。
プラン別レート制限・クォータ
各プランには以下の制限が適用されます。全チャネル(REST API、Skills、MCP)で共通のクォータです。
| プラン | RPM | 日次 | 月次 | スライド/ジョブ | 同時実行 | APIキー | ペイロード | 公平利用 |
|---|---|---|---|---|---|---|---|---|
| Free Preview | 3回/分 | 100回/日 | 無制限* | 50枚 | 1ジョブ | 1個 | 1 MB | 月1,000回でレビュー、月2,000回でアップグレード提案 |
| Founder Beta | 5回/分 | 300回/日 | 無制限* | 100枚 | 2ジョブ | 3個 | 2 MB | 月3,000回でレビュー、月5,000回でアップグレード提案 |
| Starter | 15回/分 | 1,000回/日 | 無制限* | 200枚 | 5ジョブ | 10個 | 5 MB | 月10,000回でレビュー、月20,000回でアップグレード提案 |
| Business | 60回/分 | 5,000回/日 | 無制限* | 300枚 | 20ジョブ | 50個 | 10 MB | 月50,000回でレビュー、月100,000回でアップグレード提案 |
| Enterprise / OEM | 120回/分 | 個別設計 | 個別設計 | 500枚 | 50ジョブ | 100個 | 25 MB | 個別契約 |
* 無制限 = 公平利用ポリシーの範囲内です。MCPプロトコルのリクエストはプランRPMの3倍でレート制限されます(initialize、tools/list等のプロトコルオーバーヘッド分)。
セキュリティ・制限
公開 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 ポーリングは 2 秒程度の間隔とバックオフを前提にしてください。
- スライドHTMLは明示サイズ、決定的な CSS、ランタイム依存の少ない構造にしてください。1600x900 はデフォルト例です。
- fileBase64 は大きくなる場合があります。保存側はバイナリ安全なコードパスで処理してください。
- エージェント連携では、ローカル stdio MCP と remote /mcp のどちらを使うかを事前に決めてください。
FAQ
他社のHTML-to-PPTXソリューションとの違いは?
ほとんどの代替サービスはHTMLのスクリーンショットを撮り、各スライドにフラット画像として埋め込みます。html2pptx.app はネイティブシェイプ変換を行います -- CSSを解析し、flexbox、グラデーション、border-radius、シャドウなどのプロパティをネイティブPPTX Officeシェイプにマッピングします。結果は完全に編集可能なテキスト、スケーラブルなベクターグラフィックス、小さいファイルサイズです。
どんなHTMLでもPPTXに変換できますか?
安定した変換は保証されません。html2pptx.app は .slide クラス要素と明示サイズを持つスライド指向のHTMLに最適化されています。1600x900 はデフォルト例ですが、縦長やカスタムサイズにも対応しています。任意のWebページ、インタラクティブアプリ、スクロールベースのレイアウト、JavaScript依存のレンダリングを持つページは非対応です。HTML契約セクションに正確な要件が記載されています。
何が1枚のスライドになりますか?
.slide クラスを持つ各要素が出力PPTXの1スライドになります。HTMLに class="slide" を持つ要素が5つあれば、出力は5スライドになります。予測可能な結果のために、明確なスライド境界を定義してください。
エクスポート後のコンテンツはPowerPointで編集可能ですか?
はい、ほとんどの場合。テキストは編集可能なテキストボックスに変換され、シンプルな図形もPowerPoint上で編集できます。インラインSVGは高品質なPNG画像に変換されます。
エクスポートにはどのくらい時間がかかりますか?
単一スライドのジョブは通常3-5秒で完了します。マルチスライドデッキ(10-50スライド)は、複雑さ、画像数、フォント埋め込みに応じて8-20秒かかります。ワーカーは可能な場合スライドを並列処理します。最適なレスポンシブ性のため、ジョブステータスエンドポイントを2秒間隔でポーリングしてください。
どのフォントに対応していますか?
システムフォント(Arial、Helvetica、Times New Romanなど)はデフォルトで動作します。Webフォントの場合、autoEmbedFonts: true を有効にしてください -- html2pptx.app がGoogle Fontsやカスタム@font-face URLからフォントファイルをダウンロードしてPPTXに埋め込みます。Noto Sans JP、游ゴシック、メイリオ、ヒラギノなどの日本語フォントにも完全対応しています。
無料プランはありますか?
はい。現在の公開カタログには Early Access ティアがあり、制限付きで 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)、autoEmbedFontsを有効にしてフォントがインストールされていないマシンでもポータブルなレンダリングを確保してください。
エラーの対処方法は?
ジョブステータスエンドポイントを確認してください。statusが "failed" の場合、errorフィールドに人間が読める説明が含まれます。すべてのAPIエラーはRFC 9457 Problem Details形式に準拠し、type、status、title、detail、instanceフィールドに加え、後方互換のためのerrorとmessageフィールドも返します。一般的な問題: .slide要素の欠落 (400)、期限切れAPIキー (401)、レート制限超過 (429)、コンテンツの超過サイズ (413)。
CSS Gridで複雑なスライドレイアウトは作れますか?
はい。CSS Gridは grid-template-columns、grid-template-rows、gap、グリッド配置プロパティを含め完全に対応しています。マルチカラムレイアウト、ダッシュボードスタイルのカード、複雑なビジュアル配置を簡単に作成でき、PPTXにクリーンに変換されます。
ジョブ完了のWebhookはありますか?
はい。POST /api/export/jobs のリクエストボディに callbackUrl フィールド(HTTPSのみ)を追加してください。ジョブ完了または失敗時に、ワーカーがコールバックURLにジョブ結果全体をPOSTします(x-signature-sha256 HMACヘッダー付き)。あるいは従来通り GET /api/export/jobs/{jobId} を2秒間隔でポーリングすることも可能です。MCPユーザーの場合、html2pptx_wait_for_export_job がポーリングを自動処理します。
トラブルシューティング
| 問題 | 解決策 |
|---|---|
| ジョブが "queued" ステータスのまま | プライベートワーカーがオフラインまたは過負荷の可能性があります。30秒待ってリトライしてください。続く場合はダッシュボードからワーカーの状態を確認するか、サポートにお問い合わせください。 |
| スライドが空白で表示される | HTMLに class="slide" を持つ要素が含まれ、それらの要素に可視コンテンツがあることを確認。CSSがペイロードに含まれ、外部スタイルシートに依存していないかも確認。 |
| PPTXでフォントが異なる | autoEmbedFonts: true を有効にしてWebフォントを埋め込み。カスタムフォント使用時は@font-face URLが公開アクセス可能であることを確認。最大の互換性にはArial、Noto Sansなどのシステムセーフフォントを使用。 |
| 429レート制限エラー | X-RateLimit-Resetヘッダーでウィンドウリセット時刻を確認。ポーリングロジックに指数バックオフを実装。より高いリクエスト制限にはプランのアップグレードを検討。 |
| レイアウトがブラウザプレビューと異なる | .slide要素にはインラインスタイルで明示サイズを指定してください。1600x900 はデフォルト例ですが、width / height / layout と一致するカスタム比率でも問題ありません。レスポンシブ/パーセントベースのレイアウト、メディアクエリ、ビューポート相対単位(vh、vw)は避けてください。 |
| 画像がPPTXに表示されない | 画像には絶対URL(https://...)またはbase64データURIを使用。相対パスやlocalhostのURLは失敗します。画像URLがワーカーから公開アクセス可能であることを確認。 |
| PPTXファイルサイズが大きすぎる | 大きなファイルは通常、埋め込みbase64画像や画像の多いコンテンツが原因。代わりにURL参照を使用するか、埋め込み前に画像を圧縮してください。 |