読者です 読者をやめる 読者になる 読者になる

Weed.nagoya:便利ツールでネット活用

物理教育アプリを開発しています

【名古屋:雨】そのときの天気情報を付けてツイートする

Webサービス-プライベート:IFTTT 開発-Web:開発支援:Heroku 開発-Web:JavaScript:Node.js:コーディング 開発-Web:Web API:Twitter 開発-Web:JavaScript:Node.js 開発-Web:Web API 開発-Web:開発支援 Webサービス-プライベート Webサービス 開発

プログラミングせずに開発用の特別なツールも使わず、しかもタダで、ツイートを加工するWebサービスをつくります。

リンク先のページのボタンをクリックするだけで自動的にサービスがセットアップ・起動します。

あるアドレスにメールを投げると、自動的にその日の天気が付加してツイートします。

これからつくるものの全体像です。

f:id:weed_7777:20160205222048p:plain

天気付きツイートということで「Tenkeet」という名前にしました。

わかってらっしゃる方は「gitが要るんじゃない?」と思うでしょうが、なくてもいけるんです。

なお本記事を書くに当たって、ワンフットシーバスさんの以下の記事を大いに参考にさせてもらいました。ありがとうございます。

www.1ft-seabass.jp

前提知識

今回使うWebサービスを紹介します。以下の3つです。

  • Dropbox
  • IFTTT(イフト)
  • Heroku(ヘロク)

Dropboxって?

「いやそんなの知ってるよ」という方がほとんどだと思いますが、いちおう説明します。以下のページから少し引用させていただきます。

Dropboxとは、写真や文書ファイルなどのデータをインターネット上に保存しておけるサービスです。

http://lifestudy.jp/iphone/post-1200/lifestudy.jp

今回は、後述するHeroku上のWebサービスに秘密キーを埋め込むのに使います。

IFTTTって?

以下のページから少し引用させていただきます。

IFTTTは、レシピという設定を使ってWebサービス同士を連携させるサービスです。

gazyezuki.blogspot.jp

上のページで紹介されているのが、以下のレシピ一覧です。

f:id:weed_7777:20160205222833j:plain

上のレシピは、それぞれ以下のようにはたらきます。

  1. fitbitのアクティビティ → (自動的に)グーグルスプレッドシートにまとめる
  2. Gメールにスターをつけた → Evernoteに転送する
  3. もし明日雨が降る場合 → Gメールにお知らせを送る
  4. Twitterで「いいね」した → Pocketに送信する

今回は、以下のような2つのレシピをつくります。

f:id:weed_7777:20160205223745p:plain

  • 特定のアドレスにメールを送った → メッセージをWebサービスに送る
  • Webサービスからメッセージが来た → ツイートする

Herokuって?

以下のページから少し引用させていただきます。

Herokuは、HeroとHaikuを掛け合わせた造語だそうです。

誤解を恐れずにものすごく大雑把かつ極端に説明すると、イマドキのレンタルサーバーです。2010年代のジオシティーズです。年齢がバレますね。

Herokuは無料で使える部分があり、その範囲だけでそれなりのWebサービスが作れます。

blog.ruedap.com

図を描くとこのような感じです。

f:id:weed_7777:20160205222649p:plain

補足すると、以下のようになります。


ジオシティーズ

 ↑

Webページ(HTMLファイル、画像ファイルなど)

 ↑

自分


Heroku

 ↑

Webサービス(プログラム)

 ↑

自分


つまりHerokuは、HTMLファイルの代わりにプログラムをアップロードできるジオシティーズ・・・というわけですw

今回は「メッセージを受け取って → 天気情報を付加して → 返す」というWebアプリを用意しましたので、それを使います。

つくり方

再掲ですが、これからつくるものの全体像です。

f:id:weed_7777:20160205222048p:plain

つくるものは3つです。

  • (図の1→2)メッセージの送信レシピ
  • (図の2→3)天気情報を付加するWebサービス
  • (図の3→4)返信メッセージをツイートするレシピ

工程はやや長いですが、どれも基本的にクリックしたりフォームに入力するだけです。時間のあるときにお茶でも飲みながら、気楽に進めていきましょう。

なお諸事情により、3番目 → 2番目 → 1番目の順番でつくります。

(図の3 → 4)天気情報付きメッセージの受信レシピをつくる

f:id:weed_7777:20160205231437p:plain

ここでやりたいことは、以下の通りです。

天気情報付きメッセージを受け取って、ツイートする

より詳しく言うと、以下の通りです。

