AmazonHoneycodeノーコードで出退勤アプリを作成してみた|システム・アプリ開発

こんにちは、入社二年目のあいあいです。
前回はAmazon Honeycodeのテンプレートを使ってToDoリストを作成しましたが、
今回はテンプレートを使用せず出退勤アプリを作成していきます。

AmazonHoneycodeのおさらい

Amazon Honeycodeには4つの特徴があります。
（前回のブログの概要と同じです。）

すぐに使える一般的なアプリケーションのテンプレートがある
データベースの構築はしないで、スプレッドシートがデータベースのように機能する
コードを記述しなくてもモバイルおよびウェブアプリケーションを構築できる
チームと共有できる

作成した出退勤アプリについて

出勤・退勤ボタンを押下し、押下した時間を登録するだけという非常に簡単なアプリです。
画面は以下の4つを作成しました。

出退勤一覧画面
新規登録画面
詳細画面
出退勤ボタン画面

1.2.3の画面は、Wizardsを使って簡単に画面を作成します。

出退勤アプリを作ってみる

開発の流れは以下の通りです。

サンプルデータ(CSVファイル)を準備する
Amazon Honeycodeへサンプルデータをインポートする
アプリケーションを作る（Wizards）
アプリケーションを作る（Builder）
アプリケーションを動かしてみる

では、さっそく作成していきます。

1.サンプルデータ(CSVファイル)を準備する

Amazon HoneycodeへインポートするためのCSV形式のファイルを準備します。
以下のようなデータを準備しました。

出勤時刻	退勤時刻	休憩時刻	稼働時間	出社日	備考	ユーザー
9:00	17:00	1:00	7:00	2020/10/1		あいあい
9:30	17:30	1:00	7:30	2020/10/2	電車遅延	あいあい

※注意
CSVファイルはUTF-8で保存してください。
私は最初、SJISで保存したらファイルがインポートできませんでした…。

2. Amazon Honeycodeへサンプルデータをインポートする

Amazon Honeycodeにログインし、画面右上の「Create workbook」ボタンを押下し、「Import CSV to table」を選択します。

CSVファイルを選択、「Workbook name」を変更し、「Create」ボタンを押下します。

CSVファイルのインポートに成功すると、Tableが表示されます。

Table名の変更と、データの書式を定義します。
書式の設定は画面上部の「Formats」を押下し、
「FORMAT」を指定し「Apply」ボタンを押下します。

稼働時間は、「退勤時刻 - 出勤時刻 - 休憩時間」で計算をするので、「FORMULA」に数式を入れておきます。

※注意
ユーザーは、インポートしたサンプルデータとユーザーアカウントの関連付けが自動的に行われません。
「FORMAT」で「Contact」と選択し、各セルをクリックしてユーザーを再度選択してください。

3.アプリケーションを作る（Wizards）

Wizardsを使うと素早くアプリケーションを作成することができます。

画面上部の「Build app」アイコンをクリックし、「Use app wizard」を選択します。

①一覧画面のデザインを行います。
データ項目の削除は「×」ボタン、追加は「+ Add colum」、入れ替えはドットをドラックして変更します。
一覧画面のデザインが完了したら、「Next」ボタンを押下します。

②詳細画面のデザインを行います。
鉛筆マークで、編集するかしないかを選択できます。
詳細画面のデザインが完了したら、「Next」ボタンを押下します。

③新規登録画面のデザインを行います。
データ項目の削除は「×」ボタン、入れ替えはドットをドラックして変更します。
詳細画面のデザインが完了したら、「Apply」ボタンを押下し、デザイン終了です。

4画面中3画面の作成が終わりました。
詳細画面に戻るボタンがないなど、少し修正は必要ですが、ここでは完成とします。
次は出退勤ボタン画面を追加していきます。

4.アプリケーションを作る（Builder）

Builderを使って、出勤・退勤ボタンを追加します。
出退勤ボタン画面では、「ユーザー」を選択し、
「出勤」ボタンを押下したら、”出社日”・”出勤時刻”・”ユーザー”が登録できるように、
「退勤」ボタンを押下したら”退勤時刻”・”休憩時間”・”稼働時間”を登録できるようにします。

Screensから新しい画面を追加し、その画面にボタンを二つ追加、ユーザー選択するための「Data Cell」を準備しました。
スクリーンの名前を「attendance button」、ボタンをそれぞれ「出勤」「退勤」としました。

まず最初に、「ユーザー」を選択する「Data Cell」の設定をします。
「Editable」にチェックを入れて、「DISPLAY」の「Format selection as:」で「Contact」、「Display Preference」で「Adam Brown」を選択します。

次に「出勤」ボタンを選択し、「ACTIONS」から「Create an automation」をクリックします。
「+ Add actions」をクリックし「Update or insert row」を選択します。
テーブルを選択し、「Match row from～～」の箇所に、データを更新または挿入する条件を入れます。

If this data:	Is in attendance column:
=TODAY()	=[出社日]
=$[DataCell1]	=[ユーザー]

「Update matched rows in,～～」の箇所にデータを登録する条件（以下参照）を入力します。

Take data from:	and write to:
=$[DataCell1]	=[ユーザー]
=NOW()+9/24	=[出勤時刻]
=TODAY()	=[出社日]

※Honeycodeでは、関数と数式を利用することができます。
NOW()関数はUTCを基準にしているため、JSTへの変更が必要になります。

「退勤」ボタンも「出勤」ボタンと同様に、「Match row from～～」までは同じです。
データを登録する条件（以下参照）を入力します。

Take data from	and write to
=$[DataCell1]	=[ユーザー]
=NOW()+9/24	=[退勤時刻]
=TODAY()	=[出社日]
=attendance[退勤時刻]-attendance[出勤時刻]-attendance[休憩時間]	=[稼働時間]
0:00	=[休憩時間]