概要
Amazon Honeycodeで欲しいものリストを作ってみた。
備忘録として作り方をまとめる。
前提
- Amazon Honeycodeのアカウントを持っていること
※持ってない人はこちらから。無料で作れます。
完成イメージ
作り方
１．workbookを作る
複数のテーブルをまとめたworkbookを作る。
Excelでいうところのbookのようなもの。
workbookを作る
以下からログインする
https://builder.honeycode.aws/auth/login
表示された画面の右上のにある青いボタン（Create workbook）を押して、[Start from scratch]を選択する
しばらく待つと、こんな画面にリダイレクトする。
左のメニューから表のマークを選んで、workbookに名前を付ける。
ここでは、[Wish Management]とした。
これでworkbookができた。
２．欲しいものを保持するテーブルを作る
Excelっぽくテーブルを作っていく。
テーブルを作る
左のメニューから表のマークを選んで、表示された[Table1]を右クリック→[Rename]と選択してテーブルの名前を変更する。
ここでは、[WishItem]とした。
データを登録する
下記の図のようにデータを入力する。
これでテーブルができた。
３．欲しいものリストを画面に表示する
まずは、アプリケーションを作って、その中に欲しいものリストを表示する画面を作成していく。
アプリケーションを作成する
左側のメニューの真ん中のアイコンを選んで、プラスアイコンをクリックして、[Build your own]を選択してアプリケーションを作成する。
[App1]を右クリック→Renameと選択し、名前を[Wish list]に変更する。
欲しいものリストを表示する画面を作る
作成した[Wish list]をクリックして、画面を切りかえる。
左側のメニューの上段にある[Webタブ]を選択する。
画面名を[Wishes]にし、画面上部のContentBoxに[Wishes]と入力する。
左下の青いボタン（Add objects）を選択し、[Content Box]を選択し、[Content Box]を画面に配置し、下記のように編集する。
- 表示文言：欲しいものリスト
- 文字の太さ：Bold
- 文字サイズ：16px
左下の青いボタン（Add objects）から[Column list]を選択し、画面に配置する。ポップアップが出てきたら、そのまま[Create]を押す。
ここまで出来たら、画面右上の[view app]を押して表示を確認する。
こんな感じの画面が表示されればOK。
見た目を変える
本質的ではないけど、好みで見た目を整える。
Searchの入力フォームを消す
[Column list]のプロパティで[Search]のチェックボックスを外す。
リストのヘッダを消す
下記の画像で選択しているBlockを削除する。
金額項目を見やすくする
金額項目の[DataCell]を選択し、プロパティでDISPLAYタブを開き、下記のように設定する。
良くなったかはわからないが、見た目が変わる。
- Format：Currency
- Decimal Piaces：0
さらに金額項目の[DataCell]の一つ外側にある[ContentBox]を右揃えにする。
ここまで来たら、もう一度[view app]で表示を確認する。
これで欲しいものリストを表示する画面ができた。
４．優先度に応じてバッジの色を変える
優先度highを赤色で、midをオレンジで、lowを青色で表示したい。
赤/オレンジ/青のバッジを用意する
優先度を表示している[ContentBox]を選んで、下記のようにスタイルを変更する。
- 背景色：赤
- 文字色：白
- 文字配置：中央寄せ
さらに上記で編集した[ContentBox]を２回コピーする。
コピーで作成された２つの[ContentBox]について、それぞれ背景色をオレンジと青に変更する。
優先度の値に応じて、表示するバッチを変える
赤色の[ContentBox]を選択して、プロパティを開き、DisplayタグのSet visibilityのところに下記のように入力する。
=[priority]="high"
同様にオレンジの[ContentBox]には、=[priority]="mid"と入力し、青の[ContentBox]には=[priority]="low"と入力する。
ここまで来たら、[view app]で表示を確認する。
５．ステータスによって表示を変える
完了済みのアイテムは、✔マークが表示されるようにしたい。
完了済みと未完了のマークを用意する
欲しいものの名前を表示している[ContentBox]の幅を少し短くして、左側に隙間を作る。
作った隙間にContent Boxを追加する。
追加したContentBoxに「✔」のマークを入れる。このマークは、ひらがなで「ちぇっく」と入力して変換したら出てくると思う。入力したら中央ぞろえにして、太文字にして、緑色にする。
上記で作ったContentBoxをコピーして、もう一つContentBoxを作る。
中身を「✔」から「〇」に変更する。このマークは、ひらがなで「まる」と入力して変換したら出てくると思う。
入力したら文字の色を、グレーに変更する。
ステータスの値に応じて、表示するマークを変える
緑の✔のプロパティを開き、DisplayのSet visibilityに=[status]="done"と入力する。
同様にグレーの〇のプロパティを開き、DisplayのSet visibilityに=[status]<>"done"と入力する。
これで、ステータスがdoneの時に✔が表示されて、ステータスがdoneじゃないときに〇が表示されるようになる。
これで、一番右側のステータスを表示しているContentBoxがいらなくなるので削除する。
ここまできたらview appで表示を確認する。
ステータスに応じてチェックの表示が変わっていることがわかる。
６．欲しいもの追加機能を作る
欲しいものリスト追加画面を用意し、欲しいものリストを追加できるようにする。
欲しいものリスト追加画面を作る
左側のScreensの「＋」ボタンを押して画面を追加し、画面名を[Add]に変更する。
画面の一番上のContentBoxに[Add]と入力し、さらにその下にContentBoxを追加して[欲しいものを追加する]と入力する。
[欲しいものを追加する]の文字サイズを16pxで太文字にする。
入力フォームを作る
左下の青いボタン（Add Object）からSegmentを選び、[欲しいものを追加する]の下に追加する。
Segmentの中にあるContentBoxの幅を狭くし、空いた領域にDataCellを追加する。
DataCellを追加すると自動的にContentBoxも追加されるため、Segmentの中にはContentBoxが左右に並んでいる状態になると思う。
それぞれのContentBoxを3回コピーして、下記のようにする。
左側のContentBoxに[欲しいもの][金額][優先度]と入力する。
[欲しいもの]の横にあるDataCellのプロパティを開き、名前を[name]に変更する。
[金額]の横にあるDataCellのプロパティを開き、名前を[price]に、Formatを[Currency]に、Decimalを[0]に設定する。
[優先度]の横にあるDataCellのプロパティを開き、名前を[priority]に変更する。
追加ボタンを配置する
BlockにさらにSegmentを追加する。
Segmentの中にボタンを追加する。
表示文言を[追加]に変更する。横幅と背景色を好みで変える。
追加ボタン押下時の動作を定義する
追加ボタンのプロパティを開き、Actionsタブ→Edit automationを選択する。
[Add Actions]→[Add row]を選択する。
Add row toのプルダウンで[WishItem]を選択する。
[Take data from]に=$[name]を、[and write to]に=[name]と入力する。
Add anotherをクリックして次のフォームを表示し、同様に下記を入力する。
- [Take data from]：
=$[price] - [and write to] ：
=[price]
さらにAdd anotherをクリックして次のフォームを表示し、同様に下記を入力する。
- [Take data from]：
=$[priority] - [and write to] ：
=[priority]
[+ Add actions]→Navigateを選択する。
[Navigate to new screen]を選択して、プルダウンで[Wishes]を選択する。
欲しいものリスト画面に欲しいもの追加画面へのリンクを配置する
Wishes画面に戻って、画面一番下にSegmentを追加する。
Segmentの中にボタンを追加して、表示文言を[追加]に変更する。適当に幅や色を調整する。
ボタンのプロパティを開き、Actionsタブ→[Navigate to new screen]を選択し、プルダウンで[Add]を選択する。
７．優先度をプルダウンで選べるようにする
欲しいもの追加画面で優先度の入力がフリーテキストになっているので、プルダウンから選べるようにする。
プルダウンの内容を保持するテーブルを作る
左のメニューからテーブルのマークを選び、Tablesの横の＋ボタンを選択する。プルダウンが出てくるので、[add a blank table]を選択し、テーブルを追加する。テーブルの名前は、[M_Priority]にする。
作ったテーブルに下記のようにデータを登録する。
優先度のフォームをプルダウンにする
Add画面に戻り、priorityのDataCellのプロパティを下記の通り変更する。
- Format：Rowlink
- Source Type:Table
- Source table:M_Priority
view appで追加画面を確認する。
優先度がドロップダウンリストで入力できるようになっているはず。
８．欲しいもの編集機能を作る
欲しいもの編集画面を用意し、既存の欲しいものを編集できるようにする。
遷移元の画面から編集対象レコードの情報を受け取り、編集画面で編集する流れとなる。
編集画面を作る
Addページをコピーして、Editページを作る。
下記の図で星がついている箇所の文言を、図の通り変更する。
遷移元画面から編集対象レコードを受け取るための変数を定義する
画面の最下部にDataCellを追加し、DataCellのプロパティを下記の通り編集する。
- 名前：WishItem
- DataタブのType：Variable
さらに、DataCellのプロパティのDisplayタブのVisibilityに=falseと入力する。
変数の内容を編集フォームに渡す
フォームをかこっているBlockのプロパティを開き、DataタブのSetSourceに=$[WishItem]と入力する。
編集ボタンを作る
ボタンを修正する。
ボタンの文言を[更新]に変更する。
ボタンのプロパティを開いて、Actionsタブ→Edit automationを選択して、ボンタ押下時の動作定義を開く。
中断に[Add row to WishItem..(中略)]と記載されたカードがあると思うので、下記図のようにメニューを開いて、Deleteを選択する。
Add Actionsボタン→Overwriteを選択する。
表示された入力フォームに下記のように登録する。
+Add anotherを選択して、同様に下記のように入力する。
さらに+Add anotherを選択して、同様に下記を入力する。
欲しいものリスト画面に編集画面へのリンクを用意する
Wishes画面を開き、Listの中に編集ボタンを配置する。
追加したら、適当に色や文言を変更する。
※図ではDataCellを追加しているが、ボタンのほうが良い。
ボタンを押したときに、編集画面に対象レコードを渡すように設定する
編集ボタンのプロパティでActionsタブを下記のように編集する。
- On Click：Navigation to new screenを選択
- 対象画面のプルダウン：Editを選択
- Set VaiablesのTake Data From：
=THISROW()を入力 - Set Valiablesのadd write to:
=$[WishItem]を入力
９．欲しいもの削除機能を作る
既存のレコードを削除する機能を作る。
削除ボタンを配置する
Wishes画面のListの中にボタンを追加して、文言を[削除]にする。
色を適当に変える。
ボタン押下時のアクションを定義する
削除ボタンのプロパティを開き、ACTIONSタブ→Create an auttomationを選択する。
さらにAdd Actionsを選択し、Delete a rowを選択する。
List内の各要素の幅や位置を微修正し、下記のように整える。
１０．完了済みのアイテムの表示非表示を切り替えるトグルを作る
欲しいものリストに完了済みのアイテムを表示するか否かを切り替えるトグルを作る。
トグルの状態を保持する変数を宣言する
画面の一番下にDataCellを追加し、名前を[isDisplayDoneItem]にする。
画面に表示しないため、Visibitlityを=falseにする。
とるグルを切り替えるためのリンクを配置する
[欲しいものリスト]の文言の下に、Content Boxを２つ追加し、それぞれ下記の文言を設定する。フォントサイズは12pxとする。
- ▼完了済みのアイテムを隠す
- ▼完了済みのアイテムを表示する。
[▼完了済みのアイテムを隠す]のVisibilityを=$[isDisplayDoneItem]=trueにする。
[▼完了済みのアイテムを表示する]のVisibilityを=$[isDisplayDoneItem]=falseにする。
※図は、[▼完了済みのアイテムを隠す]の設定イメージ
[▼完了済みのアイテムを隠す]のプロパティでACTIONSタブを開き、下記のように設定。
- On click:Update current screenを選択
- valiablesのtake data from:
=falseを設定 - valiablesのand write to:
=$[isDisplayDoneItem]を設定
[▼完了済みのアイテムを表示する]のプロパティでACTIONSタブを開き、下記のように設定。
- On click:Update current screenを選択
- valiablesのtake data from:
=trueを設定 - valiablesのand write to:
=$[isDisplayDoneItem]を設定
トグルの状態によって、Listにバインドするデータの内容を変える
Listのプロパティを開き、DataタブのSet Sourceに下記の内容を入力する。
=if($[isDisplayDoneItem]=true,WishItem,FILTER(WishItem,"WishItem[status]<>""done"""))
１１・完了済みのステータスをワンクリックで切替らっれるようにする
✔のContent Boxのプロパティを開き、ACTIONSタブのCreate an automationを選択する。
表示された画面で、Add actionsをクリックし、Overwriteを選択する。
表示された画面の入力フォームで、下記のように入力する。
- Take data from:
="" - and write to:`=[status]
上記と同様に〇のContent Boxについても、プロパティ→ACTIONSタブ→Create an automation→Add Actions→Overwriteと進み、入力フォームで下記のように入力する。
- Take data from:
="done" - and write to:`=[status]
おわり