プログラミング初心者がkintoneでJSカスタマイズしたので詳しく解説します！

日々kintoneで色々アプリを作りながら、カスタマイズにも果敢に挑戦中（プログラミングを覚えて現在8ヶ月目）。
今回は、元々文系の私でも出来たプログラミングの基礎と、簡単なカスタマイズをご紹介したいと思います！

【初めに】プログラミングを覚えるなら

私の英語はせいぜい中学レベルくらい。。
世間一般では中学レベルくらい出来れば日常会話くらいは出来ると言われていますが、私は単語を覚えるのが苦手でなかなか積極的には喋れず…(苦笑)
文法だけは得意だったので、学校のテストは文章の前後の雰囲気で解答しているくらいでした（笑）

しかし、プログラミング言語も人が作ったもの。なので、書き方には一定のルールがあります。
あとはExcelの関数が出来れば（マクロやVBAまでできればセンス抜群です！(私は書けませんw)）、学校で習わなくても独学である程度身に付けることが出来るので、「文系には絶対ムリ」というよりかは文法というルールを覚えられれば文系理系関係なくプログラミングは書ける！と思います。（まあ複雑な式（条件分岐的な論理式）はそれなりのセンスと経験が必要ですが…。私にはまだない…w）

が、本を読んでもどこから手を付けたらいいか分からないし、やる気も出ないので、私は「progate（プロゲート）」というゲーム感覚でプログラミング言語を覚えられるWEBアプリを使って覚えました！

Progate(プロゲート) | Learn to code, learn to be creative.

今すぐ身に付けたい！という方もこれはおすすめです！
HTML、CSS、Javascript、jQuery、Reactなど、初学者向けから実践向けまで月額990円（12ヶ月分(11,880円)一括払いです。1ヶ月、6ヶ月もあります。）から始められるので、本を買うよりかはよほどお得かなと思います。
（私は6ヶ月契約で、4ヶ月程で覚えました。面白いし復習もしたいので継続契約してますが。笑）

回し者ではありません。

APIを知ろう！

「どこに」「どのように」「何を」入れる（設定する）のか、というので重要になるAPIエーピーアイ
簡単に言うと、プログラミングとシステムを簡単に繋げられるキーワードのようなものです。
今回はkintoneのAPIが頻出するのと、カスタマイズには必ず必要になってくるので、これからカスタマイズしたい！という方は是非チェックしておいてください♪

kintone JavaScript API

＊＊＊＊＊＊＊

さて今回は、kintoneのカスタマイズなので、JavascriptとjQueryを使って書いています。（一番シェアが多くて簡単ですしね。）
以前にも申請フォームの作成のために、グループ開閉だの条件によって見えなくするだのコードを紹介しましたが、（詳しくはこちら⇩）

今回は、あくまでも「プログラミング初心者が出来るカスタマイズ」と題して、カスタマイズを色々ご紹介したいと思います！

＊＊＊＊＊＊＊

【ケース①】フィールドに条件別で色を付けたい！

例えば、提出書類をチェック打ってもらって、足りなければ「不足しています」、全て揃っていれば「OK」などは、文字列(1行)の自動計算で関数を書けば標準機能で実現可能です。

IF ( 【提出書類】 = "済" , "OK" , "不足しています")

一応書いときます。【】はフィールドコードを入れてね♪

でも、これが複数あった場合に
「どの書類が不足してるのか一目で分かりづらいから、色付けて欲しい！」
とか言われるわけですよ。。（まあ管理する側も一瞬どれか分からなかったのもありますが。笑）

【条件色付け】コードはこちら★

長くなるので、1箇所だけのコードです。（複数個所指定する場合は後述）

(function() {
  "use strict";

  kintone.events.on([
　　// 表示箇所
    "app.record.detail.show",
    "app.record.print.show"
    ], function(event) {
        
    //判定
    const judgeValue = event.record["judge"].value; //判定
    const judgeElement = kintone.app.record.getFieldElement("judge");
    if(judgeValue == "NG") {
       judgeElement.style.backgroundColor = '#fcb1b1'; //light red
    } else if (judgeValue == "予約可") {
       judgeElement.style.backgroundColor = '#aef772'; //light green
    } else if (judgeValue == "申請可") {
       judgeElement.style.backgroundColor = '#72eaf7'; //light blue
    }

    return event;
  });
})();

【解説】条件色付け

