エブリサイトを使用すると、イベントの出展者向けの出展申し込みページの作成から、出展者が情報を確認・編集可能なマイページを作成することができます。
この記事では、下記についてご紹介します。
マイページでの出展者情報の閲覧・編集
マイページを含む会員向けサイトの作成方法については、次の記事も併せてご覧ください。
完成イメージ
ヘッダー、フッター部分についてはベースページを利用しています。
ベースページの作成手順についてはこちらのページもご確認ください。
ベースページを使用した、マイページの全体のイメージは下記の通りです。
画面遷移
ログインページでメールアドレスとワンタイムパスワードを入力し、正しいワンタイムパスワードが入力されたらマイページに遷移します。
当記事ではログイン部分については割愛し、ログイン後にマイページに遷移した後の処理をご紹介します。
画面デザイン
マイページには、下記の3つの情報を表示します。
ログインした出展社が契約しているプランの情報
ログインした出展社の基本情報
ログインした出展社に対する対応ログ
ベースページのタイルを表示した、全体のイメージは下記のとおりです。
以下、主なタイルの設定をご紹介します。
タイルを作っていく方法は、「ページ画面全体と画面デザインタブについて」をご覧ください。
また、各ウィジェットの設定方法については、「ウィジェット編集画面全体とウィジェットの設定および編集について」やドキュメントをご覧ください。
ログインした出展社が契約しているプランの情報を表示するタイル
3：シンプルパネル
アイテム「現在のお申込みいただいているプラン」は、後述のページ内処理で kintone のレコードから取得したフィールドの値をセットするため、リッチテキストには何も設定していません。
実行時は下記のように表示します。「スタンダードプラン」の部分が出展者によって異なります。
5：シンプルパネル
こちらも上記と同様に、ページ内処理でセットするためこの時点では何も設定していません。
実行時は下記のようにプランの詳細を表示します。
ログインした出展社情報を表示・更新するタイル
9：シンプル縦フォーム
出展者基本情報を確認・更新するためのフォームです。
ページを表示した時に、ページ内処理で kintone から取得したフィールドの値をアイテムにセットします。
タイトルと説明は、フォームの「タイトル」と「説明文」で設定しています。
タイトル：
説明文：
入力用のアイテムについては、下記のように設定しました。
※担当者メールアドレスはマイページでの編集を行わないので、リッチテキストで表示します
ログインした出展社に対する対応ログを表示するタイル
14：シンプルテーブル
kintone から取得したレコードを複数行テーブルとして表示します。
タイトルはこちらもリッチテキストで設定しました。
列になるアイテムについては、下記のように設定しました。
シンプルテーブルには「表示するレコード」の設定がありますが、これはページ生成時処理で取得したレコードを指定するもので、
今回はページを表示したユーザーによって表示される情報を変えたいので、ページ内処理で kintone から取得してセットします。
その場合は、「表示するレコード」には何も指定しません。
ページ内処理
マイページは、前述のとおりページを表示したユーザー（ログインしたユーザー）によって表示する情報を変えたいので、kintone からのレコードの取得やアイテムへの値のセットはページ内処理で行います。
また、今回紹介するのは下記の処理です。すべてのボタンの処理を紹介しているわけではないためご了承ください。
マイページを表示した時の処理
ログインしたユーザーの契約プランを表示する
ログインしたユーザーの登録情報を入力用のアイテムに表示する
ログインしたユーザーの対応履歴をテーブルに表示する
ボタンを押した時の処理
「公開する」ボタンを押した時の処理
※それ以外のボタンを押した処理については割愛します
関連する kintone アプリ
出展社管理アプリ
出展社情報を管理するアプリです。
出展社の会社名などの情報や、担当者の情報を管理します。
このアプリに登録されている「担当者メールアドレス」フィールドの値を使用してマイページにログインします。
契約プランなどの情報は、今回割愛している「出展のお申し込み」ページで入力される想定です。
プランアプリ
プランを管理するマスタアプリです。
下記のような情報が登録されています。
出展対応アプリ
出展対応の履歴を管理するアプリです。
「メールアドレス」フィールドに入力された値で、出展者管理アプリの出展者と紐づけされます。
下記のような情報が登録されています。
接続設定
今回の処理では、3つの接続設定を使用します。
それぞれ、
プラン取得
プランアプリからレコードを取得する際に使用します
認証後のページで使用するため「認証が必要」と設定していますが、プランの詳細はユーザーごとの情報ではなく共通であるため「ユーザー指定なし」と指定しています
出展者情報取得・更新
出展者情報アプリのレコードを取得・更新する際に使用します
認証後のページで使用するため「認証が必要」、またログインユーザーの情報だけを取得したいので「ユーザー指定あり」と指定しています
出展者対応取得
出展対応アプリのレコードを取得・更新する際に使用します
認証後のページで使用するため「認証が必要」、またログインユーザーの情報だけを取得したいので「ユーザー指定あり」と指定しています
なお、接続設定画面の操作・概要については次の記事を併せてご覧下さい。
また、「認証可否」の詳細については次の記事の「接続設定における4種類の接続可否とは」節を併せてご覧下さい。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
「ユーザー指定あり」の接続設定では、いずれもメールアドレスがログイン時に入力したメールアドレスと一致する、というクエリが実行されるように設定しました。
マイページを表示した時の処理
ログインしたユーザーの情報を表示する
まずはログイン済み（認証済み）のユーザーかどうかを確認します。
ログイン表示からログインしているユーザーの情報を取得し、画面にセットするまで操作ができないように、やること「処理中表示を行う」と条件「ページを表示した時」を組み合わせて、まずは処理中表示を行います。
アクション2では、やること「ページを遷移する」と条件「ユーザーが未認証ならば」を使い、ユーザーが未認証（ログインしていない）のであれば、ログインページに遷移するように設定しています。
なお、条件「ユーザーが未認証ならば」は条件「ユーザーが認証済みならば」を反転させると設定する事ができます。
アクション3は認証済みの場合のアクションで、条件「ユーザーが認証済みならば」認証済みであれば、ログインしているユーザーがマイページにアクセスする権限を持っているかを確認します。
ここでの確認は、kintone の「出展者管理アプリ」にメールアドレスが一致するレコードがあれば『このユーザーはマイページにアクセスする権限がある』とみなしてログインユーザーの情報をページに表示します。
設定する上でのポイントとしては、アクション3では「検索条件」に指定した条件に加えて、自動的に接続設定で指定したメールアドレスを条件にするクエリが追加されるため、
検索条件がそれだけで問題ない（メールアドレスの条件だけを指定したい）ことから、
レコード番号 > 0
という『絶対に成立する条件』を指定しています（レコード番号は必ず1以上なので）。
アクション3でレコードを取得した結果、レコードが1件も取得されなかった場合は『このメールアドレスのユーザーはマイページにアクセスする権限がない』とみなし、やること「エラーダイアログを表示する」を使い、ダイアログを表示してから、出展のお申込みページに遷移させます。
ここからは、マイページにアクセスする権限があるユーザー向けの処理です。
アクション3で取得した出展者管理アプリの情報を、画面上のアイテムにセットして表示します。
やること「入力アイテムの値をまとめてセットする」は、会社名などの入力用のアイテムに値をセットします。
アクション6は、出展者基本情報の確認・更新用のアイテムに kintone に登録済みの情報をセットしています。
アクション7のやること「表示アイテムの内容をリッチテキストでセットする」は、入力用ではなく表示用のリッチテキストのアイテムに、文字装飾した状態で値をセットします。
今回、担当者メールアドレスはマイページでは編集できないようにしたいので、リッチテキストに表示だけ行っています。
リッチテキスト内で、
${$3[0].担当者メールアドレス}
と指定している個所は、アクション3で取得した1レコード目の、「担当者メールアドレス」フィールドの値を表示する、という指定です。
次に、プランの詳細情報を表示するための処理に進みます。
出展者管理アプリにプランコードを保存するフィールドがあるため、そのフィールドの値を使用してプランアプリからレコードを取得し、リッチテキストに表示します。
アクション10のリッチテキストの表示内容は下記の通り、アクション8で取得したレコードのフィールドの値を表示するように設定しました。
最後に、出展対応アプリからログインユーザーのレコードを取得します。
こちらも、接続設定でメールアドレスがクエリに追加されますので、検索条件は下記のように必ず満たされる条件を指定しています。
レコード番号 > 0
アクション13では、やること「テーブルの表示内容をセットする」を指定しています。
「表示内容」で、下記のようにどのアイテムにどのフィールドの値をセットするかを指定します。
「セットする値」には、kintone アプリのフィールドコードを指定してください。
以上で、ページを表示した時の処理は終わりです。
「公開する」ボタンを押した時の処理
このボタンは、登録済みの出展社情報を変更して、変更した情報を登録したい場合に使用します。
ボタンを押してすぐのアクションでは、やること「入力エラーをチェックする」で必須入力のアイテムに入力漏れがないかをチェックし、なければダイアログを表示して登録に進みます。
まずは、2つの添付ファイルフィールドに添付されたファイルを kintone にアップロードします。
kintone では添付ファイルフィールドにファイルを添付するためには、まず kintone にファイルをアップロードする必要があるため、やること「kintoneにファイルをアップロードする」を設定してください。
ポイントとして、アクション22でアップロードしている「企業ロゴ」は必須入力のアイテムなので条件は不要ですが、
アクション23でアップロードしている「製品紹介PDF」は必須入力ではないため、ファイルが添付されていない可能性を想定する必要があります。
やること「kintoneにファイルをアップロードする」では「ファイル選択アイテム」で指定されたアイテムにファイルが添付されていないとエラーになるため、条件「数値が条件を満たすならば」で、
= count(製品紹介PDF)
のように、count 関数の引数に添付ファイルのアイテムのアイテムIDを指定し、カウント結果が0を超える（ファイルが添付されている）のであればアップロードする、のように条件を指定してください。
また、やること「kintone のレコードを更新する」で添付ファイルを含むアイテムの値を kintone に更新する際にも注意が必要です。
アクション23が実行されていない状態で、マッピングで添付ファイルフィールドにアクション23の結果を指定すると、アクション18は実行時にエラーになります。
そのため、下記のアクション18については、22と23の両方が実行された時にだけ実行されるように、条件「他のアクションの実行が完了した時」でアクション23の次に実行されるように設定しました。
アクション25については、製品紹介PDFにファイルが添付されていなかった場合のアクションです。
このアクションに続くアクション26では、企業ロゴにだけマッピングし、製品紹介PDFにはマッピングしていません。
このように、添付ファイルが添付されていない可能性がある場合は注意が必要です。
最後に、処理中表示を終了してダイアログを表示したら完了です。
以上で、ボタンを押した時の処理は終わりです。
最後に
以上が、マイページを表示した際にログインユーザーの情報を表示・更新する方法のご紹介でした。
入力用のアイテムと表示用のアイテムで表示方法が異なる点や、添付ファイルの扱いなどポイントが色々ありますので、ぜひご参考にしてみてください。