jQuery

jQuery Validation Plugin で入力項目をValidation（検証）する方法

2022年10月16日 by single コメントはまだありません

Contents

jQuery Validation Plugin で入力項目をValidation（検証）する方法

今回はjQueryプラグイン「jQuery Validation Plugin」を利用し、入力項目を検証する方法を紹介します。

jQuery Validation Plugin導入方法

セットアップ方法

ダウンロードの場合

まず、Githubのページに行き、ライブライ一式をダウンロードしてください。

GitHubのページで「Code」リストから『Download ZIP』を選択し書庫ファイルをダウンロードしてください。

ダウンロードした書庫ファイルを解凍すると以下のようなディレクトリ／ファイルが展開されます。

今回は「（ウェブルート）/assets/jquery-validation-1.19.5/」に展開しました。

適時配置ください。

コーディング方法

HTMLでコーディングする場合、ダウンロードしたライブラリを読み込んでください

jQueryライブラリロード

まず最初にjQueryのライブラリを読み込んでください。

この記事を書いている時点でのバージョンは「Current version: 1.19.5」です。この場合、jQuery Validation Pluginのホームページには対応しているjQueryのバージョンは以下の通りに記載されています。

ですので、ここではjQueryのバージョン「3.1.1」を読み込みます。

ダウンロードした書庫ファイルにjQueryのライブラリも添付されてます。

解凍し展開した書庫ファイルの直下に「lib」というディレクトリがあり、その配下にjQueryのライブラリがあります。ここでは『jquery-3.1.1.js』を読み込みます。

<script src="/assets/jquery-validation-1.19.5/lib/jquery-3.1.1.js"></script>

jQuery Validationライブラリ読み込み

次にjQuery Validationのライブラリを読み込みます。解凍し展開した書庫ファイルの直下にある「dist」ディレクトリにある『jquery.validate.js』または『jquery.validate.min.js』を読み込みます。

<script src="/assets/jquery-validation-1.19.5/dist/jquery.validate.js"></script>

CDNの場合

書庫ファイル一式をダウンロードしなくても、公開されているファイルをリンクすれば、実装できます。

コーディング方法
jQueryライブラリロード

まず最初にjQueryのライブラリを読み込んでください。

この記事を書いている時点でのバージョンは「Current version: 1.19.5」です。この場合、jQuery Validation Pluginのホームページには対応しているjQueryのバージョンは以下の通りに記載されています。

ですので、ここではjQueryのバージョン「3.1.1」を読み込みます。

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>

なお、他のバージョンを利用したい場合には、以下のページを参照し適時、読み込むようにしてください。

Query Validationライブラリ読み込み

次にjQuery Validationのライブラリを読み込みます。CDNとして公開されたリンクがありますので、そこから『jquery.validate.js』または『jquery.validate.min.js』を読み込みます。

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>

実装方法

HTMLマークアップ

まず、普通にHTMLでINPUTタグなどを用いて入力項目を設定します。

まずformタグでフォームを準備します。

<form id="myForm" method="get" action="#">
  ...
</form>

次にINPUTタグで入力項目を設定します。

<form id="myForm" method="get" action="#">
  <input id="fullname" name="namae" minlength="2" type="text" required />
  <input id="email" type="email" name="email" required>
  <input id="homepage" type="url" name="homepage">
  <input id="height" type="number" name="height" step="0.1" required>
  ...
   <input class="submit" type="submit" value="送信">
</form>

属性に、必須である属性『required』や、入力最小文字列制限属性『minlength』、INPUTタグのタイプ「email」などを設定することで、入力チェックの属性を加えることができます。

入力チェックを実行するトリガーのsubmitボタンも設定しておいてください。

jQuery Validation初期化

最後にjQuery Validationを初期化します。

<script>
  $("#myForm").validate();
</script>

なお、初期化時、オプションを指定することで、カスタマイズもできます。

デフォルトで利用する

まず、特にオプションなども指定せず、そのまま利用する場合のサンプルになります。

サンプル

一つのテキストボックスだけサンプルを実装しておきます。

入力せずに「送信」ボタンを押してみてください。すると、エラーメッセージなどが表示されるようになると思います。

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>jQuery Validation demo(2)</title>
    <!-- CDN jQuery https://releases.jquery.com/jquery/ -->
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>
  </head>
