SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

ここまでできる!HTML+SQL+Alinousベースプログラミング

Web特化言語で超シンプルWebDBアプリ作成実践編


  • X ポスト
  • このエントリーをはてなブックマークに追加

フォーム関連機能

 フォーム関連機能は、WebDBアプリケーションを作成する上で基本となる機能です。Alinous-Coreでは、フォームに対してカスタムのバリデータをデフォルトから付けられたり、戻るボタンの自動生成ができるなど、実際の開発の状況にあわせた仕様になっています。

フォームの種類と名前について

 Alinous-Coreでフォームを使うときには、1つだけ命名ルールがあります。それは、フォームの値が配列の場合は名前が[]で終わるというルールです。フォームの種類を見るために「http://localhost:8080/boxtest/」にアクセスして「ALINOUS_HOME/boxtest/index.html」の内容を表示してみましょう。

図5 さまざまなフォーム
図5 さまざまなフォーム

 フォームは上から、

  • コンボボックス
  • ラジオボタン
  • テキスト
  • リスト(複数選択)
  • チェックボックス
  • テキストエリア

 になります。このうち、「リスト(複数選択)」「チェックボックス」が複数選択の対象になり、配列の値をとります。よって、これらを利用する場合にはそのインプットに[]で終わる名前を付ける必要があります。今回、例として、

  • リスト(複数選択):multisel[]
  • チェックボックス:checktest[]

 という名前がついています。ソースコードは下のようになります。

ALINOUS_HOME/boxtest/index.htmlの複数選択タグ周辺
<select name="multisel[]" alns:validate="custom" multiple="true">

  <option value="{$Record}"
alns:iterate="@TEST" alns:variable="Record">
{$Record} </option> </select> <br><br> <input type="checkbox" name="checktest[]" value="A"
alns:validate="custom">
A<br> <input type="checkbox" name="checktest[]" value="B">B<br> <input type="checkbox" name="checktest[]" value="C">C<br>

フォームの動的描画について

 実際の開発では、フォームを動的に描画する機会もあると思いますが、Alinous-Coreではフォームの動的描画をサポートしています。先ほど示した「ALINOUS_HOME/boxtest/index.htmlの複数選択タグ周辺」のソースを見てください。

 このソースでは、alns:iterate属性が使われています。この属性は、HTMLをレンダリングするまえに実行されるAlinousScriptで作成した配列を使ってHTMLのタグを展開したい場合に使われます。例では、@TESTという配列がAlinousScriptで作られていて、その配列の個数だけoptionタグが繰り返されます。実際に、配列を作っているAlinousScriptは、「index.alns」というファイルになり、ソースコードは次のようになります。

ALINOUS_HOME/boxtest/index.alns
$TEST[0] = "aaa";
$TEST[1] = "bbb";
$TEST[2] = "ccc";

return 0;

 感覚としては、配列をテーブルのtrタグおよびtdタグに展開するときと同じです。この部分は『HTMLとSQLで簡単Web-DB開発 次世代Web開発言語「Alinous-Core」』の記事を読むと理解しやすいかと思います。

標準バリデータ

 バリデータはとてもよく使われる機能で、Webフレームワークでは必須の機能といえます。Alinous-Coreでは、標準のバリデータとして次のものを用意しています。

表1標準バリデータ
名称 内容
notnull 空文字をはじくバリデータ。
int 数字フォーマット以外をはじくバリデータ。
regex 正規表現以外をはじくバリデータ。正規表現はalns:regex属性で指定します。

 標準バリデータを使っている例としては、「ALINOUS_HOME/insert/index.html」が分かりやすいと思います。ここではnotnullバリデータを利用しています。「http://localhost:8080/insert/」にアクセスして、何も入力しないまま[NEXT]ボタンを押すと、次のようにエラーが表示されて次のページに進みません。

図6 標準バリデータ
図6 標準バリデータ

 このときのフォーム全体のソースは次のようになります。

