0

【保存版】フォームブリッジ7個のおすすめカスタマイズ

10 min 886 views

目次

はじめに

最近フォームブリッジでの作業が多くなってきて、個人的な整理も含めて、よく使うカスタマイズをシェアしたいと思います。

CSS編
  1. 必須項目の「＊」（アスタリスク）を【必須項目】という文字列に置き換える設定
  2. 入力枠の線を濃くする設定
  3. 注記の色を変更する設定
JavaScript編
  1. ラジオボタン、ドロップダウンの必須の初期値を選択しない設定
  2. 必須項目が隠れている場合にでも回答できる設定
  3. 郵便番号から住所を自動で入力する設定
  4. ひらがなをカタカナにする設定
参考

フォームブリッジ│kintone（キントーン）連携サービス – kintone（キントーン）連携サービス

fb.kintoneapp.com

CSS編

まずは、CSSのおすすめカスタマイズを紹介していきます。

以下で、CSSのコードを記載しておりますが、こちらは必ず文字コードは「UTF-8」で保存してください。

直観的に「＊」（アスタリスク）が必須項目であるとわかりそうですが、知らない人にとっては、まったくわからないので、アスタリスクを【必須項目】等の文字列に置き換えます。

以下のコードで、「＊」（アスタリスク）を【必須項目】という文字列に置き換えます。

.ui.form .required.field>label:after {
    content: "【必須項目】" !important;
    margin: 0% !important;
}

上記コードの” “（ダブルクォーテーション）で囲まれたところに指定の文字列を入力します

デフォルト設定
CSSカスタマイズ

デフォルトの設定だと、入力する枠がやや薄い色で、高齢者の方が見えづらいなどの不具合があります。
そこで、以下のコードで、各入力枠の色を濃くしていきます。

/* 入力の枠を黒くする */
.el-input{
	border: 1px solid #090909;
}
/* 入力(複数行)の枠を黒くする */
.el-textarea{
	border: 1px solid #090909;
}
/* ラジオボタンの枠を黒くする */
span.el-radio__inner{
	border-color: #090909;
}
/* チェックボックスの枠を黒くする */
span.el-checkbox__inner{
	border-color: #090909;
}
デフォルト設定
CSSカスタマイズ

各項目に注釈がつけられるのですが、せっかくならこちらの色を変えたいなと思ったりします。そんな時は、以下のコードで設定できます。

.help-content{
    color:blue !important;
}
デフォルト設定
CSSカスタマイズ

JavaScript編

続いてJavaScriptのカスタマイズを紹介していきます。

ラジオボタンは、デフォルトの設定で必ずどれかに選択しないといけない仕様となっておりますが、初期値ではどの項目にもつけたくない場合があると思います。
そんな時に、以下のコードで設定できます。

(function() {
    "use strict";
    fb.events.form.created = [function(state) {
        state.record.ここにフィールドコードを入力.value = "";
        return state;
    }];
})();

ラジオボタンだけでなく、ドロップダウンでも同様に設定できます。

ただし、こちらのコードは、確認画面を設定したり、あるいは、ページを遷移させたりする場合、戻るとせっかく回答した部分までリセットされてしまいます。

ページ遷移や確認画面を設定する場合は、以下のコードで設定できます。

(function() {
    "use strict";

    let confirm = false;

    fb.events.form.mounted.push(function(state) {
        if (!confirm) return;
        let count = state.form.stepSize - 1
        while (count) {
            document.querySelector('.fb-next').click();
            count--;
        };
    })

    fb.events.confirm.mounted.push(function(state) {
        confirm = true;
    })

    fb.events.form.created.push(function(state) {
        if (confirm) return;
        state.record.ここにフィールドコードを入力.value = "";
        return state;
    });

})();
参考

Security check

developer.cybozu.io

条件分岐を使用する場合ですが、条件分岐で例えばラジオボタンなどの必須項目を非表示するケースがあると思います。その際、デフォルトの設定ですと、最後に回答ができない状態となってしまいますが、それを解消する設定が以下となります。

参考

条件分岐によって必須項目が隠れても、回答を完了できます！

kintoneapp BLOG

ただし、こちらも条件によっては、必須項目が見えている場合に、次に進めてしまうケースが存在します。ので、そんなときは、以下のコードを設定します。

! function (e) {
  function n(t) {
    if (r[t]) return r[t].exports;
    var o = r[t] = {
      i: t,
      l: !1,
      exports: {}
    };
    return e[t].call(o.exports, o, o.exports, n), o.l = !0, o.exports
  }
  var r = {};
  n.m = e, n.c = r, n.d = function (e, r, t) {
    n.o(e, r) || Object.defineProperty(e, r, {
      configurable: !1,
      enumerable: !0,
      get: t
    })
  }, n.n = function (e) {
    var r = e && e.__esModule ? function () {
      return e.default
    } : function () {
      return e
    };
    return n.d(r, "a", r), r
  }, n.o = function (e, n) {
    return Object.prototype.hasOwnProperty.call(e, n)
  }, n.p = "/", n(n.s = 928)
}({
  928: function (e, n) {
    var r = {},
      t = function (e, n) {
        switch (n.rule) {
        case "=":
          return e[n.field].value === n.value;
        case "!=":
          return e[n.field].value !== n.value;
        case "In":
          return -1 !== e[n.field].value.indexOf(n.value);
        case "Not in":
          return -1 === e[n.field].value.indexOf(n.value)
        }
        return !0
      },
      o = function (e, n) {
        return "and" === n.logical ? n.rules.reduce(function (n, r) {
          return n && t(e, r)
        }, !0) : n.rules.reduce(function (n, r) {
          return n || t(e, r)
        }, !1)
      },
      u = function (e, n, t) {
        e.fields.filter(function (e) {
          return -1 !== n.indexOf(e.code)
        }).forEach(function (e) {
          e.show = false, e.validations = []
        })
        t.forEach(function (n) {
          var t = o(e.record, n);
          e.fields.filter(function (e) {
            return -1 !== n.fields.indexOf(e.code)
          }).forEach(function (e) {
            if(!t) return;
            e.show = true, e.validations = e.validations.concat(r[e.code])
          })
        })
      };
    fb.events.form.created.push(function (e) {
      return e.form.isBranchForm && (e.fields.forEach(function (e) {
        r.hasOwnProperty(e.code) || (r[e.code] = e.validations)
      }), e.form.branches.forEach(function (n) {
        n.fields.forEach(function (e) {
          fb.events.fields[e].changed.push(function (e) {
            return u(e, n.availableFields, n.conditions), e
          })
        }), u(e, n.availableFields, n.conditions)
      })), e
    })
  }
});
参考

