より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

IFTTT、Webhooksを使ったサービスを作って動かす。

www.atmarkit.co.jp

IFTTTとは?

IEEEみたいで訳わからん横文字ですね。

IF This Then That(これをしたらあれをする)

から来ています。

ハイ、覚えましたね。

いや、無理ですか。

実際にAppletを設定する上で、IF This Then Thatは必要になってくるので、触っていればすぐに覚えられると思います。

Amazon EchoTwitterGmailなどの多くのサービスより二つを連携させて一つのアプリを作成することができます。

興味がある方はあれこれ調べるよりは一度触ってサービスを作ることをお勧めします。

私はこれを触るきっかけは、後輩が作った IFTTTのサービスを使うことでした。

ご丁寧に手順書まで送ってくれたのでそれに従ってIFTTTのアプレットの作成をしてみました。

が、やっぱりつまづきます。

私なりにIFTTTでサービスを作る手順を作ってみました。

作るもの

Webhooksを使って、これをトリガーにして、通知するサービスを作ります。

  • If Button Then Webhooks
  • If Webhooks Then Notification

この二つのサービスを作ります。

環境

スマートフォンにはIFTTTのアプリをダウンロードしておいてください。

ブラウザより、IFTTTにアカウントを作るか、GoogleもしくはFacebookのアカウントでログオンします。

ifttt.com

If Webhooks Then Notification

先にIFTTTに通知するアプリを作ります。

画面上部メニューからMyAppletをクリックし、NewAppletをクリックします。

f:id:rimever:20190715172034p:plain

Thisを設定しよう

+Thisをクリックします。

Webhooksを検索し、「Receive a web request」をクリックします。

f:id:rimever:20190715172727p:plain

EventNameに「Event」と入力します。

f:id:rimever:20190715172838p:plain

Create Triggerを選択して、Thisの設定は完了です。

Thatを設定しよう

  • Thatをクリックします。

f:id:rimever:20190715173055p:plain

Notificationsで検索し、「Send a notification from the IFTTT app」をクリックします。

f:id:rimever:20190715172952p:plain

Messageに「"{{EventName}}" が発生しました!」と入力します。

f:id:rimever:20190715173246p:plain

Create Actionをクリックして、Thatの設定は完了です。

命名

最後にこの処理に名前をつけてFinishをクリックします。

f:id:rimever:20190715173347p:plain

動作確認

Appletが作成されました。

f:id:rimever:20190715173529p:plain

Webhooksはテストするページがあります。

これで試しましょう。

f:id:rimever:20190715173627p:plain
Webhooksのマーク

上のマークをクリックして、Webhooksのページへ遷移します。

f:id:rimever:20190715173747p:plain

右上のDocumentationをクリックします。

f:id:rimever:20190715174000p:plain
Keyは伏せています。

このページではあなたのKeyを確認できます。

また、Webhooksのトリガーを実行することができます。

EventNameテキストボックスにEventと入力し、TestItボタンをクリックしてください。

https://maker.ifttt.com/trigger/Event/with/key/{あなたのキー}

確認

ここでスマートフォン側でIFTTTのアプリを起動します。

Activityより通知されたことが確認できます。

ただ、指定したメッセージはどこに表示されているのかわからないです。すいません。

If Button Then Webhooks

画面上部メニューからMyAppletをクリックし、NewAppletをクリックします。

f:id:rimever:20190715172034p:plain

Thisを設定しよう

+thisをクリックします。

f:id:rimever:20190715172151p:plain

ButtonWigetを検索し、Button Pressedを指定します。

f:id:rimever:20190715172129p:plain

Thatを設定しよう

+thatをクリックします。

f:id:rimever:20190715172246p:plain

f:id:rimever:20190715172432p:plain

設定が終わったらFinishをクリックして完了です。

動作確認

スマートフォンのアプリを起動します。

MyAppletsに切り替えます。

作成したMyAppletsをクリックし、「Widget settings」をクリックします。

ボタンをクリックします。

するとActivityに実行されたことが通知されます。

Button Then Webhook からの Webhook Then Notificationと二つのサービスが連動して、通知が発生しています。

参考サイト

ifttt-japan.club