公開日：
こんにちは。gusukuのサポートの中の人 にらです。
ここしばらく危険な暑さが続いていますが、皆様お元気でお過ごしでしょうか。
毎年暑いあついと思っていましたが、今年は梅雨をすっとばして早くから暑いせいか、人間だけでなく自宅の植物も元気がありません…。
そんな中でもキャンプをするわけですが、ある程度標高の高い場所にあるキャンプ場に行けば涼しく過ごせます！
標高が100メートル上がると1度気温が下がると言われており、写真の奈良県天川村のキャンプ場は標高800メートルくらいなのでかなり涼しいのですが、それに加えてキャンプ場を囲むように流れる川の水がとても冷たく、日陰で川沿いのキャンプサイトはひんやりとした風が吹いていて最高でした。
まだまだ夏は続きそうですので、みなさまも夏の納涼キャンプぜひお楽しみください～！
前回はエブリサイトでキャンプ場予約のメンバー登録ページを作成しましたがログイン後のマイページが真っ白で何もなかったので、今回はマイページで登録済みの会員情報を確認・変更する機能を作りたいと思います。
予約部分ができた後は、予約履歴や予約のキャンセル、キャンセル料の支払い状況なども確認できるようにする予定です。
社外もチームだ！
エブリサイトで社外DXを！
gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。
今回作るもの
- ログイン後のマイページ（mypage.html）
- 登録済みの会員情報の確認・変更ページ（registration.html）
マイページの作成
こちらの画面を作成します。
kintoneアプリの設定
まず、マイページで表示するメンバー情報を管理するのは、kintoneの「会員名簿」アプリです。
ログインに使用するメールアドレスは「メールアドレス」フィールドに保存し、会員の退会を想定して「会員ステータス」が「有効」であればログイン可能という設定にします。
エブリサイトの接続設定
マイページはログイン後のページで、ユーザーごとの情報を表示します。
誤って別のユーザーの情報が表示されないように、接続設定で「ユーザー指定あり」の設定にしておきます。
下記のキャプチャのように指定すると、この接続設定を使用したクエリでは「認証時に実行するクエリ」が自動的に追加された状態でkintoneからレコードが取得されます。この設定によって、クエリでメールアドレスの指定をしなくても（忘れても）自動的に「メールアドレス」フィールドの値が、ログイン時に入力されたメールアドレスと一致するレコードだけが取得されます。
エブリサイトのページ内処理
ログイン後に表示する情報はユーザーごとに異なるため、「ページ内処理」として作成します。
また、マイページはログイン後（認証後）に表示する想定ですので、下記を確認して両方がOKの時だけマイページの表示を許可し、そうでなければログインページに強制的に遷移します。
- ログイン済みか？（認証）
- 条件「ユーザーが認証済みならば」で確認
- このページを表示して良いユーザーか？（承認）
- ログイン時に入力したメールアドレスと一致するレコードがkintoneに存在し、かつ「会員ステータス」フィールドが「有効」のレコードが存在すれば表示して良いとする
以上をページ内処理で作成します。
また、「アイテムを非表示にする」→「処理中表示を行う」→（認証と承認両方OKなら）→「kintoneのレコードの値をアイテムにセットして表示する」→「アイテムを表示する」→「処理中表示を終了する」のような流れにすることで、
見せたくない情報を見せず、また表示が完了するまで画面を操作できないようにします。
具体的な処理内容
条件「ページを表示した時」に、見せたくないアイテムの非表示と処理中画面を表示してから認証のチェックを行います。
次に、このページを表示していいユーザーかのチェックを行います。
「クエリで条件を指定して kintone からレコードを取得する」でレコードを取得する際に、「検索条件」に下記のみを指定します。
会員ステータス in("有効")実際にこのアクションが実行される時には、会員ステータスの条件に加えてメールアドレスの条件が追加された状態でkintoneに送られるため、会員ステータスが有効 かつ メールアドレスがログイン時に入力したメールアドレスと等しい、という条件でレコードが取得されます。
そしてこちらも、もしレコードが取得されなければマイページを表示する権限がないということで、ログインページに強制的に遷移します。
メールアドレスと会員ステータスを条件に検索してレコードが取得されたら…という条件は、条件「数値が条件を満たすならば」で、レコードを取得するアクションの結果を count関数 で数えることで確認できます。
=count($2)のように指定すると、アクション2で1レコード取得されればカウント結果は「1」、レコードが取得されなければ「0」になりますので、下記のような分岐が可能です。
- 0であればkintoneに一致するレコードがなく、ページを表示する権限がない（承認NG）
- ログインページに遷移
- 1であればkintoneに一致するレコードがあり、ページを表示する権限がある（承認OK）
- kintoneから取得した情報をアイテムにセットして表示
kintoneから取得した「名前姓」と「名前名」フィールドの値を、「表示アイテムの内容をセットする」を使用してアイテム「名前」にセットします。
ページが表示された時にアイテムを一旦非表示にしていますので、セットが完了してから表示します。
以上がマイページの処理内容です。
会員情報変更ページの作成
このような画面を作成します。
画面を表示した時点で、kintoneに登録されている各フィールドの値を初期値として表示しています。
具体的な処理内容
条件「ページを表示した時」の一連の処理はマイページと同様の設定をしておきます。
こちらも同様です。
kintoneから取得したレコード内のフィールドの情報を、「入力アイテムの値をまとめてセットする」で初期値としてセットします。
マイページでは「表示アイテムの内容をセットする」を使用していましたが、入力用アイテムの初期値としてkintoneに登録済みの値をセットしておきたい場合は「入力アイテムの値をまとめてセットする」を使用します。
ここまでで、ページ表示時の処理は完了です。
次に、「登録する」ボタンを押した時の処理です。
まずは、各アイテムの入力チェックを行います。「入力エラーをチェックする」で必須入力チェックを行い、郵便番号と電話番号については数値であること、桁数が指定した桁数であることを「正規表現でエラーチェックを行う」で確認します。
エラーチェックを行った結果エラーがなければ、下記のようなダイアログを表示して入力内容を確認します。
そして、OKが押されたらkintoneのレコードを更新するのですが、更新には少し時間がかかる場合があるので、「処理中表示を行う」を設定しておきます。
レコード追加が完了したら、マイページに遷移します。
以上です！
まとめ
ということで、マイページの会員情報変更機能が完成しました。
キャンプ場予約ページについてはやりたいことが多すぎるので、まずはシンプルな形で最低限予約できるところまで作成したいと思っています！
次回も楽しみにしていただけると嬉しいです。
それではまた。
投稿者プロフィール
-
gusukuのチャットサポートの中の人です。
kintone認定資格は5冠。
趣味はキャンプ、最近登山もはじめました。
