カスタムアクション
Adaloでできないことを行うためのカスタムアクションを作成します - 例えば、外部サービス(API)を使用してメールを送信したり、写真を切り抜いたり、IDを生成したり、この手順でURLを短縮したりすることができます。
スキルレベル: エキスパート
開始前に
この機能を使用するには、有料の Adalo プラン が必要です: プロフェッショナルプラン以上。
API の基本については、こちらの解説 をご覧ください。
イントロ動画
上記の動画はカスタムアクションのバージョン1です。外部アプリからデータをアプリに取り込むことができるバージョン2をご覧になりたい場合は、こちらの動画をご覧ください!
手順
1.) カスタムアクションを追加したいコンポーネントを選択します。カスタムアクションはフォームや全画面アクションでの戻り値の使用には適用されません。
2.) コンポーネントの設定のクリックアクションセクションで、アクションを追加し、カスタムアクションをホバーしてから新しいカスタムアクションをクリックします。
3.) 新しいカスタムアクションに名前を付け、Adalo ビルダーに表示されるラベルを選択します。作成、更新、または削除から選択し、次へをクリックします。
4.) 次に、選択した API のドキュメントを参照して、そのベース URL、認証要件(あれば)、および送信するパラメータを見つけます。各 API は異なり、異なる要件があります。このステップのヘルプについては、API の基本に関する解説を参照するか、詳細タブのシンプルな例から始めてみてください。
5.) カスタムアクションのAPI ベース URLフィールドに API のベース URL を入力します。ここでも、作成した入力を参照するためにマジックテキストを使用できます。
5.) API に必要なヘッダーまたはクエリパラメータを追加するには、+アイテムを追加をクリックし、ヘッダーまたはクエリパラメータを選択します。一般的なヘッダーには、認証ヘッダーやコンテンツタイプヘッダーがあります。
6.) 次に、アクションに必要な入力が必要です。API に送信するデータの変更部分ごとに入力を追加する必要があります。ポップアップの右側の入力セクションで、+アイテムを追加をクリックします。
7.) 入力にラベル/名前を付け、データの種類を選択します。データの種類に関する詳細は、このヘルプガイドの詳細を学ぶセクションで見つけることができます。 8.) Body 入力フィールドに、リクエスト JSON ボディを構築するか貼り付けます。Magic Text を使用して、作成した入力でリクエストの一部を置き換えることができます。これにより、リクエストのこれらの部分が変数(動的)になり、各リクエストで異なるデータを API に送信できます。
9.) テストリクエストを実行 をクリックします。すべてがうまくいけば、shortURL という API からの出力とともに、テストが成功したメッセージを受け取ります。これらの出力は、返されたデータのために自動的に作成された Magic Text 出力です。これらの出力をカスタマイズするには、名前やタイプを変更するためにそれらをクリックするか、不要な出力は削除することもできます。完了したら、カスタムアクションを保存 をクリックします。
10.) 今、アクションが設定されたので、その下に 作成、更新、または 削除 アクションを配置し、Magic Text を介してカスタムアクションの出力を参照できます。カスタムアクションを編集する必要がある場合は、アクションの左下にある鉛筆アイコン
をクリックできます。
11.) カスタムアクションが設定されたので、チーム内の任意のアプリやコンポーネントで使用できます!
1.) この手順では、空の画面に Input フィールドと Button、User's Collection に "Personal Link" という Text プロパティを追加します。この手順についてのヘルプが必要な場合は、最初に当社の はじめに ガイドを参照してください。以下のようなものがあるはずです:

2.) カスタムアクションを追加するコンポーネントを選択します。この手順では、Micro という強力な外部サービスを使用してリンクを短縮するボタンに追加します。
3.) ボタンの Click Actions 領域で、Add Action をクリックし、Custom Action の上にカーソルを合わせて New Custom Action を選択します。以前にカスタムアクションを作成したことがある場合は、ここに表示されます。

