JSカスタマイズ事始め kintone

46u

2021年11月28日 08:20

最近（私の中で）kintoneのJSカスタマイズの流れがきている所です。きっかけはこれに参加したこと。

ハンズオンでkintoneのJSカスタマイズが楽しく学べました。ありがとうございました。

そして、それのアフター企画

こちらにも参加。
ここでは少人数でJSカスタマイズを色々モクモクできる会です。楽しい！
ありがとうございました。

そして、#kintoneIoT部会長でもあるｼﾞｭﾘﾄﾞﾝさんの新企画が。ありがとうございます。

そしてそして、キンコミでもなかよくしてるHazimeさんの新企画も。ありがとうございます。

kintone カスマイズビューを練習してみようその1
https://hazime-style.com/?p=992

じゃ、このながれに乗っかろうーーー！

。。。と思ったのですが、そもそも私自身がJSカスタマイズをあんまりよくわかってないので、まずはその距離を縮めないといけないのでした。^^;

JSカスタマイズ事始め kintone

というわけで、私の備忘録のnoteです。「すごくない」やつ。^-^;

フィールドの入力不可をラジオボタンとチェックボックスで完全制御！
https://developer.cybozu.io/hc/ja/articles/200306919

を参考に、もっと簡単にして
文字列（１行）フィールドになにか文字を入力したら変更できなくなるというだけのカスタマイズをしてみます。

フィールドコードは、初期値のまま、「文字列__1行_」です。
カスタマイズには「JSEdit-for-kintone」を使っています。

JSEdit-for-kintone
https://developer.cybozu.io/hc/ja/articles/205452653-JSEdit-for-kintone

おまじない偏

プログラムを書くには、本来意味のある記述なんだけど、結局毎回同じ事を書くし、書いておかないとあとでイタい目にあう（気がする）部分があって、とりあえずそれに合わせとく、いわゆる「おまじない」が存在します。

JavaScriptにもあって

()

かっこ

(function())

ふぁんくしょん

(function(){})

なみかっこ

(function(){})();

お尻に();

コレ即時関数というもの。
「関数」と「実行」をワンセットにしたもので、最期の();が「実行」という意味のようです。

(function() {

})();

改行いれて整形

(function() {
 'use strict';
 
})();

ストリクトモード。厳密(Strict)にエラーチェックなどをしてくれます。

(function() {
  'use strict';
  // ココにJSのコードを書く
})();

できたー！
ここまで、いわゆる「おまじない」というやつです。

おもったより

おまじないが複雑

(^^;

実際のコード偏

おまじないが書けたら実際の仕事をするコードを書きます。

冒頭の

文字列（１行）フィールドになにか文字を入力したら変更できなくなるというだけのカスタマイズです。

コレ、kintoneカスタマイズでよくつかうだろう（と私が勝手におもってる）、新規追加と修正時にフィールドの内容を変更した場合のやり方になります。

kintone JavaScript API（イベント）一覧
https://developer.cybozu.io/hc/ja/articles/360000361686

上記リンクより以下２つのイベントが必要なんだなとわかります。いやホントは最初はスグにはわかりませんでしたが。^^;

app.record.create.change.<フィールドコード>
app.record.edit.change.<フィールドコード>

これ、初心者にはハマリポイントだとおもうのですが、フィールド内容の変更をする時のイベントは無意識にひとつと思いがち。でも実は、新規追加と変更は「レコード追加画面」と「レコード編集画面」といってべつべつのイベントで、この２つがワンセットで同じ処理ってパターン。結構おおいと思います。多分。(要出典)

で、実際のコードはこんな感じにしてみました。

(function() {
 'use strict';
 // ココにJSのコードを書く
 
 var events1 = ['app.record.create.change.文字列__1行_', 
                'app.record.edit.change.文字列__1行_'
               ];
               
 kintone.events.on(events1, function(event) {

   var record = event['record'];
   record['文字列__1行_']['disabled'] = true;

   return event;
 });
 
})();

イベントはevents1という変数にはいっています。kintone.events.onのevents1のところに直接書いてもいいです。

ポイントとなる部分を枠でかこってみました。

なんとなくだけど、関連性はイメージできるかな。

コードの記述方法には色々あって、例えば以下でも動きます。

(function() {
'use strict';
// ココにJSのコードを書く

var events1 = ['app.record.create.change.文字列__1行_', 
               'app.record.edit.change.文字列__1行_'
              ];
              
 kintone.events.on(events1, (event) => {

  var record = event['record'];
  record['文字列__1行_']['disabled'] = true;

  return event;
 });
 
})();

ちがってるのはココ！ココがポイント

ピンクの□が、=>になってて、functionがなくなっています。これ「アロー関数式」というらしいです。

この表記方法、最初わからなくて、「なんでここで大きさ比べてるんだろ？？」となってました。^^;
大きさを比べてるんじゃなくて「=>」は、矢印(arrow)なんですね。

別の書き方もできます。というか大きなプログラムはこっちが主流か。

(function() {
 'use strict';
 // ココにJSのコードを書く
 function handler(event) {

   var record = event['record'];
   record['文字列__1行_']['disabled'] = true;

   return event;
 }
 
 kintone.events.on(['app.record.create.change.文字列__1行_', 
                    'app.record.edit.change.文字列__1行_'
                   ], handler);

})();

同じくポイントとなる部分を枠でかこってみました。

黄色い□の、handlerってところで関数とイベントがつながってて、イベントが起きた時にコレで関数を呼び出す書き方。handlerは別の単語でもなんでもよいのだけど、これ文字どおり車のハンドルと思ってもらえばわかりやすいので。「ハンドルを切って関数を動かす。」

あと実際の命令表記のしかたも色々あります。

   record['文字列__1行_']['disabled'] = true;  //ブラケット記法
   record.文字列__1行_.disabled = true;        //ドット記法

「ブラケット記法」と「ドット記法」というのがあって、上記のどちらでも動きます。わたしも知りませんでしたが。

どちらがいいかは@RyBBさんのQiitaがひとつの指針になると思います。ありがとうございます。

他にも、変数の書き方でvarはもう使わなくてletやconstを使うべきとか、「"」と「'」どっちをつかおうかとかいろいろありますが、まあ、ぼちばちやっていきます。

もっと詳しい情報は先人の方たちがたくさん発信されてますので、わたしは「すごくない」ことを書いておきます。^^;

とりあえず

色んな書き方ができる

(^^;;

そもそも自分が分からない事を手探りで書いてるので、間違いがあるかもししれません。ご指摘アドバイスあれば嬉しいです。^^

そしてまた何か思いつけば追記するかもしれません。^^;

JSカスタマイズ事始め kintone

JSカスタマイズ事始め kintone

おまじない偏

実際のコード偏

いいなと思ったら応援しよう！