フィールドコードをワンクリックで表示(ブックマークレット)

Photo by Denise Johnson on Unsplash

更新履歴

  • 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=>{const o=document.createElement("script");o.src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",o.onload=(()=>{(async e=>{const o="color: red; cursor: pointer",n=e=>`navigator.clipboard.writeText('${e}')`,a=({fieldCodes:e})=>{const a=e.map(e=>`<span style="${o}" onclick="${n(e)}">${e}</span>`),t=`<span>${a.join(" | ")}</span>`;return t},t=kintone.app.getId(),[i,s]=await Promise.all([(async()=>{const{properties:e}=await kintone.api("/k/v1/app/form/fields","GET",{app:t});return e})(),(async()=>{const{layout:e}=await kintone.api("/k/v1/app/form/layout","GET",{app:t});return e})()]);for(const t of Object.values(i)){const{code:i,type:r}=t,c=kintone.app.record.getFieldElement(i);if(c){if(e(c).before(`<div style="${o}" onclick="${n(i)}">${i}</div>`),"REFERENCE_TABLE"===r){const o=t.referenceTable.displayFields,n=a({fieldCodes:o});e(c).after(n)}if("SUBTABLE"===r){const o=s.find(e=>"SUBTABLE"===e.type&&e.code===i).fields.map(e=>e.code),n=a({fieldCodes:o});e(c).after(n)}}}})(jQuery.noConflict(!0))}),document.body.appendChild(o)})();

ブックマークレットとして利用できるように先頭に「javascript:」を追加します。

javascript:(e=>{const o=document.createElement("script");o.src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",o.onload=(()=>{(async e=>{const o="color: red; cursor: pointer",n=e=>`navigator.clipboard.writeText('${e}')`,a=({fieldCodes:e})=>{const a=e.map(e=>`<span style="${o}" onclick="${n(e)}">${e}</span>`),t=`<span>${a.join(" | ")}</span>`;return t},t=kintone.app.getId(),[i,s]=await Promise.all([(async()=>{const{properties:e}=await kintone.api("/k/v1/app/form/fields","GET",{app:t});return e})(),(async()=>{const{layout:e}=await kintone.api("/k/v1/app/form/layout","GET",{app:t});return e})()]);for(const t of Object.values(i)){const{code:i,type:r}=t,c=kintone.app.record.getFieldElement(i);if(c){if(e(c).before(`<div style="${o}" onclick="${n(i)}">${i}</div>`),"REFERENCE_TABLE"===r){const o=t.referenceTable.displayFields,n=a({fieldCodes:o});e(c).after(n)}if("SUBTABLE"===r){const o=s.find(e=>"SUBTABLE"===e.type&&e.code===i).fields.map(e=>e.code),n=a({fieldCodes:o});e(c).after(n)}}}})(jQuery.noConflict(!0))}),document.body.appendChild(o)})();

このコードをブックマークとして設定します。適当なサイトをブックマークして、ブックマークの編集からURLに貼り付けるのが簡単だと思います。

面倒な人は「 フィールドコード表示 」をブックマックバーにドラッグ・アンド・ドロップしてください。

この記事を書いた人