メンチカツには醤油でしょ!!

AWS/Java/Node.js/Spreadsheets/Docker/Jenkins/コミュニティ・勉強会レポを主とした技術系ブログ

IFTTTでREST APIを用意してiPhoneに通知

前置き

前回はIFTTTで初めてのRecipe作成について紹介しました。
work withから選択すると予め公開されているRecipeしか使えないので
今回は新規作成と設定についてです。

そして、APIの入り口を作って、そこが叩かれたらiPhone(スマフォ)へ通知
というところまで紹介します。

ryoichi0102.hatenablog.com

手順です

メイン画面をスワイプしてMy Recipes一覧を表示させ
右上の+ボタンをタップします。(ここまでは前回と一緒)

f:id:ryoichi0102:20160323130154p:plain

今回はBrowseの最下部にある Create a Recipeをタップします。
(最初、これがなかなか発見できませんでした笑)

f:id:ryoichi0102:20160323130046p:plain

Create a Recipeが表示され、thisとthatの部分に+が表示されます。
まずはthis=何をトリガーとするか、の設定ですので
Start here!の所の+をタップします。

f:id:ryoichi0102:20160330125518p:plain

Select Triggerにて、どのサービスと連携させるかを選択するのですが、
APIを用意する場合は Maker を選択します。
追記:今は Webhooks という名前になっています!

ちょっと名前がわかりづらいですよね。
IFTTT APIとかそんな名前で存在すると思っていたので
こちらも見つけるのに苦労しました。

f:id:ryoichi0102:20160330125717p:plain

ReCeive a web requestを選択します。

f:id:ryoichi0102:20160330125955p:plain

Channel ActivationではContinueをタップして
IFTTTとMaker Channelの連携を承認へ進みます。

f:id:ryoichi0102:20160330130129p:plain

ブラウザがたちがあり、承認処理が終わったら
Open in "IF"? ダイアログが出るのでOpenをタップして戻ります。

f:id:ryoichi0102:20160330130342p:plain

これで連携の承認が完了しました。
Doneをタップして次に進みます。

f:id:ryoichi0102:20160330130515p:plain

さぁ、ここが本丸とも言える設定部分です。
まずはイベントの名称を入力します。
ここでは"test_api"としています。

ここで入力するのは単純なイベント名でURLに含まれたりするものではないです。

f:id:ryoichi0102:20160330130632p:plain

これでthisの設定は終了です。
URLは後で取得しますよ。

そしてthen thatにあたる部分の+をタップします。

f:id:ryoichi0102:20160330131004p:plain

そして今度はSelect Actionの中から
IF Notifications を選択します。
これはスマフォへの通知ですね。

f:id:ryoichi0102:20160330131138p:plain

先ほどthisを設定した時と同じように進めます。
Send a notificationをタップ。

f:id:ryoichi0102:20160330131252p:plain

Continue

f:id:ryoichi0102:20160330131427p:plain

Done

f:id:ryoichi0102:20160330131513p:plain

なんてことはないですね。
次に通知センターにメッセージとして表示される内容を設定します。
{{EventName}} などプレースホルダーというかイベント変数というか
そういうものも使えます。

f:id:ryoichi0102:20160330131625p:plain

これで設定は完了です。
以降の手順で設定されたURLをコピーして叩いてみます。

f:id:ryoichi0102:20160330131816p:plain

設定されていることが確認できると思います。
ちなみに以下の例ではトグルボタンがオフになっているので
設定は無効状態になっています。
動かない時などはこういう所もチェックしてみて下さい。
(手順ではonのままにしておいてくださいね)

詳細を見るためにトグルスイッチの左側の
if Maker Channel then IF Notificationのあたりをタップしましょう。

f:id:ryoichi0102:20160330131929p:plain

Personal Recipeが表示されます。
設定に間違いがないか確認するためにCheck Nowを押しましょう。

f:id:ryoichi0102:20160330132136p:plain

はい。Recipe Chckedが表示されました。
OKですね。

f:id:ryoichi0102:20160330132349p:plain

いよいよAPIのURLを取得します。

My Recipesより右下の歯車マーク(設定)をタップします。

f:id:ryoichi0102:20160330132436p:plain

Settings画面よりChannelsをタップします。

f:id:ryoichi0102:20160330132540p:plain

Channels画面よりMakerを探してタップします。

f:id:ryoichi0102:20160330132621p:plain

Makerの詳細画面では、
Connected as として登録アカウント(メールアドレスのようなもの)
Your key is: の欄にキーが表示されます(これが重要で後で使うのでメモしておきます)

f:id:ryoichi0102:20160330182605p:plain

このYour key isのリンクをタップすると更に詳細画面へ遷移します。

f:id:ryoichi0102:20160330182720p:plain

ブラウザが立ち上がって詳細が確認できます。
Your key is: でキー
To Trigger an Event にてPOSTかGETリクエスト用のURL
JSON bodyの指定(オプション)
curl のコマンド (コピペ用)

Test itでもテストできるのですが、
せっかくなのでメモ帳に貼って踏んでみましょう。

f:id:ryoichi0102:20160330183002p:plain

メモ帳は保存するとそのままリンクになるので、これを踏みます。

f:id:ryoichi0102:20160330183142p:plain

ブラウザが立ち上がってAPIへのGETリクエストが送信されるやいなや
通知センターにてイベントの発生が確認できると思います。

f:id:ryoichi0102:20160330183151p:plain

 

できましたね!

これでAWSAPI Gatewayとかからも叩けるので
自由度が広がると思いますよ!

IFTTTで、はじめてのRecipe作成 (work withから)

前置き

前回はIFTTTの概要と登録までについて紹介しました。

ryoichi0102.hatenablog.com

実際に何か設定してみましょう

登録後はこんな画面になると思います

 

f:id:ryoichi0102:20160323130017p:plain

右にスワイプするとMy Recipes一覧が表示されます。

登録したレシピはここに表示されます。

追加するには右上の+ボタンをタップします。
(ユーザー設定などは右下の歯車マークをタップします)

f:id:ryoichi0102:20160323130154p:plain

画面に表示されているのはBrowseです。
Work Withは、then/thatにあたるサービスが決まっている場合に選択します。
Recommendedは、公開されているオススメのレシピです。
Collectionsは、シーン別のオススメです。
画面下部にCreate a Recipeとありますが、これが新規作成です。

今回はWork WithからDropboxを選択しましょう。

f:id:ryoichi0102:20160323130046p:plain

IFTTTがDropboxに接続してよいかの確認については
Connectをタップします。

f:id:ryoichi0102:20160323130237p:plain

Dropbox側にもIFTTTのアクセスを許可させる必要があります。
ブラウザに移るのでログインします。

f:id:ryoichi0102:20160323130249p:plain

アクセス許可をします。

f:id:ryoichi0102:20160323130302p:plain

Open in "IF"?でIFTTTに戻ります。
(IFTTTではある時からアプリをIFと呼ぶようになりました)

f:id:ryoichi0102:20160323131443p:plain

戻るとPOPULAR RECIPESが表示され
Dropboxに関連するメジャーなレシピたちが表示されます。

今回は4段目にあるSave a copy of new photos you take to Dropboxを選択します。

f:id:ryoichi0102:20160323130325p:plain

ここでレシピの詳細を確認してAddをタップします。

f:id:ryoichi0102:20160323130338p:plain

カメラロールへのアクセス許可が求められますのでContinueをタップします。

f:id:ryoichi0102:20160323130537p:plain

Recipe Createdが表示され、レシピが作成されました。

メジャーなレシピがコピーできるのが手軽で良いですね。
今回は他のレシピは作らないのでDoneをタップです。

f:id:ryoichi0102:20160323130624p:plain

メイン画面のサイドメニューであるMy Recipesに追加されています。
レシピをタップして詳細も確認してみましょう。

f:id:ryoichi0102:20160323130633p:plain

作成日、最終実行日が確認できます。
Check Nowはレシピが正常がどうかチェックします。
Editはレシピの編集を行います。
Deleteはもちろんレシピの削除です。

f:id:ryoichi0102:20160323130714p:plain

で、私はこれらのキャプチャを撮るためパシャパシャしてたので
こんな感じですぐにレシピが起動しました。

f:id:ryoichi0102:20160323130654p:plain

メイン画面では作成履歴や実行履歴が表示されます。

f:id:ryoichi0102:20160323130729p:plain

今回はレシピのコピー作成(work withから)でしたが、
次回はレシピの新規作成を紹介します。

 

ryoichi0102.hatenablog.com

「ある条件を満たすと、ある動作をさせる」ことができるIFTTTが凄い

いまさら感(?)ありますが、IFTTT(イフト【íft】)について
今回は概要を書きます。

IFTTTとは

IFTTTとは"If This Then That"という意味のWebサービス
「ある条件を満たすと、ある動作をさせる」
を設定し、自動実行させることができます。

ここが凄い

thisとthatにあたる部分で選択できる連携先の数です。

たとえば
・カメラに新規の写真が追加されたら、Dropboxにバックアップ
・今日の天気が雨なら、(傘を忘れないよう)スマフォへリマインダー通知
・職場から離れたら、妻にSMSを送信((((;゚Д゚))))
など、アイデア次第で色々なことができるようになります。

難所があるとするなら

日本語版がありません。
アレルギーな方にとっては難所かと思われます。

チュートリアルより

スマフォアプリのチュートリアルに書いてあることをそのまま訳します^^

f:id:ryoichi0102:20160322122351p:plain

設定の内容をRECIPE(レシピ)と呼びます。
上記例は「自分のInstagramに写真がアップされたら、Dropboxに保存」です。

 

f:id:ryoichi0102:20160322122359p:plain

他にも
・家に近づいたら、TwitterでDMを送る。
・スマフォに写真が保存されたた、メールする。
・スマフォの連絡先を、Google Spreadsheetsにバックアップする。
などが例として挙げられています。

実際にこういった設定の例の多くが
サービス内でレシピ共有という形で
設定を少しだけ変えるだけで(またはまったく変えずにそのまま)
利用できるのが利点です。

自分で作成したレシピを公開することもできますし
作成またはコピーしたレシピはデフォルトでプライベートです。 

 

f:id:ryoichi0102:20160322122415p:plain

メアドとパスワードを入力して登録です。

 

内容薄くてスミマセンm(_ _)m
次のエントリーでは登録後にやることを紹介します。

 

ryoichi0102.hatenablog.com