【ローコードIoT】FileMakerで実現！快適快速IoTシステム！


# この記事でわかること
- FileMakerとESP32を使用したIoTシステム開発
- 植物のIoT化
- 農業IoTの第一歩
- 予算不足でなかなかIoTを導入できない企業の皆様の業務改善ヒント
- 人間がやらなくてもいいことは自動化して楽にするヒント

# 解決したい課題
- 知らない間に花が枯れている現状

# できること
植物の周りの環境(土中湿度、気温、湿度)を世界中どこからでも24時間確認し、枯れる前に水やりができる^^


## 構成
土中湿度センサー、気温湿度センサーより環境情報を取得
↓
ESP３２を使用してFileMakerServerのDataAPIを使用してデータを蓄積
↓
FileMakerを使用してデータの表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/f665a554-33f9-308d-ba5d-867824a22737.png)


## FileMaker　とは？？
FileMakerって何やねんって人、悲しいことにたくさんいると思います。
今流行のローコード開発ツールの一つです。(https://www.claris.com/ja/)
業務担当の方でも高速で業務アプリを開発でき、導入した月から業務が変わる夢のツールです。

大阪の中心的交通網「OsakaMetro」をはじめ世界中で使用されています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/7YTfmZretjk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## ESP32とは？？
ESP32はWi-Fi機能を搭載した人気のIoTマイコンです。ArduinoやPythonで簡単にシステム開発することができます。しかも安い！1500円以下で手に入ります。

# 開発
では、実際に開発してみましょう！

##　開発手順
1. 必要なものを揃える
1. FileMakerアプリの開発
1. 開発したアプリをサーバーに配置
1. ESP32とセンサーを繋ぐ
1. ESP32の開発

## 1.必要なものを揃える(3,499円)
今回の開発で必要なものと購入場所は下記です。
**1. Claris FileMaker**
アプリを作成するためのローコード開発ツールです。
まずは45日間無償版で大丈夫です。下記よりインストールしてください。
無償版：https://www.claris.com/ja/trial/

さらなる深みに興味のあるエンジニアは年間9,900年で全機能を試せる「FileMaker Developer Subscription」がおすすめです！
FDS：https://support.claris.com/s/article/FileMaker-Developer-Subscription-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6?language=ja

**2. サーバー**
Claris FileMaker Serverをホスティングするためのサーバーです。
OSはMac、Windows、Ubuntuのいずれかが必要です。
詳細は公式資料をご参照ください。
https://support.claris.com/s/answerview?language=ja&anum=000034947#Supported_operating_systems_and_devices

Ubuntuに慣れているならばAWSの無料枠でEC2を使用するのがオススメです！

**3. ESP32**
センサーから取得した値をWiFi経由で通信するマイコンです。
Amazonなどでお買い求めください
Amazon(1,250円)：https://www.amazon.co.jp/dp/B06XWP81GP/ref=cm_sw_em_r_mt_dp_CFPV9SD5MV8XW9870T4S

**4. センサー**
・ DiyStudio 土壌湿度計 湿度検出モジュール
Amazon(999円)：https://www.amazon.co.jp/dp/B07MC9ZGXL/ref=cm_sw_em_r_mt_dp_ZCQSVXW06N2D328PEFHP?_encoding=UTF8&psc=1

・ ＤＨＴ１１使用温湿度センサモジュール
秋月電子(500円)：https://akizukidenshi.com/catalog/g/gM-15491/

**5.ブレッドボード**
センサーとESP32を接続するために使用します。
ブレッドボードがなくても半田付けでの接続でも可能です。
Amazon(750円)：https://www.amazon.co.jp/dp/B086GJT83Q/ref=cm_sw_em_r_mt_dp_D9F18CNFSBS3TXT63H51

**6.配線**
センサーとESP32を接続するために使用します。
そこらへんにある電気の通る金属でも代用可能です。
Amazon(990円)：https://www.amazon.co.jp/dp/B06Y48V9DL/ref=cm_sw_em_r_mt_dp_0J5CKDD3RFZYPP5ZKMVV

**7.USBA-microBケーブル**
PCからESP32へのデータ転送に使用します。
100均で売っているものでもOKです。
※必ずデータ転送用ケーブルをご準備ください。充電専用ケーブルではPCからESP32にデータ転送できません。


## 2.FileMakerアプリの開発
### FileMakerアプリ新規作成
1. アプリを作成します。PCでFileMakerのアプリを起動し、作成をクリック→新規をダブルクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/9a471f47-94b5-32d8-ef16-5d8297d4a896.png)

