FormCtrlの設置と料金について

FormCtrlは、既存のフォームに容易に追加出来る付加機能という特徴がありますので、 基本的には、既に稼動しているページのフォームに対する変更としてご利用頂く事がコスト的にも良いかと思われます。 勿論、新規サイトあるいはサイトリニューアルの際の導入に関しても全く問題無く利用して頂けます。

基本料

FormCtrlのご利用では、まず基本料が掛かります。 個所という単位は1サイトに設置される1フォームとなります。あるサイトで問い合わせフォームと申し込みフォームで利用して頂く場合は2個所、 また同仕様のフォームであっても別の2サイト(example.co.jpとsns.example.comなど)に置かれる場合も2個所となります。 blogなど個々のユーザーに個別のホスト名を割り当てているような場合にはご相談下さい。

上記の基本料は必須ですが、下記の項目は全てオプション扱いですので、お客様側で設置やデザイン、サーバー側スクリプト作成を行われる場合には上記基本料だけでご利用頂けます。

設定費用

設定費用は、個々のフォームに対する設定記述と動作確認となります。 ここもフォーム単位ですので、全く同じ設定であってもこちらで設置を行う場合はフォーム毎の料金が発生します。 設置費用に関しましては、フォームの入力項目数や構成に応じて料金も変動しますが、前項のサンプルフォームほどの分量ならば、最低料金で設置いたします。

検証処理の追加

FormCtrlにあらかじめ組み込まれていない条件での検証(先頭が半角英字で、その後に半角数字が6文字続くなど)を追加したい場合での追加料金となります。 この単位は種類ですので、複数のフォームに複数個設定されるとしても、その設置数に関係無く共通の検証処理1つに付き1種類となります。 検証処理にはそれに対となるエラーメッセージを設定する必要もありますが、その設定料も含まれます。

メッセージの変更

エラーとなった場合にtip欄に表示される文字列や、"送信する"などのボタンに設定する文字列、あるいは"入力をご確認下さい"などの状況表示用の文字列に対する変更料となります。 他言語用の設定を行うなど、多くの文字列を変更する場合には、文字列設定毎に1種類とカウントしますので、種類数だけの料金が掛かります。

Ajax検証

Ajaxの場合には、クライアント側の設定記述に加え、サーバー側との連携の必要がありますので、その確認作業の為の追加料金を頂いております。 また、Ajaxによる個別検証では、上記検証処理の追加と同様に1Ajax検証設定=1種類ですが、Ajax登録(submit)では、フォーム毎にそれぞれでコストが発生します。

エフェクト設定

入力要素/tip/infoのアニメーションエフェクトを設定します。 こちらでデザイン自体を行うか否かによって料金も変動します。

フォームデザイン

フォームの入力項目名と種類と項目説明などの仕様を元に、サイトのデザインとの調和を考えたフォームのデザインを行います。 またtip/infoを利用する場合には、それらを表示する事を前提としたレイアウトとなります。

サーバー側スクリプト作成

サーバーの種類、開発言語、確認/通知メール送信、DB更新、クライアント側への返答、検証エラー時の処理など、 数多くの要素が関係しますので、このオプションが最も料金の幅が出る項目となります。

JavaScriptフレームワーク

まず大前提として、FormCtrlではJavaScriptフレームワークであるMooTools(version 1.11)を利用していますので、 MooToolsが動作する環境が必要になります。

既存の入力フォームへのFormCtrl導入

ここではFormCtrlを既存のフォームへ導入する場合での、HTMLやCSSの要変更点ついての解説を行います。 FormCtrlでは、検証設定など動作に関係するものは、ほぼ全てJavaScriptで記述する形になりますので、 HTMLやCSSに対する変更点は最小限になるような設計となっております。

テーブル形式(table)のフォームへの実装

基本的に入力フォームは、項目名と入力要素の組み合わせが複数設置されるという、表形式のテーブルとの親和性が高い構成となり、 その為テーブル上に実装されているフォームも多くなります。 但し、tableのセルへのposition:relative設定は無効(CSS2.1)など、新規入力フォーム設計でのtableの使用はあまりお勧め出来ませんが

勿論、FormCtrl機能解説ページでのサンプルフォームのように、tableでは無くdivやリスト(ulやdl)を利用したフォームも数多くありますが、 ここではtable形式のフォームへのFormCtrlの導入について説明します。

このテーブル形式のフォーム(の一部)は以下のようなHTMLソースになっています。

itemRootの特定

FormCtrlでは、input/select/textareaなどの入力要素に、エラー時の補足情報(tip)と詳細説明(info)を関連付けてitemという単位で管理します。 この例では、お名前項目のinput(type=text)と、そのお名前項目のtip/infoが1つのitemとなり、 フリガナ項目のinput(type=text)/tip/infoがまた別の1つのitemとなります。

それぞれのitemの識別名は、itemに含まれる入力要素のname属性値となりますので、 name属性値が重複する入力要素が複数あった場合には、最初のitemだけが有効であり、重複itemは無効になります。

