PetaCMS 無料で始める

導入ガイド

PetaCMS を既存サイトに導入する手順を解説します。所要時間は約5分です。

1 アカウント作成

以下いずれかの方法で登録できます。

  • メール + パスワード — 新規登録ページから登録、確認メールで認証
  • Google アカウント — ログイン画面の「Google でログイン」ボタンでワンクリック登録
  • メールログインリンク — ログイン画面でメールアドレスを入力すると、15分間有効なワンタイムリンクが届きます

14日間の無料トライアル付き。クレジットカードは不要です。

ログイン後、「新しいサイトを追加」またはサンドボックスからサイトを作成できます。

2 スクリプトタグを設置

管理画面の「埋め込みコード」ページに表示されるスクリプトタグを、 既存サイトの <head> または </body> の直前に追加します。

HTML

<!-- PetaCMS Widget Loader -->
<script
  src="https://cdn.peta-cms.com/widget.js"
  data-site-id="あなたのサイトID"
  defer
></script>

Shadow DOM で完全隔離されるため、既存の CSS に影響しません。

3 記事リストを表示する

お知らせやブログの一覧を表示したい場所に、以下の div タグを追加します。

HTML

<!-- PetaCMS: 記事リスト -->
<div data-petacms-posts data-limit="10"></div>

テンプレート

data-template 属性で表示スタイルを変更できます。

値 説明
list シンプルなリスト表示（デフォルト）
card カードグリッド表示
timeline タイムライン表示

例: カード表示で5件

<div data-petacms-posts data-template="card" data-limit="5"></div>

記事詳細ページを作る

例えば /blog/[slug]/ のようなパスで 記事の中身を表示したい場合は、そのページに以下を追加します。

記事詳細用 HTML（例: blog/[slug]/index.html）

<!-- PetaCMS: 記事詳細。slug は URL 末尾から自動取得 -->
<div data-petacms="post"></div>

slug を明示する場合は data-slug 属性で指定できます。 

<div data-petacms="post" data-slug="my-first-article"></div>

記事リストの data-base-path を 記事詳細ページのパス（例 /blog/）に合わせると、 リスト→詳細のリンクが自動生成されます。

3b スニペットを埋め込む

ページ内の任意のテキストやHTMLを管理画面からリモート更新できます。 お知らせバナーやキャンペーン情報の更新に最適です。

HTML

<!-- PetaCMS: スニペット -->
<div data-petacms="snippet" data-key="header-notice"></div>

data-key は管理画面のスニペット一覧で確認できます。

テンプレート記法

HTML 内に {{キー名}} と記述すると、 該当するスニペットのテキストに自動置換されます。

HTML 内にそのまま記述

<p>お問い合わせ: {{contact-email}}</p>
<p>営業時間: {{business-hours}}</p>

data 属性リファレンス

属性 用途 値の例
data-petacms-posts 記事一覧を表示 （値不要）
data-petacms="post" 記事詳細を表示 data-slug="my-article"
data-petacms="snippet" スニペットを表示 data-key="notice"
data-petacms="categories" カテゴリ一覧を表示 （値不要）
data-template 表示テンプレート list / card / timeline
data-limit 表示件数（最大100） 10
data-base-path 記事リンクのベースパス /blog/

Status API（Agency / Enterprise 限定）

PetaCMS は Agency / Enterprise プラン契約者向けに、 自サイトの稼働状況を取得できる公開エンドポイントを提供しています。 Pingdom / UptimeRobot / Datadog Synthetics など外形監視サービスから ポーリングして、稼働率や障害発生を検知する用途に利用できます。

Free / Starter / Pro プランでは利用できません（403 PLAN_FEATURE_LOCKED を返します）。

エンドポイント

GET https://api.peta-cms.com/sites/<SITE_ID>/status
Authorization: Bearer <YOUR_API_KEY>

API キーは管理画面の「設定 → API キー」から発行できます。 レスポンスは Cache-Control: public, max-age=60 で60秒キャッシュ可能です。

curl 例

bash

curl -sSf https://api.peta-cms.com/sites/site_xxx/status \
  -H "Authorization: Bearer petacms_key_xxxxxxxxxxxxxxxx" \
  | jq .

レスポンス例

JSON

{
  "siteId": "site_xxx",
  "status": "operational",
  "uptime_24h": 100.0,
  "uptime_7d": 99.97,
  "uptime_30d": 99.95,
  "incidents_open": 0,
  "checks": {
    "ssr":        { "status": "operational", "latency_p50_ms": 45, "latency_p95_ms": 120 },
    "admin_api":  { "status": "operational", "latency_p50_ms": 30, "latency_p95_ms": 90 },
    "widget_cdn": { "status": "operational", "latency_p50_ms": 12, "latency_p95_ms": 40 }
  },
  "last_checked_at": "2026-04-15T10:00:00.000Z"
}

※ 現行の MVP 実装では uptime_* は固定値 100.0、latency_* は null を返します。 今後 UptimeRobot / Analytics Engine 連携により実値化予定です。

status フィールドの値

値 意味
operational 全系統正常稼働中
degraded 一部サービスで性能劣化（オープン中のインシデントあり）
outage 主要機能停止中

Pingdom / UptimeRobot 設定例

UptimeRobot (HTTP(s) keyword monitor)

  • URL: https://api.peta-cms.com/sites/<SITE_ID>/status
  • Monitoring Interval: 5分推奨（60秒キャッシュのため高頻度でも無駄）
  • HTTP Headers: Authorization: Bearer petacms_key_xxxxx
  • Keyword to find: "status":"operational"
  • Alert When: Keyword Not Exists

Pingdom (Transaction / HTTP check)

  • Check Type: HTTP(S)
  • Check interval: 5 分
  • Custom HTTP Headers: 同上
  • Should contain: "status":"operational"

Datadog Synthetics

  • Test type: API test (HTTP)
  • Assertions: body.status is operational, body.incidents_open is 0

よくある質問

CSP（Content Security Policy）を設定している場合は？

script-src に https://cdn.peta-cms.com を、 connect-src に https://cdn.peta-cms.com を追加してください。

既存の CSS と干渉しますか？

いいえ。PetaCMS のウィジェットは Shadow DOM 内でレンダリングされるため、 既存サイトの CSS と完全に隔離されます。

サイトの表示速度への影響は？

widget.js は 1KB 未満で defer 属性付きのため、 ページの初期表示をブロックしません。コンテンツは Cloudflare のエッジから配信されます。

準備はできましたか？

14日間の無料トライアルで、今すぐ始められます。

無料で始める