多様な働き方を支える出社管理アプリを Amazon Honeycode で作ってみた

スプレッドシートと同様に行と列を持つデータを格納します。データのフィルタリング、データの書式設定、他の Table のデータ参照などが可能です。 

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

アプリケーションの外観やレイアウトのカスタマイズ、ボタンクリック時の処理や画面遷移などを定義します。 

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

スケジュールされた日時やデータが追加・変更されたタイミングで、通知の送信やデータ操作を実行できます。 

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

まずはサンプルデータを CSV 形式のファイルとして準備します。

今回は出社申請業務に必要な画像のようなデータを用意しました。データ件数は少量でも構いませんが、選択式で入力を行うマスタデータ項目を網羅しておくと、後のデータモデル作成が楽になります。

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

次は準備したサンプルデータを Amazon Honeycode にインポートし、データモデルの基礎を作ります。

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

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

まだアカウントを作られていない方は、この機会にログイン画面の Create one をクリックしてアカウントを作ってみてください。

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

CSV ファイルのインポートが完了すると、Table が作成されます。Done ボタンをクリックして、データモデルを作って行きましょう !

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

データモデル作成の手始めに Workbook と Table 名を決めましょう。今回は Workbook を attendance management、Table 名を attendance としました。いずれも画面上部のスリードットをクリックして変更します。 

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

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

Formats を Contact と指定した列において、インポートしたサンプルデータとユーザーアカウントの関連付けが現状では自動的に行われません。
データを削除せずアプリケーションで利用する場合は、各セルをクリックしてユーザーを再度選択してください。

残った destination 列と result 列は選択式の入力とするため、マスターテーブルを作成します。

画面上部の Wizards をクリックし、表示されたペインで Create Picklists をクリックします。

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

Create picklists for: で Table を選択、For unique values in: で列を選択し、Apply ボタンをクリックします。

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

この操作を desitination 列と result 列に対して実施した上で、Go ボタンをクリックします。処理が完了すると、destination 列と result 列のデータを元にマスターテーブルが自動的に作成され、それぞれの列が選択式のデータ項目に変化します。

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

サンプルデータでマスタデータが網羅されていない場合は、この段階でマスターテーブルに対してデータを追加します。データの追加はスプレッドシート左下の「＋」をクリックします。

データモデルの作成は以上です。次はアプリケーションを作ります !

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

アプリケーションを作成するウィザードを起動するため、画面上部の Build app アイコンをクリックし、Use app wizard を選択します。 

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

Table の選択に続いては一覧画面のデザインを行います。一覧画面には多くのデータ項目を表示したくなるのが人情ですが、今回はモバイル端末からの利用を想定し、画像に示す最低限のデータ項目のみを表示します。データ項目の削除はXボタンをクリック、データ項目の追加は + Add column をクリック、データ項目の順番を入れ替える場合はデータ項目左側のドットをドラッグします。

一覧画面に表示するデータ項目が決定したら画面右下の Next ボタンをクリックします。

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

続いては単票画面のデザインです。

単票画面では一覧画面で表示されないデータ項目もすべて表示したいので、データ項目の削除は行いません。初期状態ではすべてのデータ項目が編集不可能になっていますが、マネージャーによる承認行為を行うため、result を変更可能にします。データ項目を変更可能にするためには鉛筆アイコンをクリックします。

画面のデザインが完了したら Next ボタンをクリックしてウィザードを先に進めます。

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

最後はデータエントリーを行うフォーム画面のデザインです。

申請データを登録する際にはほとんどのデータ項目を入力する必要がありますが、承認結果データである result を申請者が入力する必要はありません。入力をさせないデータ項目の削除は X ボタンをクリックします（画面キャプチャは result を削除する前のものです）。

画面のデザインが完了したら Apply ボタンをクリックします。

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

続いては Builder を使ってアプリケーションを改修します。

Builder の起動は画面左上の Builder アイコンをクリック、今回作成したアプリケーションである Attendance をクリックします。

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

Builder では Screen と呼ばれるアプリケーションの画面に対して、データを表示する部品や処理の起点となるボタンなど、各種 Object を配置してアプリケーションを組み立てます。 

