スキップしてメイン コンテンツに移動

IFTTTを使ってESP32からSlackに通知する(入門)

  今回は題名の通りIFTTTを使ってWiFi経由でESP32からSlackに通知を送るまで初心者でもわかりやすく説明していきたいと思います。

前提条件

・Slackを使っていること
前回の記事の確認

1.ハードウェア構成

1.必要なもの

  • ESP32-WROOM-32 開発ボード
  • ブレッドボードなどの配線機材
  • タクトスイッチ

ハードウェア

ハードウェア
画像"ハードウェア"を参考に配線してください。
また、D4->タクトスイッチ ->GNDと繋げばどんな配線でも構いません。

  • 注意:4本足があるタクトスイッチは画像のように対角同士で配線するようにしてください。

2.IFTTTの簡単な使い方

1.アカウント作成

まず下のURLにアクセスしアカウントの作成をします。

ifttt.com

アカウント作成1
今回はメールアドレスで登録をしていきます。
アカウント作成2

画像"アカウント作成1~2"を参考にアカウント作成を行ってください。

2.レシピ作成

IFTTTIF This Then Thatのそれぞれ頭文字を取ったのが名前の由来です。
そしてこのThisとThatを記述したのがレシピと呼ばれています。
このレシピの作成を行っていきたいと思います。

レシピ作成1
右上の①のアイコンをクリックし②のCreateを開、
次にThisを追加するために③のあたりをクリックします。
レシピ作成2
画像"レシピ作成2"の通り①にwebhooksと打ち検索すると②が出てくるので選択して次に進みます。
レシピ作成3
画像"レシピ作成3"を参考に進め①にはイベントの名前を入れるので各々自由に名前を決めて入力してください。今回はesp32toSlack_IFTTTとして筆者は進めていきます。
レシピ作成4
画像"レシピ作成4"を参考にThatをクリック後、検索欄にslackと入力し出てきたアイコンをクリックして次に進む。
レシピ作成5
画像"レシピ作成5"を参考に指示に従い操作してください。
自分のSlackでワークスペースのURLがわからない場合は下のURLを参考にしてください。

slack.com

レシピ作成6
レシピ作成7
レシピ作成8
画像"レシピ作成8"の①②は画像の通りに操作してください。
③は画像の通りではなくても良いので自分が送りたいメッセージを記述してください。
(筆者は画像の通り行っていきます。)
④のOptionと書かれた機能の紹介は省きます。
最後に⑤で説明した通り下にあるCreate actionををクリックする。
レシピ作成9
レシピ作成10
下のFinishボタンを押し、画像"レシピ作成10"のような画面になればレシピは完成です。

3.Your keyを調べる

今回は特定のアドレスにアクセスしたら通知が届くような機能なのでアクセスするためのYour keyを調べていきます。

Your keyを調べる1
Your keyを調べる2
画像"Your keyを調べる2"で青で囲まれた中のYour key is:の後の赤い太線の部分を後で使うのでメモかどこかにペースト保存しておいてください。

  • 注意:環境によってYour keyは環境によって違うので各自で確認しておいてください。

3.動作確認

では、動作確認をしていきましょう。
使うものはハードウェア構成で記述したもので行います。
また、今回はesp32を使うのでプログラムの書き込み方など開発環境などがわからない場合は前回の記事を参考に行ってください。
細かい説明などは省くのでここから先わからなければ先にそちらを読んでから進めてください。

1.ソフトウェア

#include <Wifi.h>
#include <HTTPClient.h>

const char* ssid     = "WiFiのssid";
const char* password = "WiFiのパスワード";

const String maker_Event = "esp32toSlack_IFTTT"; // Maker Webhooks
const String maker_Key   = "your key"; // Maker Webhooks
String url = "https://maker.ifttt.com/trigger/" + maker_Event + "/with/key/" + maker_Key;

int i = 0;
bool current_button_state = false;
bool before_button_state = false;
unsigned long counter = 0;
int http_code;


HTTPClient http;
void setup(){
    Serial.begin(115200);
    WiFi.begin(ssid,password);
    Serial.print("connecting to WiFi.");
    while(WiFi.status() != WL_CONNECTED){
        delay(100);
        i++;
        Serial.print(".");
        if(i == 100){
            i = 0;
            return;
        }
    }
    Serial.println("Connected!!");

    http.begin(url);

    pinMode(4,INPUT_PULLUP);
}

void loop(){
    if(digitalRead(4) == LOW){
        if(current_button_state == true) return;
        Serial.println("press!");
        current_button_state = true;
        if(!(millis() - counter >= 10000)) return;
        http_code = http.GET();
        if(!(http_code > 0)){
            Serial.println("request failed!! try again");
            return;
        }
        Serial.println("Send to Slack");
        counter = millis();
    }else{
        current_button_state = false;
    }
}

上記のプログラムの一部を各自の環境に合わせて書き換える必要があります。
* 4行目、二つの””(ダブルクオーテーション)の内側に自分が使っているWiFissidを追記
* 5行目、二つの””(ダブルクオーテーション)の内側に自分が使っているWiFiのパスワードを追記
* 8行目、二つの””(ダブルクオーテーション)の内側に先ほどメモかペースト保存しておいたyour keyを入れる

追記を終えたらesp32に書き込んでください。

2.動作内容

動作内容は起動後WiFiに接続しその後、ボタンを押したら自分で選択しておいたSlackに通知が届くようになっています。
しかし、短時間のうちに何回もアクセスしようとするとサーバ側に過剰な負荷をかけてしまうのでボタンを押しても最後にアクセスしてから約10秒たたないと再アクセスできないようになっています。(起動直後も10秒程度アクセスできないようになっています。)

  • 注意:筆者は初心者なためわかりにくいプログラムになっているかもしれません。
    無駄な構造になっていることもあるので飽くまで参考程度にしてください。よってプログラムの細かい説明は省くことにします。

Slackに画像"レシピ作成8"で設定しておいたTEST_Messageと送られてくれば無事動作確認の終了です。

4.まとめ

今回はIFTTTのアカウント作成からwebhookとSlackの連携を簡単に説明しました。
だらだらと説明と写真の連続で余計な部分が多く動作確認も緩すぎたかな?と思っています。(反省)

次記事にできたらesp32でHalakeにあるセンサから取得したデータをSlackに送ったり、別のサービスを連携してみるのもいいかもしらませんね。

コメント

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう!その2

前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標(再掲) ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提(再掲) ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール(再掲) ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作

M5Stackで、においセンサー(TGS2450)を使ってみる。(LCDに表示編)

今回は、においセンサー(TGS2450)から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334(スイッチとして利用) M5StackSideBB(ブレッドボード) M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー(TGS2450)について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう!その1

今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注: 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ (これから書くプログラムの保存領域)