Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@Hi_Noguchi

NoodlをIFTTTのWebhookのトリガーにしてみる

More than 1 year has passed since last update.

本記事について

誰向けの記事?

  • Noodl そのものに興味ある人
  • Noodl 触ってて IFTTT 連携に興味ある人
  • IFTTT については詳しく書かないのである程度わかってる前提

Noodl とは

IFTTT とは

  • トリガーに対してアクションを指定できる、つまり、色んなサービス間をつなげることができる便利なやつ
  • https://ifttt.com/

簡単にまとめると

  • Noodl で画面(ボタン)作って IFTTT の Webhook へ REST 通信することで IFTTT のトリガーにしてみた
  • Noodl 初心者が触ってみて一時間くらいでできた

IFTTT 側

THIS - トリガーをつくる

  • Webhooks を選ぶ
  • Event Name を入力
    • ここの Event Name が Endpoint の URL に含まれるので忘れないこと ifttt_01.PNG

THAT - アクションをつくる

  • Google Sheets を選ぶ
    • アクションの結果がわかりやすいものなら何でもよいです
    • 以下画像の Formatted row では Value1 と頭文字が大文字ですが、実際に REST 通信時に指定する際には value1 と小文字にしなくてはならないのが罠 ifttt_02.PNG

Endpoint の URL を取得

  • Webhooks の Documentation にある

    • 先ほどの Event Name を使うことになる ifttt_03.PNG
  • curl コマンドなどで実際に走るか実行テスト

  • Google ドライブ上に、上記設定した通りの path に該当のシートが作成されていて、シート内に行が書き込まれていれば OK

Noodl 側

以下のような画面を作ってみることにする

  • 注:本当は Text Input で入力された値を REST に渡したいのだけれど、まだよくわかってなくてうまくいっていない ( 2019/10/25 時点 )
    noodl_01.PNG

  • 以下のノードを作成

    • Group
    • Circle
    • Rectangle
    • Text Input
    • REST
  • Group ノードを Root の子要素にし、 REST 以外のノードを Group の子要素にする

    • Noodl では、下方向にいくほど画面のレイヤーが手前側になる、という仕様なので Rectangle より Text Input を下にすること
  • Circle, Rectangle, Text Input の見た目をお好みにカスタマイズ

    • 以下、参考までに

noodl_02.PNG
noodl_03.PNG
noodl_04.PNG

  • Circle から REST に向けてノードの接続をおこなう
    • Tap -> Fetch
  • Text Input から REST に向けてのノードの接続は、まだよく分かっていないので後日あらためて…… ( 2019/10/25 時点 )

REST ノードの設定

  • 以下の画像のような状態になるよう

noodl_05.PNG

  • Resource …… 空欄で構わない
  • Method …… POST
  • Script …… 以下参照
    • ここで inputs の定義をおこなうと、入力欄が増えることになる
define({
  inputs:{
    text: 'string'
  },

  outputs:{
  },

  request:function(inputs,request) {
    request.parameters.value1 = inputs.text;
  },

  response:function(outputs,response) {
  }
})
  • Backend type …… External
  • Endpoint …… IFTTT 側で取得してきたものをここへペースト

完成

all_01.PNG

検証

  • 以上で作業は完了
  • Noodl の画面上に作成されているサークルをタップ/クリックすると、スプレッドシートに行が書き込まれるはず
  • 用意した text 欄に書き込んだテキスト内容は、スプレッドシートの C 列に書き込まれるはず
    • もしうまくいっていない場合は request.parameters.value1 の部分が大文字の Value1 になっていないか要確認

こんごの ToDo

  • Noodl の画面上で用意してある Text Input に入力した内容が渡るようにしたい
  • 便利な使い道を考えたい
    • Noodl はソースコードを書き出すことで簡単に WEB サーバへデプロイすることもできるので PWA にしてスマートフォンからの手軽な IoT スイッチにできないかなーなどと考えているところ
    • LINE Clova があればしゃべらせることができるので GoogleHome や Alexa に命令したいけれど発話したくないときなどに、ボタン一つで Clova に代理で発話指令をしてもらうことができる(何を言っているんだろう)
5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Hi_Noguchi
ピティナ(一般社団法人全日本ピアノ指導者協会) 本部 CTO / 株式会社東音企画 外部 CTO。 育休一年 ( 2019/03/01 ~ 2020/02/29 ) 取得完了!
piano
ピティナは音楽指導者の団体で、また世界最大のピアノコンクールを主催する団体でもあります。 「~音楽の必要性を社会に向けて立証する~」ため、エンジニアを採用し始めました!!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?