埋め込みウィジェット

ウェブサイト用の埋め込みウィジェットを作成・管理します。ウィジェットは、単一のスクリプトタグで任意のウェブページに統合できる、すぐに使える占星術機能のUIコンポーネントを提供します。

必要なモジュール

すべてのウィジェットエンドポイントには、組織で module:embeddable-widgets モジュールが有効になっている必要があります。

ウィジェットタイプ

アクティブなモジュールに基づいて、以下のウィジェットタイプが利用可能です：

タイプ	説明	必要なモジュール
`natal`	インタラクティブなネイタルチャート	`natal:calc`
`synastry`	シナストリー比較チャート	`synastry:calc`
`transit`	トランジットチャートオーバーレイ	`transit:calc`
`composite`	コンポジット関係チャート	`composite:calc`
`moonphase`	月の満ち欠け表示	`moonphase:calc`
`daily-horoscope`	全星座の毎日のホロスコープ	`module:daily-report`
`numerology`	数秘術プロファイルフォーム	`module:numerology`
`compatibility`	太陽サインの相性	`compatibility:calc`
`moon-calendar`	月間月カレンダー	`moon-calendar:calc`

ウィジェット管理

ウィジェットの一覧

bash

curl "https://api.astroapi.cloud/api/widgets" \
  -H "X-Api-Key: your-api-key"

ウィジェットの取得

bash

curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key"

ウィジェットの作成

ウィジェットはJSON:API形式を使用して作成されます：

bash

curl -X POST "https://api.astroapi.cloud/api/widgets" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/vnd.api+json" \
  -d '{
    "data": {
      "type": "widgets",
      "attributes": {
        "name": "My Natal Chart Widget",
        "widgetType": "natal",
        "allowedDomains": ["example.com", "www.example.com"],
        "customization": {
          "language": "en",
          "layout": "card",
          "colors": {
            "primary": "#5b2d8e",
            "background": "#ffffff",
            "text": "#1a1a1a"
          },
          "widgetOptions": {
            "showAspects": true,
            "showPoints": true,
            "showHouses": true,
            "chartSize": 500,
            "theme": "light"
          }
        }
      }
    }
  }'

ウィジェットの更新

bash

curl -X PATCH "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/vnd.api+json" \
  -d '{
    "data": {
      "type": "widgets",
      "id": "wgt_abc123",
      "attributes": {
        "name": "Updated Widget Name",
        "customization": {
          "language": "nl"
        }
      }
    }
  }'

ウィジェットの削除

bash

curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key"

ウィジェットレスポンス

json

{
    "data": {
        "type": "widgets",
        "id": "wgt_abc123",
        "attributes": {
            "name": "My Natal Chart Widget",
            "widgetType": "natal",
            "allowedDomains": ["example.com", "www.example.com"],
            "embedCode": "<script src=\"https://cdn.astroapi.cloud/widget.js\" data-widget-id=\"wgt_abc123\"></script>",
            "customization": {
                "language": "en",
                "layout": "card",
                "colors": {
                    "primary": "#5b2d8e",
                    "background": "#ffffff",
                    "text": "#1a1a1a"
                },
                "widgetOptions": {
                    "showAspects": true,
                    "showPoints": true,
                    "showHouses": true,
                    "chartSize": 500,
                    "theme": "light"
                }
            },
            "createdAt": "2024-06-15T12:00:00Z",
            "updatedAt": "2024-06-15T12:00:00Z"
        }
    }
}

APIキーの再生成

ウィジェットの埋め込みAPIキーを再生成する。キーが漏洩した場合に使用してください：

bash

curl -X POST "https://api.astroapi.cloud/api/widgets/wgt_abc123/regenerate-key" \
  -H "X-Api-Key: your-api-key"

キーのローテーション

キーを再生成した後、古いキーを使用した既存の埋め込みは直ちに機能しなくなります。埋め込みコードを更新する必要はありません — ウィジェットIDは同じままです。

利用可能なウィジェットオプション

アクティブなモジュールに基づいて、組織で利用可能なウィジェットタイプを取得する：

bash

curl "https://api.astroapi.cloud/api/widgets/options" \
  -H "X-Api-Key: your-api-key"

レスポンス

json

{
    "data": {
        "availableTypes": ["natal", "moonphase", "daily-horoscope"],
        "planFeatures": {
            "canRemoveBranding": false,
            "canUseCustomLogo": false,
            "canUseCustomCss": true,
            "maxDomains": 5
        }
    }
}

プラン機能

機能	説明
`canRemoveBranding`	AstroAPIのブランディングを非表示にできるかどうか
`canUseCustomLogo`	デフォルトの代わりにカスタムロゴを表示できるかどうか
`canUseCustomCss`	ウィジェットにカスタムCSSを注入できるかどうか
`maxDomains`	ウィジェットあたりの許可ドメインの最大数