① 表示箇所
どのタイミングで色がついている状態を表示させるかというものです。
今回は、

"app.record.detail.show",
"app.record.print.show"

以上の2ヶ所。
これは、レコードの詳細画面（保存された後の画面）と印刷する時の画面になります。

「編集時は？」となりますが、実は編集時の背景カラーは固定でコレ！という色は出来るんですが、条件によって変えたいという場合は、大元のコードが強く、やろうとすると結構ハードルが高いようなので、今回は「詳細画面」と「印刷画面」に表示されるだけにとどめています。（まあこの手の色分けを確認するのは詳細画面で十分かと。）

②判定方法
>constとは？
プログラミングにおいて「定義する」を意味します。
今回で言うと、

【　const judgeValue = event.record["judge"].value;　】
この場合、judgeValue が、フィールドコード「judge」の値を取得しています。

【　const judgeElement = kintone.app.record.getFieldElement("judge");　】
この場合、judgeElement が、フィールドコード「judge」のフォームを指定しています。

※注意点：judgeValueをフィールドコードと同じjudgeにすると動かなくなってしまうので、必ずフィールドコードとは違うフレーズにしてください。

constと=の間のフレーズが定義した名称、ということです。
この名称は同一コード（ファイル）内では重複できないため、ここで紹介されているのは1つのフィールドだけですが、複数同様に指定する場合は、この名称を被らないように変える必要があります。（⇩例）

    const contractValue = event.record["contract"].value;  //請負契約書
    const contractElement = kintone.app.record.getFieldElement("contract");
    if(contractValue == "未") {
        contractElement.style.backgroundColor = '#fcb1b1';
    }
    
    const buyingValue = event.record["buying"].value;  //売買契約書
    const buyingElement = kintone.app.record.getFieldElement("buying");
    if(buyingValue == "未") {
        buyingElement.style.backgroundColor = '#fcb1b1';
    }
    
    const confirmationValue = event.record["confirmation"].value;  //確認済証
    const confirmationElement = kintone.app.record.getFieldElement("confirmation");
    if(confirmationValue == "未") {
        confirmationElement.style.backgroundColor = '#fcb1b1';
    }
    
    const certificateValue = event.record["certificate"].value;  //適合証 OR 認定証
    const certificateElement = kintone.app.record.getFieldElement("certificate");
    if(certificateValue == "未") {
        certificateElement.style.backgroundColor = '#fcb1b1';
    }   

もちろん同じ条件であれば、そのまま同じ名称を複数使うのはOKです。（その場合再定義は不要です。）
あくまでも「定義する際」は全て被らないようにする必要がある、ということですね。

>IF文の使い方
JavascriptでのIF文の構成はこうなっています。

パターン①
if( 条件 ) {
     真の場合の処理
}

偽の（違う）場合は何もしない場合

パターン②
if( 条件 ) {
     真の場合の処理
} else { 偽の場合の処理 }

偽の場合は別の処理をしたい場合。（ExcelのIF文と同じ）

パターン③
if( 条件① ) {
     条件①が真の場合の処理
} else if ( 条件② ) {
     条件②が真の場合の処理
}

偽の場合はまた別の条件があり、条件②が偽だったら何もしない場合。
（ExcelのIF文で偽のIFを重ねる場合と同じ。カッコが被らないから分かりやすいですね）

パターン④
if( 条件① ) {
     条件①が真の場合の処理
} else if ( 条件② ) {
     条件②が真の場合の処理
} else if ( 条件③ ) {
     条件③が真の場合の処理 
} else {
     全て偽の場合の処理
}

else ifはいくらでも重ねられます。最後にelseを付けるのもOK。

今回はパターン①です。
ちなみに条件の部分で「=（イコール）多くない？」と思うかもしれませんが、簡単に説明すると、Javascriptジャバ スクリプト（ジャバっていうと違う言語になるので略す場合はジェーエス）では判定方法に差があり、「この文字列と完全一致の場合」というのを指定するために=を重ねるようにします。
入力された文字や数値を取得して比較するなら2つでOK。
（詳しくはこちらの記事を参考にどうぞ⇩）

【JavaScript入門】文字列を「比較」する演算子の使い方まとめ！ | 侍エンジニアブログ

③カラーの指定方法
今回はフィールドの背景色を変更しています。

judgeElement.style.backgroundColor = '#fcb1b1';