4.) 新しいカスタムアクションに Shorten URL などの Name を付け、Adalo で表示するアクションの種類を選択します。Create、Update、または Delete のいずれかを選択できます。この手順では、Create を選択して Next をクリックします。
5.) Microアカウントが含まれるブラウザータブを開き、右上隅のメールをクリックしてからAPI Keysをクリックします。APIキーは、APIの使用に対するパスワードのようなものです。この特定のAPIでは、異なるアプリケーションのために必要な場合に複数のAPIキーを作成することができますが、すべてのAPIがこのように機能するわけではありません。

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

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

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

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

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

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

12.) ヘッダーの名前にAuthorizationと入力し、値にBearerと入力してから、Microから保存したAPIキーを貼り付けます。Bearerとキーの間にスペース(Enterではなく)を追加するのを忘れないでください。
13.) 次に、Magic Text を使用して任意の URL を送信できるように、アクション用の入力フィールドを追加する必要があります。カスタムアクションの右側の Inputs セクションの下にある +Add Input をクリックします。URL は文字、数字、および記号の組み合わせなので、入力タイプとして Text を選択します。

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

15.) エンドポイントに関連する任意のパラメータを送信する必要があります。この場合、短縮する URL を送信する必要があります。"Shorten" エンドポイントの Micro ドキュメント によると、destinationURL という1つのパラメータだけを送信する必要があることがわかります。カスタムアクションの JSON Body フィールドに、Micro ドキュメントからのリクエストコードスニペットを貼り付けます: {
"destinationURL": "https://mysite.com/this-is-a-rather-long-web-address"
}
使用するエンドポイントが複数のパラメータを必要とする場合は、同じ方法でフォーマットしますが、最後の行以外の各行の後にコンマを追加します。たとえば、Micro の Weather Forecast エンドポイントを取ると:
{
"days": 3,
"location": "St. Louis"
}
このような JSON の使用および作成に関する詳細は、JSON の基礎 を参照してください。

16.) Magic Text ボタン
を使用して、引用符内の https://mysite.com/this... を "URL to be Shortened" 入力で置き換えます。

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

18.) 今度は、作成した URL to be Shortened という入力を、ユーザーが入力フィールドに入力した内容に設定するために Magic Text を使用する必要があります。
19.) カスタムアクションの出力を後続のアクションで使用することができます。例として、短縮URLアクションの下に更新アクションを追加しましょう。この更新アクションはログインユーザーを更新するようにします。

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

例
ユーザーが入力フィールドにリンクを入力し、ボタンをタップすると、そのリンクがMicro APIに送信され、短縮リンクが返され、ユーザーのレコードに保存されます。
カスタムアクションはアプリと一緒にコピーできないため、クローン可能なテンプレートを提供することはできませんが、この手順で使用されたアプリを試してみたい場合は、こちらをクリックしてください。
もっと詳しく知る
Micro APIにはこの手順と同じ方法で機能する多くの素晴らしいエンドポイントがあります。単純なものに慣れたので、他のAPIを探索してみてください。Public APIsのようなサイトを使用して、Adaloでさまざまな素敵なことを行うための無料および有料のAPIを見つけることができます。
カスタムアクションの使用事例の完全なリストについては、こちらをクリックしてください。
カスタムアクションはREST APIと最適に機能し、JSONレスポンスのみを認識できます。XML、SOAP、またはGraphQLを利用するAPIは、JSONレスポンスを返すことができない限りサポートされません。
カスタムアクションはフォームアクションでは機能しません。
カスタムアクションは、APIリクエストで複数のレコードを送信することができません。
カスタムアクションは、外部コレクションとは異なり、外部コレクションのようにアイテムのリストを表示するのではなく、単一の機能を実行するために使用されます。
カスタムアクションはチーム間でコピーすることができません。
ヘルプ
カスタムアクションの機能をさらに詳しく見たい場合は、The Adalo App Academyのカスタムアクションコースを受講することを強くお勧めします。 この記事に関する追加のヘルプが必要な場合は、いつでもコミュニティフォーラムで質問できます!投稿する際には、この記事へのリンクも貼っておいてください!
Last updated
Was this helpful?