Amazon Honeycodeを触ってみる

2021/10/06(水)AWS Expert Online JAWS-UG: Honeycode & CI/CDパイプラインで、Amazon Honeycodeというサービスを知りました。ノーコードでアプリ開発できるとのことだったので、超簡易アプリを作ってみました。

https://www.slideshare.net/AmazonWebServicesJapan/amazon-honeycode

# 1.Amazon Honeycodeとは

https://www.honeycode.aws/

- プログラミングなしでアプリ開発できるフルマネージドサービス
- ブラウザだけで開発できる
- AWSアカウントとは別にHoneycodeアカウント（Team:チーム）を作成する必要がある
  - 作成に必要なのはメールアドレスだけ
  - クレカ登録など支払情報不要

## 1-0.主要概念

- Table：データストア
- Builder：アプリ開発を行う
- Automations：通知やイベント起点の処理を担う
- Workbook：Table,Builder,Automationsを包括する

## 1-1.Table

- 構造型データストア
- CSVまたはTSVファイルのインポート、もしくはスプレッドシートからコピペでデータ追加可能

## 1-2.Builder

- アプリ開発ツール
- 画面上に入力欄、ボタン、リストなどの部品を配置することでアプリ生成
  - ソースコード不要
  - 変更は即時アプリに反映

## 1-3.Automations

- Tableのデータに対する変更やアプリ上の操作を起点に処理を実行
- データ追加、変更、削除、メール通知可能
- Webhookの実行により外部システムとの連携も可能

## 1-4.Workbook

- Table,Builder,Automationsを包括する枠組み
- workbook内に複数のTable、アプリ、Automationsを含む
- 開発者や利用者に対し、workbookもしくはアプリケーション単位に権限付与


# 2.触ってみる
※Automationsは今回設定していません。

## 2-1.Amazon Honeycodeアカウント作成
以下、Amazon Honeycodeのウェブサイト

https://www.honeycode.aws/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/c64e5089-4aaf-2ebe-17e6-13a7905ee6a7.png)
まず「Sign in」からHoneycodeのアカウントを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/709677b9-7c84-ea82-2413-ef90bd2e010a.png)
「Create One」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/c6fb0f41-0041-1f43-f30c-c96950209915.png)
名前、メールアドレス、パスワードを入力し「Create account」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/05c51002-3d66-a670-bdde-165d36074c5c.png)
メールが届くので「Confirm now」でアカウント有効化する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/b5bc9e50-f049-db9d-3449-e8f55f937c63.png)
ブラウザで以下表示され、アカウント作成が完了する。「Continue to log in」でログインする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/a5c23ccc-59e9-2a94-7ef7-62775ca4afc6.png)
「Continue to log in」でログインする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/1a34b04a-daf7-25e8-9c99-e7fadf579809.png)

## 2-2.Workbookを作成する
「Create workbook」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/d0d9a33b-ac6f-70be-8386-b21a8d21bc14.png)

テンプレートがいくつも用意されている。今回はスクラッチ（なにもないところ）から作成するので「Start from scratch」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/d81c45e8-7ae0-5753-bf76-bdb2d100eb82.png)
Workbook nameに作成するアプリの名前を入力して「Create」をクリックする。
今回は「AWS認定資格取得チェッカー」的なものを作ってみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/b1d2810c-7a6d-6017-1929-79d0fafe5b78.png)


## 2-3.Tableを作成する

画面左の表アイコンからTable設定できる。
デフォルトでTable1という空のテーブルが作成されているので、リネームして編集していく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/d1f65444-dede-aa17-c9c3-8881cfc7e73f.png)


カラム（列）のフォーマットは「Settings」から選べる。
日付部分は「Display Preference」から表示形式を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/b8bac4c2-6171-c21f-9231-2a65dd469736.png)

テーブルの関連付け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/c9213b6e-59bb-08e3-7cbf-027f33abf386.png)

## 2-4.BuilderからAppsを作成する


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/b963ff60-0f87-4872-1bb1-8051295d70ef.png)

今回はスクラッチから作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/62d467b3-1f28-693f-0075-54051368d56d.png)

アプリ名をリネームしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/cec07e6b-43f8-6091-54e0-d8fa5443bcce.png)


こんな画面になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/5e2b3598-d438-cdf1-955c-24f4b94651fd.png)

Webとスマホ画面の同期にチェックしたままだとバグってWebの画面に戻れなくなることがあるらしいので、Webとスマホ画面の同期は解除しておく。今回はWeb画面のアプリのみ作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/916753c0-df4f-e306-b81f-44a2d24d24cf.png)


こんなまっさら画面からアプリ画面を作っていく。
選択したオブジェクトの設定はApp Navigationウィンドウから実施する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/9fd0abf7-3ac3-e1c6-bacf-84734f23ac9c.png)

コンテキストボックスは普通にタイトルなどの文字入力ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/f5271c4b-0f02-dfc0-6701-5b8011b303f6.png)

左下の「+ Add objects」からオブジェクト部品を選んで画面上に追加できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/d4cb5acd-1245-98b4-12e8-ee726f975ba7.png)

このように、ボタンやリストなどのオブジェクトを追加できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/8d0862e8-84a6-96f6-0dae-bc54d039c757.png)


このあたりから作成するのに心が折れたため、テンプレートから「Simple To-do」を展開し、参考にさせていただきつつ進める。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/0433aa7b-efe8-c9fc-2a97-a5d67a298a40.png)

画面上部のツールバーから、文字の大きさや塗りつぶしの色などの書式変更ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/999aa06c-40fb-7ade-bb12-930e75f79408.png)