judgeElement（judgeというフィールドのフォームの）.
style（スタイルで）.
backgroundColor（バックグラウンドカラー（背景色）を）
= '#fcb1b1';（薄い赤色にする）

といった感じです。この「backgroundColor」の部分を「color」にすれば文字の色が薄い赤色になります。

JavaScriptのstyleでCSSスタイルを指定する方法【追加、変更、上書き、keyframesとanimationでアニメーション設定など】

WEB上でのカラーコードは色々ありますが、私は「color picker」などを使っています。⇩

color picker - Google 検索

ちなみに、「//」はその後ろがコメントと言って、プログラミングコードには影響しないメモになっています。（コードの種類（HTMLやCSSなど）によってコメントの仕方は異なります。）

ここまで理解出来れば条件による色付けはクリアです！
是非使ってみてください٩( ''ω'' )و

＊＊＊＊＊＊＊

【ケース②】プロセス管理の条件によってコメントを出したい！

プロセス管理。稟議や社内の申請など、いちいち印刷して回覧して印鑑もらって、という手間を完全システム化できる、kintoneを使う上で最も重宝されるシステムですね。

例に漏れずうちの会社もバシバシ使ってる（というか使わせているw）訳ですが、一点懸念事項が存在します。それは、

保存したら「申請完了」だと思っている

