# カスタムアクション

*スキルレベル: エキスパート*

## 開始前に

* この機能を使用するには、[有料の Adalo プラン](https://www.adalo.com/pricing) が必要です: プロフェッショナルプラン以上。
* [アクション](https://help.adalo.com/glossary#action)、[データベース](/ja/database.md)、および [マジックテキスト](https://help.adalo.com/glossary#magic-text) についての理解が必要です。
* API の基本については、[こちらの解説](https://help.adalo.com/glossary#api-application-programming-interface) をご覧ください。

{% hint style="info" %}
現在の制限事項:

* カスタムアクションの戻り値を、全画面アクションとして使用することはできません。
* カスタムアクションは、フォームコンポーネントの送信ボタンでは機能しません。
  {% endhint %}

## イントロ動画

{% embed url="<https://youtu.be/SHibYnE7v1Q>" %}

> 上記の動画はカスタムアクションのバージョン1です。外部アプリからデータをアプリに取り込むことができるバージョン2をご覧になりたい場合は、[こちらの動画をご覧ください！](https://youtu.be/loNKubtci7Q)

## 手順

{% tabs %}
{% tab title="シンプル" %}
{% hint style="info" %}
シンプルな例を使用した初心者向けの詳細な手順については、**詳細**タブをクリックしてください。
{% endhint %}

**1.)** カスタムアクションを追加したいコンポーネントを選択します。カスタムアクションはフォームや全画面アクションでの戻り値の使用には適用されません。

**2.)** コンポーネントの設定のクリックアクションセクションで、アクションを追加し、カスタムアクションをホバーしてから新しいカスタムアクションをクリックします。

**3.)** 新しいカスタムアクションに名前を付け、Adalo ビルダーに表示されるラベルを選択します。**作成**、**更新**、または**削除**から選択し、**次へ**をクリックします。

**4.)** 次に、選択した API のドキュメントを参照して、そのベース URL、認証要件（あれば）、および送信するパラメータを見つけます。各 API は異なり、異なる要件があります。このステップのヘルプについては、API の基本に関する解説を参照するか、**詳細**タブのシンプルな例から始めてみてください。

**5.)** カスタムアクションの**API ベース URL**フィールドに API のベース URL を入力します。ここでも、作成した入力を参照するためにマジックテキストを使用できます。

**5.)** API に必要なヘッダーまたはクエリパラメータを追加するには、**+アイテムを追加**をクリックし、**ヘッダー**または**クエリパラメータ**を選択します。一般的なヘッダーには、認証ヘッダーやコンテンツタイプヘッダーがあります。

**6.)** 次に、アクションに必要な入力が必要です。API に送信するデータの変更部分ごとに入力を追加する必要があります。ポップアップの右側の**入力**セクションで、**+アイテムを追加**をクリックします。

**7.)** 入力にラベル/名前を付け、データの種類を選択します。データの種類に関する詳細は、このヘルプガイドの[詳細を学ぶ](https://help.adalo.com/integrations/custom-actions#learn-more)セクションで見つけることができます。 **8.)** **Body** 入力フィールドに、リクエスト JSON ボディを構築するか貼り付けます。Magic Text を使用して、作成した入力でリクエストの一部を置き換えることができます。これにより、リクエストのこれらの部分が変数（動的）になり、各リクエストで異なるデータを API に送信できます。

**9.)** **テストリクエストを実行** をクリックします。すべてがうまくいけば、**`shortURL`** という API からの出力とともに、テストが成功したメッセージを受け取ります。これらの出力は、返されたデータのために自動的に作成された Magic Text 出力です。これらの出力をカスタマイズするには、名前やタイプを変更するためにそれらをクリックするか、不要な出力は削除することもできます。完了したら、**カスタムアクションを保存** をクリックします。

