プログラミング無しで開発 ! Amazon Honeycode を使って、Slack と連携するアプリを作ってみた

2021-02-02
デベロッパーのためのクラウド活用方法

Author : 酒井 賢

こんにちは。ソリューションアーキテクトの酒井です。

前回の Honeycode の記事を書いた際は夏真っ盛りでしたが、本記事は大雪のニュースが報じられる中で執筆しています。 歳を取る毎に、季節の移り変わりの速さに驚かされます。

前回の記事では Honeycode の基礎的な要素のご紹介と、データを起点にアプリを作成し、メール通知を絡めた業務運用ができるまでをご紹介いたしました。
まだご覧いただいていない方は是非 こちら をご参照いただければと思います。

さて、今回は AWS re:Invent 2020 で発表されたアップデートである AppFlow および Zapier との連携機能 を使い、複数のサービスと連携する Honeycode アプリをみなさんと作っていきたいと思います。

以下が今回作成するアプリ、および連携するサービスを含めた全体像です。

img_honeycode-appflow_01
  1. S3 にタスクデータを CSV ファイルとしてアップロードする
  2. AppFlow で Honeycode へタスクデータを連携する
  3. タスクの担当者が Honeycode アプリからタスクの完了操作を行う
  4. 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 との連携については本記事で触れませんので、別の機会にご紹介ができればと思います。

アプリの作成へ入る前に、作成する各要素についてご紹介します。


1. app templates とは

カスタムアプリを作成する際のベースとして利用可能な Honeycode アプリのテンプレートです。本記事執筆時点ではユースケースに合わせた 18 種類が用意されており、順次追加されています。

画面遷移やフィルタリングの方法、画面制御や関数の使い方など、 Honeycode アプリの作り方を把握する上でも有用です。

img_honeycode-appflow_02

クリックすると拡大します


2. Amazon AppFlow とは

Salesforce、Marketo、Slack、および ServiceNow などの Software-as-a-Service (SaaS) アプリケーションと、Amazon S3 や Amazon Redshift などの AWS サービスとの間で、たった数回のクリックでデータを安全に転送できるフルマネージド統合サービスです

AppFlow を使用すれば、スケジュール、ビジネスイベントへの応答、またはオンデマンドで、ほぼすべての規模において選択した頻度通りにデータフローを実行できます。

詳細については こちら をご覧ください。

img_honeycode-appflow_03

3. Amazon S3 とは

業界をリードするスケーラビリティ、データ可用性、セキュリティ、およびパフォーマンスを提供するオブジェクトストレージサービスです。

データを整理しアクセス制御を細かく調整するために使いやすい機能を提供しており、ビジネスや組織における規則やコンプライアンスの要件を満たしやすく設計されています。また、 99.999999999% (9 x 11) の耐久性を実現するように設計されており、世界中の企業のために、何百万ものアプリケーションのデータを保存しています。

詳細についてはこちらをご覧ください。


4. Webhook とは

アプリケーション間でのリアルタイムな連携を実現するための仕組みです。
連携元アプリケーションでのイベントをきっかけとして、データを宛先のアプリケーションへ自動的に連携できます。Honeycode では Automation という処理の自動化機能の中で、Webhook を利用できるようになりました。

さて、説明はこのくらいにして、早速アプリケーションの作成を始めましょう !


5. app templates からタスク管理アプリを作成する

最初に行うことはタスク管理をするための Honeycode アプリの作成です。
app templates の Team Task Tracker を利用します。

img_honeycode-appflow_04

こちら から Amazon Honeycode にログインし、画面右上の Create workbook ボタンをクリックして Team Task Tracker を選択します。

img_honeycode-appflow_05

クリックすると拡大します

Wookbook 名を入力し、Create ボタンをクリックします。

これで Honeycode アプリを作ることができました。

app templates から作成した Honeycode アプリには、Table や Apps、Automation のアプリを構成する要素に加え、サンプルデータも含まれています。ブラウザや iOS および Android 向けのモバイルアプリから、すぐに操作可能です。

img_honeycode-appflow_07

クリックすると拡大します


参考