<body>
<form id="myForm" method="get" action="#">
  <fieldset>
    <legend>入力項目チェック</legend>
    <p>
      <label for="fullname">名前 (入力必須, ２文字以上入力してください)</label>
      <input id="fullname" name="fullname" minlength="2" type="text" required />
    </p>
    <p>
      <label for="alphabet">ローマ字 (入力必須, ３文字以上入力してください)</label>
      <input id="alphabet" name="alphabet" minlength="3"  required />
    </p>
    <p>
      <span>性別 (選択必須)</span>
      <input id="male"   name="gender" type="radio" required /><label for="male">男</label>
      <input id="female" name="gender" type="radio" required /><label for="female">女</label>
    </p>
    <p>
      <span>規約 (選択必須)</span>
      <input id="agree"  name="agree" type="checkbox"  required /><label for="agree">同意する</label>
    </p>
    <p>
      <span>生年月日 (選択必須)</span>
      <input id="birthday"  name="birthday" type="date" min="2017-04-01" max="2017-04-30" required />
    </p>
    <p>
      <span>利用開始年月 (選択必須)</span>
      <input id="startmonth"  name="startmonth" type="month" required />
    </p>
    <p>
      <span>登録日時 (選択必須)</span>
      <input id="registrationtime"  name="registrationtime" type="datetime-local" required />
    </p>
    <p>
      <label for="email">E-mail (入力必須)</label>
      <input id="email" type="email" name="email" required>
    </p>
    <p>
      <label for="homepage">URL (入力任意)</label>
      <input id="homepage" type="url" name="homepage">
    </p>
    <p>
      <label for="height">身長(cm) (入力必須)</label>
      <input id="height" type="number" name="height" step="0.1" required>
    </p>
    <p>
      <label for="creditcard">クレジットカード (入力必須)</label>
      <input id="creditcard" type="text" name="creditcard" required>
    </p>

    <p>
      <label for="comment">コメント (入力必須)</label>
      <textarea id="comment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="送信">
    </p>
  </fieldset>
</form>
<script>
  $("#myForm").validate();
</script>
</body>
</html>

デモ

エラーメッセージを日本語化する

デフォルトではエラーメッセージは英語になっています。以下のように定義されています。

messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
step: $.validator.format( "Please enter a multiple of {0}." )
},

Javascriptを直接変更しても日本語化できますが、ライブラリも用意されています。

ダウンロードの場合

「dist」の下の「localization」というディレクトリの中に日本語ファイルがありますのでそれを読み込んでください。

<script src="/assets/jquery-validation-1.19.5/lib/jquery-3.1.1.js"></script>
<script src="/assets/jquery-validation-1.19.5/dist/jquery.validate.js"></script>
<script src="/assets/jquery-validation-1.19.5/dist/localization/messages_ja.js"></script>

CDNの場合

ローカライズファイルも公開されたリンクで提供されているので、それを読み込んでください。

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>

デモ

オプションを指定してカスタマイズして利用する

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>jQuery Validation demo(3)</title>
   <!-- CDN jQuery https://releases.jquery.com/jquery/ -->
   <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>
  <style type="text/css">
  .error {
    border: 3px solid red;
  }
  /* 入力チェックNGの場合に適用されるスタイル */
  label.error {
    border: 3px solid orange;
    margin-left:3px
  }
  /* 入力チェックOKの場合に適用されるスタイル */
  .valid {
    border: 3px solid blue !important;
  }
  </style>
</head>
<body>
  <div class="errMsg"><span></span></div>
  <div id="summary"></div>
<form id="myForm" method="get" action="#">
  <fieldset>
    <legend>入力項目チェック</legend>
    <p>
      <label for="fullname">名前 (入力必須)</label>
      <input id="fullname" name="fullnameN" type="text"  />
    </p>
    <p>
      <label for="alphabet">ローマ字 (入力必須, ３～１０文字で入力してください)</label>
      <input id="alphabet" name="romaji" />
    </p>
    <p>
      <label for="email1">E-mail1 (入力必須)</label>
      <input id="email1" type="text" name="contact1"  placeholder="test@example.co.jp" >
    </p>
    <p>
      <label for="email2">E-mail2 (入力任意)</label>
      <input type="checkbox" id="contactform_email" name="contactform_email"  /><label for="contactform_email">別の連絡先も設定する</label>
      <input id="email2" type="text" name="contact2" >
    </p>
    <p>
      <label for="age">年齢 (入力必須)</label>
      <input id="age" type="text" name="nenrei" >
    </p>
    <p>
      <label for="year">西暦 (入力必須)</label>
      <input id="year" type="text" name="kotoshi" >
    </p>
    <p>
      <label for="month">今月 (入力必須)</label>
      <input id="month" type="text" name="kongetsu" >
    </p>
    <p>
      <label for="bodyheight">身長 (入力必須)</label>
      <input id="bodyheight" type="text" name="shincho" >
    </p>
    <p>
      <label for="even">偶数 (入力必須)</label>
      <input id="even" type="text" name="gusu" >
    </p>
    <p>
      <label for="ymd">年月日 (入力必須)</label>
      <input id="ymd" type="text" name="hiduke" >
    </p>
    <p>
      <label for="homepage">URL (入力任意)</label>
      <input id="homepage" type="text" name="homepage">
    </p>
    <p>
      <label for="comment">コメント (入力必須→無視)</label>
      <textarea id="comment" class="ignore" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="送信">
    </p>
  </fieldset>
