IFTTTでスプレッドシートに値が反映されない時の原因と解決策

2021.04.21
IT
bug, IoT

obnizボードのオンラインエディタを使いながら、IFTTTでスプレッドシートと連携させる時に詰まったので、記録します。

結論から言うと、CORSには気をつけようということです。

1. 環境
- 1.1. コード
2. 現象
3. 原因
4. 解決策
5. まとめ

環境

obnizのボードに圧力センサを繋げ、その値をスプレッドシートに書き込む、ということを実現しようとしていました。

具体的には、下記のような構成図です。

ちなみに、obnizのデバックはブラウザのオンラインエディタを使用します（ブラウザが肝）。

Json形式でPOSTするといういたって簡単＆ありふれた連携です。

https://maker.ifttt.com/trigger/{EVENT}/with/key/{YOUR_KEY}のURLに対して、

{ “value1” : “hoge”, “value2” : “piyo“, “value3” : “puyo” }のようなJsonを送り、スプレッドシートにvalue1～value3までのデータを転記させようとしていました。

コード

実際のコードはこのような感じです。

  //送信データ作成
  var formData = new FormData();
  formData.append("value1", "temp");
  formData.append("value2", "humd");
  //IFTTTリクエスト
  await fetch(
    `https://maker.ifttt.com/trigger/${ifttt_event}/with/key/${ifttt_secret_key}`,
    {
      method: "POST",
      mode: "no-cors",
      body: formData
    }
  )
    .then(() => console.log("success"))
    .catch((error) => console.log(error));

//送信データ作成

var formData = new FormData();

formData.append("value1", "temp");

formData.append("value2", "humd");

//IFTTTリクエスト

await fetch(

`https://maker.ifttt.com/trigger/${ifttt_event}/with/key/${ifttt_secret_key}`,

{

method: "POST",

mode: "no-cors",

body: formData

}

)

.then(() => console.log("success"))

.catch((error) => console.log(error));

現象

いくらAPIを叩いても、SpreadSheetにvalue1～value3までの値が転記されない。

SpreadSheetには、実行時刻のみが転記され、valueの値は転記されないのです。はて(・・?

ググっても同じ現象は出てこず。

原因

いくつかの原因が重なっていました。

javascriptで、mode: “no-cors”でAPIを飛ばすときは、Conten-Typeは、application/x-www-form-urlencoded, multipart/form-data, text/plainの3種類のみ
- json形式を送っても、自動でtext/plainとなります。
- ブラウザのf12で開発機能からネットワークタブを押して、該当の通信を押して、要求ヘッダーを見ると確認できます。
- 参考:Fetchの使用
IFTTTのwebhookで対応しているのは、application/json, application/x-www-form-urlencoded, text/plainの3種類のみだが、text/plainでの転記の方法は不明
- text/plainでJson形式で送っても、SpreadSheetには転記されません。方法あれば教えてください🥺
- application/json, application/x-www-form-urlencodedの形式で送る必要がある。
- 参考: IFTTTのWebhookで対応しているcontent type
ブラウザからapplication/jsonを送る場合は、CORSの設定が必要（当たり前ですね）

解決策

いくつか選択肢があると思います。

解決策１:application/x-www-form-urlencodedで送る

Json形式では送れないですが、割と素直かなと思います。

value1=hoge&value2=piyo

のように送れば良いということです。

この方のコードを参考にfetchで送れば、ちゃんとSpreadSheetに反映されます。

解決策２：ブラウザのCORSを無効にする

セキュリティ上よくないですが、開発するときに限って無効にするのもありかなとは思います。

今回は、obnizのブラウザのオンラインエディタを使用していたので、そのデバック時のみCORSを無効にする感じです。

chromeでの無効化はよくわからなかったのですが、firefoxであれば、拡張を使えば簡単に無効化できました。

使った拡張機能は、「Allow CORS: Access-Control-Allow-Origin」です。

これを使うと、application/jsonで送ることができます。

解決策３：IFTTTを使わない

これを言ったら元も子もないですが、AWSのAPIgateway経由でlamdaを介してSpreadSheetなりDynamoDBに転送した方が、応用性も速度もあります。

私はやりたい事的にこの解決策をとりました。

まとめ

ブラウザのエディタを使う時は、CORSには気をつけましょう。

Webアプリ作っているとよく引っ掛かりますが、またこれに引っかかりましたｗ