Security check

developer.cybozu.io

住所を回答してもらう場合に、最近では、郵便番号を入れると、うまいこと住所を自動で入れてくれたりします。こちらについては、以下のサイトを参照してJavaScriptカスタマイズにURLを設定すれば対応できます。

参考

郵便番号を入力するだけで、住所の入力を自動化出来ます！！

kintoneapp BLOG

ただし、こちらは、住所を2回回答してもらう場合にはうまく機能しません。

そんな時は、以下のように設定してみてください。

ただし、こちらはやや難易度があがりまして、JavaScriptの知識がない方は、お近くの詳しい方に相談してみてください。

まず、以下のjQueryのURLを読み込みます。

https://code.jquery.com/jquery-2.1.0.min.js

続いて、以下のコードを入れていきます。

(function() {
    "use strict";
    
    //=====================================
    //郵便番号の値を変更した際のイベント①
    //=====================================
    fb.events.fields.postal_code.changed = [function (state) {
    
    //郵便番号Aの値を取得
    var zip = state.record.postal_code.value.substr( 0, 3 );
    var zcode = state.record.postal_code.value.substr( 3, 4 );
    
    //URL設定(http://zipaddress.net/のAPIを使用)
    var url = 'https://madefor.github.io/postal-code-api/api/v1/' + zip + '/' + zcode + '.json';
    
    $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json'
    })
    .done((data) => {
    //住所フィールドに値を入力
    //====================================================
    //pref: 都道府県の文字列
    //city: 市区町村の文字列
    //town: 町域名の文字列
    //address: 市区町村の文字列（cityとtownを結合したもの）
    //fullAddress: 都道府県+市区町村+町域名の結合文字列
    //====================================================
    state.record.prefecture.value = data.data[0].ja.prefecture;
    state.record.city.value = data.data[0].ja.address1;
    state.record.area.value = data.data[0].ja.address2;
    })
    .fail((data) => {
    // console.log(data);
    })
    .always((data) => {
    });
    
    return state;
    
    }];
    
    
    //=====================================
    //郵便番号の値を変更した際のイベント②
    //=====================================
    fb.events.fields.postal_code1.changed = [function (state) {
    
    //郵便番号Aの値を取得
    var zip = state.record.postal_code1.value.substr( 0, 3 );
    var zcode = state.record.postal_code1.value.substr( 3, 4 );
    
    //URL設定(http://zipaddress.net/のAPIを使用)
    var url = 'https://madefor.github.io/postal-code-api/api/v1/' + zip + '/' + zcode + '.json';
    
    $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json'
    })
    .done((data) => {
    //住所フィールドに値を入力
    //====================================================
    //pref: 都道府県の文字列
    //city: 市区町村の文字列
    //town: 町域名の文字列
    //address: 市区町村の文字列（cityとtownを結合したもの）
    //fullAddress: 都道府県+市区町村+町域名の結合文字列
    //====================================================
    state.record.prefecture1.value = data.data[0].ja.prefecture;
    state.record.city1.value = data.data[0].ja.address1;
    state.record.area1.value = data.data[0].ja.address2;
    })
    .fail((data) => {
    // console.log(data);
    })
    .always((data) => {
    });
    
    return state;
    
    }];
    
    })();

それでは最後にひらがなをカタカナに強制的にする設定を紹介します。

名前を回答してもらう際に、フリガナを入力してもらうことがあると思いますが、まれに気づかないうちにひらがなで入力してしまって、そのまま回答してしまうというケースもあるかと思います。

そんな時、以下のコードを設定すると、強制的にひらがなをカタカナに変換してくれます。

(function() {
  'use strict';

  function hiraToKana(str) {
    return str.replace(/[\u3041-\u3096]/g, function(match) {
      var chr = match.charCodeAt(0) + 0x60;
      return String.fromCharCode(chr);
    });
  }

  fb.events.form.confirm = [
    function(state) {
      var kana = state.record.フィールドコード;
      kana.value = hiraToKana(kana.value);
      return state;
    },
  ];
})();
参考

Security check

developer.cybozu.io

さいごに

いかがだったでしょうか。ほかにもいろいろなカスタマイズがありますが、かなり良く使うものを厳選してみました。

私の場合ですと、何かわからないことがあった場合は、以下のコミュニティから検索してみて、それでも解決しない場合は、その場で投稿して聞いてみることをお勧めいたします。

参考

Security check

developer.cybozu.io
0
<PREV
Hatchfulで東京文久堂のロゴを作成！簡単ロゴ作成アプリのご紹介
NEXT>
もはや関数不要！Excelでスペースを削除する方法
関連記事