最初の手直しは単票画面に含まれる不要な機能を除去します。
ウィザードで作成したアプリケーションは、単票から異なるデータの単票へ表示を切り替える Jump to item 機能が含まれていますが、今回は利用しないため以下の手順に沿って画面上で非表示とします。

1. 画面左側のペイン Screens で単票画面である attendance detail を選択する
2. 画面中央のペインで Jump to item 機能を含む Block を選択する（*）
3. 画面右側のペイン BLOCK PROPERTIES で DISPLAY タブを選択する（**）
4. Set visibility に =FALSE と入力する

_{* Block には Segment や Content Boxなどの Object が入れ子になっています。クリックする箇所によっては Block 以外の　Object が選択される場合がありますので、Block が選択されている状態を確認してください。}

_{** 画面右側のペイン BLOCK PROPERTIES が表示されない場合、画面上部の Properties をクリックしてください。}

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

続いての手直しはデータエントリーを行うフォーム画面です。
利用者が申請を行う際の入力負荷が少しでも軽減されるよう、入力項目を変更します。1つ目は申請日を記録する application date の改善です。申請もれによる事後申請などのイレギュラーケースを除くと、申請日は操作の日時から判断できます。そのため、以下の手順に沿って申請日の初期値に操作日時を設定し、利用者に入力をさせない仕様とします。

1. 画面左側のペイン Screens で単票画面である attendance form を選択する
2. 画面中央のペインで application date のデータ値を入力する Data Cell を選択する
3. 画面右側のペイン DATA CELL PROPERTIES で Editable チェックを Off にする
4. 画面右側のペインで DATA タブ、Set type で Variable を選択する
5. Set initial value に =NOW()+9/24 と入力する（***）

_{*** Amazon Honeycode では現在時刻を示す NOW() や今日を示す TODAY() などの関数と数式を利用可能です。NOW() 関数、TODAY() 関数のいずれも UTC を基準としているため、JST への変換を行っています。}

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

2 つ目の改善は申請者を記録する applicant です。
代理申請を除くと申請者は操作を行ったユーザーと判断できますので、以下の手順に沿って申請者の初期値にログインユーザーを設定するとともに、利用者に入力をさせない仕様とします。

1. 画面中央のペインで applicant のデータ値を入力する Data Cell を選択する
2. 画面右側のペイン DATA CELL PROPERTIES で Editable チェックを Off にする
3. 画面右側のペインで DATA タブ、Set type で Variable を選択する
4. Set initial value に =$[SYS_USER] と入力する

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

まずはマネージャーへの承認依頼メール送信機能を作るべく、Automations を起動します。 Automations は画面左上の Automations アイコンをクリック、続いて ＋ をクリックして起動します。 

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

Automations の作成画面が表示されますので、まずは名前をつけたいと思います。

画面上部のスリードットをクリック、もしくは画面左側の Automations 一覧で右クリックをして Rename を選択します。ここでは approval request と命名しました。

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

Automations の作成では、最初に処理が発生するタイミングを指定します。

申請者による出社申請を起点とするため、Row Added or Deleted を選択、In table で申請データを格納する attendance を選択、 Starts when で a row is added to を選択します。

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

処理の発生タイミングを定義したあとは処理内容を定義します。

Add actions をクリックし、Notify を選択します。 

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

ここでは送信先、件名、メッセージを入力しますが、=manager との形式でデータ項目名を指定可能です。データ項目名を指定した箇所は処理対象のデータ値に置換された上でメールが送信されますので、宛先や文面を動的に構成できます。 

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

承認依頼メールをこのように定義をしました。

下線が引かれている箇所は =manager との形式でデータ項目名を指定しています。自動的にデータ値へ置き換えてくれるあたりに優しさを感じますね。表記のデータ値はあくまで一例であり、送信されるメールの文面は Automations で処理されるデータの値を用いて構成されますので、ご安心ください。

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

以上で承認依頼メール送信機能の定義が完了しました。

しかしここで重要なポイントがあります。Automations で定義を行ったあとに機能を利用するためには、画面右上の Publish ボタンをクリックする必要があります。Publish されていない、つまりは変更が加えられている状態では画面右上に Draft と表示されますので、注目していただけるとハマりポイントを回避できます。

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

