プログラミング無しで開発 ! Amazon Honeycode を使って、Slack と連携するアプリを作ってみた
Author : 酒井 賢
こんにちは。ソリューションアーキテクトの酒井です。
前回の Honeycode の記事を書いた際は夏真っ盛りでしたが、本記事は大雪のニュースが報じられる中で執筆しています。 歳を取る毎に、季節の移り変わりの速さに驚かされます。
前回の記事では Honeycode の基礎的な要素のご紹介と、データを起点にアプリを作成し、メール通知を絡めた業務運用ができるまでをご紹介いたしました。
まだご覧いただいていない方は是非 こちら をご参照いただければと思います。
さて、今回は AWS re:Invent 2020 で発表されたアップデートである AppFlow および Zapier との連携機能 を使い、複数のサービスと連携する Honeycode アプリをみなさんと作っていきたいと思います。
以下が今回作成するアプリ、および連携するサービスを含めた全体像です。
- S3 にタスクデータを CSV ファイルとしてアップロードする
- AppFlow で Honeycode へタスクデータを連携する
- タスクの担当者が Honeycode アプリからタスクの完了操作を行う
- Honeycode Automations の Webhook によって Slack の特定チャンネルにタスの完了通知を投稿する
上記仕組みの実現に当たり、作成する要素は以下の通りです。
- タスク管理をする Honeycode アプリ
- タスクデータを配置する S3 バケット
- S3 バケットからタスクデータを Honeycode へ連携する AppFlow
- タスク通知を受ける Slack チャンネル
- Honeycode から Slack への連携を行う Webhook
なお本記事では Honeycode と外部サービスの連携を主題とするため、Honeycode アプリの作成を app templates を利用して大幅に省力化します。Honeycode アプリの作成方法にはほぼ触れておりませんので、アプリ作成方法を習得したい方は、こちらの記事 をご覧ください。
また Honeycode から Slack への通知についても、Zapier を利用する場合は有料の Zapier アカウントが必要となるため、Zapier 連携を構成する要素の1つである Webhook 機能を用います。Zapier との連携については本記事で触れませんので、別の機会にご紹介ができればと思います。
アプリの作成へ入る前に、作成する各要素についてご紹介します。
目次
ご注意
本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。
このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »
毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。
1. app templates とは
カスタムアプリを作成する際のベースとして利用可能な Honeycode アプリのテンプレートです。本記事執筆時点ではユースケースに合わせた 18 種類が用意されており、順次追加されています。
画面遷移やフィルタリングの方法、画面制御や関数の使い方など、 Honeycode アプリの作り方を把握する上でも有用です。
クリックすると拡大します
2. Amazon AppFlow とは
Salesforce、Marketo、Slack、および ServiceNow などの Software-as-a-Service (SaaS) アプリケーションと、Amazon S3 や Amazon Redshift などの AWS サービスとの間で、たった数回のクリックでデータを安全に転送できるフルマネージド統合サービスです
AppFlow を使用すれば、スケジュール、ビジネスイベントへの応答、またはオンデマンドで、ほぼすべての規模において選択した頻度通りにデータフローを実行できます。
詳細については こちら をご覧ください。
3. Amazon S3 とは
業界をリードするスケーラビリティ、データ可用性、セキュリティ、およびパフォーマンスを提供するオブジェクトストレージサービスです。
データを整理しアクセス制御を細かく調整するために使いやすい機能を提供しており、ビジネスや組織における規則やコンプライアンスの要件を満たしやすく設計されています。また、 99.999999999% (9 x 11) の耐久性を実現するように設計されており、世界中の企業のために、何百万ものアプリケーションのデータを保存しています。
詳細についてはこちらをご覧ください。
4. Webhook とは
アプリケーション間でのリアルタイムな連携を実現するための仕組みです。
連携元アプリケーションでのイベントをきっかけとして、データを宛先のアプリケーションへ自動的に連携できます。Honeycode では Automation という処理の自動化機能の中で、Webhook を利用できるようになりました。
さて、説明はこのくらいにして、早速アプリケーションの作成を始めましょう !
5. app templates からタスク管理アプリを作成する
最初に行うことはタスク管理をするための Honeycode アプリの作成です。
app templates の Team Task Tracker を利用します。
こちら から Amazon Honeycode にログインし、画面右上の Create workbook ボタンをクリックして Team Task Tracker を選択します。
クリックすると拡大します
Wookbook 名を入力し、Create ボタンをクリックします。
これで Honeycode アプリを作ることができました。
app templates から作成した Honeycode アプリには、Table や Apps、Automation のアプリを構成する要素に加え、サンプルデータも含まれています。ブラウザや iOS および Android 向けのモバイルアプリから、すぐに操作可能です。
クリックすると拡大します
参考
Team Task Tracker はチーム内でのタスク管理を想定したテンプレートです。
タスクデータをストアする A_Tasks テーブル、タスクデータテーブルから参照される各種マスターテーブルをデータモデルとして保持しています。
詳細は こちら をご確認ください。
注意
本記事の執筆時点において、 AppFlow を介して S3 の CSV ファイルを Honeycode に連携する際、1 列目のデータが連携されない場合があります。このような場合は、Table と CSV ファイルの 1 列目に任意の列を追加して回避します。
クリックすると拡大します
6. タスクデータ (CSVファイル) を準備する
続いては、Honeycode に連携するタスクデータを含む CSV ファイルを準備します。
CSV ファイルは Honeycode の Table をコピペすると簡単に作成できます。コピーしたい範囲を選択し、右クリックをすると表示されるメニューで Copy をクリックします。この際、ヘッダー行を含めてコピペをしてください。
クリックすると拡大します
クリックすると拡大します
コピペしたデータに合わせてタスクデータを入力し、文字コードを UTF-8 とした CSV ファイル形式で保存します。
クリックすると拡大します
7. S3 バケットを作成し、タスクデータファイルを格納する
次に CSV ファイルを格納する S3 バケットを作成します。
AWS のマネジメントコンソールにログインし、画面左上のサービスから S3 を選択します。
クリックすると拡大します
S3 の画面が表示されますので、バケットを作成ボタンをクリックします。
クリックすると拡大します
以下の入力を行った上で画面下部の バケットを作成 ボタンをクリックします。
Honeycode は本記事執筆時点においてオレゴンリージョンでのみご利用可能です。S3 のバケットも Honeycode に合わせてオレゴンリージョンに作成します。
- バケット名 : 任意
- リージョン : 米国西部 (オレゴン) us-west-2
クリックすると拡大します
バケットが作成できましたら、さきほど作成したタスクデータを配置するため、バケット名をクリックします。
クリックすると拡大します
タスクデータを配置するフォルダを作成します。
フォルダの作成ボタンをクリックし、次の画面でフォルダ名を入力した上でフォルダの作成ボタンをクリックします。
クリックすると拡大します
フォルダ名をクリックしてフォルダに移動、CSV ファイルを画面にドラッグ＆ドロップしてアップロードします。
クリックすると拡大します
アップロードの確認画面が表示されますので、画面下部のアップロードボタンをクリックします。アップロードが成功すれば、本手順は完了です。
クリックすると拡大します
8. AppFlow で S3 と Honeycode の接続を作成する
続いては S3 のバケットと Honeycode を連携するための AppFlow を作成します。
AWS マネジメントコンソールの画面左上のサービスから Amazon AppFlow を選択します。
クリックすると拡大します
AppFlow も Honeycode と同じオレゴンリージョンに作成しますので、画面右上のリージョン名をクリックし、米国西部 (オレゴン) us-west-2 を選択します。
リージョン変更が完了しましたら、フローを作成ボタンをクリックします。
クリックすると拡大します
フロー名を入力し、画面下部の次へボタンをクリックします。
クリックすると拡大します
送信元を以下の通り設定します。
- 送信元名 : Amazon S3
- バケットの詳細 : S3 バケット作成時に指定したバケット名とフォルダ名
クリックすると拡大します
送信先には Amazon Honeycode を選択し、接続するボタンをクリックします。
クリックすると拡大します
接続先名を入力し、接続するボタンをクリックします。
クリックすると拡大します
Honeycode への接続確認画面が表示されますので、Allow ボタンをクリックし、接続を許可します。
クリックすると拡大します
Honeycode への接続が確立されると、データ連携先となる Workbook および Table を指定可能になります。前段で作成したタスク管理アプリの情報を以下の通り入力します。なお、A_Tasks は Team Task Tracker アプリに含まれるタスクデータを格納するための Table です。
- Amazon Honeycode オブジェクトを選択 : Team Task Tracker
- Amazon Honeycode サブオブジェクトを選択 : A_Tasks
クリックすると拡大します
画面を下にスクロールし、フロートリガーを指定します。
ここでは AppFlow を起動するタイミングを指定します。S3 と Honeycode の連携においてはオンデマンド実行とスケジュールに従った実行が選択可能です。今回はオンデマンド実行を選択し、次へボタンをクリックします。
クリックすると拡大します
次は S3 に保存した CSV ファイルと Hoenycode の Table をマッピングします。
Amazon S3 の送信元フィールド名をクリックし、すべてのフィールドを直接マッピングするを選択します。
クリックすると拡大します
フィールドマッピングの画面が表示されます。
本画面では送信元と送信先フィールドの関連付け、連携しないフィールドの除外が可能です。今回は変更を加えず、選択したフィールドをマッピングするボタンをクリックします。
元の画面に戻りマッピング内容が反映されますので、次へボタンをクリックします。
クリックすると拡大します
フィルターの追加画面が表示されますが、利用可能なフィルターが存在しないため、次へボタンをクリックします。
送信元によっては、送信対象データを限定するための条件を指定可能です。色々なデータソースをもとに、フローを作成してみてください。
クリックすると拡大します
フロー内容の確認画面が表示されますので、内容を確認の上、画面下部のフローを作成ボタンをクリックします。
フローの作成が完了した際はこちらの画面が表示されます。この画面は後ほど動作確認で利用しますので、以降の手順はブラウザの新たなタブを開いて実施してください。
クリックすると拡大します
9. Honeycode から Slack への接続を作成する (Slack Incoming Webhook のセットアップ)
最後の設定作業として、Honeycode から Slack への通知を行う Webhook を定義します。
Honeycode での作業を行う前に、Slack 側で Webhook を受け入れられるよう、Incoming Webhook をセットアップします。すでにIncoming Webhook をご利用中の方は、本セクションをスキップしてください。
Slack にログインし、Hoenycode から送信されるタスク完了通知を受け入れるチャンネルを作成します。
クリックすると拡大します
続いて slack app directory で Incoming WebHooks を検索し、Slack に追加ボタンをクリックします。
クリックすると拡大します
作成したチャンネルを選択し、Incoming Webhook インテグレーションの追加ボタンをクリックします。
クリックすると拡大します
Incoming Webhook の設定画面が表示されますので、チャンネル名と Webhook URL をメモしておきます。これで Slack 側の準備は完了です。
クリックすると拡大します
10. Honeycode から Slack への接続を作成する (Honeycode での Webhook 設定)
Honeycode に戻り、Slack へ通知を行うための Webhook を設定します。
re:Invent で発表されたアップデートに伴い、Honeycode は Automation の中で Webhook を利用できるようになりました。
画面左の Automations アイコンをクリックし、Automations の + をクリックします。
クリックすると拡大します
Automation の設定画面が表示されますので、まずはわかりやすい名前をつけます。
名前は画面上部のスリードットをクリックすることで変更可能です。
クリックすると拡大します
次に Slack への通知を行うタイミングを指定します。
今回はタスクの完了を知らせる通知を送信したいので、タスクのステータス変更をトリガーとします。Automation trigger: の Column Changes をクリックし、以下の通り入力します。
- In table
- テーブル : A_Tasks
- フィールド : =[Status]
- Run automation if this formula is TRUE：=[Status]=“Completed”
クリックすると拡大します
入力が終わりましたら、+ Add actions ボタンをクリックし、Webhook を選択します。
クリックすると拡大します
Webhook の設定セクションが表示されますので、以下の通り入力をします。
なお、Webhook payload を複数入力しますので、+ Add another をクリックして入力欄を増やします。
- Webhook URL : Slack の Incoming Webhook 設定画面で取得した Webhook URL
- Payload value : 通知を送信する Slack チャンネル名
- Payload key : channel
- Payload value : ="""”&[Task]&”"" 完了しました！"
- Payload key : text
- Payload value : :white_check_mark:
- Payload key : icon_emoji
クリックすると拡大します
クリックすると拡大します
入力が完了したら、画面右上の Publish ボタンをクリックします。
クリックすると拡大します
お疲れさまでした！
以上で設定作業は完了です。早速作成したアプリケーションの動作を確認しましょう。
11. S3 にアップロードしたタスクデータを Honeycode アプリに連携する
まずは先ほど作成した AppFlow を実行し、S3 にアップロードしたタスクデータを Honeycode へ連携します。
オンデマンドでの AppFlow 実行はフロー詳細画面右上、フローを実行ボタンをクリックします。
クリックすると拡大します
フローの実行が成功すると、画面上部にメッセージが表示されます。
画面下部の実行履歴タブからもフローの実行結果を確認可能です。
クリックすると拡大します
参考
フロー詳細画面を閉じてしまった場合、以下手順で画面を表示してください。
AWS マネジメントコンソールにログインし、画面左上のサービスから Amazon AppFlow を選択します。 画面左側の三本線をクリックし、メニューを展開します。
クリックすると拡大します
メニューの中からフローをクリックします。
クリックすると拡大します
フローの一覧が表示されますので、さきほど作成したフロー名のリンクをクリックします。
クリックすると拡大します
これにてアプリケーションの作成は完了です。
アプリケーションの利用を開始するため、関係者に公開をしましょう！
11.タスクをスマートフォンの Honeycode アプリで処理する
クリックすると拡大します
タスク管理アプリケーションのトップページとして、タスクの一覧が表示されます。
AppFlow から連携されたタスクデータをタップし、タスクの内容を表示します。
クリックすると拡大します
クリックすると拡大します
タスクの実行状況を示す、STATUS をタップします。
クリックすると拡大します
STATUS の選択画面が表示されますので、タスクの完了を示す “Complated” を選択します。
クリックすると拡大します
画面下部の DONE ボタンをタップし、タスク一覧画面に戻ります。
クリックすると拡大します
13. タスクの完了通知を Slack で確認する
Slack の画面を表示し、Hoenycode から送信されるタスク完了通知を受け入れるチャンネルを開きます。
以下のメッセージが表示され、Honecycode から送信された通知の受信に成功していることを確認できます。今回の手順で作成した通知のポイントは以下の 3 点です。
- 通知送信先の Slack チャンネルを指定する
- Honeycode の Table に保存されたデータを利用し、メッセージを動的に作成する
- メッセージに表示される✓アイコンを指定する
14. まとめ
いかがでしたでしょうか。
本記事では AppFlow と Webhook を利用し、複数のサービスと連携するアプリケーションの作成方法をご紹介いたしました。
Amaozon Honeycode はプログラミングを行うこと無く、業務に合わせたアプリケーションを作成できます。データを格納する Table 、データを表示・登録するための画面である App、データの変更に合わせて起動する処理の Automation に加え、本日ご紹介した AppFlow や Webhook を用いて外部サービスと Amazon Honeycode を連携させて、より幅広い業務に対応するアプリケーションを作成可能になりました。
Amazon Honeycode は無料で利用可能なプランがあり、こちら からアカウントを作成いただくだけで、すぐにアプリケーション開発を始めることができます。
Amazon AppFlow の利用は Amazon Honeycode アカウントに加えて AWS のアカウントが必要です。未だお持ちではない方は こちらの手順 をご参照の上作成し、是非本日ご紹介したサービス連携を行うアプリケーションを作成してください !
*本記事でご紹介した内容は、2020 年 12 月 15 日時点の Amazon Honeycode Beta 版を元にしており、今後変更される可能性がある点にご注意ください。
筆者プロフィール
酒井 賢 (Sakai Ken)
アマゾン ウェブ サービス ジャパン合同会社
ソリューションアーキテクト
SIer でエンタープライズ企業に対するシステム構築を経験し、ビジネス現場でのクラウド利用を加速するべく現職に。
オートバイとキャンプが趣味。テントを積んだバイクで日本全国のキャンプ場を駆け回っている。
AWS を無料でお試しいただけます