IFTTTが、HerokuのWebサービスから天気情報付きメッセージを受け取って、ツイートする

まだIFTTTに登録していない場合は、ここでしてしまいましょう。

IFTTTに登録する

いつも他力本願で申し訳ないのですが、登録方法は以下のページがわかりやすいです。

そんなIFTTTの登録方法と使い方を紹介します。

keikenchi.com

なお、スマホ用のIFTTTアプリもあります。そちらの方が操作しやすいのですが、この記事はPCで書いているためWeb版の画面で解説します。スマホ版アプリでもほとんど操作は同じなので、適宜読み替えてもらえたら大丈夫だと思います。

天気情報付きメッセージをIFTTTで受信できるようにする

このために「Makerチャンネルに接続」します・・・いきなり変な用語が2つも出てきました。

「Maker」

Makerとは本来「ものづくりをする人」のことです。しかしIFTTTでは、つくる「もの」がもっと絞られます。それは

温度や動きなどをセンサーで測ってネットワークに送信する装置

ネットワークから送られてきたデータに応じて明かりを灯したり、その色を変えたり、指針などの物を動かす装置

です。

「チャンネル」

IFTTTにはたくさんの「チャンネル」があります。

  • 「メールチャンネル」
  • Twitterチャンネル」
  • Facebookチャンネル」

などです。それぞれ、

  • メールを受信/送信する
  • ツイートを受信/送信する
  • Facebook投稿を受信/送信する

ことができます。

「Makerチャンネル」もその一つです。このチャンネルでは、

  • 「温度や動きなどをセンサーで測ってネットワークに送信する装置」から受信したり、
  • 「ネットワークから送られてきたデータによって明かりを灯したり、その色を変えたり、指針などの物を動かす装置」に送信したり

することができます。

多様な装置に対応するため、Makerチャンネルには他のチャンネルにはない柔軟性があります。それを今回は利用します。

なお、チャンネルを「使えるようにすること」をIFTTTでは「Connect(接続する)」と言います。

だいぶ回り道してしまいましたが「Makerチャンネル」に「接続」しましょう。

やり方は、以下のページがわかりやすいです。

IFTTTにMaker Channelというチャンネルができたというアナウンスがありました。早速試してみましょう。

mag.switch-science.com

リンク先のページにも書いてある通り、チャンネルに接続すると「秘密キー」を与えられます。これは後で使うので、念頭に置いておいて下さい。

IFTTTからツイートできるようにする

今度はTwitterチャンネルに接続します。まず、以下のページに行きます。

ifttt.com

「Connect」ボタンを押します。

以下のような認証画面が出てくるので、「連携アプリを認証」します。

f:id:weed_7777:20160205225658p:plain

すると「Twitter connected!」と表示されます。接続完了です。

IFTTTのレシピをつくる

準備が整ったので、3つつくるものの1つ目「メッセージの送信レシピ」をつくりましょう。

「My Resipes」ページに行き、「Create a Recipe」ボタンを押します。

f:id:weed_7777:20160205225806p:plain

きっかけ

まず、レシピが発動する「きっかけ」を指定します。「this」をクリックします。

f:id:weed_7777:20160205225843p:plain

使うチャンネルを選びます。上のテキストを入力する場所に1字、2字と入力すると、その文字列を含む名前のチャンネルに絞られます。「ma」と入力して絞り、「Maker」をクリックしましょう。

f:id:weed_7777:20160205225940p:plain

「きっかけを選んで下さい」と言われます。まあ選択肢は1つしかないのですが・・・。今回は「天気情報付きメッセージを受信したら」レシピを発動させたいです。したがって「Webリクエストを受け取る」を「きっかけ」として選びます。

f:id:weed_7777:20160205230030p:plain

次の画面でどんなWebリクエストが「きっかけ」になるかを指定します。「sent_message」と入力して下さい。そして「Create Trigger」ボタンを押して下さい。

f:id:weed_7777:20160205230213p:plain

やること

次は「きっかけ」に応じて「やること」を指定します。「that」をクリックして下さい。

f:id:weed_7777:20160205230333p:plain

使うチャンネルを選びます。「tw」と入力して絞り、「Twitter」を選びましょう。

f:id:weed_7777:20160205230427p:plain

次の画面で「やること」を決めます。「ツイートする」を選びます。

f:id:weed_7777:20160205230451p:plain

ツイートする文面を決めます。デフォルトの文面を消して以下のようにします。

【{{Value1}}:{{Value2}}】{{Value3}}

ちなみに変数を入力するときは、青い三角フラスコのアイコンが便利です。

「Create Action」を押して、「やること」を確定します。

さらに「Create Recipe」を押して、レシピを確定します。これで1/3ができました(実は2番目はやや長いのですが、がんばりましょう)。

(図の2 → 3)天気情報を付加するWebサービスをセットアップする

f:id:weed_7777:20160205232004p:plain

ここでやりたいことは、以下の通りです。

メッセージを受け取って、天気情報を付加したメッセージを送信する

より詳しく言うと、以下の通りです。

IFTTTからメッセージをHeroku上のWebサービスが受け取って、天気情報を付加してIFTTTに送信する

なんだか難しそうですが、ボタンを1回押すだけでWebサービスはアップロードされます。

そして、アップロードしたWebサービスに、Makerチャンネルに接続したときに得た秘密キーを埋め込みます。この作業をするときはgitというツールを使うのが一般的ですが、かなりわかりにくいツールなので、今回はDropboxを使います。

まだHeroku・Dropboxに登録していない場合は、ここでしてしまいましょう。

Herokuに登録する

まずHerokuのページに行きます。

Heroku | Sign up

f:id:weed_7777:20160205232402p:plain

アクティベーションすれば完了です。

f:id:weed_7777:20160205232427p:plain

Dropboxに登録する

以下のページがわかりやすいです。

dekiru.net

Webサービスをアップロードする

以下のページ・・・

github.com

・・・の下の方に、このようなボタンがあるので、押します。

f:id:weed_7777:20160205232754p:plain

すると以下のような画面になります。

f:id:weed_7777:20160205232816p:plain

「App Name」「Runtime Selection」は何もしなくても良いです。

「Deploy for Free」をクリックします。すると私のつくったNode.jsアプリ「Tenkeet」が自動的にサーバーにインストールされ、必要なすべてのモジュールもインストールされます(5分くらい時間がかかります)。

f:id:weed_7777:20160205232945p:plain

Webサービスが起動していることを確かめる

この時点でWebサービスは起動しています。試しにWebブラウザでアクセスしてみましょう。

まず「Manage App」をクリックします。

f:id:weed_7777:20160205233105p:plain

「Settings」をクリックします。

f:id:weed_7777:20160205233128p:plain

すると下の方に「Heroku Domain」という項目があります。

f:id:weed_7777:20160205233152p:plain

そこに表示されているものは、サーバーのアドレスっぽいですよね。では、ブラウザのアドレス入力欄にそのアドレスを打ち込んで見てみましょう。

f:id:weed_7777:20160205233224p:plain

すでにWebサービスが稼働していることがわかります。

WebサービスDropboxを接続する

しかし、このままではIFTTTでメッセージを受け取れません。

思い出して欲しいのですが、Makerチャンネルに接続したときに「秘密キー」を示されましたよね。この秘密キーを、今アップロードしたWebサービスに埋め込むと、このWebサービスからのメッセージでIFTTTのMakerチャンネルが動くようになります。

そのために、まずWebサービスDropboxとを接続しましょう。

WebサービスDropboxを接続する

Herokuの画面の上の方にある「Deploy」をクリックします。

f:id:weed_7777:20160205233539p:plain

Dropbox」をクリックします。

f:id:weed_7777:20160205233615p:plain

「Connect to Dropbox」をクリックします。

f:id:weed_7777:20160205233639p:plain

「Herokuが・・・アクセスをリクエストしています」と表示されるので、「許可」します。

f:id:weed_7777:20160205233706p:plain

すると「Dropboxのこれこれのフォルダに接続されています」と表示されます。

f:id:weed_7777:20160205233738p:plain

実際に見てみると、フォルダやファイルがダウンロードされています。

f:id:weed_7777:20160205233801p:plain

Webサービスに秘密キーを埋め込む

それでは、秘密キーを埋め込みましょう。先ほどのフォルダの中の「index.js」を適当なエディタで開きます。

f:id:weed_7777:20160205233916p:plain

「IFTTTのセキュリティキー」と書かれた部分に、Makerチャンネルに接続したときにもらった「秘密キー」を貼り付けます。

f:id:weed_7777:20160205233941p:plain

保存して、先ほどのHerokuの画面に戻ります。そこで「Deploy」というボタンを押します。

f:id:weed_7777:20160205234022p:plain

すると変更が反映されます。

f:id:weed_7777:20160205234044p:plain

第2ステップが終わりました。お疲れさまです。あと一息です。

(図の1 → 2)メッセージの送信レシピをつくる

f:id:weed_7777:20160205224427p:plain