</form>
<script>
/* Validation初期化 */
$("#myForm").validate({
  /* 入力項目定義 */
  rules: {
    /* 名前 */
    fullnameN: "required",
    /* ローマ字 */
    romaji: {
      required: true,
      minlength: 3,
      maxlength: 10
    },
    /* E-mail1  */
    contact1: {
      required: true,
      email: true,
      /* postで「/demo/check-email.php」に送信 */
      /* mailaddr=(入力メールアドレス) postします */
      remote: {
        url: "/demo/check-email.php",
        type: "post",
        data: {
          mailaddr: function() { 
            return $( "#email1" ).val();
          }
        }
      }
    },
    /* E-mail2 */
    contact2: {
      required: {
        /* チェックボックスONの場合のみ有効 */
        depends: function(element) {
         return $("#contactform_email").is(":checked"); 
        } 
     },
      email: {
        /* チェックボックスONの場合のみ有効 */
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    },
    /* E-mail2 */
    shincho: {
      required: true,
      number: true,
      rangelength: [2, 8]
      ,step:0.1
    },
    /* 年齢  */
    nenrei: {
      required: true,
      number: true,
      range: [18, 65]
    },
    /* 西暦  */
    kotoshi: {
      required: true,
      number: true,
      min: 1,
      rangelength: [2, 4]
    },
    /* 今月 */
    kongetsu: {
      required: true,
      number: true,
      max: 12
    },
    /* 偶数  */
    gusu: {
      required: true,
      number: true,
      step:2
    },
    /* 日付 */
    hiduke: {
      required: true,
      dateISO: true
    },
    /* URL */
    homepage: {
      required: true,
      url: true
    }
  },
  /* メッセージ定義 */
  messages: {
    /* 名前 */
    fullnameN: {
      required: "名前の入力は必須です"
    },
    /* ローマ字 */
    romaji: {
      required: "ローマ字の入力は必須です",
      minlength: jQuery.validator.format("{0}以上の文字を入力してください"),
      maxlength: jQuery.validator.format("{0}文字以下の文字を入力してください")
    },
    /* E-mail1  */
    contact1: {
      required: "E-mail1の入力は必須です",
      email: "E-mail1にはアットマークを入れて正しいメールアドレス形式で入力してください",
      remote: "メールアドレスが『test@example.co.jp』ではありません。"
    },
    /* E-mail2  */
    contact2: {
      required: "『別の連絡先も設定する』をチェックした場合、E-mail2の入力は必須です。",
      email: "E-mail2にはアットマークを入れて正しいメールアドレス形式で入力してください"
    }
  },
  /* チェック無効対象のセレクタ */
  ignore: ".ignore",
  /* エラーメッセージのエレメント定義 */
  errorElement:'label',
  /* エラーメッセージのエレメントをラップするエレメント定義 */
  wrapper: "span",
  /* submit時の処理定義 */
  submitHandler: function(form) {
   alert('入力内容OK');
   form.submit();
  },
  /* チェックNG時の処理定義 */
  invalidHandler: function(event, validator) {
    // チェックNGの項目件数取得
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors + "項目の入力が正しくありません";
      $("div.errMsg span").html(message);
      $("div.errMsg").show();
    } else {
      $("div.errMsg").hide();
    }
  },
  /* 各項目のチェックOK時の処理 */
  success: function(label) {
    /* 項目チェックOK時のラベル設定 */
    label.addClass("valid");
    label.html("✔");
  },
  /* チェックNG時、エラーメッセージを表示する処理 */
  showErrors: function(errorMap, errorList) {
    var msg = '';
    errorList.forEach(function( errorItem ) {
      msg = msg + "ID：" + errorItem.element.id + " エラーメッセージ：" + errorItem.message + " " + errorItem.method + "<br />";
    });
    $("#summary").html(msg);
    /* 画面上部に設定される一覧以外に各項目でもエラーメッセージをデフォルト通り表示させる */
    this.defaultShowErrors();
  }
});
</script>
</body>
</html>