Team Task Tracker はチーム内でのタスク管理を想定したテンプレートです。
タスクデータをストアする A_Tasks テーブル、タスクデータテーブルから参照される各種マスターテーブルをデータモデルとして保持しています。

詳細は こちら をご確認ください。

img_honeycode-appflow_08

注意

本記事の執筆時点において、 AppFlow を介して S3 の CSV ファイルを Honeycode に連携する際、1 列目のデータが連携されない場合があります。このような場合は、Table と CSV ファイルの 1 列目に任意の列を追加して回避します。

img_honeycode-appflow_09

クリックすると拡大します


6. タスクデータ (CSVファイル) を準備する

続いては、Honeycode に連携するタスクデータを含む CSV ファイルを準備します。

CSV ファイルは Honeycode の Table をコピペすると簡単に作成できます。コピーしたい範囲を選択し、右クリックをすると表示されるメニューで Copy をクリックします。この際、ヘッダー行を含めてコピペをしてください。

img_honeycode-appflow_60

クリックすると拡大します

img_honeycode-appflow_61

クリックすると拡大します

コピペしたデータに合わせてタスクデータを入力し、文字コードを UTF-8 とした CSV ファイル形式で保存します。

img_honeycode-appflow_62

クリックすると拡大します


7. S3 バケットを作成し、タスクデータファイルを格納する

次に CSV ファイルを格納する S3 バケットを作成します。

img_honeycode-appflow_12

AWS のマネジメントコンソールにログインし、画面左上のサービスから S3 を選択します。

img_honeycode-appflow_13

クリックすると拡大します

S3 の画面が表示されますので、バケットを作成ボタンをクリックします。

img_honeycode-appflow_14

クリックすると拡大します

以下の入力を行った上で画面下部の バケットを作成 ボタンをクリックします。

Honeycode は本記事執筆時点においてオレゴンリージョンでのみご利用可能です。S3 のバケットも Honeycode に合わせてオレゴンリージョンに作成します。

  • バケット名 : 任意
  • リージョン : 米国西部 (オレゴン) us-west-2
img_honeycode-appflow_15_new

クリックすると拡大します

バケットが作成できましたら、さきほど作成したタスクデータを配置するため、バケット名をクリックします。

img_honeycode-appflow_16

クリックすると拡大します

タスクデータを配置するフォルダを作成します。

フォルダの作成ボタンをクリックし、次の画面でフォルダ名を入力した上でフォルダの作成ボタンをクリックします。

img_honeycode-appflow_17

クリックすると拡大します

フォルダ名をクリックしてフォルダに移動、CSV ファイルを画面にドラッグ&ドロップしてアップロードします。

img_honeycode-appflow_18

クリックすると拡大します

アップロードの確認画面が表示されますので、画面下部のアップロードボタンをクリックします。アップロードが成功すれば、本手順は完了です。

img_honeycode-appflow_19

クリックすると拡大します


8. AppFlow で S3 と Honeycode の接続を作成する

続いては S3 のバケットと Honeycode を連携するための AppFlow を作成します。

img_honeycode-appflow_20

AWS マネジメントコンソールの画面左上のサービスから Amazon AppFlow を選択します。

img_honeycode-appflow_21

クリックすると拡大します

AppFlow も Honeycode と同じオレゴンリージョンに作成しますので、画面右上のリージョン名をクリックし、米国西部 (オレゴン) us-west-2 を選択します。

リージョン変更が完了しましたら、フローを作成ボタンをクリックします。

img_honeycode-appflow_23

クリックすると拡大します

フロー名を入力し、画面下部の次へボタンをクリックします。

img_honeycode-appflow_24

クリックすると拡大します

送信元を以下の通り設定します。

  • 送信元名 : Amazon S3
  • バケットの詳細 : S3 バケット作成時に指定したバケット名とフォルダ名
img_honeycode-appflow_25

クリックすると拡大します

送信先には Amazon Honeycode を選択し、接続するボタンをクリックします。

img_honeycode-appflow_26

クリックすると拡大します

接続先名を入力し、接続するボタンをクリックします。

img_honeycode-appflow_27

クリックすると拡大します

Honeycode への接続確認画面が表示されますので、Allow ボタンをクリックし、接続を許可します。

