計算式プラグインで郵便番号〒マークの表示を行ってみます。

概要

郵便番号〒マークの表示を kintone 標準機能のラベルと、計算式プラグインでスペース項目に表示する方法を試してみます。
編集時のズレを気にしなければ、ラベルでも十分対応できると思います。

ラベル
- 改行と文字サイズを調整するとそれらしく表示される
- 〒マークと郵便番号の間隔が少し離れている
- 詳細画面と編集画面では、編集エリアの高さが変わるため、ラベルがずれたように見える
スペース項目に計算式プラグインで表示
- 書式と文字サイズを調整するとそれらしく表示される
- 詳細画面と編集画面では、編集エリアの高さにあわせて調整される

ラベル

ラベルに右寄せで、スペース改行、〒を設定します。
ラベルの文字サイズは、普通・やや大きいなどがあるが、細かな調整ができないので、開発ツールでfont-size を直接いじって保存すると、反映されます。
ラベルの位置は、前行スペースの font-size で調整します。

スペース項目に計算式プラグインで表示

スペース項目に計算式プラグインで〒マークを表示する手順です。

スペース項目の追加と要素IDの設定

計算式プラグイン設定

スペース項目に計算式を設定します。

スペース項目にラベルを表示する計算式
ラベルとラベルの書式、および値と値の書式をARRAY関数の配列で指定します。
- ARRAY(ラベル,ラベルの書式,値,値の書式)

.js

// sp1:(sp1) SPACER
"〒"

// sp2:(sp2) SPACER
ARRAY(
  "","",
  "〒",
  "width:8px;
   position: absolute;
   right: 0;
   background-color: initial;
   border-width: 0;"
)

// sp3:(sp3) SPACER
ARRAY(
  "","",
  "〒",
  "font-size:18px;width:10px;
   position: absolute;
   right: 0;
   top:26px;
   background-color: initial;
   border-width: 0;"
)

モバイル表示の問題

モバイル表示時は、ラベル・スペース項目ともに〒マークが1行表示になるので邪魔になります。

モバイル表示時、スペース項目を非表示

計算式で、モバイル表示時、スペース項目を非表示にします。
少し行間が空きますが、少しはマシになります。

計算式の設定

EV_INFO("mobile") で、モバイル表示を判定し、スペース項目を非表示に設定します。

.js

// sp1:(sp1) SPACER
IF(EV_INFO("mobile"),
  ARRAY("","display:none;","","display:none;"),
  "〒"
)

// sp2:(sp2) SPACER
IF(EV_INFO("mobile"),
ARRAY("","display:none;","","display:none;"),
ARRAY(
  "","",
  "〒",
  "width:8px;
   position: absolute;
   right: 0;
   background-color: initial;
   border-width: 0;"
))

// sp3:(sp3) SPACER
IF(EV_INFO("mobile"),
ARRAY("","display:none;","","display:none;"),
ARRAY(
  "","",
  "〒",
  "font-size:18px;width:10px;
   position: absolute;
   right: 0;
   top:26px;
   background-color: initial;
   border-width: 0;"
))