2. ファイルの保存場所を聞かれるので「IOT」と名前をつけて保存してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/62a83baa-c9cc-987b-a7d0-9be25a4bf8c3.png)

### テーブル設計
FileMakerではGUIを使用して簡単にテーブル設計を行うことができます。
どのようなデータをどのような形式で保存するかを直感的に設定できます。
1. 「気温」フィールドを追加します。新規ファイル作成後に下記画面が現れるので、フィールド名に「気温」、タイプを「数字」と変更し「作成」ボタンをクリックし、「OK」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/d5ee9549-839b-6b6e-d302-39faf9e8d01d.png)
2. 気温フィールドが配置された画面が現れることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/43ffc373-13ff-4065-c3d0-f569b6d80eca.png)
3. 同様に湿度と土壌湿度を追加します。
メニューより、「ファイル」→「管理」→「データベース」とクリックしてデータベース管理ウィンドウを開いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/de3aeedd-61b0-2bce-7db0-fc6216f3037f.png)

フィールドタブを選択し、フィールドに「湿度」、タイプに「数字」を設定し「作成」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/142ee569-4bf6-2a8f-03f6-406c31a1d5b3.png)

フィールドに「土壌湿度」、タイプに「数字」を設定し、「作成」をクリックしてください。最後に「OK」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/c88e1a54-5f12-0f7f-dcba-a009a9235008.png)

### 画面開発
センサー情報を確認する画面を開発します。
1. 表形式に切り替えます。表示方法切り替えアイコンの一番右をクリックしてください。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/f31a9d07-6bde-07f0-a00b-910fc8ba1719.png)
2. 表示列を追加します。「変更」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/00bbba2e-ebc9-e3a6-02eb-ff7c742188bb.png)
3. 「＋」をクリックし、フィールド追加画面より「湿度」と「土壌湿度」をShiftキーを押しながら選択し、「OK」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/3eff53ec-f4f6-02e9-2c75-0b2adbaf8e4d.png)
4. このような画面表示になっていたらOKです。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/35f0869c-a4a1-5c53-6b41-2f3233d5ab79.png)


## 3. 開発したアプリをサーバーに配置
1. 素晴らしき先人たちの記事を参考にFileMakerサーバを設定し、ファイルをアップロードしてください。
Hiroyuki Noguchi様の記事：https://qiita.com/Hi_Noguchi/items/c841d3bd0e9858ffd665
【公式】Claris FileMaker Server 19 インストールおよび構成ガイド：https://help.claris.com/ja/server-installation-configuration-guide/

2. 上記配置したサーバーにドメインを設定してください。今回使用するライブラリの関係上ドメインの設定が必要です。
下記の素晴らしき記事などを参考にドメイン設定を行ってください。
無料ドメイン取得方法：https://qiita.com/iiiiiiiiih/items/aabe1cd09f368f0bf2b8

3. SSL設定を行います。こちらも今回使用するライブラリの特性上必要となります。
下記の素晴らしき記事などを参考にSSLの設定を行ってください。
無料SSL設定方法：https://qiita.com/dxa/items/bf6e9bc05b353fb50226

## 4.ESP32とセンサーを繋ぐ
上記で購入したESP32と土壌センサーと気温湿度センサーをジャンパーワイヤーとブレッドボード経由で接続します。
ブレッドボードとジャンパーボードの使い方はこちら(https://spiceman.jp/bread-board/ )のページなどをご参考ください。ここで紹介したセンサーは3.3Vで動きますが、他のセンサーを使用する際は入力電圧に注意してください。また、電源をバッテーリーや単三電池から取る場合はバイパスコンデンサを設置してください。
※本記事を参考に作成された回路で発生した火災などについては一切の責任を負いません、自己責任で気をつけて回路を構築してください。
回路図は下記です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/4ff4d903-1cd1-dc71-0197-290a5586721e.png)
1. ESP32の3v3ピン（出力）をブレッドボードの+列に繋いでください。
2. ESP32のGNDピンをー列に繋いでください。
3. 土壌湿度センサーのVCCと温度湿度センサーの＋をブレッドボート上で＋と繋いでください。
4. 土壌湿度センサーのGNDと温度湿度センサーの-をブレッドボート上で-と繋いでください。
5. 土壌湿度センサーのAOUTとESP32の32ピンを繋いでください。
6. 温度湿度センサーのSとESP32の33ピンを繋いでください。


## 5.ESP32の開発
4で作成した回路を動かすためにESPのプログラムを書いていきます。

1. Arduino IDE をこちら(https://www.arduino.cc/en/software )からインストールしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/4894df64-2816-ab38-c2f1-3b42d774fe38.png)

2. Arduino IDEを起動してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/8d244d95-8205-3a2c-65f4-1974523ca929.png)

3. 初期表示されるコードを全て削除し、下記コードをコメント部分も全てコピーしてください。

```C++
#include <WiFi.h>
#include <HTTPClient.h>
#include "ArduinoJson.h"
//温湿度計
#include "DHT.h"
#include <base64.h>
//温湿度計の種類
#define DHTTYPE DHT11   // DHT 11
//温湿度計の入力を設定
#define DHTPIN 33
const int  MODPIN = 32;
DHT dht(DHTPIN, DHTTYPE);
const int MAXVOLT = 4096;

// wifi接続情報 TODO使用されるwifiの情報を設定してください。
const char* ssid = "tsugumibacks12345";
const char* password =  "tsumugiya-it";
//データベースファイルへのログイン情報 #TODO データベースをサーバーに配置する際に使用したidとパスワードを設定してください。
const String toEncode = "Admin:12345"; //「 id:pass」の形式でここに記載してください。base64でエンコードして使用します。
const String encoded = base64::encode(toEncode);
const String AuthorizationData = "Basic " + encoded;

//FMサーバー情報 TODO データベースを配置したサーバのドメイン、ファイル名、レイアウト名を設定して下さい。
const String domain = "https://tsumugiya.com";
const String file_NM = "IOT.fmp12";
const String base_url = domain + "/fmi/data/v1/databases/" + file_NM;
const String layout = "IOT";

void setup() {
  // 温湿度計センサー開始
  dht.begin();
  //シリアル通信開始
  Serial.begin(115200);
  delay(1000);
  //Wifi 開始
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  Serial.println("Connected to the WiFi network");
}

// TODO  firefoxなどを使用してroot認証キー情報を設定してください。行の最後に「 \n」を追記してください。
//https://qiita.com/minwinmin/items/55ba92edac3e1ec9f602
const char* root_ca = \
                      "-----BEGIN CERTIFICATE-----\n"\
                      "MIIDSjCCAjKgAwIBAgIQRsdfasdfasdfasfdvsdtbfhNBgkqhkiG9w0BAQUFADA/\n"\
                      "MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdSJDFKHSHFJzdCBDby4xFzAVBgNVBAMT\n"\
                      "DkRTVCBSb290IENBIFgzMB4@#$%^&*%^&***(IJHKHSXDTIxMDkzMDE0MDExNVow\n"\
                      "PzEkMCIGA1UEChMbRGlnaXRhbCBTaWdSKJDFHSKFJHS1c3QgQ28uMRcwFQYDVQQD\n"\
                      "Ew5EU1QgUm9vdCBDQSBYMzSDLKFJLKJSDLFSLJAQ234BBQADggEPADCCAQoCggEB\n"\
                      "AN+v6ZdQCINXtMxiZfaQguzHSDJKLFHSLJDHFSJDFKSHDKFJHSKDJHA:AFFsrE4O\n"\
                      "rz5Iy2Xu/NMhD2XSKtkyj4zl93ewSDFSFDSDFSDFSDFDFDFDSFSFSDFSFSFDoOEq\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "OLl5CjH9UL2AZd+3UWODyOKIYepLTSUMUGITSUMUGIUGITSUMUGIUGITSUMUIN9b\n"\
                      "Ob8VZRzI9neWagqNdwvYkQsEjgfbKbYK7p2CNTUQ\n"\
                      "-----END CERTIFICATE-----\n";

void loop() {
  // 土壌湿度計値
  int liq_val = analogRead(MODPIN);
  // 湿度
  float h = dht.readHumidity();
  // 気温
  float t = dht.readTemperature();
  //摂氏
  float f = dht.readTemperature(true);

  // センサーの取得に失敗した場合はリトライ
  if (isnan(h) || isnan(t) || isnan(f)) {
    Serial.println(F("温湿度センサー情報読み込みに失敗しました。センサーを確認してください。"));
    return;
  }
  if (isnan(liq_val)) {
    Serial.println(F("土壌湿度センサー情報読み込みに失敗しました。センサーを確認してください。"));
    return;
  }

  // 土壌湿度を計算
  float mad_moist_val = (MAXVOLT * 1.000 - liq_val) * 100 / MAXVOLT;

  // センサー取得値をシリアルモニタに表示
  Serial.print(F("土壌湿度: "));
  Serial.print(mad_moist_val);
  Serial.print(F("%  湿度: "));
  Serial.print(h);
  Serial.print(F("%  気温: "));
  Serial.print(t);
  Serial.print(F("°C "));
  Serial.print(f);
  Serial.print(F("°F "));

  // FM
  if ((WiFi.status() == WL_CONNECTED)) { //Wifi接続チェック

    HTTPClient http; 
　
    http.begin(base_url + "/sessions", root_ca); //URLと認証情報を設定
    http.addHeader("Content-Type", "application/json");
    http.addHeader("Authorization", AuthorizationData );
    //    ログイン
    int httpResponseCode = http.POST("{}");   // POST request

    if (httpResponseCode > 0) { //Check for the returning code
      String response = http.getString(); //get response and stuff it in string
      DynamicJsonDocument doc(1024);
      String input = response; //stick response into input
      deserializeJson(doc, input); //returnをjson形式で変換する
      JsonObject obj = doc.as<JsonObject>(); 
      String authtoken = doc["response"]["token"]; // 後続の処理に使用するためにtoken を取り出す
      String pusher = "Bearer " + authtoken; //GETに使用する人使用情報を作成する

      
      String temp = String(t); //stuff floaters into a string
      String hum = String (h);
      String madhum = String(mad_moist_val);
      //  Data API にPOSTする文字列を作成する。「\」でダブルクオテーションをエスケープ。FileMaker Data API を使用するためにダブルクオートが必要
      String payload = "{\"fieldData\":{\"土壌湿度\":" + madhum + ", \"気温\": " + temp +  ", \"湿度\": " + hum +  "}}";

      Serial.print(payload);

      HTTPClient http; //start pushing data
      // サーバーに接続してPOSTする
      http.begin(base_url + "/layouts/" + layout + "/records", root_ca); 
      http.addHeader("Content-Type", "application/json");
      http.addHeader("Authorization", pusher );
      int httpResponseCode = http.POST( payload );   //Send the actual POST request

      if (httpResponseCode > 0) { //Check for the returning code
        String response = http.getString();
        Serial.println(httpResponseCode);   //Print return code
        Serial.println(response);           //Print request answer
      } else {
        Serial.print("Can't push bloomin' message sending POST: ");
        Serial.println(httpResponseCode);
      }
    } else {
      Serial.print("Can't get a token while sending POST: ");
      Serial.println(httpResponseCode);
    }
    http.end(); //Free the resources
  }
  // 30分スリープしてから再度実行
  delay(30 * 60 * 1000);
}
```