img_honeycode-appflow_28

クリックすると拡大します

Honeycode への接続が確立されると、データ連携先となる Workbook および Table を指定可能になります。前段で作成したタスク管理アプリの情報を以下の通り入力します。なお、A_Tasks は Team Task Tracker アプリに含まれるタスクデータを格納するための Table です。

  • Amazon Honeycode オブジェクトを選択 : Team Task Tracker
  • Amazon Honeycode サブオブジェクトを選択 : A_Tasks
img_honeycode-appflow_29

クリックすると拡大します

画面を下にスクロールし、フロートリガーを指定します。

ここでは AppFlow を起動するタイミングを指定します。S3 と Honeycode の連携においてはオンデマンド実行とスケジュールに従った実行が選択可能です。今回はオンデマンド実行を選択し、次へボタンをクリックします。

img_honeycode-appflow_30

クリックすると拡大します

次は S3 に保存した CSV ファイルと Hoenycode の Table をマッピングします。

Amazon S3 の送信元フィールド名をクリックし、すべてのフィールドを直接マッピングするを選択します。

img_honeycode-appflow_31

クリックすると拡大します

フィールドマッピングの画面が表示されます。

本画面では送信元と送信先フィールドの関連付け、連携しないフィールドの除外が可能です。今回は変更を加えず、選択したフィールドをマッピングするボタンをクリックします。

元の画面に戻りマッピング内容が反映されますので、次へボタンをクリックします。

img_honeycode-appflow_32

クリックすると拡大します

フィルターの追加画面が表示されますが、利用可能なフィルターが存在しないため、次へボタンをクリックします。

送信元によっては、送信対象データを限定するための条件を指定可能です。色々なデータソースをもとに、フローを作成してみてください。

img_honeycode-appflow_33

クリックすると拡大します

フロー内容の確認画面が表示されますので、内容を確認の上、画面下部のフローを作成ボタンをクリックします。

フローの作成が完了した際はこちらの画面が表示されます。この画面は後ほど動作確認で利用しますので、以降の手順はブラウザの新たなタブを開いて実施してください。

img_honeycode-appflow_34

クリックすると拡大します


9. Honeycode から Slack への接続を作成する (Slack Incoming Webhook のセットアップ)

最後の設定作業として、Honeycode から Slack への通知を行う Webhook を定義します。

Honeycode での作業を行う前に、Slack 側で Webhook を受け入れられるよう、Incoming Webhook をセットアップします。すでにIncoming Webhook をご利用中の方は、本セクションをスキップしてください。

img_honeycode-appflow_35

Slack にログインし、Hoenycode から送信されるタスク完了通知を受け入れるチャンネルを作成します。

img_honeycode-appflow_36

クリックすると拡大します

続いて slack app directory で Incoming WebHooks を検索し、Slack に追加ボタンをクリックします。

img_honeycode-appflow_37

クリックすると拡大します

作成したチャンネルを選択し、Incoming Webhook インテグレーションの追加ボタンをクリックします。

img_honeycode-appflow_38

クリックすると拡大します

Incoming Webhook の設定画面が表示されますので、チャンネル名と Webhook URL をメモしておきます。これで Slack 側の準備は完了です。

img_honeycode-appflow_39

クリックすると拡大します


10. Honeycode から Slack への接続を作成する (Honeycode での Webhook 設定)

Honeycode に戻り、Slack へ通知を行うための Webhook を設定します。

img_honeycode-appflow_40

re:Invent で発表されたアップデートに伴い、Honeycode は Automation の中で Webhook を利用できるようになりました。

画面左の Automations アイコンをクリックし、Automations の + をクリックします。

img_honeycode-appflow_41

クリックすると拡大します

Automation の設定画面が表示されますので、まずはわかりやすい名前をつけます。

名前は画面上部のスリードットをクリックすることで変更可能です。

img_honeycode-appflow_42

クリックすると拡大します

次に Slack への通知を行うタイミングを指定します。
今回はタスクの完了を知らせる通知を送信したいので、タスクのステータス変更をトリガーとします。Automation trigger: の Column Changes をクリックし、以下の通り入力します。

  • In table
    • テーブル : A_Tasks
    • フィールド : =[Status]
  • Run automation if this formula is TRUE:=[Status]=“Completed”