デモ

入力仕様を設定する

オプション「rules」を使い、入力仕様を設定します。

<input id="alphabet" name="romaji" />
<input id="email1" type="text" name="contact1" >
<script>
$("#myform").validate({
  /* 入力項目定義 */
  rules: {
    /* ローマ字 */
    romaji: {
      required: true,
      minlength: 3,
      maxlength: 10
    },
    /* E-mail1  */
    contact1: {
      required: true,
      email: true
    },
  }
});
</script>

rulesには配列で値を指定します。配列の名称には検証対象のオブジェクトのnameを指定してください。

かつ、値には、入力仕様を定義するようにしてください。

チェック種類

required

必須チェックのオプションです。trueにすると未入力／未設定の場合、エラーとなります。

remote

サーバサイドで入力チェックを行う場合のオプションです。

サンプルでは、入力したメールアドレスをサーバに送信し、サーバではPOSTされたメールアドレスが『test@example.co.jp』であるかをチェックしています。

$( "#myform" ).validate({
  rules: {
    /* E-mail1  */
    contact1: {
      required: true,
      email: true,
      /* postで「/demo/check-email.php」に送信 */
      /* mailaddr=(入力メールアドレス) postします */
      remote: {
        url: "/demo/check-email.php",
        type: "post",
        data: {
          mailaddr: function() { 
            return $( "#email1" ).val();
          }
        }
      }
    }
  }
});
サーバサイド（check-email.php）
<?php 

$rtn = 'false';
$searchStr = '';
/* 検索文字列取得*/ 
if (isset($_POST["mailaddr"]) ) {
  $searchStr =  $_POST["mailaddr"];

  if ($searchStr == 'test@example.co.jp'; ) {
    $rtn = 'true';
  }
}
echo $rtn;
 ?>

結果OKの場合は「true」を、結果NGの場合は「false」の文字列を返しています。

minlength

最小文字列数を定義できるオプションです。

maxlength

最大文字列数を定義できるオプションです。

rangelength

最小文字列数と最大文字列数を配列で指定できるオプションです。

kotoshi: {
  required: true,
  number: true,
  min: 1,
  rangelength: [2, 4]
},

min

最小値を指定できるオプションです。主に数値項目に使用するオプションになります。

max

最大値を指定できるオプションです。主に数値項目に使用するオプションになります。

range

最小値と最大値を配列で指定できるオプションです。主に数値項目に使用するオプションになります。

nenrei: {
  required: true,
  number: true,
  range: [18, 65]
}

step

増分値を指定できるオプションです。主に数値項目に使用するオプションになります。

例えば、「2」を指定した場合には、2の倍数しか指定できなくなります。

email

メールアドレスの妥当性をチェックするオプションです。文字列の途中にアットマーク（＠）がある必要があります。

url

URLの妥当性をチェックするオプションです。「http://」や「https://」で始まる文字列である必要があります。

date

日付の妥当性をチェックするオプションなのですが、

DEPRECATION warning:

This method is deprecated and will be removed in version 2.0.0.

Please don’t use it, since it relies on the Date constructor, which behaves very differently across browsers and locales. Use dateISO instead or one of the locale specific methods (in localizations/ and additional-methods.js).

[DEPRECATED] date method

とあり、次のバージョンからは削除されるオプションのようで、使用しないほうが良いと思います。

dateISO

日付の妥当性をチェックするオプションです。「yyyy-mm-dd」形式か「yyyy/mm/dd」形式を許容しているようです。ただ「2021-2-29」や「2022-11-31」などという存在しない日付を入力してもチェックOKが返ってくるなので、厳密な日付チェックはされていないようです。

number

数値としての妥当性をチェックするオプションです。数字のほかにプラスやマイナスの符号、小数点などが入力可能です。

digits

半角数字のみの入力しか受け付けなくなるオプションです。小数点や符号などの入力もNGです。

equalTo

特定の文字列と一致するかチェックするオプションです。指定する値は対象オブジェクトのセレクタになります。

$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});

サンプルではテキストボックスID「password」の入力した文字列がテキストボックス「password_again」との文字列と一致しているかをチェックしています。

チェック時に条件を付ける方法

