Mojoliciousスタートアップ - Perl新規Web開発

会員登録フォームの作成

会員登録フォームを作成してみましょう。

Mojoliciousスタートアップでは、ユーザーIDを自分で作成できる会員登録機能の実装方法を解説します。

アカウント登録と呼ばれている機能も、会員登録の機能と同じです。

会員登録のユーザー情報

会員登録に最低限必要なものは以下です。

  • ユーザーID
  • パスワード
  • メールアドレス

メールアドレスが必須なのは、メールアドレスを使って、ユーザー認証を行うからです。ユーザーのメールアドレスは、ユーザー本人しか受信できないと想定できるものです。ユーザー本人しか知りえない情報を使って、ユーザーを認証を行うために、メールアドレスが必要です。

サービスの内容によって、以下の情報を取得することもあります。

  • 氏名
  • 住所
  • 電話番号
  • 希望条件

Mojoliciousスタートアップでは、これらの情報も任意で登録できるように実装してみます。

会員登録フォームの作成

会員登録フォームを作成してみましょう。

次のような会員フォームを作成できます。

会員登録フォームのサンプル

<div class="signup">
  <div class="signup-block">
    <form action="<%= url_for %>" method="POST">
      <div class="signup-title">会員登録</div>
      <%= text_field 'mail', placeholder => 'メールアドレス' %>
      <%= text_field 'code', placeholder => 'ユーザーID' %>
      <%= password_field 'password', placeholder => 'パスワード' %>
      <%= submit_button '会員登録する' %>
      <%= hidden_field 'op' => 'register' %>
    </form>
  </div>
</div>

登録フォームのスタイルシートは「public/css/default.css」に記述してください。スマートフォン対応のCSS設定がされていることが前提になります。

  /* 会員登録 */
  .signup {
    
  }
  .signup-title {
    font-weight:bold;
    text-align:center;
    font-size:18px;
  }
  .signup-block {
    width:calc(100% - 15px);
    max-width:500px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    border:1px solid #ddd;
    border-radius:5px;
  }
  .signup-title {
    
  }
  .signup input[type=text], .signup input[type=password] {
    display:block;
    width:calc(100% - 15px);
    margin-left:auto;
    margin-right:auto;
    margin-top:12px;
    margin-bottom:12px;
    padding:8px 10px;
    border-radius:3px;
    border:1px solid #ddd;
    font-size:16px;
  }
  .signup input[type=submit] {
    display:block;
    width:calc(50%);
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    background:#D82E5D;
    border:1px solid #D82E5D;
    color:white;
    padding:10px 0;
    border-radius:5px;
    cursor:pointer;
  }

タグヘルパー

「text_field」「password_field」というのは、Mojoliciousのタグヘルパーです。text_fieldは、自動的にフォームに値を復元してくれるので便利です。たとえば、フォームの内容に間違いがあった場合に、同じ画面を表示することになりますが、このときに、値を自動的に復元してくれるのです。

actionのurl_forメソッド

url_forメソッドに引数を与えなかった場合は、現在のURLを返してくれます。現在のURLのPOSTの処理で、この後の処理を行います。

仮登録の処理

仮登録の処理であることが明示的にわかるように、隠しフィールドとして「op」という名前で「register」という値を設定しています。

      <%= hidden_field 'op' => 'register' %>