プログラミングせずに開発用の特別なツールも使わず、しかもタダで、ツイートを加工するWebサービスをつくります。
リンク先のページのボタンをクリックするだけで自動的にサービスがセットアップ・起動します。
あるアドレスにメールを投げると、自動的にその日の天気が付加してツイートします。
【津：晴時々曇】いかん、もう日付が変わってしまった #Tenkeet
— 植田 達郎(Tatsuro Ueda) (@weed_7777) 2016, 2月 5
これからつくるものの全体像です。
天気付きツイートということで「Tenkeet」という名前にしました。
わかってらっしゃる方は「gitが要るんじゃない？」と思うでしょうが、なくてもいけるんです。
なお本記事を書くに当たって、ワンフットシーバスさんの以下の記事を大いに参考にさせてもらいました。ありがとうございます。
前提知識
今回使うWebサービスを紹介します。以下の3つです。
- Dropbox
- IFTTT（イフト）
- Heroku（ヘロク）
Dropboxって？
「いやそんなの知ってるよ」という方がほとんどだと思いますが、いちおう説明します。以下のページから少し引用させていただきます。
Dropboxとは、写真や文書ファイルなどのデータをインターネット上に保存しておけるサービスです。
今回は、後述するHeroku上のWebサービスに秘密キーを埋め込むのに使います。
IFTTTって？
以下のページから少し引用させていただきます。
IFTTTは、レシピという設定を使ってWebサービス同士を連携させるサービスです。
上のページで紹介されているのが、以下のレシピ一覧です。
上のレシピは、それぞれ以下のようにはたらきます。
- fitbitのアクティビティ → （自動的に）グーグルスプレッドシートにまとめる
- Gメールにスターをつけた → Evernoteに転送する
- もし明日雨が降る場合 → Gメールにお知らせを送る
- Twitterで「いいね」した → Pocketに送信する
今回は、以下のような2つのレシピをつくります。
Herokuって？
以下のページから少し引用させていただきます。
Herokuは、HeroとHaikuを掛け合わせた造語だそうです。
誤解を恐れずにものすごく大雑把かつ極端に説明すると、イマドキのレンタルサーバーです。2010年代のジオシティーズです。年齢がバレますね。
Herokuは無料で使える部分があり、その範囲だけでそれなりのWebサービスが作れます。
図を描くとこのような感じです。
補足すると、以下のようになります。
↑
Webページ（HTMLファイル、画像ファイルなど）
↑
自分
Heroku
↑
Webサービス（プログラム）
↑
自分
つまりHerokuは、HTMLファイルの代わりにプログラムをアップロードできるジオシティーズ・・・というわけですw
今回は「メッセージを受け取って → 天気情報を付加して → 返す」というWebアプリを用意しましたので、それを使います。
つくり方
再掲ですが、これからつくるものの全体像です。
つくるものは3つです。
- （図の1→2）メッセージの送信レシピ
- （図の2→3）天気情報を付加するWebサービス
- （図の3→4）返信メッセージをツイートするレシピ
工程はやや長いですが、どれも基本的にクリックしたりフォームに入力するだけです。時間のあるときにお茶でも飲みながら、気楽に進めていきましょう。
なお諸事情により、3番目 → 2番目 → 1番目の順番でつくります。
（図の3 → 4）天気情報付きメッセージの受信レシピをつくる
ここでやりたいことは、以下の通りです。
天気情報付きメッセージを受け取って、ツイートする
より詳しく言うと、以下の通りです。
IFTTTが、HerokuのWebサービスから天気情報付きメッセージを受け取って、ツイートする
まだIFTTTに登録していない場合は、ここでしてしまいましょう。
IFTTTに登録する
いつも他力本願で申し訳ないのですが、登録方法は以下のページがわかりやすいです。
そんなIFTTTの登録方法と使い方を紹介します。
なお、スマホ用のIFTTTアプリもあります。そちらの方が操作しやすいのですが、この記事はPCで書いているためWeb版の画面で解説します。スマホ版アプリでもほとんど操作は同じなので、適宜読み替えてもらえたら大丈夫だと思います。
天気情報付きメッセージをIFTTTで受信できるようにする
このために「Makerチャンネルに接続」します・・・いきなり変な用語が2つも出てきました。
「Maker」
Makerとは本来「ものづくりをする人」のことです。しかしIFTTTでは、つくる「もの」がもっと絞られます。それは
温度や動きなどをセンサーで測ってネットワークに送信する装置
や
ネットワークから送られてきたデータに応じて明かりを灯したり、その色を変えたり、指針などの物を動かす装置
です。
「チャンネル」
IFTTTにはたくさんの「チャンネル」があります。
などです。それぞれ、
- メールを受信／送信する
- ツイートを受信／送信する
- Facebook投稿を受信／送信する
ことができます。
「Makerチャンネル」もその一つです。このチャンネルでは、
- 「温度や動きなどをセンサーで測ってネットワークに送信する装置」から受信したり、
- 「ネットワークから送られてきたデータによって明かりを灯したり、その色を変えたり、指針などの物を動かす装置」に送信したり
することができます。
多様な装置に対応するため、Makerチャンネルには他のチャンネルにはない柔軟性があります。それを今回は利用します。
なお、チャンネルを「使えるようにすること」をIFTTTでは「Connect（接続する）」と言います。
だいぶ回り道してしまいましたが「Makerチャンネル」に「接続」しましょう。
やり方は、以下のページがわかりやすいです。
IFTTTにMaker Channelというチャンネルができたというアナウンスがありました。早速試してみましょう。
リンク先のページにも書いてある通り、チャンネルに接続すると「秘密キー」を与えられます。これは後で使うので、念頭に置いておいて下さい。
IFTTTからツイートできるようにする
今度はTwitterチャンネルに接続します。まず、以下のページに行きます。
「Connect」ボタンを押します。
以下のような認証画面が出てくるので、「連携アプリを認証」します。
すると「Twitter connected!」と表示されます。接続完了です。
IFTTTのレシピをつくる
準備が整ったので、3つつくるものの1つ目「メッセージの送信レシピ」をつくりましょう。
「My Resipes」ページに行き、「Create a Recipe」ボタンを押します。
きっかけ
まず、レシピが発動する「きっかけ」を指定します。「this」をクリックします。
使うチャンネルを選びます。上のテキストを入力する場所に1字、2字と入力すると、その文字列を含む名前のチャンネルに絞られます。「ma」と入力して絞り、「Maker」をクリックしましょう。
「きっかけを選んで下さい」と言われます。まあ選択肢は1つしかないのですが・・・。今回は「天気情報付きメッセージを受信したら」レシピを発動させたいです。したがって「Webリクエストを受け取る」を「きっかけ」として選びます。
次の画面でどんなWebリクエストが「きっかけ」になるかを指定します。「sent_message」と入力して下さい。そして「Create Trigger」ボタンを押して下さい。
やること
次は「きっかけ」に応じて「やること」を指定します。「that」をクリックして下さい。
使うチャンネルを選びます。「tw」と入力して絞り、「Twitter」を選びましょう。
次の画面で「やること」を決めます。「ツイートする」を選びます。
ツイートする文面を決めます。デフォルトの文面を消して以下のようにします。
【{{Value1}}：{{Value2}}】{{Value3}}
ちなみに変数を入力するときは、青い三角フラスコのアイコンが便利です。
「Create Action」を押して、「やること」を確定します。
さらに「Create Recipe」を押して、レシピを確定します。これで1/3ができました（実は2番目はやや長いのですが、がんばりましょう）。
（図の2 → 3）天気情報を付加するWebサービスをセットアップする
ここでやりたいことは、以下の通りです。
メッセージを受け取って、天気情報を付加したメッセージを送信する
より詳しく言うと、以下の通りです。
IFTTTからメッセージをHeroku上のWebサービスが受け取って、天気情報を付加してIFTTTに送信する
なんだか難しそうですが、ボタンを1回押すだけでWebサービスはアップロードされます。
そして、アップロードしたWebサービスに、Makerチャンネルに接続したときに得た秘密キーを埋め込みます。この作業をするときはgitというツールを使うのが一般的ですが、かなりわかりにくいツールなので、今回はDropboxを使います。
まだHeroku・Dropboxに登録していない場合は、ここでしてしまいましょう。
Herokuに登録する
まずHerokuのページに行きます。
アクティベーションすれば完了です。
Dropboxに登録する
以下のページがわかりやすいです。
Webサービスをアップロードする
以下のページ・・・
・・・の下の方に、このようなボタンがあるので、押します。
すると以下のような画面になります。
「App Name」「Runtime Selection」は何もしなくても良いです。
「Deploy for Free」をクリックします。すると私のつくったNode.jsアプリ「Tenkeet」が自動的にサーバーにインストールされ、必要なすべてのモジュールもインストールされます（5分くらい時間がかかります）。
Webサービスが起動していることを確かめる
この時点でWebサービスは起動しています。試しにWebブラウザでアクセスしてみましょう。
まず「Manage App」をクリックします。
「Settings」をクリックします。
すると下の方に「Heroku Domain」という項目があります。
そこに表示されているものは、サーバーのアドレスっぽいですよね。では、ブラウザのアドレス入力欄にそのアドレスを打ち込んで見てみましょう。
すでにWebサービスが稼働していることがわかります。
WebサービスとDropboxを接続する
しかし、このままではIFTTTでメッセージを受け取れません。
思い出して欲しいのですが、Makerチャンネルに接続したときに「秘密キー」を示されましたよね。この秘密キーを、今アップロードしたWebサービスに埋め込むと、このWebサービスからのメッセージでIFTTTのMakerチャンネルが動くようになります。
そのために、まずWebサービスとDropboxとを接続しましょう。
WebサービスとDropboxを接続する
Herokuの画面の上の方にある「Deploy」をクリックします。
「Dropbox」をクリックします。
「Connect to Dropbox」をクリックします。
「Herokuが・・・アクセスをリクエストしています」と表示されるので、「許可」します。
すると「Dropboxのこれこれのフォルダに接続されています」と表示されます。
実際に見てみると、フォルダやファイルがダウンロードされています。
Webサービスに秘密キーを埋め込む
それでは、秘密キーを埋め込みましょう。先ほどのフォルダの中の「index.js」を適当なエディタで開きます。
「IFTTTのセキュリティキー」と書かれた部分に、Makerチャンネルに接続したときにもらった「秘密キー」を貼り付けます。
保存して、先ほどのHerokuの画面に戻ります。そこで「Deploy」というボタンを押します。
すると変更が反映されます。
第2ステップが終わりました。お疲れさまです。あと一息です。
（図の1 → 2）メッセージの送信レシピをつくる
メールを受信して、メッセージをHerokuへ送信します。
IFTTTでメールを受信できるようにする
メールチャンネルに接続します。まず、以下のページに行きます。
「Connect」ボタンを押します。
メールアドレスを入力し、「Send PIN」ボタンを押します。
すると、PIN番号がメールで送られてきます。それををコピーしてPIN入力部分に貼り付けます。
「Connect」ボタンを押せば完了です。
IFTTTのレシピをつくる
準備が整ったので、最後の「メッセージの送信レシピ」をつくりましょう。
「My Resipes」ページに行き、「Create a Recipe」ボタンを押します。
きっかけ
まず、レシピが発動するきっかけを指定します。「this」をクリックします。
使うチャンネルを選びます。上のテキストを入力する場所に1字、2字と入力すると、その文字列を含む名前のチャンネルに絞られます。「em」と入力して絞り、「Email」をクリックしましょう。
「きっかけを選んで下さい」と言われます。今回は、IFTTTにメールを送ってレシピを発動させたいです。したがって左側の「メールをIFTTTに送る」を「きっかけ」として選びます。
次の画面で「きっかけ」を確定します。「Create Trigger」ボタンを押して下さい。
やること
次は「きっかけ」に応じて「やること」を指定します。「that」をクリックして下さい。ちなみにこの画面を見ると、
trigger@recipe.ifttt.comにメールを送る → 「きっかけ」がオンになる
ということがわかります。
使うチャンネルを選びます。「ma」と入力して絞り、「Maker」を選びましょう。
次の画面で「やること」を決めます。Makerチャンネルだと、できることは「Make a web request」しかありません。それをクリックして下さい。
そして、web requestの内容を指定します。URLには先ほどつくったWebサービスのアドレスの頭に「https://」を付けたものを入れます。
Methodは「POST」、Content Typeは「application/json」と指定します。
Bodyは「{“message”:”{{Subject}}”, “location”:”名古屋”}」のようにします。これだと送ったメールの本文ではなく件名がメッセージになります。
本当はBody（メールの本文）をメッセージにしたいのですが、どうもBodyの中にBodyを入れることはできないようです。
使うことができる「所在地」ですが、以下のようにYahooの天気サイトに行くとわかります。
「Create Action」→「Create Recipe」で、レシピ完成です。
動作確認
メール
まずはメールを送らないと始まりません。宛先は「trigger@recipe.ifttt.com」です。メッセージを、本文ではなく「件名」に書きます。それでは送ってみましょう。
レシピが発動したかのチェック
チェックできるところは2カ所です。
- （図の1→2）メッセージの送信レシピ
- （図の3→4）返信メッセージをツイートするレシピ
レシピをチェックするには、まず「My Recipes」へ行きます。
チェックするレシピの右側の鉛筆のアイコンをクリックします。
レシピは定期的に「きっかけ」をチェックしていますが、「Check now」ボタンを押すことで、強制的に「きっかけ」をチェックさせることができます。
レシピが発動したかどうかは、「Log」を見ます。メールを送ったばかりなら、「less than a minute ago」などと表示されるはずです。
うまくいけば、自分のTwitterのタイムラインに天気情報付きのツイートが現れるはずです。
まとめ
プログラミングなしでgitも使わず、しかもタダで、IFTTTを使ってツイートを加工するWebサービスをつくりました。
リンク先のページのボタンをクリックするだけで、Heroku上に自動的にサービスがセットアップ・起動されました。また、gitを使わずDropboxでコードを修正しました。
うお、この記事、1万字ありますね。長かった・・・本当にお疲れさまでした。