「depends」オプションを指定すると別項目の状態によってそのチェックを有効にしたり無効にしたりすることができます。

/* E-mail2 */
contact2: {
  required: {
    /* チェックボックスONの場合のみ有効 */
    depends: function(element) {
     return $("#contactform_email").is(":checked"); 
    } 
 },
  email: {
    /* チェックボックスONの場合のみ有効 */
    depends: function(element) {
      return $("#contactform_email").is(":checked");
    }
  }
},

上記のサンプルの場合は、チェックボックス「contactform_email」がONの場合に限り、contact2テキストボックスの入力必須チェックやemailチェックを有効にしています。

エラーメッセージをカスタマイズするには？

オプション「messages」を使用することでエラーメッセージをカスタマイズできます。

<input id="alphabet" name="romaji" />
<script>
$("#myform").validate({
  /* 入力項目定義 */
  rules: {
    /* ローマ字 */
    romaji: {
      required: true,
      minlength: 3,
      maxlength: 10
    }
  },
  /* メッセージ定義 */
  messages: {
    /* ローマ字 */
    romaji: {
      required: "ローマ字の入力は必須です",
      minlength: jQuery.validator.format("{0}以上の文字を入力してください"),
      maxlength: jQuery.validator.format("{0}文字以下の文字を入力してください")
    }
  }
});
</script>

オプション「message」の配下にまずは、対象となるオブジェクトの「name」を定義します。その下に、チェック項目のオプションを定義し、値としてエラーメッセージを定義できます。

メッセージやオブジェクトのスタイルを変えるには？

エラー時のスタイル

デフォルトではCSSクラス『error』がエラーメッセージやテキストボックスに適用されます。

<style type="text/css">
.error {
  border: 3px solid red;
}
/* 入力チェックNGの場合に適用されるスタイル */
label.error {
  border: 3px solid orange;
  margin-left:3px
}
</style>

上記のサンプルでは、まず、赤い3px幅の枠線をテキストボックスに設定しています。

エラーメッセージ領域には、オレンジ色の3px幅の枠線を設定しています。

エラーメッセージ領域を「label」タグ以外にするには？

オプション「errorElement」でエラーメッセージ領域に設定できるタグを指定できます。デフォルトは『label』なので、サンプルのCSSでは「label.error」で定義しています。

なお、spanタグにする場合には「errorElement」に『span』を指定してください。

$("#myform").validate({
  errorElement: "span"  /* デフォルトはlabel */
});

チェックOK時のスタイル

チェックOK時に適用されるCSSクラスは「valid」です。

<style type="text/css">
/* 入力チェックOKの場合に適用されるスタイル */
.valid {
  border: 3px solid blue !important;
}
</style>

サンプルではテキストボックスなどのチェック対象オブジェクトに青い3px幅の枠線を設定しています。

チェックOK時のCSSクラスを変える、または、処理を加えるには？

オプション「success」で、CSSクラスを変更したり、チェックOK時に処理を設定することができます。

デフォルトは『valid』になっていて、成功時に適用されるCSSクラスになっています。

$("#myform").validate({
  success: function(label) {
    /* 項目チェックOK時のラベル設定 */
    label.addClass("valid");
    label.html("✔");
  }
});

サンプルではエラーメッセージ領域にOKの場合、『✔』印を設定してます。

チェックNG時の各項目にメッセージを表示しないで、サマリーでエラーメッセージを表示するには？

オプション「showErrors」を使用することで、エラーメッセージの表示を制御できます。

$("#myform").validate({
  showErrors: function(errorMap, errorList) {
    var msg = '';
    errorList.forEach(function( errorItem ) {
      msg = msg + "ID：" + errorItem.element.id + " エラーメッセージ：" + errorItem.message + " " + errorItem.method + "<br />";
    });
    $("#summary").html(msg);
    /* 画面上部に設定される一覧以外に各項目でもエラーメッセージをデフォルト通り表示させる */
    this.defaultShowErrors();
  }
});

showErrorsの関数第２引数の「errorList」はエラーが発生した項目件数分のリストになっています。

１件ごとのデータには「element」（エラー発生項目のelement）や「message」（エラーメッセージ）、「method」（チェック項目名）などが保存されています。

各項目のエラーメッセージ表示を止めるには？

showErrorsの関数の中で『defaultShowErrors()』を呼び出していますが、それを止めると、各項目に表示されるはずのエラーメッセージが表示されなくなります。

第２パラメータの「errorList」を用いて各自エラーメッセージを表示するようにしてください。

ご参考

関連ページ