img_honeycode-appflow_43

クリックすると拡大します

入力が終わりましたら、+ Add actions ボタンをクリックし、Webhook を選択します。

img_honeycode-appflow_44

クリックすると拡大します

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
img_honeycode-appflow_45

クリックすると拡大します

img_honeycode-appflow_46

クリックすると拡大します

入力が完了したら、画面右上の Publish ボタンをクリックします。

img_honeycode-appflow_47

クリックすると拡大します

お疲れさまでした!
以上で設定作業は完了です。早速作成したアプリケーションの動作を確認しましょう。


11. S3 にアップロードしたタスクデータを Honeycode アプリに連携する

まずは先ほど作成した AppFlow を実行し、S3 にアップロードしたタスクデータを Honeycode へ連携します。

オンデマンドでの AppFlow 実行はフロー詳細画面右上、フローを実行ボタンをクリックします。

img_honeycode-appflow_48

クリックすると拡大します

フローの実行が成功すると、画面上部にメッセージが表示されます。
画面下部の実行履歴タブからもフローの実行結果を確認可能です。

img_honeycode-appflow_49

クリックすると拡大します

参考

フロー詳細画面を閉じてしまった場合、以下手順で画面を表示してください。
AWS マネジメントコンソールにログインし、画面左上のサービスから Amazon AppFlow を選択します。 画面左側の三本線をクリックし、メニューを展開します。

img_honeycode-appflow_50

クリックすると拡大します

メニューの中からフローをクリックします。

img_honeycode-appflow_51

クリックすると拡大します

フローの一覧が表示されますので、さきほど作成したフロー名のリンクをクリックします。

img_honeycode-appflow_63

クリックすると拡大します

これにてアプリケーションの作成は完了です。
アプリケーションの利用を開始するため、関係者に公開をしましょう! 


11.タスクをスマートフォンの Honeycode アプリで処理する

タスクの内容確認と処理を Honeycode モバイルアプリから実行します。

iOS の方は こちら から、Android の方は こちら から Amazon Honeycode アプリをインストールしてください。 アプリのインストールが完了し、Honeycode へログインをするとアプリケーションの一覧が表示されます。先ほど作成したタスク管理アプリをタップして起動します。

img_honeycode-appflow_53

クリックすると拡大します

タスク管理アプリケーションのトップページとして、タスクの一覧が表示されます。

AppFlow から連携されたタスクデータをタップし、タスクの内容を表示します。

img_honeycode-appflow_54

クリックすると拡大します

img_honeycode-appflow_55

クリックすると拡大します

タスクの実行状況を示す、STATUS をタップします。

img_honeycode-appflow_56

クリックすると拡大します

STATUS の選択画面が表示されますので、タスクの完了を示す “Complated” を選択します。

img_honeycode-appflow_57

クリックすると拡大します

画面下部の DONE ボタンをタップし、タスク一覧画面に戻ります。

img_honeycode-appflow_58

クリックすると拡大します


13. タスクの完了通知を Slack で確認する

Slack の画面を表示し、Hoenycode から送信されるタスク完了通知を受け入れるチャンネルを開きます。

以下のメッセージが表示され、Honecycode から送信された通知の受信に成功していることを確認できます。今回の手順で作成した通知のポイントは以下の 3 点です。

  • 通知送信先の Slack チャンネルを指定する
  • Honeycode の Table に保存されたデータを利用し、メッセージを動的に作成する
  • メッセージに表示される✓アイコンを指定する
img_honeycode-appflow_59

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 版を元にしており、今後変更される可能性がある点にご注意ください。


builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

筆者プロフィール

photo_sakai_ken

酒井 賢 (Sakai Ken)
アマゾン ウェブ サービス ジャパン株式会社
ソリューションアーキテクト

SIer でエンタープライズ企業に対するシステム構築を経験し、ビジネス現場でのクラウド利用を加速するべく現職に。
オートバイとキャンプが趣味。テントを積んだバイクで日本全国のキャンプ場を駆け回っている。

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
フィルタ
フィルタ
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する