柳谷智宣のkintoneマスターへの道 第118回

kintoneアプリ内のデータを表示するシステム（メアド認証付き）を「グスク エブリサイト」で作ってみた

　2025年10月、アールスリーインスティテュートは「gusuku Everysite」（以下、エブリサイト）をリリースした。kintoneなどのクラウドサービスと連携し、そのデータを入出力するウェブサイトを作成できるノーコードのフロントエンド開発サービスだ。同サービスを活用することで、社内の業務システムを外部とつなぎ、DXを社外へと拡大できる。

　前回は、プレビュー版を利用し、ウェブフォームに入力された問い合わせ内容をkintoneアプリに登録するシステムを構築した。「“社外”もDXチームの一員に　kintoneと連携したコラボサイトがつくれる「グスク エブリサイト」を試してみた」をご一読いただきたい。

　今回は、逆にkintoneアプリ内にあるデータをウェブページに表示するシステムを構築してみる。ただ、それだけだと簡単なため、メールアドレスでユーザー認証し、そのユーザーに許可されたデータのみを表示するというギミックも加えている。

kintoneアプリ内のデータを閲覧するアプリを構築、メアド認証も付けてみた

メールアドレスでアプリを使えるユーザーを制限する

　エブリサイトは独特なUIなため、最初は戸惑うかもしれない。しかし、kintone連携サービス「カスタマイン（gusuku Customine）」で培った“わかりやすさ”にこだわったメニューなため、すぐに慣れるだろう。

　事前に用意したkintoneアプリは、情報を閲覧できるメールアドレスを管理する「ユーザー管理」アプリと、商品名と数量を管理する「商品マスタ」アプリの2つだ。

kintoneで「ユーザー管理」と「商品マスタ」を用意する

　システム構成としては、まずはメールアドレスでログインさせる。認証には、エブリサイトのワンタイムパスワード（OTP）によるログイン機能を利用した。無事認証できたら、誰もが閲覧できる在庫数と一部ユーザーのみが閲覧できる在庫数をテーブルで表示するという流れだ。

今回作るシステムの構成

　初めてエブリサイトを触る人には複雑に感じられるかもしれないが、手順通りに進めれば難しくはない。最初に、ページを作成する。ページ名とURLを設定し、「追加する」をクリック。URLの英数字はなんでもよい。

　ページ設定が開いたら、ウィジェットを「シンプル縦フォーム」に変更。続けて、メール入力フォームやログインボタンなどをドラッグ＆ドロップで並べていく。使い方やパラメータがわからない場合は、「？」をクリックすると、該当のヘルプページを手軽に参照できる。

新規ページを作成する

作成ページが開いたら「シンプルパネル」をクリック

「シンプル縦フォーム」をクリック

「メールアドレス入力」などのパーツをドラッグ＆ドロップで並べる

説明文やログインボタンも並べる

　次は、「接続設定」タブを開いて、kintoneアプリと接続する。まずは、ログインチェックのために、ユーザー管理アプリのアプリ番号とAPIトークンを設定する。kintoneアプリの番号はURLの末尾を見ればわかる。APIトークンはアプリの設定から「APIトークン」を開き、「生成する」をクリックすればいい。

　同様に、認証後に商品マスタアプリにアクセスするための接続設定を用意する。その際、誰でも閲覧できる全員向けと、ユーザーを絞る閲覧制限向けの2つを用意するのがポイントだ。

kintoneアプリと接続する

　次は、「ページ内処理」タブで、動作を作成していく。アクションを追加し、まずは認証から設定していこう。ログインボタンを押したときに、ユーザー管理アプリで検索し、メールアドレスが存在していれば次のステップに進む。この時、登録されていないユーザーであれば何も起きないが、実際に運用する際はエラーメッセージなどを表示すればいいだろう。

　続いて、「やること」から「ユーザーを認証する」を選択し、ワンタイムパスワードを送るメールのタイトルや本文を設定する。「ユーザーを認証する」を実行すると、使い捨てのワンタイムパスワードが指定されたメールアドレスに送信される。ユーザーにはパスワードを入力するダイアログが画面に表示され、受信したパスワードを入力すればログインできる。

　一度認証に成功するとセッションが開始され、セッション中は、接続設定の「認証可否」パラメーターで「認証が必要 / ユーザー指定なし」もしくは「認証が必要 / ユーザー指定あり」が選択されている接続からデータを取得できるようになる。

アクションを追加する

ユーザー管理アプリからメールアドレスを取得して認証する