Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう

2,623 views

Published on

SlackにあるIncomingWebhooksとOutgoingWebhooksのIntegrationを使ってRaspberryPiと連携させます。

Published in: Software
  • Be the first to comment

  • Be the first to like this

SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう

  1. 1. Slackの Incoming Webhooksと Outgoing Webhooksを 使って電子工作と連携させてみよう! 第15回まどべんよっかいち発表資料 2016/07/23 @ueponx
  2. 2. ショートセッションの内容が 全く決まっていない、ある朝 こんなやり取りでテーマが決まってしまいました・・・ NobukumaさんからSlackへのお誘いがあり・・・
  3. 3. ・同じ日のHさんセッション「BotFrameWork入門」 丸かぶりです。ありがとうございます。
  4. 4. Slack…? きいたことありますか?
  5. 5. Slackと聞いて… …Slackwareを思い出す。 そんなふうに考えていた時期が俺にもありました (by刃牙)
  6. 6. 今回取り上げるもの Slackのサービス連携(Integrationと呼ぶ)の仕組み Incoming Webhooks Outgoing Webhooks この2つの作成の仕方とRaspberryPiの連携を紹介します
  7. 7. Webサービス連携といえば?
  8. 8. Webサービスの連携(1)  IFTTT Webサービス連携の代表格 数多くサービスの連携が可能 連携サービスの中には「Slack」も
  9. 9. Webサービスの連携(2)  Microsoft Flow  Microsoftが作ったWebサービス連携  ベースはOffice365(サービス利用だけ)  Businessよりサービスが多い  まだ発展途上なイメージ  連携サービスの中には「Slack」も
  10. 10. 既存の連携のサービスを使用すれば? 実は連携の起点になるものがIFTTTにもFlowに も存在していない。(2016/07/17現在) 下記はIFTTTの連携情報、サービス連携一覧のTriggerは 提供されていない。 空っぽ
  11. 11. Slack側で提供されるサービス連携を 使う意味はあるのかも?
  12. 12. Slackが提供している代表的なIntegration Incoming WebHooks Slackが発行するURLへPOSTするとSlackにメッセージが投 稿される。 Outgoing WebHooks Slackへ指定したキーワードのついたメッセージが投稿さ れると、指定したURLに投稿内容がPOSTされる。 (POST されるサーバ・システムを実装する必要あり)また、決 められた形式(json)のレスポンスを返すことで同時に Slack上へ投稿することも可能。 Slack API メッセージの投稿に加え、ファイルのアップロード・ チーム情報やチャンネル情報の取得等が利用可能。細か な連携を行う人向け。 Slackbot 「Incoming WebHooks」の簡易版 Slackでは他のWebサービスを連携する機能をSlack Integrationsと呼びます。 提供されているIntergration以下のようなものがあります。(その他もあり)
  13. 13. Incoming Webhooks編
  14. 14. Incoming Webhooksとは? 設定時に登録するURL(Slack側で提供される)にJSONデータをPOST (HTTP)するとJSONデータに含まれるテキストデータがSlackChannel上に 書き込まれる。 JSONの形式は パラメータ名 概要 text メッセージ(必須) username 投稿者(サービス)名 icon_url 投稿者名のアイコン画像のURL icon_emoji 投稿者名のアイコン channel 「#」または「@」から始まるChannel名 基本的にはtextパラメータだけでも大丈夫!
  15. 15. Incoming Webhooksは 定期的に情報を垂れ流すに用途には良さそう IFTTTでも提供されている部分
  16. 16. 今回作成するBotについて
  17. 17. 今回は Slackに予告メッセージを書き込むようなユルセンbotを作ってみます。 ユルセンとは・・・ 仮面ライダーゴーストに出てくる、仙人の使い魔。オレンジと白のオバケの姿をし ており、大きな目玉型の頭が特徴。 一人称は「俺様」、ごくまれに「俺」。戦い方を指導する役目を持つが、 口が悪い毒舌家でタケルを小馬鹿にしたり呆れたりしている。 次回予告ではタイトルコールを担当している。(CV:悠木碧) (Wikipediaより引用)
  18. 18. Incoming Webhooks編 設定部分
  19. 19. Incoming Webhooksの設定 https://[channel名].slack.com/apps にアクセス Incoming webhooksで検索
  20. 20. Incoming Webhooksの設定 クリック
  21. 21. Incoming Webhooksの設定 スクロール
  22. 22. Incoming Webhooksの設定 書き込み対象にする Channnel 送信先のURL 後で使用 Botの名前 Botのアイコン クリック
  23. 23. Incoming Webhooksの設定 完成したbot Incoming Webhooksを使用したbotの設定ができました
  24. 24. Incoming Webhooks編 コーディング部分
  25. 25. C#でコーディング 【usingや処理に関連性の低い部分は略】 // Slackで設定時に表示されたURL(xxxxxxxxxxxxxxxxxxは適宜変更してください) static readonly string URI = "https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxx"; var client = new HttpClient(); var param = new Hashtable(); param["text"] = "来週の仮面ライダーゴースト~♪"; var serializer = new JavaScriptSerializer(); var json = serializer.Serialize(param); var content = new StringContent(json); var response = client.PostAsync(URI, content).Result; Console.WriteLine(response); JSONデータの生成 Slackへ送信
  26. 26. Python(RaspberryPi上)でコーディング > import slackweb > slack = slackweb.Slack(url="https://hooks.slack.com/services/xxxxxxxxxx") > slack.notify(text="来週の仮面ライダーゴースト~♪") $ sudo pip install slackweb 【コーディング】 PythonのCLIで以下のように入力すると簡単にテスト可 【事前準備】 Pythonは便利なライブラリslackwebをインストール 何言ってるのかわからないぐらい簡単に実装ができます。
  27. 27. Outgoing Webhooks編
  28. 28. Outgoing Webhooksとは? Slack上にキーワードのついたメッセージが投稿されると、指定した URL(ユーザ側でサーバなどを準備)に投稿の内容がPOST(HTTP)さ れる。 POSTされたURLからJSONデータのレスポンスを返すことで、 Slack上へ投稿することも可能。JSONの形式はIncoming Webhooksと同 様(前のページ参照)。 サーバに送信されるPOSTされたデータは以下(JSON形式ではないので注意) token team_id channel_id channel_name timestamp user_id user_name text trigger_word
  29. 29. Outgoing Webhooksは 書込みをトリガーにして動作ができる。 その結果・成果をSlackに返すこともできる。 IFTTTでも提供されていない機能 電子工作側で処理トリガーを送ることも可能
  30. 30. 今回作成するBotについて
  31. 31. 今回は 手元にあるRaspberryPiのLEDを点灯、 その後 投稿したUser_name+“裏切者は殺す。デストロンを代表して。ヨロイ 元帥” を連結してSlackに投稿するヨロイ元帥Botを作ってみます。 Slackの書き込み中に「仮面ライダー」というキーワードあったら、
  32. 32. ヨロイ元帥とは・・・ 仮面ライダーV3第41話から登場。ツバサ軍団壊滅後に現れた「ヨロイ一族」の長 にして、デストロン最後の4代目大幹部。独特の口調で、デストロンのことを 「デーストロン」と呼称する。「結果がすべて」という信条の元に、失敗を犯した 者は配下の者ですら始末してきた。 デストロンの科学者・結城丈二のことを自分の地位を脅かすと見なして危険視して おり、彼に反乱の濡れ衣を着せて抹殺をもくろむ。しかし、失敗したことで結城は 造反者・ライダーマンになってしまう。 旅客機を墜落させるレーザー砲を装備した兜に加え、全身には血塗られたように赤 い鎧を着用しており、そのエッジ部分は鋭利な刃物になっている。戦闘では左腕に 持った、新幹線をも砕く硬度の鉄球を武器として戦う。 ライダーマンをおびき寄せる目的で、結城丈二に差出人住所を明記した年賀状を 送ったことがある。 (Wikipediaより引用)
  33. 33. ヨロイ元帥とは・・・
  34. 34. Outgoing Webhooks編 設定部分
  35. 35. Outgoing Webhooksの設定 https://[channel名].slack.com/apps にアクセス Outing webhooksで検索
  36. 36. Outgoing Webhooksの設定 クリック
  37. 37. Outgoing Webhooksの設定 クリック
  38. 38. Outgoing Webhooksの設定 スクロール
  39. 39. Outgoing Webhooksの設定 検知対象の Channnel トリガーになる キーワード アクセス先のURL (自宅RasPiのIP) トークン 不正アクセス防止にも 使えるが… 前方一致 のみ有効に注意 POSTのデータ解析で 認証もできるよ 程度
  40. 40. Outgoing Webhooksの設定 Botの名前 Botのアイコン クリック
  41. 41. Outgoing Webhooksの設定 完成したbot Outgoing Webhooksを使用したbotの設定ができました。
  42. 42. Outgoing Webhooks編 コーディング部分
  43. 43. PythonでOutgoing Webhooks用サーバを 作成(RaspberryPi python2.7系を使用) #【続き】 responseValue = ‘テスト' self.send_response(200) self.send_header('Content-type', 'text/json') self.end_headers() responseData = json.dumps({'text': responseValue}) self.wfile.write(responseData.encode('UTF-8')) port = 8888 serverAddress = ('', port) httpd = BaseHTTPServer.HTTPServer(serverAddress, handler) print('serving at port', port) httpd.serve_forever() #!/usr/bin/env python # -*- coding: utf-8 -*- import SimpleHTTPServer import BaseHTTPServer import cgi import os import json class handler(SimpleHTTPServer.SimpleHTTPRequestHandler): def do_POST(self): os.environ['REQUEST_METHOD']= 'POST' datas = cgi.FieldStorage(self.rfile, self.headers) #【続く】 SimpleHTTPServerの POSTメソッドをオーバーライド
  44. 44. PythonでOutgoing Webhooks用サーバを 作成( RaspberryPi python2.7系を使用) #【続き】 responseValue = ‘テスト' self.send_response(200) self.send_header('Content-type', 'text/json') self.end_headers() responseData = json.dumps({'text': responseValue}) self.wfile.write(responseData.encode('UTF-8')) port = 8888 serverAddress = ('', port) httpd = BaseHTTPServer.HTTPServer(serverAddress, handler) print('serving at port', port) httpd.serve_forever() #!/usr/bin/env python # -*- coding: utf-8 -*- import SimpleHTTPServer import BaseHTTPServer import cgi import os import json class handler(SimpleHTTPServer.SimpleHTTPRequestHandler): def do_POST(self): os.environ['REQUEST_METHOD']= 'POST' datas = cgi.FieldStorage(self.rfile, self.headers) #【続く】 JSONを生成・Slackへ返信する
  45. 45. PythonでOutgoing Webhooks用サーバを 作成( RaspberryPi python2.7系を使用) #【続き】 responseValue = ‘テスト' self.send_response(200) self.send_header('Content-type', 'text/json') self.end_headers() responseData = json.dumps({'text': responseValue}) self.wfile.write(responseData.encode('UTF-8')) port = 8888 serverAddress = ('', port) httpd = BaseHTTPServer.HTTPServer(serverAddress, handler) print('serving at port', port) httpd.serve_forever() #!/usr/bin/env python # -*- coding: utf-8 -*- import SimpleHTTPServer import BaseHTTPServer import cgi import os import json class handler(SimpleHTTPServer.SimpleHTTPRequestHandler): def do_POST(self): os.environ['REQUEST_METHOD']= 'POST' datas = cgi.FieldStorage(self.rfile, self.headers) #【続く】 ポート番号8888でアクセスを待ち受ける。
  46. 46. ヨロイ元帥botに改造する…
  47. 47. ヨロイ元帥botを作る #!/usr/bin/env python # -*- coding: utf-8 -*- import SimpleHTTPServer import BaseHTTPServer import cgi import os import RPi.GPIO as GPIO import time import json seconds = 5 class handler(SimpleHTTPServer.SimpleHTTPRequestHandler): def do_POST(self): os.environ['REQUEST_METHOD']= 'POST' datas = cgi.FieldStorage(self.rfile, self.headers) GPIOを使う設定を追記
  48. 48. ヨロイ元帥botを作る token = datas.getvalue('token', '') service_id = datas.getvalue('service_id', '') text = datas.getvalue('text', '') user_name = datas.getvalue('user_name', '') print token print service_id print text GPIO.setmode(GPIO.BCM) GPIO.setup(17, GPIO.OUT) GPIO.output(17, GPIO.HIGH) time.sleep(seconds) GPIO.output(17, GPIO.LOW) GPIO.cleanup() GPIO 17pinをHI/LOWにする処理
  49. 49. ヨロイ元帥botを作る print user_name + ' 裏切り者は殺す。デストロンを代表して。ヨロイ元帥' responseValue = user_name + ' 裏切り者は殺す。デストロンを代表して。ヨロイ元帥' self.send_response(200) self.send_header('Content-type', 'text/json') self.end_headers() responseData = json.dumps({'text': responseValue}) self.wfile.write(responseData.encode('UTF-8')) port = 8888 serverAddress = ('', port) httpd = BaseHTTPServer.HTTPServer(serverAddress, handler) print('serving at port', port) httpd.serve_forever() JSONデータのレスポンス 書き込んだユーザを取り出して メッセージを追記
  50. 50. 実行の様子
  51. 51. 終わりに… OutgoingWebhooksは外部から電子工作に対して処理 のトリガーを与えることができ、実装もかなり容易。 Webサーバの実装さえできればArduinoやmbedでも可 能。 家電系などスイッチ制御には向いていそう。 素のRaspbianでは、危ないのでセキュリティしっか り!

×