Notify Action で画面の警告が表示される場合があります。この状態は To に入力したデータ項目の値が Table で入力されておらず、データ値への置き換えができない状態を示しています。データエントリーの際は入力した manager 宛に通知が送信されますので、警告を気にせず進めていただいて構いません。 

続いては申請者への結果通知メール送信機能を作ります。
画面左側の ＋ をクリックして画面を起動し、名前をつけます。 

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

処理が発生するタイミングは承認者による承認結果登録を起点とするため、Column Changes を選択、In table で申請データを格納する attendance を選択、 Starts when this column changes で承認結果データである =[result] を選択、Run automation if this formula is TRUE では承認結果の入力を示す式 =[result]<>"" を入力します。 

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

処理の発生タイミングを定義したあとは、処理内容を定義するため Add actions をクリックし、Notify を選択します。 

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

結果通知メールは画像の通り定義をしました。
ここでも忘れずに、画面右上の Publish をクリックします。 

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

作成したアプリケーションの公開は関係者に Share をします。

Share を行うためには、画面左上の Amazon Honeycode アイコンをクリックし、Workbook とアプリケーションの一覧を表示します。公開したいアプリケーション右端のスリードットの左側をカーソルでポイントすると、Share ボタンが表示されますのでクリックします。

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

公開先のユーザーアカウントを選択する画面が表示されますので、ユーザー名やメールアドレスで検索し、リストに追加した上で Update ボタンをクリックします。 

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

リストに追加されたユーザーのメールアドレスにこのようなメールが届きます。

ブラウザやスマートフォンのアプリから公開されたアプリケーションを利用してください。

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

関係者のユーザーアカウントを Amazon Honeycode で利用するためには、Team member として招待をします。

招待の手順は画面左下の Teams アイコンをクリック、チーム名をクリックし、画面右上の Add team member をクリックします。

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

表示された画面でメンバーのメールアドレスを入力、役割を Admin と Member のいずれかから選択し、Invite ボタンをクリックします。役割の違いについては以下のとおりです。複数のユーザーに対して Admin の役割を付与できます。

• Admin : Workbook、アプリケーション、Automations の作成。Plan とチームメンバーの管理
• Member : Workbook、アプリケーション、Automations の作成

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

招待を受けたユーザーにはこのようなメールが送信されます。Go to Honeycode ボタンをクリックして Amazon Honeycode へログインします。 

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

チームへの参加意思を確認するメッセージが表示されますので、Join ボタンをクリックします。 

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

Amazon Honeycode アプリを起動して最初の操作はログインです。
アカウントをお持ちでない方はこの際に是非お作りください。

アカウント作成時に入力したメールアドレスとパスワードでログインをすると、自分に公開されているアプリケーションの一覧が表示されます。今回作成したアプリケーションの Attendance をタップして起動します。

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

アプリケーションが起動すると、ホーム画面の申請一覧が表示されます。データモデルを作成する際にインポートしたサンプルデータを削除していない場合はリストに表示されます。

画面右上の + Add をタップして出社申請を行います。

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

出社申請のエントリー画面が表示されましたので、入力可能な項目を埋めていきます。 

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

データ入力が完了したら Done ボタンをクリックし、入力を確定させます。 

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

申請一覧画面に遷移し、直前の操作で作成した申請が一覧に表示されます。 

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

申請データの登録に合わせて Automations が実行され、マネージャーにはこのようなメールが送信されました。 

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

続いては承認依頼通知を受け取ったマネージャーが出社申請を承認します。Amazon Honeycode は Webブラウザからも利用可能なため、マネージャーはブラウザから承認を行ってみたいと思います。

Chrome、Edge、Firefox、Safari などの Web ブラウザで Amazon Honeycode にアクセスし、今回作成したアプリケーションの Attendance をクリックして起動します。

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

アプリケーションが起動すると、ホーム画面の申請一覧が表示されます。承認結果が空白のデータをクリックし、出社申請の承認を行います。 

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

出社申請の詳細画面が表示されましたので、内容を確認して承認結果を選択します。 

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

選択すると自動的にデータが保存され、申請者にはこのようなメールが送信されました。 

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