エブリサイトでは、メールアドレスで認証するようなページを作成可能です。認証が成功すると指定したページのURLに遷移という動きになります。
今回はサインインのページを最初に表示してメールアドレスで認証した後に、管理報告へ遷移するように設定しています。そのページではメールアドレスに紐づいた情報をkintoneから取得して表示します。
この記事では、やること「ユーザーを認証する」を用いて実現する方法になるので、詳細についてはドキュメントも併せてご確認ください。
最初に
エブリサイトを構成する要素など、基本部分の説明はこちらのページにまとめてあります。ぜひご活用ください。
完成イメージ
今回はサインインと活動報告の2つのページを作成します。それぞれの完成イメージは以下の通りです。
サインイン
メールアドレスを入力してサインインを押すと以下のようにワンタイムパスワードを入力するポップアップが表示されます。
活動報告
一度に5つの報告が可能で、それぞれで添付ファイルを指定できます。入力文字や添付ファイルが空欄の場合は追加されたレコードの方でも空欄です。
メールアドレスと紐づく情報は赤枠の3箇所に表示されています。
画面デザイン
各ページのタイルは以下の通りです。
サインイン
メールアドレスの入力とボタンだけなので、ウィジェット「シンプル縦フォーム」一つだけを用います。その中にアイテムとして「文字列入力（１行）」や「ボタン(塗りつぶし)」がある構造です。
活動報告
画面の左にはメールアドレスに紐づくユーザー情報を表示し、右側の一番上にはタイトルとボタンを配置しています。タイトルは左寄せでボタンは右寄せなのでタイルを分けています。
その下に配置しているのが各種入力アイテムとなります。報告は文字の他に添付ファイルも可能なので、一番下にはウィジェット「シンプル縦フォーム」をいくつも並べてあります。その内の5つが報告箇所の入力用で、その右には「◼️個人防護具チェック」と「◼️本日の作業者」を用意しました。
ページ内処理
それぞれのページでポイントとなる処理を紹介します。
サインイン
ボタンを押した時に、やること「入力エラーをチェックする」でチェックをしておきます。その結果でエラーがなければ、やること「ユーザーを認証する」で認証するという流れです。なお、やること「ユーザーを認証する」が実行されると自動的にメール送信がなされ、ワンタイムパスワードの入力画面に変わります。
入力画面でメールで届いたワンタイムパスワードを入力すると、条件「ユーザーが認証された時」が実行されるので、やること「ページを遷移する」で活動報告のページに遷移します。
活動報告
活動報告では「表示時の処理」と「ボタンを押した時の処理」に分かれるので、順にポイントを解説します。
接続設定
メールアドレスで認証済みなので、認証可否「認証が必要／ユーザー指定あり」の場合はメールアドレスが等しいというクエリが自動追加されます。接続設定では以下の画像のように目的に応じて同じアプリに対して複数の接続設定を作成しています。
例えば、認証可否「協力会社作業員名簿→ユーザー指定無し」の場合は、会社が同一のレコードを取得したいのでユーザー指定なしの接続を作成しています。また、「危機予知活動」はルックアップに値をセットするため、APIトークンにはルックアップで取得するアプリも,区切りで追加しています。
このように認証可否については、用途に合わせて使い分けをお願いします。
なお、接続設定画面の操作・概要については次の記事を併せてご覧下さい。
また、「認証可否」の詳細については次の記事の「接続設定における4種類の接続可否とは」節を併せてご覧下さい。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
表示時の処理
2番アクションのやること「クエリで条件を指定して kintone からレコードを取得する」に設定している接続設定はユーザー指定ありなので、メールアドレスが等しいというクエリが自動的に付与されています。
その結果を3番アクションのやること「表示アイテムの内容をリッチテキストでセットする」で表示することで、メールアドレスに紐づいたユーザー情報を表示するという流れです。
また、ユーザーに紐づいた協力会社の値を元に、4番アクションで同じ会社の社員を取得し、5番アクションで担当現場を取得しています。同じ会社の社員は、やること「テーブルの表示内容をセットする」でシンプルテーブルに表示し、現場はやること「レコードのリストからレコードを取り出す」で繰り返し処理をすることでプルダウンに追加しています。こうすることでプルダウンが可変になります。
ボタンを押した時の処理
ボタンを押した場合は、添付ファイルをコピーした後にレコード追加をします。ポイントとしては、10番アクションのやること「入力アイテムの値をまとめてセットする」で添付ファイルに添付されているファイル数をカウントしておくことです。これにより、添付されているかを判定します。
添付が0件の場合は、レコード追加のマッピングは空配列を指定することになるので、12番アクションのやること「JSONを読み込む」で値をセットしておきます。
1件以上なら「kintoneにファイルをアップロードする」でアップロードしておきます。
21番の「kintone にレコードを追加する」のマッピングでは、
= if(action1_4 > 0, $11, $12)
のようにカウントした値によって、アップロードした結果か空配列かをセットします。
マッピングでは赤枠の3つが1箇所分で、これが5セット設定しているという感じです。
また、ルックアップの「現場選択」や防護具のチェックなどは以下のような記述になります。
ボタン処理の設定部分の画像は以下になります。
最後にやること「情報ダイアログを表示する」で追加処理が完了したことを通知し、わかるようにしておきました。
最後に
プルダウンを可変にしたり、空かどうかの判定など、分岐判定には工夫が必要です。一時的な値を保存する場合は「テキスト」ではなく「文字列入力（１行）」にする必要があります。表示だけではなく値が参照できるかで違いがありますのでご注意ください。