1つのitemに含まれる全ての要素は、ある1つのエレメントの子孫エレメントである必要があります。 そのようなエレメントの中で、特定のitemの要素だけで構成され、他のitemの要素を含まないようなエレメントを、 FormCtrlではitemRootと呼びます。 既存フォームへのFormCtrlの導入では、まずそのitemRootを特定する事から始まります。

この例では、tableのtdエレメントの中に入力要素/tip/infoを置く構成にしますので、各tdエレメントが各itemのitemRootとなります。 ここでは項目名が書かれるセルにはtdでは無くthタグを使っていますので、tdエレメントが出現するのはitemを含む個所だけですが、 例えばここにitemに関係しないtdがあるような場合には、itemRootとなるようなtdにクラス名を指定し、他のtdとは区別するような記述が必要となります。

itemGrpでのitemRootの設定

複数のradioボタンやcheckboxを使った選択項目では、個々の入力要素(radio/checkboxエレメント)単独の状態よりも、対象の入力要素全ての選択状態を把握する事が重要ですので、複数の入力要素を一括してグループとして管理します。 そのようなグループをFormCtrlではitemGrpと呼び、tip/infoの適用や選択数の検証、Ajax個別送信もそのグループ単位で行われます。

itemGrpは一種のitemの特殊形態ですので、基本的にはitemと同様の機能/設定となります。 よってitemRoot設定も、単独itemと同様に行いますが、itemGrpの場合にはitemRootにidを割り当てて、それをitemの識別名とします。

tip(補足情報表示)用エレメントの追加

itemRoot決定の後は、tipとinfo用の設定を行います。 tipもinfoもFormCtrlではオプション扱いなので必須ではありませんが、 tipが設定されていない場合には検証エラーの補足情報表示が行われませんので、通常のフォームに導入する場合には、tipは実質的に必須だと言えます。

tipでは、FormCtrlで動的に文字列を変更すると共に、エフェクトを適用する処理も行われますので、 その2種類の違う操作に対応したエレメントを指定する必要があります。 エフェクトを適用するtip全体のエレメントをbaseと呼び、文字情報を格納するエレメントをtargと呼びます。 targが未指定の場合はtarg=baseとなり、共通のbaseエレメントが使われます。

targはbaseの子孫エレメントである必要があるのと同様に、baseはitemRootの子孫エレメントである必要があります。 baseやtargの指定はitemRootと同様に、タグ名やタグ名+クラス名、あるいはクラス名だけのような指定方法となります。

ここでは、tipを<div class="tblTip"><span></span></div>と記述し、targがspan、baseがdivとなります。 targの中は空ですが、ここに書かれる文字列は初期で表示され、またresetを行った場合の表示に使われるだけですので、 特に必要が無ければ空白で問題ありません。

info(項目の詳細説明)の設定

infoは、主に項目についての詳細や入力形式の説明が記述される個所となります。 tipのように状態によって文字列を変更するなどの操作は行わず、FormCtrl側ではその内容を関知しませんので、 文章は前もってHTML上で記述しておく必要があります。

つまりinfoは、単に表示切替が行われるだけの要素となりますので、 上記フォームのように、常に説明文を表示したままで構わないのであれば、infoを使う必要はありません。

infoの指定方法も上記tipと同様に、エフェクト適用対象となるbaseエレメントを特定する事で行われます。 この例では、infoの文字列を<div class="tblInfo">エレメントに格納しています。

レイアウトとエフェクトの為のスタイル設定

ここまででtipとinfoのHTML上での記述は完了しましたので、次にCSSでスタイルを指定します。 レイアウトの為のスタイル設定は、適用するエフェクトとも密接に関連しますので、まずどのようなエフェクトを適用したいかを考えた上で行う必要があります。

FormCtrlでは、tip/infoのスタイルはCSSで表現出来るものなら大抵適用出来ますので、非常に高い自由度でのデザインが可能であり、 同じFormCtrlを使ったフォームであっても、全く異なった外観とする事も可能です。

tipの場合は、補足情報の種類によって文字列長が変化し、しかもそれが数文字から数十文字になる場合もありますので、まずその点を考慮する必要があります。 tipの内容を常時表示しておくのか、それとも入力時やFocus時には非表示にするのか、非表示の場合はvisibility:hiddenかdisplay:noneか、そもそもtip自体をposition:absoluteにしてフローから独立させるのかなど、 検討すべき点は多数あると言えます。

infoはその性質上、文章量が多くなる傾向ですので、基本的にitemがfocusされていなければ非表示となっているような構成が多くなると思われます。

ここまでの作業を反映し、さらにFormCtrl側でのJavaScript設定を加えたものが下記フォームとなります。 このフォームでは、個々のitemの検証が行われるのは、他のitemにfocusが移った時点と設定されています。