Blank Blockのプロパティ「DATA」タブで、画面に表示させる項目をTableから持ってくるように数式を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/a2ee696b-0b45-ce4a-41c0-6ea697ad1fc5.png)

「ACTIONS」タブで、ブロックをクリックしたときの操作を設定する。
ここではクリックしたときスクリーン「Edit」に遷移せよ、と設定している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/d214ebbf-7187-1aa0-00dc-894021b1f3a9.png)

ボタンのACTIONを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/ab22b901-84cc-d77c-ddb4-b3ff1e71f67e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/6700f2b3-6c0e-7857-46c5-7587378f4660.png)


DataCellにはTableに登録してある項目を表示させるよう数式を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/7d64cfa4-b24c-2559-7f06-e8b73adcf7f4.png)


スクリーン「Edit」を編集する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/35fe4299-c032-a253-0348-6207a2f31a9b.png)

ボタンをクリックしたときの挙動を編集する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/25c2c5c1-16c0-56cf-b5f3-0956d4cbcdde.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/c8612890-07d9-69f2-8aed-7053d4733976.png)

取得日の編集が可能になるよう「Editable」にチェックを入れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/6816115a-d2ed-3580-dee1-f39e0774b8ca.png)

削除ボタンのアクションを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/e00e914a-2a3c-3170-8fb3-6a0bd37735cc.png)

完了ボタンのアクションを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/3c5e1efb-666c-c1df-b7c7-0ff14c5e82c1.png)


スクリーン「My Certifications(AWS認定取得状況)」の「Add + 」ボタンのアクションを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/29c196a4-8877-3b16-0f36-c1fa833001f8.png)

スクリーン「Add Certification(新資格追加)」で、新資格を登録する欄を作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/3d439364-fc6d-3a73-801e-9247502860e0.png)

新資格を登録する欄が空欄のときは「追加」ボタンをグレーアウトにしておく。
ACTIONSには何も設定しない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/f838d74c-4d20-78c9-b167-580b36ae0ce8.png)

新資格を登録する欄に値が入力されたら「追加」ボタンがクリックできるように設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/8cd1f089-65c6-a65c-873e-b472920265b3.png)

ACTIONSにはTable更新の設定を追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/3d226817-def7-022d-3024-d5e559221356.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/a68e0c43-b70d-4b74-9626-ff76cca1ec3d.png)

ホーム画面を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/09df98e5-db13-7ea4-3b3f-e93b9526d233.png)

ここまでで簡易アプリ完成。


## 2-5.簡易アプリの稼働確認

アプリ画面を確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/81849c1a-60f8-cdf5-a0ba-c0fcbb6261fa.png)

DVAをクリックしてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/8930db9f-1c08-2e47-add7-046348603b26.png)

編集画面に遷移する。取得日を編集する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/37777507-3616-2499-41a0-27b52bdab9c4.png)

チェックを入れて完了ボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/3dddbd11-85ef-ca69-fd54-75655b02293e.png)

DVAが「取得済み」に移動しているのが確認できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/2a8b6b50-626c-bdf4-c653-22f0f534373e.png)

「Add +」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/324caa9d-acd4-6419-63b8-ebc67120bd2b.png)

新資格追加画面に遷移する。追加ボタンはグレーアウトしている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/a7cac375-c5dc-8609-871e-f61f9af00e63.png)

新資格名を入力すると、追加ボタンがクリックできるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/ebd2ff21-2886-6951-2754-412ceb72c157.png)

新資格の項目が追加されているのが確認できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/717f04fc-4202-53e0-ec32-aa9123b25e22.png)

新資格名をクリックすると、編集画面に遷移する。削除ボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/1e5d1e00-7dd4-b05b-5850-a286e3d066d4.png)

先ほど追加した新資格が削除されていることが確認できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1723719/5da6e93d-964c-e6b5-2ec3-e8ec7e483642.png)

# 3.利用料金

https://www.honeycode.aws/pricing

|Basic|PLUS|PRO|
|:--|:--|:--|
|$0/月|$19.99/月|$29.99/月|
|2,500行/workbook|10,000行/workbook|100,000行/workbook|
|20人のメンバー含む|20人のメンバー含む|20人のメンバー含む|
||追加メンバーごとに月額$9.99|追加メンバーごとに月額$19.99|
||シングルサインオン|シングルサインオン|

- 有償プランの場合はAWSアカウントとの統合が必要
- 月額料金は統合したAWSアカウントで支払う
- 1つのAWSアカウントに複数のTeamを登録し請求の集約が可能

# 4.その他

- API連携できる。APIへのアクセスはIAMで制御する。
- S3にCSVファイルをアップロード⇒Amazon AppFlow⇒Honeycode、とデータ連携できる。

# 5.感想
- BuilderからGUIでアプリを作成していくのが結構大変。
- GUI操作なので感覚的に操作できるが、細かい設定はどこからどう設定するのか迷うことも多々あった。
- サンプルがたくさんあるので、目的に近いサンプルからアプリを展開してmodifyしていくのがよさそう。ゼロから作成するのは大変。
- このアプリのドキュメントを残そうとすると大変な気もする。
- 動くと楽しい。プログラマーじゃなくてもなんとなく動く簡易アプリができてうれしい。
- ここまでBasicプラン（無料）で動いていてすごい。



# 参考

https://www.slideshare.net/AmazonWebServicesJapan/amazon-honeycode

https://blog.denet.co.jp/honeycodetodoservise2/

https://dev.classmethod.jp/articles/amazon-honeycode-template/

https://aws.amazon.com/jp/builders-flash/202008/honeycode-attendance-management/?awsf.filter-name=*all