4. 上記コードの「TODO」と書かれた部分を編集し、使用される状況に合わせてください。
    - wifiの情報を設定
    - データベースをサーバーに配置する際に使用したidとパスワードを設定
    - データベースを配置したサーバのドメインとデータベースファイルのファイル名、レイアウト名を設定
    - root認証キー情報を設定

5. 上記コードをESP32に書き込みます。
    - [環境設定] -> [設定] -> [追加のボードマネージャのURL] -> https://dl.espressif.com/dl/package_esp32_index.json の追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/67d67c16-9b46-dd53-1199-e804cc2176d0.png)
    - [ツール] -> [ボードマネージャ] -> [esp32]のインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/8e8431c1-6d77-c010-c249-0f28a23edc1d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/b4fbc7fd-7b35-d2bf-8d63-e93d3fde82ec.png)
    - [ツール] -> [シリアルポート] -> ESP３２を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/4884c23f-984d-51b6-e98c-27135ad874b5.png)

   - [Arduino IDE] -> [マイコンボードに書き込み] (「→」マークです)
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/2142143e-e0c0-068e-9d2a-425f89314d08.png)

6. 実行
ESP32の電源をUSB等から給電した状態で土壌湿度センサーを土の中に突っ込み、数秒待ってください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/f665a554-33f9-308d-ba5d-867824a22737.png)

7. 確認
ファイルメーカーより登録された内容を確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184509/fcad4337-5a78-e5c0-b2d8-05c6cf5c2189.png)

うまくいかない場合はこちら（https://qiita.com/namiki_takeyama/items/e7f919ea5ed1f7f0f175）の記事などを参考にしてください。

解決できない場合はコメントお待ちしております！！

# まとめ 
本記事ではFileMakerとESP32を使用した簡易IOTシステムの開発方法を紹介しました。
センサーからFileMakerに自動的にデータを貯めることができました。
大量データの通信や、データの利用に関してはAWS IOT(https://aws.amazon.com/jp/iot/ )がとても勉強になります^^
是非ご覧になってください。（私はAmazonの回し者ではありませんw）

# おまけ
今回紹介した仕組みと、FileMaker開発を組み合わせることで下記のようなアプリを開発することができます。
興味のある方はお近くのFileMakerデベロッパーまでお問い合わせください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/OMas-w-fW_M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

お問い合わせは「つむぎや株式会社」 (https://tsumugiya-it.com/) 　までお願いいたします。