InputManJSの検証コントロールでトースト通知を使ってみる

日本仕様の入力用JavaScriptコントロールセット「InputManJS（インプットマンJS）」の「V5.1J」では、GcValidator（検証）コントロールで使用可能な通知の種類として「トースト通知」が追加されています。

本記事では、トースト通知の基本的な使い方とカスタマイズの方法について紹介します。

開発環境の準備とInputManJSの参照
検証コントロールにトースト通知を実装する
トースト通知のカスタマイズ
テンプレートを使ったトースト通知
さいごに

開発環境の準備とInputManJSの参照

今回は開発環境として以下を使用します。

作成するファイルは以下の3つです。

index.html	ページ本体。ページの要素としてGcTextBoxを配置します
app.js	GcTextBoxとGcValidatorを作成するコードを記載します
style.css	各種ページ要素のスタイル定義を記載します

GcTextBoxコントロールとGcValidatorコントロールを使用するには、InputManJSのモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接モジュールを配置していきます。あらかじめInputManJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

css/gc.inputman-js.css
scripts/gc.inputman-js.ja.js

検証コントロールにトースト通知を実装する

それではGcValidatorコントロールのトースト通知を実装するサンプルを作成していきます。ここでは、入力コントロールとしてGcTextBoxコントロールを使います。

最初に、前述の各モジュールと「app.js」および「styles.css」への参照設定をHTMLファイルに追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>InputManJSのトースト通知</title>

  <!-- ローカルのライブラリを参照する場合 -->
  <link rel="stylesheet" href="css/gc.inputman-js.css" />
  <script src="scripts/gc.inputman-js.ja.js"></script>

  <!-- CDNからライブラリを参照する場合 -->
  <!-- <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css">
    <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script> -->

  <link rel="stylesheet" href="css/styles.css" />
  <script src="scripts/app.js"></script>
</head>

<body>
  <div class="container">
    <input id="gcTextBox1">
  </div>
</body>

</html>

続いて「app.js」を以下のように作成します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

このコードでは、gcTextBox1とgcValidator1を生成し、gcValidator1のruleSetに GC.InputMan.ValidateType.Requiredを設定して必須入力検証を行います。また、defaultNotifyのfailプロパティにtoastを追加して検証失敗時のトースト通知を実装します。ここではtoastプロパティ（ToastNotifyConfig インターフェイス）に何も設定しないので、既定値が反映された状態でトースト通知が表示されます。トースト通知の各プロパティについては、次項で詳しく解説します。また、下記の「・・・（中略）・・・」についても以降の項目で解説します。

// ライセンスキーの設定
// GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

let gcTextBox1;
let gcValidator1;

document.addEventListener('DOMContentLoaded', () => {
  // InputManJSコントロールのデザインの指定
  GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;

  // GcTextBoxコントロールの生成
  setGcTextBoxControl();

  // GcValidatorコントロールの生成
  setGcValidator();
});

// GcTextBoxコントロールの生成
const setGcTextBoxControl = () => {
  gcTextBox1 = new GC.InputMan.GcTextBox(
    document.getElementById('gcTextBox1'), {
    watermarkDisplayNullText: "必須入力の項目です",
    width: 200,
  });
};

// GcValidatorコントロールの生成
const setGcValidator = () => {
  gcValidator1 = new GC.InputMan.GcValidator({
    items: [
      {
        control: gcTextBox1,
        ruleSet: [
          {
            //「必須入力」の検証
            rule: GC.InputMan.ValidateType.Required,
            successMessage: (control) => `値が入力されました。`,
            failMessage: (control) => `値が入力されていません。`,
          }
        ],
        validateWhen: GC.InputMan.ValidateWhen.LostFocus,
      }
    ],
    defaultNotify: {
      // 検証失敗の通知
      fail: {
        toast: {
        },
      },
      // 検証成功の通知
      ・・・（中略）・・・
    }
  });
}

// 検証失敗時のテンプレート作成
・・・（中略）・・・

// 検証成功時のテンプレート作成
・・・（中略）・・・

最後に「styles.css」にスタイルを記述します。

/* GcTextBoxのスタイル */
.gcim_watermark_null {
  color: gray;
}

/* トースト通知のスタイル */
.toast {
  border-radius: 0;
  block-size: 100px;
  inline-size: 280px;
}

.toast.fail {
  background-color: lavenderblush;
}

.toast.success {
  background-color: lavender;
}