{% hint style="info" %}
エラーが発生した場合やテストが成功しない場合は、カスタムアクションの設定を確認してもう一度試してください。API からの完全な応答やエラーコードを確認するには、常に **完全な応答を表示** をクリックできます。返された情報がない場合は、利用可能であれば **+アイテムを追加** をクリックして結果を手動で見つけて追加することもできます。
{% endhint %}

**10.)** 今、アクションが設定されたので、その下に **作成**、**更新**、または **削除** アクションを配置し、Magic Text を介してカスタムアクションの出力を参照できます。カスタムアクションを編集する必要がある場合は、アクションの左下にある鉛筆アイコン <img src="/files/4RqEbAV8fqJXyQEno73C" alt="" data-size="line"> をクリックできます。

**11.)** カスタムアクションが設定されたので、チーム内の任意のアプリやコンポーネントで使用できます！
{% endtab %}

{% tab title="詳細" %}
**1.)** この手順では、空の画面に **Input** フィールドと **Button**、**User's Collection** に **"Personal Link"** という **Text** プロパティを追加します。この手順についてのヘルプが必要な場合は、最初に当社の [はじめに](/ja/readme.md) ガイドを参照してください。以下のようなものがあるはずです：

![](/files/1ZRctSZ6a6UgkrZDjkai)

**2.)** カスタムアクションを追加するコンポーネントを選択します。この手順では、[Micro](https://m3o.com/) という強力な外部サービスを使用してリンクを短縮するボタンに追加します。

**3.)** ボタンの **Click Actions** 領域で、**Add Action** をクリックし、**Custom Action** の上にカーソルを合わせて **New Custom Action** を選択します。以前にカスタムアクションを作成したことがある場合は、ここに表示されます。

![](/files/sa2LH632wzodoivBR1gX)

**4.)** 新しいカスタムアクションに **Shorten URL** などの **Name** を付け、Adalo で表示するアクションの種類を選択します。**Create**、**Update**、または **Delete** のいずれかを選択できます。この手順では、**Create** を選択して **Next** をクリックします。

![](/files/YKSKudfIITBIkchMKZxA) **5.)** [Micro](https://m3o.com/)アカウントが含まれるブラウザータブを開き、右上隅のメールをクリックしてから**API Keys**をクリックします。APIキーは、APIの使用に対するパスワードのようなものです。この特定のAPIでは、異なるアプリケーションのために必要な場合に複数のAPIキーを作成することができますが、すべてのAPIがこのように機能するわけではありません。

![](/files/po6oALWMu7WDQYQu1Drl)

**6.)** **Create**をクリックします。ポップアップが表示され、キーの**Description**を入力し、このキーが使用する**Scopes**（権限）を選択する必要があります。スコープは、このAPIキーで使用したいサービスに直接関連しています。今回は、URLを短縮するためにURLサービスを使用するので、今は**URL**だけをチェックしてください（Microのサービスの完全なリストと説明は[こちら](https://m3o.com/explore)で確認できます）。

![](/files/6uAp4TlAra3YtHeACwWF)

**7.)** **Create**をクリックすると、新しいキーが黒いテキストボックスに表示されます。必ず**Copy**をクリックして、安全で覚えやすい場所に保存してください。キーを紛失した場合は、別のキーを作成する必要があります。完了したら**Close**をクリックしてください。

![](/files/FrZoYIsFJPJg2qkBWzai)

**8.)** ポップアップが閉じたら、**API Usage**セクションでコードスニペットを見つけ、**`https://api.m3o.com/v1/{service}/{endpoint}`と書かれた部分をコピーします。これが私たちのベースURLです。これをカスタムアクションのAPI Base URL**フィールドに貼り付けます。

![](/files/fKxoQYzrhp5DhLR157re)

