こんにちは。
リーデックス小川です。
今回は、フォーム機能について、具体的な使い方や気になったところを記事にしていきます。
プリザンターのテーブルを Webフォームとして公開し、ブラウザ経由でデータ入力を受け付けられる機能です。
フォーム機能は、ver.1.4.23.0で追加された機能で、下記記事で簡単にご紹介しています。
使いこなすととても便利な機能ですので、本記事を参考にぜひ使いこなしてみてください。
フォーム機能とは？
これまでは Googleフォームや独自の問い合わせフォームの内容をプリザンターに保存する場合、API連携やCSVインポートなどの手間がかかっていましたが、今回のフォーム機能により不要になりました。
マニュアルより引用
パラメータファイル「Form.json」の変更
フォームを利用する場合、パラメータファイルの設定が必要になります。パラメータファイル「Form.json」にある"Enabled"の値をtrueに設定します。
"Enabled": true
パラメータファイルの設定については、「プリザンターのパラメータを設定するには？」の記事も参照ください。
パラメータファイルを設定し、プリザンター再起動すると、「テーブルの管理」のタブに「フォーム」が表示されます。開発環境であれば、プリザンターを再起動しないでパラメータファイルを反映させる方法もありますので、こちらもご参照ください。
テーブルの管理画面での設定
それでは、実際にフォームを発行するまでを確認してみましょう。今回は「記録テーブル」を新規で作成し、エディタなどは変更せずにデフォルトのまま表示します。
フォームを匿名ユーザに公開する手順は以下のとおりです。
- 「テーブルの管理」→「フォーム」タブを表示する
- ①匿名ユーザに公開する、をチェックする
- ②に匿名ユーザ向けのURLが発行されます（URLは変更できません）ので、発行されたURLをWebサイトなどで公開する
②のURLにブラウザでアクセスすると、匿名ユーザ向けのフォームが表示されます。通常の「新規作成」画面と違い、ページ上部に「公開フォーム」と表示されます。
なお、①を一度オフにし再度オンにした場合、公開アドレスは更新されるためご注意ください。
「開始日時」と「終了日時」について
「開始日時」「終了日時」はそれぞれ公開を開始する日時と公開を終了する日時を設定することができます。公開期間を決めない場合は入力は不要です。
| 開始日時 | 終了日時 | 設定結果 |
|---|---|---|
| 空（未設定） | 空（未設定） | 期間を定めずに公開 |
| 特定の日時 | 空（未設定） | 特定の日時以降、期間を定めずに公開 |
| 空（未設定） | 特定の日時 | 公開後すぐに登録でき、終了日時まで登録可 |
| 特定の日時 | 過去の日時を設定 | 一時的に公開停止 |
マニュアルより引用、一部追記
ユーザへのメッセージについて
「フォーム」タブには、⑤利用不可メッセージと⑥サンクスメッセージを設定することができます。
⑤は、公開期間外の日時にアクセスしたユーザに対して表示するメッセージを登録することができます。
⑥は公開期間中にレコードの作成が成功した後の完了画面で表示するメッセージを登録することができます。
⑤、⑥ともに、メッセージの編集にはリッチテキストエディタを利用できます。リッチテキストエディタについては、下記記事をご覧ください。
リッチエディタをうまく活用すると、下記のような画面を作成することが可能です。
マニュアルより引用
気付いたところ
いろいろ試してみて、気付いたところを書いてみます。
通常のテーブルと同じように使える機能
通常の入力画面で利用できる制御機能は、概ねフォーム画面でも使用できそうです。エディタでの入力項目の変更はもちろんのこと、プロセス、状況による制御、通知、スクリプト、サーバスクリプト、スタイル、も利用できます。
ただし、いくつか気になったことがありますので、次にまとめていきます。
サーバスクリプトのcontextオブジェクトの出力
サーバスクリプトはスクリプトとは違い、画面での制御ではなく条件での制御となりますので、フォーム画面のみ制御したい場合は、context.Actionやcontext.Controllerなどでの条件分岐が必要となります。フォーム画面でも、これらの値は取得できそうに見えました。
気になったので事前に調べたのですが、ブラウザの開発者モードを確認すると<hidden id="SiteId">にURLの公開用URLのformsのあとの半角小文字英数が設定されています。
例）http://localhost/forms/93f7e026b9d44d3287cead0f13946290/new
の場合、「93f7e026b9d44d3287cead0f13946290」がSiteIdに設定されている。
上記を元に、サーバスクリプトでログを出力してみました。
context.Log(`context.SiteId:${context.SiteId}`); context.Log(`context.Action:${context.Action}`); context.Log(`context.Controller:${context.Controller}`);
フォームにアクセスすると、ブラウザの開発者モードでコンソールに下記出力が表示されました。
context.SiteId:0
context.Action:new
context.Controller:forms
SiteIdには0が入ってしまっています。サーバスクリプトだとうまく取得できないようです。スクリプトで直接値を取得することは可能でした。
console.log(`SiteId:${$("#SiteId").val()}`);
ブラウザの開発者モードのコンソールには、想定した値が出力されていました。この値を直接利用することはないかもしれませんが、頭の片隅に入れておいてもらえると良いかもしれません。
自動ポストバックがエラーになる
フォーム画面で自動ポストバックを使用すると、エラーが発生するようです。試しに、数値A、B、Cをエディタで設定し、
数値Cに、数値A + 数値B の計算式を設定します。
NumA、NumBには、エディタで「自動ポストバック」を設定しています。フォームで数値A、数値Bに値を設定するとエラーが発生します。
こちらは、いまのところ仕様として捉えておいたほうが良さそうです。
選択肢一覧のリンクは使用できない
選択肢一覧のリンク（例えば、選択肢一覧での8882のような設定）は、フォーム機能の画面では動作しません。
なお、これ以外も制限がありますので、詳細はマニュアルの「制限事項」をご確認ください。
より安全に利用するための設定
プリザンターのフォーム機能を公開する際は、外部からの不正アクセスやボット対策など安全面の設定が重要です。
主な対策として、Cloudflare Turnstile や Google reCAPTCHA（v2/v3）などの CAPTCHA を導入し、ボットによるアクセスを抑止できます。
また、フォーム公開時の 未認証アクセス時の挙動（ログイン画面ではなく404エラーにする） 設定もセキュリティ向上に有効です。
イントラ環境などでCAPTCHA不要の場合は無効化も可能ですが、本番公開時は必ずSSLとCAPTCHAを併用することを推奨します。
詳細は、下記マニュアルよりご確認ください。
まとめ
今回は、フォーム機能の使い方や気になったところについてまとめました。便利な機能ですのでぜひ積極的に使っていきたいですね。
それではまた。
最後までご覧いただきありがとうございました。