そんな社員が一定数いること。。( ﾉД`)ｼｸｼｸ…
レコードを作成して保存しただけだと、「未申請（未処理）」のままですよね。
あと一歩、「申請する」作業をしなければいけませんが、パソコンに不慣れな人は、保存=申請した と思っていることが多く、「未処理」レコードが延々増えていきます。

もちろん、未処理のまま一定日数過ぎたらリマインドする、という手もありますが、「申請は終わっている」と勘違いしている人はどうしたら良いか分からないからそのままにしがち…。

ということで、プロセス管理の条件に合わせてコメントを入れてみました。
まずは完成形をご覧ください。⇩

レコードを保存するとこんな風にコメントが出る形です。

一般的なWEBシステムでもそうですが、やはりこうして文字として出ると注意喚起としては効果高めですよね。

それでは詳しく説明していきます！

＊＊＊＊＊＊＊

【フィールド設定】

①スペースを追加

一般的な手当申請書です。

フィールドの一番上に細ーくスペースを追加しておきます。

②スペースにフィールドコードを付与

「comment」としました。

これで準備はOK！
※プロセス管理の設定も忘れずに。

＊＊＊＊＊＊＊

【コメント付与】コードはこちら★

(function() {
  'use strict';
  kintone.events.on([
    'app.record.detail.show',  //詳細画面
    'app.record.detail.process.proceed', //プロセス管理が実行された時
    ],
  function(event) {
    const message = kintone.app.record.getSpaceElement('comment');
    const paidValue = event.record["paid"].value;
    
    let status = $(".gaia-app-statusbar-state-label").text();
    
    const messageEvent = () => {
          message.style.fontSize = '16pt';
          message.style.color = 'red';
          message.style.textAlign = "left";
          message.style.fontWeight = "bold";
          message.style.marginLeft = '5px';
      }
      
    if( status === "申請前" && paidValue === "支給対象") {
       message.innerText = "まだ申請は完了していません。「申請する」をクリックしてください。";
       messageEvent();
    } else if ( status === "申請前" && paidValue === "支給対象外です") {
       message.innerText = "支給対象外で申請出来ません。終了時刻は開始時刻から2時間以上後を指定してください。";
       messageEvent();
    } else if (status === "差戻し" && paidValue === "支給対象") {
       message.innerText = "差戻し理由はコメントを確認してください。再申請する場合は「再申請する」をクリックしてください。";
       messageEvent();
    } else if (status === "申請中") {
       message.innerText = "";
    }
    
    return event;
  });
})();

【解説】プロセス管理を条件にコメントを付与

今回は、
①詳細画面が表示された時（＝レコードを保存した時）
②プロセス管理が実行された時
以上の2点でコメントが表示されるようになっています。
（プロセス管理はレコードを編集せずに行うので、別のAPIが用意されていました。）

そこから下はIF文を使った少々複雑な構造をしているように見えますが、構造としてはこうです。

①スペースを編集できるように中身を取得する
const message = kintone.app.record.getSpaceElement('comment');

ケース①と同様に。

②条件（今回は支給対象か支給対象外か）の値を取得する
const paidValue = event.record["paid"].value;

定義名称にValueとかつけなくてもいいんですけど
IF文でどんな形だったか忘れるので
省略でも良いのでそのまま付けるようにするのがおすすめ

③プロセス管理の内容を取得する
let status = $(".gaia-app-statusbar-state-label").text();

letはconstの仲間です。constはそのコードの中では変わることが無いという場合に使用し、定義が変わる場合がある時は「let（変数）」を使います。
constでやったらうまく行かなかったので（気のせいかもしれませんが。笑）letに変更しました。

「gaia-app-statusbar-state-label」はこのプロセス管理に付与されているclass（IDみたいなもの）です。（このIDはアプリ全て共通です。）
「F12キー」を押して、出てきた画面の左上の画像選択みたいなボタンを押すと、ブラウザ上の中身が見られます。

kintoneの場合は大体 class なので使用する場合は頭に「.（ドット）」を付けます。
この辺の説明は詳しくし出すとそれだけで1投稿分になるので、詳しく知りたい方はprogate等で学んでみてください。

このclassコードの頭についている「$」はjQueryで使用する記号です。
つまり、

$(".gaia-app-statusbar-state-label").text();

でプロセス管理の値をテキストとして取得します。という意味になります。
簡潔で分かりやすいですね！

④表示するコメントのスタイルを決めておく
const messageEvent = () => {
（フォントサイズ）message.style.fontSize = '16pt'; 
（文字色）message.style.color = 'red';（赤）
（文字の揃え方）message.style.textAlign = "left";（左揃え）
（文字の太さ）message.style.fontWeight = "bold";（太め）
（コメントにスペースを空ける）message.style.marginLeft = '5px';
}

個別で設定したい場合はIF文の中に入れれば良いですが、（文字色とか？）
今回は統一なので、一個にまとめてしまう。

JavaScriptのstyleでCSSスタイルを指定する方法【追加、変更、上書き、keyframesとanimationでアニメーション設定など】

③ ⑴ 申請前 かつ 支給対象の場合
　まだ申請は完了していません。「申請する」をクリックしてください。　
　と表示させる。

if( status === "申請前" && paidValue === "支給対象") {
message.innerText = "まだ申請は完了していません。「申請する」をクリックしてください。";
messageEvent();
}

　 ⑵ 申請前 かつ 支給対象外の場合
　支給対象外で申請出来ません。終了時刻は開始時刻から2時間以上後を指定してください。
　と表示させる

else if ( status === "申請前" && paidValue === "支給対象外です") {
message.innerText = "支給対象外で申請出来ません。終了時刻は開始時刻から2時間以上後を指定してください。";
messageEvent();
}

　 ⑶ 差戻し かつ 支給対象の場合
　差戻し理由はコメントを確認してください。再申請する場合は「再申請する」をクリックしてください。
　と表示させる

else if (status === "差戻し" && paidValue === "支給対象") {
message.innerText = "差戻し理由はコメントを確認してください。再申請する場合は「再申請する」をクリックしてください。";
messageEvent();
}

　 ⑷ 申請中 の場合
　コメントを非表示（なし）にする

else if (status === "申請中") {
message.innerText = "";
}

「innerText」で指定した要素（今回は「message」）にテキストを付与させることが出来ます。
「申請中」（かどこか）で「””（空欄）」を指定しないと何かしらの文言が残ってしまうので注意。

＊＊＊＊＊＊＊

kintoneでのプログラミングを書くプラグイン

幾度となくご紹介していますが、kintoneでプログラミングをちょこっと書くだけならコレ！

JSEdit for kintone

プログラミングコードを書くには、Visual Studio Code や GitHub などの専用のアプリが必要ですが、編集ファイルをアップロードするのも結構手間だったりします。。
正直ちょこっとしか書かなかったり、他の人と共同管理したい場合などはめちゃくちゃ面倒なので、大きなカスタマイズでもない場合は私はこちらを利用しています。
デバックもその場ですぐ出来るので、初心者にはハードルが低くて助かります。

＊＊＊＊＊＊＊

今回はがっつり「プログラミング」についてご紹介しました！

やりたいことによってはTISさんの「条件分岐処理プラグイン」でもできることがあるので、まだちょっとプログラミングは…、という方はこちらも試してみてください♪

BranchProcess@TIS

これだけでもできるとkintoneに対してもっと柔軟に接していけるのかなと思います。
あなたのkintone LIFEがもっと楽しいものになることを祈って★