フォーム全体
<form name="searchForm" action="confirm.html" method="POST" 
enctype="multipart/form-data">
<table> <tr> <td>NAME : </td> <td> <input type="text" name="name" value=""
alns:validate="notnull">
<span alns:msg="name" alns:form="searchForm"
alns:validate="notnull">
<font color="#FF0000">input your NAME</font><br> </span> </td> </tr> <tr> <td>E-MAIL : </td> <td> <input type="text" name="mail" alns:validate="notnull"> <span alns:msg="mail" alns:form="searchForm"
alns:validate="notnull">
<font color="#FF0000">input your mail</font><br> </span> </td> </tr> <tr> <td>COMMENT : </td> <td> <input type="text" name="comment" alns:validate="notnull"> <span alns:msg="comment" alns:form="searchForm"
alns:validate="notnull">
<font color="#FF0000">input your comment</font><br> </span> </td> </tr> </table> <input name="submit" type="submit" value="NEXT"/> </form>

 ここで、最初のテキストインプットに注目してみます。バリデータの設定仕方は、次のようにHTML内で行うことができます。

標準バリデータ部分抜き出し
<input type="text" name="name" value="" alns:validate="notnull">
  <span alns:msg="name" alns:form="searchForm" alns:validate="notnull">
    <font color="#FF0000">input your NAME</font><br>
  </span>

 まずは、バリデータを設定する部分から説明します。inputタグの中にalns:validateという属性がありますが、この属性を設定することでバリデータを設定できます。notnullバリデータの場合はこれでバリデータの設定は終わりです。もし、regexバリデータを使う場合は、alns:validateregexという値を設定し、さらにalns:regexという属性をinputタグの中に追加して正規表現を設定します。複数のバリデータを設定したい場合には、alns:validate="notnull,int"のようにカンマ区切りで複数指定できます。

 つぎに、バリデーションに失敗したときに表示するメッセージを設定します。このメッセージはspanタグで設定できます。上のソースのspanタグにはalns:msgalns:formalns:validateの3つの属性がありますが、これらを設定することでエラーメッセージを表示させることができます。alns:msgには、そのメッセージの対象になるinputタグの名前を指定します。alns:formには、inputタグが含まれるフォーム名を設定します。そして、alns:validateには、どのバリデータで失敗したときにこのエラーメッセージを表示するかを設定します。

 以上のやり方だけで、標準バリデータを設定することができます。

カスタムバリデータについて

 Web系の開発をしていると、NULLチェックや正規表現のフォーマットチェックといった、データのフォーマットだけでバリデーションが完結するもの以外に、データベースの中身にアクセスしないとバリデーションができないようなものがあります。そのようなときもAlinous-Coreは簡単にカスタムのバリデーション処理を実装できます。カスタムバリデータの設定方法は、標準のバリデータの設定とほぼ似ていますが、次の2点が違います。

  • alns:validate属性の値にcustomを設定する
  • validationのロジックを自分で実装する

 では、実際にカスタムバリデータの動きを見てみましょう。カスタムバリデータのサンプルは、「ALINOUS_HOME/boxtest」フォルダにさまざまなフォームを表示しているページがありますので、そこを参考にします。まずは、「ALINOUS_HOME/boxtest/index.html」の内容を見てみます。

ALINOUS_HOME/boxtest/index.html
<html>
  <head>
    <title>Alinous-Core</title>
  </head>

  <body>
  TEST FORM inputS<br>
  <br>
  Testing alns:if attribute.<br>
    <span alns:if="{BOOL($AA != null)}">
    $AA is not null.
    </span>

    <form name="testForm" action="show.html" method="POST">

      <select name="sel" alns:validate="custom">
        <option value="{$Record}"
alns:iterate="@TEST" alns:variable="Record">
{$Record} </option> </select> <br> <input type="radio" name="rtest" value="A"
alns:validate="custom">
A<br> <input type="radio" name="rtest" value="B">B<br> <input type="radio" name="rtest" value="C">C<br> <br><br> <input type="text" name="txt" value="Hello world"
alns:validate="custom">
<br> <br> Multiple select.<br> Please add "[]" at the end of parameter's name. Then the parameter becames Array parameter.<br> If we watch the variables after submiting the form with debugger, the array named 'multisel' is there under the $IN variable. <select name="multisel[]" alns:validate="custom" multiple="true"> <option value="{$Record}"
alns:iterate="@TEST" alns:variable="Record">
{$Record} </option> </select> <br><br> <input type="checkbox" name="checktest[]" value="A"
alns:validate="custom">
A<br> <input type="checkbox" name="checktest[]" value="B">B<br> <input type="checkbox" name="checktest[]" value="C">C<br> <br><br> <textarea name="txtArea" size="10" alns:validate="custom"> FirstVALUE </textarea> <br><br> <input name="submit" type="submit" value="submit"> </form> </body> </html>

 上のソースを見ると分かるとおり、HTMLの変更はalns:validate属性の値がcustomになっただけです。では、バリデーションのロジックの部分はどこに書くのでしょうか? それは、このフォームがPOSTする先のページのAlinousScriptになります。上のソースのformタグでは、POSTする先のaction属性が「show.html」になっているので、「ALINOUS_HOME/boxtest/show.alns」を見てみましょう。

