> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> フローの選択、Action の作成と設定、フローへのバインドを含む、Action の作成方法を学びます。

# 初めての Action を作成する

このガイドでは、<Tooltip tip="Auth0 Dashboard: サービスを設定するための Auth0 の主要プロダクトです。" cta="用語集を見る" href="/ja/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> を使用して、初めての Action を作成してデプロイする方法を順を追って説明します。完了する頃には、すべての Actions で使用する基本的な機能を理解し、プログラミングモデルにも慣れているはずです。ここで学ぶ内容は、その目的やフローにかかわらず、あらゆる Action を作成するための基礎となります。

<div id="the-goal-notify-slack-on-user-login">
  ## 目標: ユーザーのログイン時に Slack へ通知する
</div>

ユーザーがログインしたときに Slack チャンネルへメッセージを送信する Action を作成します。このチュートリアルでは Post Login トリガーを使用しますが、ここで説明する内容はあらゆる種類のトリガーに応用できます。

このタスクを完了するには、次の操作を行います。

* [Action を作成する](#create-an-action)
* [シークレットを追加する](#add-a-secret)
* [依存関係を追加する](#add-a-dependency)
* [下書きを保存する](#save-the-draft)
* [カスタムロジックを追加する](#add-custom-logic)
* [Action をテストする](#test-an-action)
* [Action をデプロイする](#deploy-the-action)
* [Action をフローに関連付ける](#attach-the-action-to-a-flow)
* [テナントログで Action の実行結果を確認する](#observe-actions-in-tenant-logs)

<div id="prerequisites">
  ## 前提条件
</div>

このActionでは Slack チャンネルにメッセージを送信するため、[Slack ワークスペース用の Incoming Webhook を作成](https://api.slack.com/messaging/webhooks)する必要があります。Slack の Webhook URL を取得したら、このガイドに進んでください。

<div id="create-an-action">
  ## Action を作成する
</div>

特定のフローで Action を機能させるには、まず Action を作成してから、そのフローに追加する必要があります。

1. [Auth0 Dashboard > Actions > Library,](https://manage.auth0.com/#/actions/library) に移動し、**Create Action** > **Build from scratch** を選択します。
2. **名前** を入力し、Login フローに Action を追加するため、**Login / Post Login** トリガーを選択して、**Create** を選択します。

Actions Code Editor が表示されます。

<Frame>
  <img src="https://mintcdn.com/translations/raZlN0BXDjNonwyb/docs/images/cdy7uua7fh8z/12Q8OEuDI39eWuWsrVVwN0/ff7dd385d33aee704e1cb603f43c679b/2025-02-28_13-27-14.png?fit=max&auto=format&n=raZlN0BXDjNonwyb&q=85&s=2297ddea8163f88caa55eff5da1451b1" alt="Actions Code Editor" width="902" height="507" data-path="docs/images/cdy7uua7fh8z/12Q8OEuDI39eWuWsrVVwN0/ff7dd385d33aee704e1cb603f43c679b/2025-02-28_13-27-14.png" />
</Frame>

<div id="create-an-action-from-a-template">
  ## テンプレートから Action を作成する
</div>

Actions のテンプレートギャラリーには、Action の作成を始めるためのさまざまなスターターテンプレートが用意されています。テンプレートから Action を作成するには、次の手順に従います。

1. [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library) に移動し、**Create Action** を選択します。
2. **Choose from template** を選択します。
3. Action の作成に使用するテンプレートを選択します。
4. テンプレート内のコードの読み取り専用プレビューが表示されます。続行するには、**Use this template** を選択します。
5. 名前を入力し、**Create** を選択します。

<div id="add-a-secret">
  ## Secret を追加する
</div>

各 Action には Secret 値を含めることができ、<Tooltip tip="アクセストークン: 不透明な文字列または JWT の形式を取り、API へのアクセスに使用される認可資格情報。" cta="用語集を見る" href="/ja/docs/glossary?term=Access+Tokens">アクセストークン</Tooltip> や API キーなどの機密情報を保持するのに適しています。ここでは、Slack の Webhook URL を Secret として保存します。

1. コードエディターの左側のサイドバーで鍵アイコンを選択します
2. **Add Secret** を選択します。
3. Secret に次の名前を付けます: `SLACK_WEBHOOK_URL`。
4. Slack から提供された Webhook URL を貼り付け、**Create** を選択します。

これで Secret が Action に追加され、`event.secrets` と入力するとコード補完でこの新しい Secret を利用できます。

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4FyFtKRSIYuigxE9U8TkEJ/9598b5909694631ca673f748abf2268a/Screen_Shot_2022-02-09_at_3.24.05_PM.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=c05b92ab3da7350c96d58075b67d0fc4" alt="Actions コードエディター - Secrets セクションに Secret が追加されました。" width="1325" height="780" data-path="docs/images/cdy7uua7fh8z/4FyFtKRSIYuigxE9U8TkEJ/9598b5909694631ca673f748abf2268a/Screen_Shot_2022-02-09_at_3.24.05_PM.png" />
</Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Secret を一度作成すると、その値が表示されることはありません。Auth0 はすべての Secret を暗号化して安全に保存します。
</Callout>

<div id="add-a-dependency">
  ## 依存関係を追加する
</div>

Slack にメッセージを簡単に送信できるようにするため、[`@slack/webhook` `npm` パッケージ](https://www.npmjs.com/package/@slack/webhook)を使用します。[native add-ons](https://www.npmjs.com/package/node-gyp)に依存せずにインストールできる限り、Action ではほぼすべての公開 `npm` パッケージを使用できます。

依存関係を追加するには、次の手順に従います。

1. サイドバーで Dependency アイコン (キューブ アイコン) を選択します。
2. **Name** に `@slack/webhook` と入力します。

   デフォルトでは、Action は依存関係を追加した時点での最新バージョンを使用します。
3. **Create** を選択すると、Dependency が Action に追加されます。

   <Frame>
     <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/Jmzvgydo204pBLikzuDJy/1d9a614b4c92f27afbbdd2b2af3b3c0b/Screen_Shot_2022-02-23_at_11.28.41_AM.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=5b1c3a88cec8f529524d445f3b823452" alt="Actions Code Editor: 依存関係が追加されました。" width="1504" height="614" data-path="docs/images/cdy7uua7fh8z/Jmzvgydo204pBLikzuDJy/1d9a614b4c92f27afbbdd2b2af3b3c0b/Screen_Shot_2022-02-23_at_11.28.41_AM.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  この Action を保存すると、依存関係の最新バージョンが解決され、今後のパッケージ更新によって Action に問題が生じないよう、特定のバージョン番号に置き換えられます。
</Callout>

<div id="save-the-draft">
  ## 下書きを保存する
</div>

**Save Draft** を選択します。Action は保存されますが、まだどのユーザーフローでも実行されません。Actions を使用すると、Auth0 テナントのトラフィックに影響を与える前に、Actions の作成、編集、テストを行えます。Action の動作に問題がなければ、後でその Action をデプロイしてフローに追加します。

<div id="add-custom-logic">
  ## カスタムロジックを追加する
</div>

Action は Secret と依存関係で設定できたので、次はコードを書いていきましょう。

すべての Action には、関連するトリガーに応じたコンテキスト情報を含む、読み取り専用の event オブジェクトがあります。Editor で `event.` と入力し始めると、event で使用できるすべてのプロパティが表示されます。各トリガーで利用できる情報の詳細については、[Explore Flows and Triggers](/ja/docs/customize/actions/explore-triggers) を参照してください。

では、Action を使って Slack に通知してみましょう。次のコードを Action に追加します。

```javascript lines theme={null}
const { IncomingWebhook } = require('@slack/webhook');

exports.onExecutePostLogin = async (event, api) => {
    const url = event.secrets.SLACK_WEBHOOK_URL;
    const webhook = new IncomingWebhook(url);

    // 通知を送信する
    await webhook.send({ text: "Logging In..." });
};
```

Action を保存するには、**Save Draft** をクリックします。

<div id="test-the-action">
  ## Action をテストする
</div>

この Action を本番のユーザートラフィックがあるテナントで実行する前に、想定どおりに動作することを確認するためにテストしてください。

1. サイドバーの Test (三角形) アイコンを選択します。Payload セクションには、Action の作成時に選択したトリガーに関連する編集可能な JSON データが表示されます。

   <Frame>
     <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4MSu8EfpMLNJpcYtrwP7Jf/66480a0434c89eadb809012bca890037/Screen_Shot_2022-02-10_at_10.01.10_AM.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=268f5e08a17c3c3c3cfb96ee843f234d" alt="Actions Code Editor: Test Runner パネル" width="378" height="644" data-path="docs/images/cdy7uua7fh8z/4MSu8EfpMLNJpcYtrwP7Jf/66480a0434c89eadb809012bca890037/Screen_Shot_2022-02-10_at_10.01.10_AM.png" />
   </Frame>
2. **Run** ボタンを選択すると、Slack チャンネルにメッセージが表示されるはずです。

<div id="deploy-the-action">
  ## Action をデプロイする
</div>

Action が期待どおりに動作していることを確認できたので、次はこれをデプロイします。

**Deploy** を選択します。Action をデプロイすると、その時点の Action のスナップショットが作成され、**Action Version** として記録されます。

**Version History** を選択すると、Action がバージョン 1 として記録されていることを確認できます。

<Frame>
  <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/53sn70cXoxUHibc3Bmk7Og/193af512ac2b58f3d60ab36ca5499d90/Screen_Shot_2022-02-10_at_10.02.47_AM.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=12536896fe948de77396c8fe71126359" alt="Actions: バージョン履歴" width="326" height="177" data-path="docs/images/cdy7uua7fh8z/53sn70cXoxUHibc3Bmk7Og/193af512ac2b58f3d60ab36ca5499d90/Screen_Shot_2022-02-10_at_10.02.47_AM.png" />
</Frame>

これで、Action を更新して保存しても、Action のバージョン 1 には影響しません。Auth0 が実行するのは現在デプロイされているバージョンの Action のみであるため、Action を再度デプロイするまでは、Auth0 はバージョン 1 を実行します。

<div id="attach-the-action-to-a-flow">
  ## Action をフローに追加する
</div>

新しい Action を設定し、テナント内の実際のトラフィックで実行されるようにする最後の手順は、その Action をフローに追加することです。

1. 利用可能なフローの一覧を表示するには、[Auth0 Dashboard > Actions > Flows](https://manage.auth0.com/#/actions/flows) に移動します。
2. [Login フロー](/ja/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) を選択し、`my-slack-action` をフローにドラッグします。

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6hU7sKWtGzSx9Z8dhsXbvp/0253fb4e9eac1133cc9626385622c54e/Login_Action_-_English.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=fd50d3f8faf41e106597bd9f48f6adac" alt="Actions Flows: Login Flow" width="842" height="836" data-path="docs/images/cdy7uua7fh8z/6hU7sKWtGzSx9Z8dhsXbvp/0253fb4e9eac1133cc9626385622c54e/Login_Action_-_English.png" />
   </Frame>
3. **Apply** を選択します。

これで、この Action はテナント内の実際のユーザートラフィックに対して実行されます。より堅牢なテスト環境が必要な場合は、[複数の Auth0 環境を設定する](/ja/docs/get-started/auth0-overview/create-tenants/set-up-multiple-environments)ことを検討してください。

<div id="observe-actions-in-tenant-logs">
  ## テナントログで Actions を確認する
</div>

Action がログインフローの一部として実行されるようになると、Auth0 は各 Action の実行に関する情報をテナントログに記録します。これを確認するには、[Auth0 Dashboard > Monitoring > Logs](https://manage.auth0.com/#/logs) に移動し、**Successful Login** イベントを選択します。

そのフローの一部として実行された Actions に関する情報を含む **Action Details** ビューが表示されます。

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/61k82wmsXSb9M3wOExM4jH/51fae3a36a8ecddeec08bc45da468e2b/Action_logs_-_English.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=bbae31682ef23d5f086dd7df335cfedf" alt="テナントログ: Action Details ビュー" width="1079" height="1010" data-path="docs/images/cdy7uua7fh8z/61k82wmsXSb9M3wOExM4jH/51fae3a36a8ecddeec08bc45da468e2b/Action_logs_-_English.png" />
</Frame>

<div id="next-steps">
  ## 次のステップ
</div>

最初のActionを作成したら、[フローとトリガーの詳細](/ja/docs/customize/actions/explore-triggers)で、Actionsを使ってよくあるタスクを実行する方法を確認してください。