**9.)** 次に、リンクの\*\*`{service}`**と**`{endpoint}`**の部分を使用したいサービスとエンドポイントに置き換えます。**`url`**サービスの**[**Microドキュメント**](https://m3o.com/url)**によると、URLを短縮するためのエンドポイントは**`shorten`**と呼ばれます。したがって、私たちのベースURLは次のようになります：**`https://api.m3o.com/v1/url/shorten`\*\*。

![](/files/BlISbwkDUfVPqkH36GYM)

**10.)** ほとんどのAPIは、機能に応じてエンドポイントに使用すべきメソッドを指定しますが、Microではドロップダウンから**POST**を選択する必要があります。リクエストメソッドに関する詳細は、[Methods](https://help.adalo.com/glossary#method)プライマーを参照してください。

![](/files/jiySI1pzIjQoJS4cr3Hk)

**11.)** このAPIでは、APIキーを使用して認証する必要があります。Microアカウントの**API Keys**セクションに戻ると、**API Usage**セクションで、**Authorization**という名前の**Header**（`-H`）が必要であり、その値としてキーが必要であることがわかります。カスタムアクションでは、**Headers and Queries**セクションの下にある\*\*+Add Item\*\*をクリックし、**Header**を選択します。

![](/files/0SCwrBdyALESfLMaDE6I)

**12.)** ヘッダーの名前に**Authorization**と入力し、値に**Bearer**と入力してから、Microから保存したAPIキーを貼り付けます。Bearerとキーの間にスペース（Enterではなく）を追加するのを忘れないでください。

![](/files/r1Hu5J3tZUU4YClXr0bI) **13.)** 次に、Magic Text を使用して任意の URL を送信できるように、アクション用の入力フィールドを追加する必要があります。カスタムアクションの右側の **Inputs** セクションの下にある **+Add Input** をクリックします。URL は文字、数字、および記号の組み合わせなので、入力タイプとして **Text** を選択します。

![](/files/u3dEkps0HVIRTeu9wYR3)

**14.)** 新しい入力に "URL to be Shortened" のようなラベル/名前を付け、**Example Value** としてテスト用に URL を貼り付け、その後 **Done** をクリックします。データ型と説明の完全なリストは、このヘルプガイドの **Learn More** セクションで見つけることができます。

![](/files/piVyR7IkqjsDt0uF4YQC)

**15.)** エンドポイントに関連する任意のパラメータを送信する必要があります。この場合、短縮する URL を送信する必要があります。"Shorten" エンドポイントの [Micro ドキュメント](https://m3o.com/url) によると、**`destinationURL`** という1つのパラメータだけを送信する必要があることがわかります。カスタムアクションの **JSON Body** フィールドに、Micro ドキュメントからのリクエストコードスニペットを貼り付けます: `{`\
`"destinationURL": "https://mysite.com/this-is-a-rather-long-web-address"`\
`}`

使用するエンドポイントが複数のパラメータを必要とする場合は、同じ方法でフォーマットしますが、最後の行以外の各行の後にコンマを追加します。たとえば、Micro の [Weather Forecast](https://m3o.com/weather) エンドポイントを取ると:

`{`\
`"days": 3,`\
`"location": "St. Louis"`\
`}`

このような JSON の使用および作成に関する詳細は、[JSON の基礎](https://help.adalo.com/glossary#json) を参照してください。

![](/files/SVSNhz7KM0MY7EVpPW97)

**16.)** Magic Text ボタン <img src="/files/FQJauGrEkerMF5HT37C8" alt="" data-size="line"> を使用して、引用符内の **`https://mysite.com/this...`** を **"URL to be Shortened"** 入力で置き換えます。

![](/files/oo8GRU7eAQphJXBBnfI1)

**17.)** **Run Test Request** をクリックします。すべてがうまくいくと、API からの **`shortURL`** という出力とともに、テストが成功したメッセージを受け取ります。これらの出力は、返されたデータのために自動的に作成された Magic Text 出力です。これらの出力をカスタマイズするには、名前やタイプを変更するためにそれらをクリックするか、不要な場合は出力を削除することができます。完了したら、**Save Custom Action** をクリックします。

![](/files/a8ylZCnX8VaULTDsLU8Y)

{% hint style="info" %}
エラーが発生した場合やテストが成功しない場合は、カスタムアクションの設定を確認して再試行してください。API からの完全な応答やエラーコードを確認するには、常に **Show Full Response** をクリックできます。返された情報がない場合は、利用可能であれば **+Add Item** をクリックして結果を手動で見つけて追加することもできます。
{% endhint %}

**18.)** 今度は、作成した **URL to be Shortened** という入力を、ユーザーが入力フィールドに入力した内容に設定するために Magic Text を使用する必要があります。

