Skip to content

フィールドコードの表示 - フォームブリッジ

はじめに

フォームブリッジをカスタマイズをする場合にフィールドコードを確認したい場合があります。 そのとき設定画面を開いて確認するのは面倒です。そこで簡単にフィールドコードを確認できるブックマークレットを作成したので紹介します。

できること

フォームを開いてブックマークレットを実行するとフィールドコードを赤文字で表示します。 また、フィールドコードをクリックするとフィールドコードをクリップボードにコピーします。

main1

ブックマークレットの作成

ブックマークレット化の手順は次のページを参考にしてください。

コード

{
const generateMainElement = (fieldCode) => {
const element = document.createElement("span");
element.textContent = fieldCode;
element.style.color = "red";
element.style.cursor = "pointer";
element.onclick = () => {
navigator.clipboard.writeText(fieldCode);
};
return element;
};
const generateSubElement = (fieldCodes) => {
const elements = fieldCodes.map((fieldCode) =>
generateMainElement(fieldCode)
);
const separator = document.createElement("span");
separator.textContent = " | ";
const parentElement = document.createElement("span");
parentElement.style.whiteSpace = "nowrap";
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
parentElement.appendChild(element);
if (i !== elements.length - 1) {
parentElement.appendChild(separator.cloneNode(true));
}
}
return parentElement;
};
for (const fieldCode of Object.keys(fb.events.fields)) {
const element = fb.getElementByCode(fieldCode);
if (!fb.getElementByCode(fieldCode)) continue;
element.prepend(generateMainElement(fieldCode));
if ("fields" in fb.events.fields[fieldCode]) {
const subFieldCodes = Object.keys(fb.events.fields[fieldCode].fields);
element.appendChild(generateSubElement(subFieldCodes));
continue;
}
}
}

面倒な人用

ブックマークレットの作成が面倒な人は「 {navigator.clipboard.writeText(e)},t},t=t=>{let l=t.map(t=>e(t)),n=document.createElement("span");n.textContent=" | ";let r=document.createElement("span");r.style.whiteSpace="nowrap";for(let d=0;dフィールドコード表示 - フォームブリッジ 」をブックマックバーにドラッグ・アンド・ドロップしてください。