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

Photo by Denise Johnson on Unsplash

この記事は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}')`,t=kintone.app.getId(),[a,i]=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.keys(a)){const c=kintone.app.record.getFieldElement(t);if(!c)continue;if(e(c).before(`<div style="${o}" onclick="${n(t)}">${t}</div>`),"SUBTABLE"!==a[t].type)continue;const p=i.find(e=>"SUBTABLE"===e.type&&e.code===t).fields.map(e=>e.code),r=p.map(e=>`<span style="${o}" onclick="${n(e)}">${e}</span>`);e(c).after(`<span>${r.join(" | ")}</span>`)}})(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}')`,t=kintone.app.getId(),[a,i]=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.keys(a)){const c=kintone.app.record.getFieldElement(t);if(!c)continue;if(e(c).before(`<div style="${o}" onclick="${n(t)}">${t}</div>`),"SUBTABLE"!==a[t].type)continue;const p=i.find(e=>"SUBTABLE"===e.type&&e.code===t).fields.map(e=>e.code),r=p.map(e=>`<span style="${o}" onclick="${n(e)}">${e}</span>`);e(c).after(`<span>${r.join(" | ")}</span>`)}})(jQuery.noConflict(!0))}),document.body.appendChild(o)})();

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

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

この記事を書いた人