![](/files/L1mBzfqq6ULvUzKcSq1T) **19.)** カスタムアクションの出力を後続のアクションで使用することができます。例として、**短縮URL**アクションの下に**更新**アクションを追加しましょう。この更新アクションは**ログインユーザー**を更新するようにします。

![](/files/ifOjAJswgAyUQYSogCc6)

**20.)** "Personal Link"プロパティでマジックテキストを使用して、前のカスタムアクション**短縮URL > shortURL**から情報を配置します。カスタムアクションを編集する必要がある場合は、アクションをクリックしてアクションの左下にある鉛筆アイコン<img src="/files/4RqEbAV8fqJXyQEno73C" alt="" data-size="line">を選択します。

![](/files/55M00J8d2fkJc4VlRkdR)
{% endtab %}

{% tab title="Video" %}

#### カスタムアクションの例 - Micro APIを使用してリンクを短縮する

{% embed url="<https://youtu.be/XPdQWw-1nkM>" %}

#### カスタムアクションの例 - SendGridを使用してメールを送信する

{% embed url="<https://www.youtube.com/watch?v=UZEENzF6bHE&t=316s>" %}

####

#### カスタムアクションの例 - Zapier Webhookに情報を送信する

{% embed url="<https://www.youtube.com/watch?v=RlGg3EIStXE>" %}

####

#### カスタムアクションの結果や出力を使用する

{% embed url="<https://www.youtube.com/watch?v=1Yy26AX8IzE&t=4s>" %}
{% endtab %}
{% endtabs %}

## 例

ユーザーが入力フィールドにリンクを入力し、ボタンをタップすると、そのリンクがMicro APIに送信され、短縮リンクが返され、ユーザーのレコードに保存されます。

カスタムアクションはアプリと一緒にコピーできないため、クローン可能なテンプレートを提供することはできませんが、この手順で使用されたアプリを試してみたい場合は、[こちらをクリックしてください](https://previewer.adalo.com/62efc6dc-6d91-4438-a0b7-a175b2182d6f)。

## もっと詳しく知る

* Micro APIにはこの手順と同じ方法で機能する多くの素晴らしいエンドポイントがあります。単純なものに慣れたので、他のAPIを探索してみてください。[Public APIs](https://public-apis.io/)のようなサイトを使用して、Adaloでさまざまな素敵なことを行うための無料および有料のAPIを見つけることができます。
* カスタムアクションの使用事例の完全なリストについては、[こちらをクリックしてください](https://help.adalo.com/glossary#custom-action)。
* カスタムアクションはREST APIと最適に機能し、JSONレスポンスのみを認識できます。XML、SOAP、またはGraphQLを利用するAPIは、JSONレスポンスを返すことができない限りサポートされません。
* カスタムアクションはフォームアクションでは機能しません。
* カスタムアクションは、APIリクエストで複数のレコードを送信することができません。
* カスタムアクションは、外部コレクションとは異なり、外部コレクションのようにアイテムのリストを表示するのではなく、単一の機能を実行するために使用されます。
* カスタムアクションはチーム間でコピーすることができません。

## ヘルプ

カスタムアクションの機能をさらに詳しく見たい場合は、[The Adalo App Academy](https://appacademy.adalo.com/homepage)の[カスタムアクションコース](https://appacademy.adalo.com/course/custom-actions)を受講することを強くお勧めします。 この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿する際には、この記事へのリンクも貼っておいてください！


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/ja/integrations/custom-actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
