Photo by Denise Johnson on Unsplash
更新履歴
- 2023/9/18 スペースフィールドの場合はelementIdを表示するようにしました。
- 2023/7/3 ゲストスペースアプリに対応しました。
- 2021/4/5 関連レコードに対応しました。
この記事はkintone Advent Calendar 2020 2日目の記事です。
kintone Advent Calendar 2019ではdeveloper networkのいいね!プラグインに機能を追加しました。
今年はkintoneカスタマイズが少し楽になるかもしれないブックマークレットを紹介します。
はじめに
kintoneをカスタマイズをする場合にフィールドコードを確認したい場合があります。そのときアプリの設定画面を開いて確認するのは面倒です。そこで簡単にフィールドコードを確認できるブックマークレットを作成したので紹介します。
できること
kintoneアプリのレコード詳細画面を開いてブックマークレットを実行するとフィールドコードを赤文字で表示します。また、フィールドコードをクリックするとフィールドコードをクリップボードにコピーします。

ブックマークレットの作成
以下のコードを利用します。
ポイントは以下のとおりです。
- jQueryを利用
- フィールドコードの取得は/k/v1/app/form/fieldsを利用
- フィールドコードの表示位置はkintone.app.record.getFieldElement()を利用
- サブテーブルのフィールドの並び順は/k/v1/app/form/layoutを利用
コードをコピーしたら以下のホームページを利用してコードをMinifyします。
Minifyすると以下のコードが生成されます。
(e=>{let t=document.createElement("script");t.src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js",t.onload=()=>{let t=jQuery.noConflict(!0);e(t)},document.body.appendChild(t)})(async e=>{let t=()=>{let e=window.location.pathname.match(/\/guest\/([0-9]+)\//);return e?e[1]:null},a=t()?`/k/guest/${t()}/v1`:"/k/v1",l="color: red; cursor: pointer",r=e=>`navigator.clipboard.writeText('${e}')`,p=e=>`<div style="${l}" onclick="${r(e)}">${e}</div>`,o=e=>{let t=e.map(e=>`<span style="${l}" onclick="${r(e)}">${e}</span>`),a=`<span>${t.join(" | ")}</span>`;return a},i=kintone.app.getId(),n=async()=>{let{properties:e}=await kintone.api(`${a}/app/form/fields`,"GET",{app:i});return e},s=async()=>{let{layout:e}=await kintone.api(`${a}/app/form/layout`,"GET",{app:i});return e},[c,d]=await Promise.all([n(),s()]);for(let f of Object.values(c)){let{code:y,type:u}=f,m=kintone.app.record.getFieldElement(y);if(m){if(e(m).before(p(y)),"REFERENCE_TABLE"===u){let E=f.referenceTable.displayFields,g=o(E);e(m).after(g)}if("SUBTABLE"===u){let b=d.find(e=>"SUBTABLE"===e.type&&e.code===y).fields.map(e=>e.code),T=o(b);e(m).after(T)}}}let j=d.filter(e=>"GROUP"===e.type||"ROW"===e.type).map(e=>"GROUP"===e.type?e.layout.map(({fields:e})=>e):e.fields).flat(2).filter(e=>"SPACER"===e.type&&""!==e.elementId);for(let{elementId:v}of j){let R=kintone.app.record.getSpaceElement(v);R&&(e(R).append(p(v)),e(R).css("border","1px solid blue"))}});
ブックマークレットとして利用できるように先頭に「javascript:」を追加します。
javascript:(e=>{let t=document.createElement("script");t.src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js",t.onload=()=>{let t=jQuery.noConflict(!0);e(t)},document.body.appendChild(t)})(async e=>{let t=()=>{let e=window.location.pathname.match(/\/guest\/([0-9]+)\//);return e?e[1]:null},a=t()?`/k/guest/${t()}/v1`:"/k/v1",l="color: red; cursor: pointer",r=e=>`navigator.clipboard.writeText('${e}')`,p=e=>`<div style="${l}" onclick="${r(e)}">${e}</div>`,o=e=>{let t=e.map(e=>`<span style="${l}" onclick="${r(e)}">${e}</span>`),a=`<span>${t.join(" | ")}</span>`;return a},i=kintone.app.getId(),n=async()=>{let{properties:e}=await kintone.api(`${a}/app/form/fields`,"GET",{app:i});return e},s=async()=>{let{layout:e}=await kintone.api(`${a}/app/form/layout`,"GET",{app:i});return e},[c,d]=await Promise.all([n(),s()]);for(let f of Object.values(c)){let{code:y,type:u}=f,m=kintone.app.record.getFieldElement(y);if(m){if(e(m).before(p(y)),"REFERENCE_TABLE"===u){let E=f.referenceTable.displayFields,g=o(E);e(m).after(g)}if("SUBTABLE"===u){let b=d.find(e=>"SUBTABLE"===e.type&&e.code===y).fields.map(e=>e.code),T=o(b);e(m).after(T)}}}let j=d.filter(e=>"GROUP"===e.type||"ROW"===e.type).map(e=>"GROUP"===e.type?e.layout.map(({fields:e})=>e):e.fields).flat(2).filter(e=>"SPACER"===e.type&&""!==e.elementId);for(let{elementId:v}of j){let R=kintone.app.record.getSpaceElement(v);R&&(e(R).append(p(v)),e(R).css("border","1px solid blue"))}});
このコードをブックマークとして設定します。適当なサイトをブックマークして、ブックマークの編集からURLに貼り付けるのが簡単だと思います。
面倒な人は「 フィールドコード表示 」をブックマックバーにドラッグ・アンド・ドロップしてください。