この例では、tipは単にopacityの操作だけ、infoはopacityとheightの遷移というシンプルなエフェクトを適用しています。 tipは、inputの横に表示するレイアウトですので、inputとtipはfloat設定にし、さらにそれぞれでwidthも指定されています。 infoでは、height変更のエフェクトを掛けますので、overflow:hiddenを設定し、コンテンツがエリアから溢れた場合には非表示にするような対応を行っています。

サーバーサイドスクリプトのFormCtrlへの対応

フォームとサーバー側スクリプト

入力フォームでは、クライアント側のフォームとサーバー側のスクリプトが必須要素となり、その2つが互いに連携して動作する事が必要となります。 その為、FormCtrl導入時にも、サーバー側スクリプトとの連携を当然考慮に入れる必要があります。

入力フォームでは、多くの場合このような処理の流れとなります。
1. 入力フォーム表示 → 2. 入力値を検証 → 3. 全てOKなら4.へ、エラー項目があるならそのエラー説明を表示し1.へ → 4. 確認画面表示 → 5. 2.の検証を行った後、登録処理 → 6. 登録完了画面表示
FormCtrlでのAjax登録処理では、サーバー側での入力値検証完了後、確認画面表示無しに登録処理に移行し、さらにこの流れが画面遷移無く進むというかなりの差異がありますが、 Ajax登録では無く通常登録の場合にはこの流れと同様になります。

FormCtrl自体が行うサーバー側との通信は、Ajaxによる個別検証とAjaxによる登録(submit)だけで、 Ajaxを使わない通常の登録では、ブラウザのデフォルト動作での通信内容と登録処理となります。 よってAjax検証/登録を使わないのであれば、FormCtrl導入に際しても、サーバー側スクリプト変更は一切無いというケースも有り得ます。

通常登録でのサーバー側スクリプト対応

検証正常終了時とエラー時の動作

上に記した通り通常登録であるならば、FormCtrl未導入状態、あるいはJavaScript無効時と同様の送信内容であり、 また現在のバージョンのFormCtrlのAjax登録では対応していない、multipart/form-dataでの送信も可能です。 というよりこの場合には、完全にブラウザ依存となります。

登録処理におけるクライアント側からの通信内容は、このようにFormCtrlの利用如何に拘わらず同じですので、 正常終了時の処理に関しては、ほぼそのままで問題無いかと思われます。

一方、検証エラー時には既存の処理方法(エラー情報の表示方法)を変更する必要があるケースが多いと考えられます。

1. 入力フォームを表示し、情報表示としてエラー項目名と理由を一箇所に列挙する
2. 入力フォームを表示し、エラーとなった項目に隣接しそれぞれのエラー内容を表示する
3. 入力フォームを表示せず、エラー情報表示だけを行う

1.2.の場合には、引き続き画面遷移無くユーザーに入力に求める形式になりますが、 3.の場合には、ブラウザの戻るなどで再び入力フォーム画面に移行する必要があります。

ここで3.の場合にはFormCtrlへの対応での変更は必要ありませんが、1.2.のケースではFormCtrlのフォーム設定に対応する事が望ましくなります。

外部からのエラー情報表示設定

クライアント側のFormCtrlでは、入力値の検証においてエラーがあった場合には、個別の項目のtipにその情報を表示し、 またFormCtrlの設定でnoticeとして設定されたエレメントに、フォーム全体の情報を表示します。 そこでサーバー側での検証エラーによる情報表示でも、この2つのエレメントを利用して頂ければと考えます。

tipとnoticeは、FormCtrlで動的に生成するのでは無く、HTML上で記述されたエレメントをそのまま使用しますので、 そのエレメントにエラー情報を埋め込む事で表示は行われます。 FormCtrlの初期化処理では、全てのtipにはエフェクトの非アクティブ状態が適用されますので、 非アクティブ状態が非表示設定(display:none,visibility:hidden,opacity:0など)になっている場合には、設定したエラー情報も表示されません。 が、初期化処理でtipやinfoを非アクティブにしない設定がありますので、そのような場合にはその設定を有効にします。

setItemValue()

またFormCtrlでは、初期化後にtipと入力要素に値を設定出来るような手段も用意しております。 下記フォームは前項のフォームと同様ですが、ここではFormCtrlの初期化後に以下のようなitemの設定を行っています。

setItemValueの引数は、setItemValue( item識別名, 入力要素に設定する値, tipに設定する文字列, Focusするか )となっていて、 これを利用する事で、クライアント側で入力検証エラー表示を行った時と同様の動作(tipのアクティブ化とエラー項目へのFocus設定)が可能になります。

当然のように、クライアント側でJavaScriptが有効になっていなければこの機能も利用出来ません。 そこで、JavaScriptが無効な環境への対応も考えた場合、 tipエレメントへの文字列埋め込みとsetItemValueでの設定の両方を行うのが望ましいですが、 コスト的に難しい場合には、tipエレメントへの埋め込み処理を優先した方が良いと思われます。