SHOEISHA iD

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

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

Webアプリケーションフレームワーク「Catalyst」入門

初めてのCatalyst入門(13)
Catalystによるフォーム操作と検証

フォームのパラメータ検証、値を自動的に設定

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

フォームの内容を自動的に設定する

 上記の例では、入力値のエラーが発生した場合に、正しい値が入力されていたとしても、すべての値を再入力させる必要がありました。

 次の例では、入力値エラーが発生していた場合には入力フィールドに自動的に値を再設定する方法を紹介します。

 CatalystのプラグインではCatalyst::Plugin::FillInFormによって実現されます。

 FillInFormプラグインは通常はFormValidatorと一緒に使用されることで、ユーザーにより快適な使い勝手を提供できます。

FillInFormをインストール/設定する

 FormValidatorに続いて、Catalyst::Plugin::FillInFormプラグインをインストールしましょう。

[リスト12]Catalyst::Plugin::FillInFormのインストール
# perl -MCPAN -e 'install Catalyst::Plugin::FillInForm'

 Catalyst::Plugin::FillInFormプラグインの設定も先ほどと同様にアプリケーションモジュールファイルに登録します。

[リスト13]FillInFormプラグインの登録(FormSample.pmの一部)
# 省略
use Catalyst qw/
  -Debug
  ConfigLoader
  Static::Simple
  FormValidator::Simple
  FillInForm
  Unicode::Encoding
/;

入力値を自動的に設定する処理を実装する

 先ほどの例に追加する形で、FormValidatorにFillInFormを組み込んだ場合の例を紹介します。

 この例では入力から確認までの流れを実現するために、次のようなアクションやテンプレートを使用します。

FillInForm/FormValidatorの例で登場するアクション、テンプレート等のファイル
種類 説明
input2アクション 入力チェックを行うアクション
complete2アクション 実際に登録処理を行うアクション
input2.tt 入力2テンプレート
confirm2.tt 登録確認用テンプレート
complete2.tt 登録完了ページ用テンプレート
messages.yml エラーメッセージ定義ファイル(input1の場合と同様)

 input2アクションでは、入力値チェックと確認ページの表示を行います。そしてcomplete2アクションでは値の保存を行います(今回は省略しています)。それぞれの段階においてテンプレートファイルを作成しています。

 エラーメッセージファイルはinput1の場合と同様になっています。

 input2アクションは、input1とほぼ同じですが、入力値エラーが発生した場合にFillInFormでパラメータの値をフォームに設定する処理が追加されています。

[リスト14]input2アクション(Root.pmの一部)
sub input2 :Local {
  my ( $self, $c ) = @_;
  if ($c->req->method eq 'POST') {
    $c->form(
           name => ['NOT_BLANK', ['JLENGTH', 2, 10]],
           name_kana => ['NOT_BLANK', 'KATAKANA', ['JLENGTH', 2, 30]],
           zip => ['NOT_BLANK', 'ZIP_JP'],
           phone => ['NOT_BLANK', 'NUMBER_PHONE_JP'],
           email => ['EMAIL_MOBILE_JP'],
           );
    if ($c->form->has_error) {
      # (1)入力値エラーが発生していた場合
      $c->fillform;
    } else {
      # (2)入力値チェックにすべてパスした場合
      $c->stash->{template} = 'confirm2.tt';
    }
  }
}

sub complete2 :Local {
    my ( $self, $c ) = @_;
    # 入力データを保存する
}
(1)入力値エラーが発生した場合の処理

 入力値エラーが発生したかどうかは、$c->form->has_errorにより判定できるので、この例ではFillInFormプラグインによってコンテキストに追加されたfillformメソッドを使用してフォームにパラメータの値を設定しています。

 この例のように引数に何も指定しない場合には、自動的に$c->req->parametersが設定されます。

(2)入力値チェックにすべてパスした場合

 入力値チェックにパスした場合には、confirm2.ttテンプレートを指定し、ユーザーの判断を仰いだうえでcomplete2アクションに遷移するようにしています。

実行例

 このFillInFormとFormValidatorを使用したサンプルを実行してみましょう。次のURLをブラウザで表示させます。

http://<ホスト名またはIPアドレス><:Port>/input2

 今回は、不正な入力値を設定して登録を実行してみます。先ほどは入力フィールドには値が設定されていませんでしたが、今回の例では、入力フィールドにはSubmit前に設定した値が入力されていることが確認できます。

FillInForm/FormValidatorサンプルを実行した画面
FillInForm/FormValidatorサンプルを実行した画面

 それぞれの入力フィールドにさまざまな値を入力して、どのような結果が表示されるかを試してみてください。

まとめ

 本記事では、フォーム処理を実装するのに役立つ、フォームのパラメータ検証、フォームのパラメータに値を自動的に設定するプラグインについて紹介しました。

 次回は、今回は触れられなかった複数フォームにまたがった一連のトランザクションを実現するためのコントローラモジュールや、小粒ですがちょっとした作業などを便利にしてくれるプラグインなどを紹介します。

参考資料

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Webアプリケーションフレームワーク「Catalyst」入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

WINGSプロジェクト 花田 善仁(ハナダ ヨシヒト)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5717 2011/02/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング