omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します!

技術書典で本が売れたらAWS IoT ボタンを押してSlackに通知できるようにしました!

少しリアクションされて嬉しい〜😁
2019年4月14日の技術書典6に向けて色々と準備をしております。 今回は途中から来場してくるメンバーに売れ行きを共有できるようにAWS IoTボタンAWS LambdaSlackを利用して、 ボタンを押したらSlackにメッセージを送るを作りましたので制作過程を共有したいと思います! 最後にGitHubで別のメンバーがソースコードを公開したのでそちらもご覧くださいね。

AWS IoTボタンのセットアップ

ボタンの購入

早速ですが皆さんAWS IoTボタンはお持ちでしょうか? Amazon Dash Buttonは販売を終了いたしましたが、こちらのプログラミングできるIoTボタンは販売を継続しております。 買ってない人は試せませんので是非購入してください!1日で届きます!

AWS IoT ボタン (プログラミング可能な Dash Button) | AWS

www.amazon.co.jp

AWS IoT 1-Clickアプリをインストール

さて次はアプリをインストールしてください。

iPhoneユーザーはこちら

AWS IoT 1-Click

AWS IoT 1-Click

  • AMZN Mobile LLC
  • ビジネス
  • 無料

Androidユーザーはこちら play.google.com

AWSアカウントの取得

この記事を読んでいる皆様はAWSのアカウントをお持ちかと思いますが、 このアプリはAWSのアカウントでログインする必要があります。
※これから先のスクリーンショットiPhoneのものになります。Androidユーザーの方、もし画面に差異があったら申し訳ありません。脳内で補完をお願いします。

f:id:omuriceman:20190404220053p:plain:w200
ログイン画面

ボタンをWi-Fiに接続する

Wi-Fiを設定」をタップするとカメラでスキャンが開始されます。 IoTボタンの箱についているバーコードを読み込んでください!

f:id:omuriceman:20190405150950p:plain:w200
Wi-Fiを設定

f:id:omuriceman:20190405151147p:plain:w200
Scan

バイスと接続

スクリーンショットの通りですが、ボタンを6秒間長押しするとペアリングが完了します。

f:id:omuriceman:20190405151336p:plain:w200
ペアリング

Slackの新しくなったWebHookURLの準備

Slackにメッセージを送るにはWebHookURLが必要です。 Slackにアカウントがあり、ログインしている状態で話を進めます。

以前の方法

以前はこちらのURLからWebHookURLを発行してメッセージを送る方法でした。 https://slack.com/services/new/incoming-webhook 今でもこの方法で作成はできるのですが、 新しくなったWebHookURLがあるのでそちらを利用していきましょう。

最新の方法

Slackのルーム画面から遷移していく方法もあるのですが、長くなってしまうのでURLを貼り付けます。

api.slack.com

画面に表示されているStartBuildingをクリックしてアプリを作成します。

f:id:omuriceman:20190405133000p:plain
Slack API初期画面

アプリの名前と使用するワークスペースがプルダウンで表示されますので選択してください。

f:id:omuriceman:20190405133243p:plain
Create Slack App
作成が完了すると下記のような画面になります。
f:id:omuriceman:20190405133706p:plain
Basic Infomation
Incoming WebHooksを有効にしてください。 問題なく進むとAdd New Webhook to Workspaceが表示されています。
f:id:omuriceman:20190405134019p:plain
Add New Webhook to Workspace
投稿先(チャンネル)を選択するプルダウンが表示されるようになっていますので、 選択後、許可するを押して作成完了です。

画面を戻るとWebhook URLが表示されています。 後ほど使いますので忘れないようにしてください。

Lambdaを作成する

Lambdaを作成する場合、ServerlessFrameworkや AWS SAMなどを利用する方法がありますが、 今回は構成がシンプルなためAWSコンソール上で直接Lambdaプログラムを書いてしまっていいでしょう。

関数の作成

まずは管理画面でLambdaを開いて関数の作成を行います。 関数名は適当につけてもらって構いません。

f:id:omuriceman:20190405145945p:plain
関数の作成

その後、管理画面上にエディター画面があるので、最後に紹介しているGitHubのコードのindex.jsよりコードを丸ごとコピーして貼り付けてください。 外部モジュールは使いませんでしたのでコピペでいけるようにしております!

f:id:omuriceman:20190405150122p:plain
コードの入力

環境変数の設定

SlackのWebHookURLとメッセージを登録します。 今回は環境変数に登録すると動くようになっていますのでキャプチャーを参考に、

  • TEXT
  • WEB_HOOK_URL

を入力してください。 TEXTの情報はそのままSlackに通知されますので、テンションが上がる言葉がいいでしょう!

f:id:omuriceman:20190405150627j:plain
環境変数

この段階でちゃんと設定できていると、管理画面上のテストボタンを押すとSlackに通知が飛ぶようになっていると思います!

Lambdaとアプリを紐づける

最後に作成したLambdaとアプリで登録してボタンの通知先として登録する必要があります。 再びですがアプリを開いてプロジェクトの作成を行ってください。

f:id:omuriceman:20190405153006p:plain:w200
プロジェクト作成

プロジェクト名に好きなものを入れて進めます。
テンプレートの定義という画面で、デバイステンプレートの定義を選択してください。

  • バイステンプレート名 → 任意の名前でOKです
  • バイスタイプ → button
  • アクション → Lambda関数の選択
  • Lambda関数のARN → 先ほど作成した関数を選択してください。

f:id:omuriceman:20190405153408j:plain:w200
バイステンプレート

保存を押して完了です!うまくいけばこの時点でボタンを押すと通知が届くようになっています! おめでとうございます。

当日の理想的な押され方

ここまでできたら後は押しに押しまくるだけです!!!

f:id:omuriceman:20190405130624g:plain
めちゃくちゃ売れてるイメージ
※実際にはIoTボタンの制約上、5秒程度待たないと次は押せません!ご注意ください!

ソースコードのご紹介

開発をしてくれたメンバーのリポジトリを共有しておきます! github.com

まとめ

  • AWS IoT ボタンを買う
  • AWS IoT 1-clickのアプリをインストール
  • SlackでWebHookURLを取得
  • AWSでLambdaを作成
  • アプリからLambdaを紐づける
  • 押す

以上です!

宣伝

宣伝ですが4/14え28で出版を行います! 朝から私が机にたって(ボタンを押しながら?)販売している予定ですのでよろしければお立ち寄りください!

techbookfest.org