メールを受信して、メッセージをHerokuへ送信します。

IFTTTでメールを受信できるようにする

メールチャンネルに接続します。まず、以下のページに行きます。

ifttt.com

「Connect」ボタンを押します。

f:id:weed_7777:20160205234758p:plain

メールアドレスを入力し、「Send PIN」ボタンを押します。

f:id:weed_7777:20160205234812p:plain

すると、PIN番号がメールで送られてきます。それををコピーしてPIN入力部分に貼り付けます。

f:id:weed_7777:20160205234845p:plain

「Connect」ボタンを押せば完了です。

f:id:weed_7777:20160205234931p:plain

IFTTTのレシピをつくる

準備が整ったので、最後の「メッセージの送信レシピ」をつくりましょう。

「My Resipes」ページに行き、「Create a Recipe」ボタンを押します。

f:id:weed_7777:20160205235102p:plain

きっかけ

まず、レシピが発動するきっかけを指定します。「this」をクリックします。

f:id:weed_7777:20160205235139p:plain

使うチャンネルを選びます。上のテキストを入力する場所に1字、2字と入力すると、その文字列を含む名前のチャンネルに絞られます。「em」と入力して絞り、「Email」をクリックしましょう。

f:id:weed_7777:20160205235204p:plain

「きっかけを選んで下さい」と言われます。今回は、IFTTTにメールを送ってレシピを発動させたいです。したがって左側の「メールをIFTTTに送る」を「きっかけ」として選びます。

f:id:weed_7777:20160205235229p:plain

次の画面で「きっかけ」を確定します。「Create Trigger」ボタンを押して下さい。

やること

次は「きっかけ」に応じて「やること」を指定します。「that」をクリックして下さい。ちなみにこの画面を見ると、

trigger@recipe.ifttt.comにメールを送る → 「きっかけ」がオンになる

ということがわかります。

f:id:weed_7777:20160205235324p:plain

使うチャンネルを選びます。「ma」と入力して絞り、「Maker」を選びましょう。

f:id:weed_7777:20160205235354p:plain

次の画面で「やること」を決めます。Makerチャンネルだと、できることは「Make a web request」しかありません。それをクリックして下さい。

そして、web requestの内容を指定します。URLには先ほどつくったWebサービスのアドレスの頭に「https://」を付けたものを入れます。

f:id:weed_7777:20160205235522p:plain

Methodは「POST」、Content Typeは「application/json」と指定します。

Bodyは「{“message”:”{{Subject}}”, “location”:”名古屋”}」のようにします。これだと送ったメールの本文ではなく件名がメッセージになります。

本当はBody(メールの本文)をメッセージにしたいのですが、どうもBodyの中にBodyを入れることはできないようです。

使うことができる「所在地」ですが、以下のようにYahooの天気サイトに行くとわかります。

f:id:weed_7777:20160205235629p:plain

weather.yahoo.co.jp

「Create Action」→「Create Recipe」で、レシピ完成です。

動作確認

f:id:weed_7777:20160205222048p:plain

メール

まずはメールを送らないと始まりません。宛先は「trigger@recipe.ifttt.com」です。メッセージを、本文ではなく「件名」に書きます。それでは送ってみましょう。

レシピが発動したかのチェック

チェックできるところは2カ所です。

  • (図の1→2)メッセージの送信レシピ
  • (図の3→4)返信メッセージをツイートするレシピ

レシピをチェックするには、まず「My Recipes」へ行きます。

f:id:weed_7777:20160205235956p:plain

チェックするレシピの右側の鉛筆のアイコンをクリックします。

f:id:weed_7777:20160206000018p:plain

レシピは定期的に「きっかけ」をチェックしていますが、「Check now」ボタンを押すことで、強制的に「きっかけ」をチェックさせることができます。

f:id:weed_7777:20160206000048p:plain

レシピが発動したかどうかは、「Log」を見ます。メールを送ったばかりなら、「less than a minute ago」などと表示されるはずです。

f:id:weed_7777:20160206000115p:plain

うまくいけば、自分のTwitterのタイムラインに天気情報付きのツイートが現れるはずです。

まとめ

f:id:weed_7777:20160205222048p:plain

プログラミングなしでgitも使わず、しかもタダで、IFTTTを使ってツイートを加工するWebサービスをつくりました。

リンク先のページのボタンをクリックするだけで、Heroku上に自動的にサービスがセットアップ・起動されました。また、gitを使わずDropboxでコードを修正しました。

うお、この記事、1万字ありますね。長かった・・・本当にお疲れさまでした。