ALINOUS_HOME/boxtest/show.alns
// please put breakpoint at the next line
return 0;

function validate($formName, $inputName, $value, $IN, $SESSION)
{
    if($value == ""){
        return "custom";
    }
    return 0;
}

function validateArray($formName, $inputName, @value, $IN, $SESSION)
{
    // Write validation logic for array parameters here
    return 0;
}

 ここで、上のソースを見ると2つの関数があることが分かります。validate()validateArray()関数がバリデーションのロジックになります。なぜ、2種類あるかというと、フォームのinputタグには、値が通常の変数のものと配列のものがあるからです。通常変数のバリデーションロジックは、validate()関数で処理され、配列のものはvalidateArray()関数で処理されます。

 次に関数について説明します。どちらの関数も引数を5個とります。validate()validateArray()関数での違いは、第3引数がvalidate()関数の方は普通の変数で、validateArray()関数の方は配列(変数名が@から始まる場合は配列を意味する)になっているところです。それぞれ引数の説明は次のようになります。

  • $formName…入力されたフォームの値が入っています。
  • $inputName…inputのname属性の値が入っています。これから評価する値がどのinputタグの値かを識別するためのものです。
  • $value or @value…$inputNameで指定されたinputタグの値が入っています。
  • $IN…入力パラメーターが入っています。
  • $SESSION…セッションの値が入っています。このDOM変数にプロパティを足した場合は、セッションとして記憶されます(後述のセッションの操作参照)。

 バリデーションの結果は、関数の戻り値で返します。もし、0をreturnした場合には、バリデーションOKということになります。任意の文字列を返した時には、バリデーションはNGで、ここで返した値がエラーコードになります。

 エラーコードは、どこで使うのでしょうか? それは、バリデーション失敗時のメッセージ表示の際に使います。上のコードでは、バリデーション失敗時にメッセージが表示されませんので、メッセージ表示のためのspanタグをこれから追加します。ラジオボタンの下にある「txt」という名前のテキストボックスがバリデーションに失敗したときのエラーメッセージ表示を付け加えてみます。

エラーメッセージ追加
<span alns:msg="txt" alns:form="testForm" alns:validate="custom">
  <font color="#FF0000">テキストを入力してください</font><br>
</span>

 このとき、alns:validate属性にエラーコードを入力します。これによりバリデーションチェックでエラーコードが返ってきた際、このエラーメッセージが表示されるようになります。実際のバリデーションの動きは、バリデータの関数にブレイクポイントを仕掛けてデバッガで実際に動かしてみるとよく分かると思います。バリデータ関数は、カスタムバリデータをセットしたinputタグの個数と同じ回数呼ばれ、どのinputタグの値を評価すべきかは、引数の$inputNameで判別します。

次のページ
SQLの実行

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

飯塚 友裕(イイヅカ トモヒロ)

Eclipse関連のソースコード自動生成プロダクトの開発者。ソースコード自動生成エンジンを他社に供給する技術エンジン会社「CROSSFIRE JAPAN, INC.」で、O/RマッピングツールやJavaによるSQLパーサーを開発。現在、NetBeans.org(米国)のパートナー。最近は、Alinous-Coreを利用したパッケージビジネスを行っています。SEO対策対応ECサイト構築パッケージOpen-ECAlinous-Coreのソースコードダウンロードhttp://sourceforge.jp/projects/alinous-core/はてなブログhttp://d.hatena.ne.jp/i-zuka/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1375 2008/09/03 13:58

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング