---
title: "Optimismでwebhookを使う方法"
description: "Optimism WebhookとはWeb3での使い方"
---
# Optimismでwebhookを使う方法
Web3アプリケーションをサードパーティのアプリやサービスと連携させたいなら、webhookはきっと役に立ちます。このチュートリアルでは、[Optimism](https://www.alchemy.com/layer2/optimism/?a=a40402f9aa)でwebhookをセットアップして使う方法を学びます。その後、OptimismでのETHの送受信をSlackで自動通知する方法を紹介します。
## webhookとは何か
[**webhook**](https://www.alchemy.com/overviews/what-is-a-webhook)は、イベントが発生したときにサードパーティのアプリやサービスがアプリケーションと通信できるようにする、web3開発者向けのツールです。この方式は、APIを使って特定の状態が変化したかどうかをノードにポーリングし続けるよりも効率的です。webhookなら、イベント発生時にサーバー側からアプリへ通知をプッシュできるためです。
[Alchemy webhook](https://www.alchemy.com/docs/reference/notify-api-quickstart)は、web3アプリケーションやサービスのユーザー体験を改善し、エンゲージメントを高める大きな可能性を持っています。例えば、DiscordチャンネルでNFTの売買を追跡したり、Slackチャンネルにウォレットのアクティビティを送信したりできます。
## webhookで追跡できるOptimismのイベント
**Alchemy webhookで通知を受け取れるOptimismのイベントは3種類あります。**
1. Mined transactions - トランザクションが完了した
1. Dropped transactions - トランザクションが失敗、またはmempoolから削除された
1. Address Activity - トークンが送受信された
このチュートリアルでは、_Address Activity_イベントを追跡し、OptimismでのETHの送受信についてSlack通知を受け取ります。
## Optimism webhookのセットアップ方法
以下は、Optimism webhookをセットアップし、Slackへの通知を自動化する10ステップの手順です。この手順は、Discord、Twitterなど、Zapierがサポートする他のサードパーティプラットフォームにも応用できます。
### 1. Ethereumウォレットを作成する
トランザクションを送受信するには、Ethereumウォレットが必要です。このチュートリアルでは、Ethereumアカウントを管理するブラウザベースのデジタル資産ウォレットである**[MetaMask](https://www.alchemy.com/dapps/metamask)**を使用します。[MetaMaskをダウンロード](https://metamask.io/download.html)して、無料アカウントを作成してください。
### 2. Alchemyにサインインする
作業を簡単にするため、[Alchemyの無料開発者アカウントに登録](https://dashboard.alchemy.com/signup)しましょう。これにより、自前のノードを実行しなくてもEthereumチェーンと通信できます。
### 3. APIキーを作成する
次に、新しいアプリを作成してAPIキーを生成し、[Optimismのテストネットに接続](https://www.alchemy.com/docs)します。
Alchemyダッシュボードのナビバーで_Apps_にカーソルを合わせ、_Create App_をクリックして_Create App_ページに移動します。
アプリに名前を付け（ここでは「optimism_webhooks」としました）、簡単な説明を記入します。
次に、chainには_Optimism_を選択し、networkには_Optimism Goerli_を選択します。
その後、_Create app_をクリックします。
_Apps_の下にある新しく作成されたアプリのリンクをクリックし、_Add to Wallet_をクリックします。
これでMetaMaskがOptimism Goerliテストネットに接続されているはずです。
### 4. Goerliフォーセットからテストネット用ETHを取得する
スマートコントラクトをOptimismのテストネットにデプロイするため、[Goerliフォーセットからテストネット用ETHを取得](https://www.alchemy.com/overviews/goerli-faucet)します。
まず、MetaMaskのネットワークをEthereum Goerliに切り替え、_Claim_をクリックします。
すると、Goerliテストネット上のMetaMaskアカウントに0.05 ETHが入っているはずです。
### 5. Goerli ETHをOptimism-Goerliテストネットへブリッジする
Goerli ETHをOptimismへ送るための公開ブリッジはまだありませんが、Ethereumアプリケーション開発のツールキットである[Foundry の Cast](https://github.com/foundry-rs/foundry/tree/master/cast)を使えば実現できます。
**次のコードスニペットを使用してください。**
`cast send --legacy --rpc-url=$ALCHEMY-OPT-GOERLI-ENDPOINT --value=0.001ether --private-key= 0x636Af16bf2f682dD3109e60102b8E1A089FedAa8`
これで、Opt-GoerliテストネットにGoerli ETHが用意できました。
### 6. zapとOptimism webhook URLを作成する
次に、[Zapierアカウントを作成](https://zapier.com/sign-up)します。すでにZapierアカウントを持っている場合はログインしてください。
ダッシュボードの左上にある_Create Zap_をクリックします。
ここでは、AlchemyからZapierへwebhookのレスポンスを送信するためのwebhook URLを作成します。
_Trigger_で、アプリのイベント／トリガーとして_Webhooks by Zapier_を検索して選択します。
_Trigger Event_には_Catch Hook_を選択します。Zapierは、転送が発生するたびにAlchemyのaddress activity webhookがイベントデータをそのURLに送信するのを待ち受けるためです。
_Continue_をクリックして_Set up trigger_セクションに進み、_Custom Webhook URL_をコピーします。
### 7A. Optimism webhookを作成する
次に、転送イベントを追跡し、そのデータをZapierのwebhook URLへ送信するためのaddress activity webhookを作成する必要があります。
ここでは2通りのwebhookのセットアップ方法を紹介します。1つ目はダッシュボード内のAlchemyの**Notifyタブ**から、2つ目は**Alchemy Notify API**をプログラムから使う方法です（10個以上のアドレスに対するaddress activity webhookを扱う場合はこちらを推奨します）。
1. Alchemyダッシュボード左上で_Ethereum + L2_エコシステムが選択されていることを確認します
1. Notifyタブに移動し、*Address Activity*セクションの_+ Create Webhook_ボタンをクリックします
1. _Chain_で_Optimism_を選択します
1. _Network_で_Goerli_を選択します
1. 前の手順でZapierからコピーしたwebhook URLを貼り付けます
1. MetaMaskのウォレットアドレスを_Ethereum Addresses_セクションに貼り付けます
注：作成を確定する前に、Alchemy webhookがZapierのwebhook URLへ正しくリクエストを送れるかテストしたい場合は、webhook URLの横にある_Test Webhook_をクリックしてください。すでにwebhookを作成済みで再度テストしたい場合は、webhookの横にある3つの点をクリックし、_Send Test Notification_を選択します。
次に、Zapierに戻り_Test trigger_セクションに進み、_Test trigger_をクリックします。
「We found a request message」と表示されれば成功です！
### 7B. Notify APIを使ってOptimism webhookを作成する
複数のOptimismアドレスに対してwebhookを作成したい場合は、[Notify API](https://www.alchemy.com/docs/reference/webhooks-overview)を使用します。始めるには、NotifyダッシュボードのAUTH TOKENボタンの下、右上にあるAlchemyの認証トークン（X-Alchemy-Token）をコピーします。
その後、コマンドラインで以下を入力します。
`*curl https://dashboard.alchemy.com/api/create-webhook \`
`*-X POST \`
`*-H "X-Alchemy-Token":"your-X-Alchemy-Token" \`
`-d '\{"network":"OPT_KOVAN","webhook_type":"ADDRESS_ACTIVITY","webhook_url":"your-Zapier-Webhook-URL", "addresses":["your-Ethereum-Address"]\}'``
`
_your-X-Alchemy-Token_、_your-Zapier-Webhook-URL_、_your-Ethereum-Address_（つまり先ほど貼り付けたウォレットアドレス）は自分のものを使ってください。転送イベントを追跡したいEthereumアドレスはいくつでも追加できます。
再読み込みすると、指定したすべてのパラメータとともに、新しく作成されたaddress activity webhookがNotifyダッシュボードに表示されるはずです。
### 8. Zapier内でOptimism webhookのレスポンスをパースする
Alchemyからのwebhookレスポンスをもとに、Optimismアドレスがトランザクションの送信に成功したときにアラートを送信するアクションをZapier内で作成するため、レスポンスをパースする必要があります。
_Action_セクションで、右側の_Filter_オプションを選択します。
_Filter setup & testing_で、_Event Activity From Address_（あるいは単に_fromAddress_で検索してもかまいません）の_\(Text\) Exactly matches_が自分のOptimismアドレス（最後のテキストフィールドに貼り付けます）と一致した場合のみ続行するように設定します。
_Continue_をクリックして「Your Zap would not have continued」と表示されても心配ありません！テスト通知はウォレットから送信されたものではないため、このメッセージは想定通りです。
### 9. Optimism webhookをSlackと連携する
まず、Slackアカウントとワークスペースを作成しましょう。[Slack](https://slack.com/)でアカウントを作成するか、すでにアカウントを持っている場合はログインしてください。その後、新しいワークスペースを作成します。ここでは_Optimism Wallet Alerts_という名前にしましたが、好きな名前を付けてかまいません！
#### トークン送信時のアラートを処理する
次に、自分のウォレットが**transfer event**の送信者である場合にメッセージを送信するようにします。
1. 下部にある「+」をクリックします
1. 新しい_Action_セクションで_Slack_を検索して選択します
1. _Action Event_で_Send Channel Message_を選択します
1. _Continue_をクリックした後、Slackアカウントにサインインします
1. _Set up action_セクションで、メッセージ送信のための各フィールドを入力します
1. アラートを送信したいチャンネルを選択します（今回は_Optimism-Wallet-Alerts_）
メッセージのテキストでは、送信したいフィールドや値を自由に選んでかまいません。
今回は以下のフィールドを選択しました。
その他はすべてデフォルトのままで構いません。
_Continue_をクリックし、次に_test and continue_をクリックします。
エラーが出なければ準備完了です！アカウントにSlackメッセージが届いているはずです。あとはZapを公開しましょう。
おめでとうございます！これで、Optimismウォレットがトランザクションを送信するたびに、Zapがそのトランザクションの詳細を記したメッセージを送信するようになります。
Zapの実行詳細は、Zapierダッシュボードの Zap History ページでも確認できます。
### 10. Optimismでのトークン受信を処理するメッセージを送信する
自分のウォレットがOptimismトランザクションの受信側になった場合にもアラートを送信したいと思います。
まず、_continue only if_アクションを編集します。
_Filter Setup & Testing_をクリックし、「+ or」ボタンを押して、_Event Activity To Address_（あるいは単に_fromAddress_で検索してもかまいません）の_\(Text\) Exactly matches_に自分のOptimismアドレス（最後のテキストフィールドに貼り付けます）を入力します。
これで、ウォレットが受信者になった場合にもZapが実行されるようになりました！
次に、_Only continue if…_アクションと_Send Channel Message in Slack_アクションの間に_Code by Zapier_アクションを作成します。
_Run Python_か_Run Javascript_のどちらかを選べます。ここではJavaScriptを選びますが、Pythonでもロジックは同じです。
_Continue_をクリックしたら、_Set up action_で以下のように入力データを設定します。
現在の通知はウォレットがETHを**送信**する場合にしか対応していないため、再度webhookレスポンスをパースします。ウォレットがETHを**受信**する場合にも対応できるようにカスタマイズする必要があります。
コードブロックに以下のコードを貼り付けてください（各行の意味はコメントを参照してください）。
`// Since JavaScript is case-sensitive, we will be comparing addresses in upper case const address = "Wallet-Address".toUpperCase\(\);
// Define Account 1 \(Our wallet\)
let account\_1 = "";
// Define Account 2 \(the user our wallet is sending to / receiving from\)
let account\_2 = "";
// Define to use "to" or "from" in message
let t\_or\_f = "";
let f\_or\_t = "";
if \(inputData.fromAddress.toUpperCase\(\) == address\) \{
// If Wallet is sending, then it is the fromAddress
account\_1 = inputData.fromAddress;
account\_2 = inputData.toAddress;
t\_or\_f = "from";
f\_or\_t = "to";
\} else if \(inputData.toAddress.toUpperCase\(\) == address\) \{
// If Wallet is receiving, then it is the toAddress
account\_1 = inputData.toAddress;
account\_2 = inputData.fromAddress;
t\_or\_f = "to";
f\_or\_t = "from";
\}`
`//` メール用に使用するフィールドを出力する
`output = \[\{account\_1: account\_1, account\_2: account\_2, t\_or\_f: t\_or\_f, f\_or\_t: f\_or\_t\}\];`
再度になりますが、**Wallet-Address**は自分のMetaMaskウォレットアドレスに置き換えてください。アクションのテストの際、出力変数に何も割り当てられなくても問題ありません。
最後に、_Send Channel Message in Slack_アクションに移動し、_Set up action_セクションをクリックします。
ここで、メッセージテキスト内のwebhookレスポンスの汎用的なフィールドを、JavaScriptコードから得られるより動的な出力に置き換えます。これらは、ウォレットがトークンを送信したか受信したかに応じてカスタマイズされます。
_Continue_をクリックしてアクションをテストし、公開しましょう！
おめでとうございます！これでOptimism webhookの作成が完了しました。