# FlutterFlow

FlutterFlowはユーザーが手にするアプリケーションにコンパイルされるため、どのフィールドを埋めるかではなく、キーがどこに配置されるかが問題になります。以下のリクエストは、呼び出しが作成するのとまったく同じ形式で本番環境に送信されます。FlutterFlowの手順は、2026-09-17時点のFlutterFlowドキュメントに基づいて記述されています。

まず、[自動化キー](/integrations/#ключ-для-автоматизації)セクションで説明されているように、`chart`スコープでキーを作成してください。

<Aside type="caution" title="通常の呼び出しではキーがアプリケーションと一緒に移動します">
プライベートとしてマークされていない呼び出しはデバイスから実行され、そのヘッダーはコンパイルされたiOS、Android、およびWebビルド内にあり、誰でも読み取ることができます。呼び出しを**プライベート**にしてください。そうすれば、FlutterFlowはFirebase Cloud Functionを介してそれを実行し、キーはサーバーに残ります。FlutterFlow独自のチェックは、プロジェクトコードをダウンロードしてフロントエンドファイル内でキーを検索することですが、これは有料プランでのみ利用可能です。
</Aside>

## 1. 呼び出しを作成する

**API Calls**を開き、**+ Add**をクリックし、**Create API Call**を選択して、以下を入力してください。

- **API Call Name**: `Natal chart`。
- **Method Type**: `POST`。
- **URL**:

  ```
  https://api.astroway.info/v1/chart
  ```

- **Headers**タブ、**+ Add Header**: `X-Api-Key: `とそれに続くあなたのキーを1行。2行目は`Content-Type: application/json`。
- **Variables**タブ: String型の変数5つ、`date`、`time`、`timezone`、`latitude`、`longitude`。それぞれ以下のJSONからのデフォルト値を持つ。
- **Body**タブ、**JSON**ドロップダウンリスト: JSONを貼り付け、その中に変数をドラッグしてください。

```json
{
  "date": "1990-05-15",
  "time": "14:30:00",
  "timezone": "Europe/Kyiv",
  "latitude": "50.45",
  "longitude": "30.52"
}
```

緯度と経度は意図的に文字列のままにしています。APIは`"50.45"`を数値として受け入れますが、文字列の方が変数のドラッグが簡単になります。

**Add Call**をクリックし、**Response & Test**を開き、**Test API Call**をクリックして、**Test Response**で応答を確認してください。`data.input.timezoneOffset`は`4`として返されます。これは、その日付にキエフが持っていたオフセットです。

## 2. 呼び出しをプライベートにする

呼び出しの**Advanced Settings**で**Make Private**を有効にし、**Save**をクリックし、次に**Deploy APIs**をクリックしてください。これで呼び出しはFirebase Cloud Functionで実行されるため、プロジェクトには接続されたFirebaseとCloud Functionsを含むFirebaseプランが必要です。

<Aside type="caution" title="プライベート呼び出しはグループヘッダーを継承しません">
キーを呼び出し自体ではなく**API Group**に配置すると、呼び出しがプライベートになった瞬間にFlutterFlowはそれを送信しなくなります。グループヘッダーはプライベート呼び出しによって継承されません。`X-Api-Key`を呼び出し自体に追加してください。そうしないと、最初のプライベート実行で`401`が返されます。
</Aside>

FlutterFlowのドキュメントが明示的に述べていることがさらに2つあります。フロントエンドから、例えばリモート設定を介して渡されたキーは、プライベート呼び出しであっても公開されたままになります。安全な形式は、呼び出し自体に書き込まれたヘッダーです。

## 3. 応答を読み取る

**JSON Paths**で**+ Add JSON Path**をクリックし、それぞれに名前を付けてください。

| 名前 | JSON Path |
|---|---|
| `ascendant` | `$.data.houses.ascendant` |
| `sunLongitude` | `$.data.planets[0].longitude` |
| `moonLongitude` | `$.data.planets[1].longitude` |
| `offsetUsed` | `$.data.input.timezoneOffset` |

サインは、経度を30で割って切り捨てたもので、12の名称リストのインデックスとして使用されます。例えば、アセンダント`159.26`は`5`、つまり乙女座になります。4行のカスタム関数、または12行のリストとインデックスで十分です。

## Webビルドはブラウザから私たちにアクセスできません

2026-09-17にサードパーティドメインのページから測定された結果: `POST /v1/chart`は`access-control-allow-origin`ヘッダーなしでプリフライトに応答し、Chromeはリクエストをブロックします。外部ドメインのブラウザには、`/v1/public/*`と`/v1/embed/*`のみが応答します。

FlutterFlowは、ビルダー、Runモード、Testモードで独自のプロキシを介して呼び出しを実行するため、そこで機能する呼び出しでも、Webアプリケーションの公開後に失敗する可能性があります。2つの解決策があり、最初のものを推奨します。

- 上記のように、**呼び出しをプライベートにしてください**。そうすれば、ブラウザではなくCloud Functionで実行され、キーの問題とCORSの問題の両方がすぐに解決されます。
- すでに独自のバックエンドがある場合は、**私たちの前に独自のバックエンドを配置してください**。FlutterFlowでのプロキシ設定は、独自のプロキシURLとともに、ビルダー、Runモード、Testモード向けに文書化されています。公開されたWebビルドについてはドキュメントに何も記載されていないため、そこでそれらに依存すべきではありません。

公開キー`pk_`はこれを解決しません。それは`/v1/public/*`と`/v1/embed/*`のみを取得し、iOSおよびAndroidビルドからはWebオリジンを送信しないため完全に拒否されます。

## エラー

- プライベート呼び出しでの**`401`**: キーが呼び出しではなくグループに配置されています。
- `details`に`timezone`を含む**`400 INVALID_FIELD`**: ゾーンが空であるか、`EST`のような略語であるか、ゾーン名ではありません。
- `details`に`date`または`time`を含む**`400`**: フォーマットが`YYYY-MM-DD` / `HH:MM:SS`ではありません。
- **`403 ENDPOINT_NOT_IN_SCOPE`**: キーのスコープに`chart`がありません。
- **`429 KEY_BUDGET_EXHAUSTED`**: キーが自身の予算を使い果たしました。ダッシュボードで引き上げてください。

<Aside type="note">
FlutterFlowの無料プランでは、プロジェクトごとに2つのAPIエンドポイントが許可されており、OpenAPIのインポート機能がないため、呼び出しは手動で追加され、もう1つのスロットが残ります。APIはジオコーディングを行いません。座標は、独自のフィールドから、またはキーを持っているジオコーディングサービスから取得されます。
</Aside>