カスタマイズオブジェクト

customization オブジェクトはウィジェットの外観と動作を制御します：

json

{
    "colors": {
        "primary": "#5b2d8e",
        "secondary": "#a07cc5",
        "background": "#ffffff",
        "text": "#1a1a1a",
        "border": "#e0e0e0"
    },
    "fonts": {
        "family": "Inter, sans-serif",
        "size": "14px"
    },
    "borders": {
        "radius": "8px",
        "width": "1px"
    },
    "spacing": {
        "padding": "16px",
        "gap": "12px"
    },
    "shadows": {
        "card": "0 2px 8px rgba(0,0,0,0.1)"
    },
    "layout": "card",
    "interaction": {
        "allowUserInput": true,
        "showTooltips": true
    },
    "branding": {
        "showPoweredBy": true,
        "logoUrl": null
    },
    "language": "en",
    "customCss": ".astroapi-widget { font-weight: 500; }",
    "widgetOptions": {
        "showAspects": true,
        "showPoints": true,
        "showHouses": true,
        "chartSize": 500,
        "theme": "light"
    }
}

カスタマイズフィールド

フィールド	型	説明
`colors.primary`	string	プライマリアクセントカラー（16進数）
`colors.secondary`	string	セカンダリアクセントカラー（16進数）
`colors.background`	string	ウィジェット背景色（16進数）
`colors.text`	string	メインテキスト色（16進数）
`colors.border`	string	ボーダー色（16進数）
`fonts.family`	string	CSSのfont-family値
`fonts.size`	string	ベースフォントサイズ（CSS値）
`borders.radius`	string	カードと入力フィールドのボーダー半径（CSS値）
`borders.width`	string	ボーダー幅（CSS値）
`spacing.padding`	string	内部パディング（CSS値）
`spacing.gap`	string	要素間のギャップ（CSS値）
`shadows.card`	string	カード要素のCSS box-shadow
`layout`	string	ウィジェットのレイアウトスタイル（以下を参照）
`interaction.allowUserInput`	boolean	ユーザーが独自の出生データを入力できるかどうか
`interaction.showTooltips`	boolean	ホバー時にツールチップを表示する
`branding.showPoweredBy`	boolean	「Powered by AstroAPI」バッジを表示する
`branding.logoUrl`	string \| null	カスタムロゴURL（`canUseCustomLogo` が必要）
`language`	string	表示言語コード
`customCss`	string \| null	カスタムCSSの注入（`canUseCustomCss` が必要）
`widgetOptions.showAspects`	boolean	チャートにアスペクトラインを表示する
`widgetOptions.showPoints`	boolean	チャートに惑星シンボルを表示する
`widgetOptions.showHouses`	boolean	チャートにハウス区分を表示する
`widgetOptions.chartSize`	number	チャートサイズ（ピクセル）
`widgetOptions.theme`	string	カラーテーマ（`"light"` または `"dark"`）

レイアウトオプション

値	説明
`compact`	最小スペース、サイドバーに適している
`card`	影付きの角丸カード（デフォルト）
`full`	全幅、ボーダーなし
`minimal`	背景なし、ボーダーレス

ウィジェットの埋め込み

ウィジェットを作成した後、レスポンスから embedCode をコピーして、ウェブサイトのHTMLに貼り付けてください：

html

<!-- ウィジェットを表示したい場所に配置する -->
<div id="astroapi-widget-container"></div>

<!-- ウィジェットスクリプトを読み込む -->
<script
    src="https://cdn.astroapi.cloud/widget.js"
    data-widget-id="wgt_abc123">
</script>

ドメインの許可リスト

ウィジェットは allowedDomains にリストされているドメインでのみ読み込まれます。ウィジェットを埋め込む予定のすべてのドメイン（www バリアントを含む）を追加してください。

埋め込みウィジェット ​

ウィジェットタイプ ​

ウィジェット管理 ​

ウィジェットの一覧 ​

ウィジェットの取得 ​

ウィジェットの作成 ​

ウィジェットの更新 ​

ウィジェットの削除 ​

ウィジェットレスポンス ​

APIキーの再生成 ​

利用可能なウィジェットオプション ​

レスポンス ​

プラン機能 ​

カスタマイズオブジェクト ​

カスタマイズフィールド ​

レイアウトオプション ​

ウィジェットの埋め込み ​

埋め込みウィジェット

ウィジェットタイプ

ウィジェット管理

ウィジェットの一覧

ウィジェットの取得

ウィジェットの作成

ウィジェットの更新

ウィジェットの削除

ウィジェットレスポンス

APIキーの再生成

利用可能なウィジェットオプション

レスポンス

プラン機能

カスタマイズオブジェクト

カスタマイズフィールド

レイアウトオプション

ウィジェットの埋め込み