.toast-icon {
  inline-size: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* レイアウト用コンテナのスタイル */
.container {
  border: 1px solid silver;
  block-size: 300px;
  inline-size: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

以上を記述した後にアプリケーションを実行し、gcTextBox1からフォーカスアウトすると、次のようにトースト通知が表示されます。

トースト通知のカスタマイズ

トースト通知の動作は、次の階層構造の末尾のToastNotifyConfigインターフェイスの各プロパティでカスタマイズできます。

GcValidatorクラスのコンストラクタ
- ValidateSettingインターフェイスのdefaultNotifyプロパティ
  - NotifySettingインターフェイスのtoastプロパティ
    - ToastNotifyConfigインターフェイス

ToastNotifyConfigインターフェイスの各プロパティは、次のとおりです。デモの「説明」でも解説しているので、ご一読いただければと思います。

プロパティ	説明	既定値
className	トーストのスタイルを指定するクラス名	–
duration	トーストの表示時間（秒単位）	4.5
pauseOnHover	マウスホバー時の一時停止	true
position	トーストの表示位置	topright
showClose	閉じるボタンの表示	true
showProgress	プログレスバーの表示	false
template	トーストのテンプレート	–
title	トーストのタイトル	検証に失敗（成功）しました

この中のpositionプロパティに設定できるToastPosition列挙型は次の6個です。

ToastPosition 列挙型	説明
GC.InputMan.ToastPosition.BottomCenter（bottomcenter）	下中央
GC.InputMan.ToastPosition.BottomLeft（bottomleft）	左下
GC.InputMan.ToastPosition.BottomRight（bottomright）	右下
GC.InputMan.ToastPosition.TopCenter（topcenter）	上中央
GC.InputMan.ToastPosition.TopLeft（topleft）	左上
GC.InputMan.ToastPosition.TopRight（topright）	右上

ここでは、トースト通知の各プロパティを次のように設定して、トースト通知が左上から3秒間だけ表示されるようにします。また、showProgressプロパティをtrueに設定してプログレスバーを表示し、titleプロパティを既定値の「検証に失敗しました」から「検証失敗」に変更しています。

・・・（中略）・・・
toast: {
  title: '検証失敗',
  position: GC.InputMan.ToastPosition.TopLeft,
  duration: 3,
  pauseOnHover: true,
  showClose: true,
  showProgress: true,
},
・・・（中略）・・・

以上を記述してアプリケーションを実行すると以下のようになります。

トースト通知の上にマウスポインタが配置されている間はプログレスバーが一時停止され、トースト通知が閉じられることはありません。閉じるボタンがクリックされたときにはトースト通知がクローズされます。

また、上記の動画では省略していますが、トースト通知上にマウスポインタがない状態で3秒が経過したときもトースト通知がクローズされます。

テンプレートを使ったトースト通知

続いて、テンプレートを作成してトースト通知をカスタマイズする方法を紹介します。ここでは、テンプレートを使ってアイコンと文字列の配置を変更し、ToastNotifyConfigインターフェイスのclassNameプロパティを設定してトースト通知の背景色と四隅の形状（角丸／直角）を変更します。またここでは、defaultNotifyプロパティのfail（検証失敗）に加えてsuccess（検証成功）についても設定しています。

それでは、前項で記述したdefaultNotifyの内容を下記のように置き換えましょう。

・・・（中略）・・・
defaultNotify: {
  // 検証失敗の通知
  fail: {
    toast: {
      title: '検証失敗',
      position: GC.InputMan.ToastPosition.TopLeft,
      duration: 3,
      pauseOnHover: true,
      showClose: true,
      showProgress: true,
      className: "toast fail",
      template: templateFail,
    },
  },
  // 検証成功の通知
  success: {
    toast: {
      title: '検証成功',
      position: GC.InputMan.ToastPosition.BottomRight,
      duration: 3,
      pauseOnHover: true,
      showClose: true,
      showProgress: true,
      className: "toast success",
      template: templateSuccess,
    },
  },
}
・・・（中略）・・・

続いて、templateプロパティに設定しているtemplateFailとtemplateSuccessを次のように記述します。

・・・（中略）・・・
// 検証失敗時のテンプレート作成
const templateFail = (context) => {
  const content = document.createElement('div');
  content.style.display = "flex";
  content.innerHTML = `
    <div class="toast-icon">
      <img src="images/ng.png" height="50px" width="50px">
    </div>
    <div>
      <p>検証失敗</p>
      <p style="color:red;">${context.message}</p>
    </div>
  `;
  
  // クリック時にトースト通知をクローズ
  content.addEventListener('click', () => {
    context.close();
  });
  
  return content;
}

// 検証成功時のテンプレート作成
const templateSuccess = (context) => {
  const content = document.createElement('div');
  content.style.display = "flex";
  content.innerHTML = `
    <div class="toast-icon">
      <img src="images/ok.png" height="50px" width="50px">
    </div>
    <div>
      <p>検証成功</p>
      <p style="color:blue;">${context.message}</p>
    </div>
  `;

  // クリック時にトースト通知をクローズ
  content.addEventListener('click', () => {
    context.close();
  });
  
  return content;
}
・・・（中略）・・・

テンプレートを設定した場合は、ToastNotifyConfigインターフェイスのtitleプロパティとshowCloseプロパティは無視されるので、必要に応じてテンプレート内に独自に実装する必要があります。上記では、タイトルをHTMLのp要素で設定し、トースト通知をクリックしたときにクローズするようにしています。

context.messageやcontext.close()などのテンプレートのcontex引数で使用可能な機能については、APIリファレンスのToastTemplateContext インターフェイスで解説しているので、そちらもご確認いただければと思います。

以上の変更と追加を行ってからアプリケーションを実行すると、検証成功時と検証失敗時にトースト通知が表示されます。また、トースト通知の上にマウスポインタを配置したときにプログレスバーが停止する動作、および指定時間（マウスポインタが外れた状態の合計時間）が経過したときとトースト通知がクリックされたときに、トースト通知がクローズされる動作を確認できます。

今回ご紹介したGcValidatorコントロールの新しい検証規則の機能は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

また、GcValidatorコントロールとGcTextBoxコントロールの詳細については以下もご覧ください。

GcValidatorコントロール
- デモ
- APIリファレンス
GcTextBoxコントロール
- デモ
- APIリファレンス

さいごに

今回の記事では、「InputManJS」に含まれるGcValidatorコントロールで「トースト通知」を使って検証結果を知らせる方法についてご紹介しました。

InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーのきめ細かい入力フォームの開発に、ぜひInputManJSをご検討いただければと思います。

製品サイトでは、InputManJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／