住宅省エネ2024キャンペーンのkintoneアプリを作ってみた！
先日発表された「住宅省エネ2024キャンペーン」
建築業に携わる方なら割と長いこと、住宅の補助金制度でこの手のキャンペーンは目にすることも多いですよね。
実は私、建築業の会社に勤めているのですが、こういった補助金の申請業務なんかもしています。
今年も「住宅省エネ2023キャンペーン」という名称で三本柱の補助金申請をワンオペしています。笑（2023/12/31で申請も終了です。完了報告などの後処理はまだまだ年明けも続きます。）
補助金の申請案件も多かったので（新築リフォーム合わせて80件くらい。）kintoneを活用しよう！ということでアプリを作って進捗管理をしていましたが、当初、昨年（2022年）はほとんどが新築でリフォームの案件が少なかったこともあり、新築を主としたレコードフォームになっていました。
＊＊＊＊＊＊＊
登録も変更も申請担当兼カスタマイザーの私なので、フィールドが多くて多少見づらくても、レコードの条件通知などがメインの使用用途だったので「まあいっか」と特に改良することもなく、（ただただ「あ、これも欲しい！」というフィールドを無造作に追加する所業。）そのまま一年間使いましたが、
流石に二年目ともなると、他の担当者にもきちんと見てもらえるものを…！ということで、ばっちり改良しました！
【補足】
この記事が出た時点では、まだ事業内容は概要だけですが、2024年度も2023キャンペーンの内容をほとんど受け継いだ内容になるとのことなので、現時点で分かっている変更点以外は一旦そのまま継承していきます。
まずは改良前の2023年バージョンをご紹介。
住宅省エネ2023 登録フォーム
まあ、、見ての通り、長々だらだらと新築もリフォームも混在している感じです。こりゃ作ったやつ（私だw）以外が見なくなるはずだ。(~_~;)笑
では気を取り直して、2024年NEWバージョンをご紹介！
＊＊＊＊＊＊＊
住宅省エネ2024 登録フォーム
ビックリするぐらいスッキリ。((´ω`)w
スクロール量が３分の１くらいになりました。
申請自体が来年の3月からで、事務局のページもまだ出来ていないので説明欄はこれから増える予定ですが。
＊＊＊＊＊＊＊
見た目もですが、中身もだいぶスッキリさせたかった私は、最近覚えたJavaScriptと「JSEdit for kintone」を駆使してSEの手を借りずカスタマイズしたので、自慢 めちゃくちゃ複雑な申請項目で困っているであろう同業種の方に是非使って頂ければ！
ということで詳しい中身を解説していきます！
＊＊＊＊＊＊＊
分けた項目
今回は、新築かリフォームかで表示内容が変わるように、各項目（分岐）毎にグループ化。適宜区切り線も入れたのでかなりスッキリしました。
ちなみに分けた項目は以下の通り。
①新築
②リフォーム
③新築（行政の完了報告）
④新築（完了報告）
完了報告が２つあるのは、③は長期優良住宅では必要でもZEHでは不要のためです。組み合わせとしてはこんな感じ。
【新築/長期優良住宅】⇒①、③、④
【新築/ZEH】⇒①、④
【リフォーム】⇒②のみ
グループに囲われていない部分は共通部分です。
ちなみに「memoスペース」以外のスペースはグループの幅を他の部分と合わせるために使っています。（見た目、大事(｀・ω・´)）
＊＊＊＊＊＊＊
改良点
①チェックボックスではなく、全てラジオボタンに
前年のアプリで意外に困ったのは、申請種別や必要書類を全てチェックボックスにしていることでした。
編集画面の時は、有無が一目で見やすいのですが、保存して詳細画面になった時にチェックを打っていないものが表示されません。
揃ってない書類をチェックせずに保存すると、表示されないので、何の書類がないのか分からない…。
揃ったらチェックを外すという手もありましたが、直感的ではないので（説明文が要るのと、あっても他の人が登録する時にすぐに理解できるかが不明なので）それはしませんでした。
保存後も有無が一目で分かる様になりました。⇩
同様に申請種別もチェックボックスで一緒くたにすると、実際の事務局の申請フォームは一括申請もありますが、受付後は全て別々のフォームになるので、受付番号や承認日がバラバラ…。
どの申請がいつ下りて、いくら入ってくるのかもバラバラだったので、
１申請１レコードに変更しました。
②工事種別に合わせてグループ開閉＆表示非表示
ここからはカスタマイズ。
今回追加したのは、グループの開閉と表示・非表示。
工事種別や申請区分によってグループを開閉＆必要ないものを非表示にしました。
まずは開閉のコードです。
コードの見方は以前の投稿を参考にしてみてください。
(function() {
"use strict";
// ページの読み込みが完了したら実行
kintone.events.on([
// レコードを新規作成したとき
"app.record.create.change.construct","app.record.create.change.newType",
// レコードの編集画面
"app.record.edit.change.construct","app.record.edit.change.newType",
// レコードの詳細画面を開いたとき
"app.record.detail.show"
], function(event) {
// ステータス（状態）フィールドの値を取得
var statusFieldValue = event.record["construct"].value;
var statusFieldValue_0 = event.record["newType"].value;
// フィールドグループを閉じる（すべてのグループを閉じる）
kintone.app.record.setGroupFieldOpen("newGroup", false);
kintone.app.record.setGroupFieldOpen("reformGroup", false);
kintone.app.record.setGroupFieldOpen("newCompGroup", false);
kintone.app.record.setGroupFieldOpen("newCompGroup_0", false);
// ステータスに応じてフィールドグループを開く
switch (statusFieldValue) {
case "新築":
kintone.app.record.setGroupFieldOpen("newGroup", true);
kintone.app.record.setGroupFieldOpen("newCompGroup_0", true);
break;
case "リフォーム":
kintone.app.record.setGroupFieldOpen("reformGroup", true);
break;
}
// ステータスに応じてフィールドグループを開く
switch (statusFieldValue_0) {
case "長期優良住宅":
kintone.app.record.setGroupFieldOpen("newCompGroup", true);
break;
}
});
})();お次は表示・非表示。
やっていることをざっくり説明すると、
①レコードが新規作成、編集された時、詳細画面を開いた時
（トリガーは工事種別が変更されたら）
②表示と非表示を切り替えたい該当のフィールドとグループを非表示にする
③switch文を使って該当の条件になったら表示させる
+α：新築の場合は、長期優良住宅なら100万円、ZEHなら80万円なので、
if文で直接書かせる。
といった感じです。
開閉と非表示のフィールドがめっちゃ多いので、かなりコード文が長いですが、やってることはこの３つを繰り返しているだけです。（分かれば簡単）
(function() {
"use strict";
// ページの読み込みが完了したら実行
kintone.events.on([
// レコードを新規作成したとき
"app.record.create.change.construct",
"app.record.create.change.newType",
"app.record.create.change.upper",
"app.record.create.change.yoyaku",
"app.record.create.change.method",
"app.record.create.change.thirtyThousandOver",
"app.record.create.change.section",
"app.record.create.change.project",
// レコードの編集画面
"app.record.edit.change.construct",
"app.record.edit.change.newType",
"app.record.edit.change.upper",
"app.record.edit.change.yoyaku",
"app.record.edit.change.method",
"app.record.edit.change.thirtyThousandOver",
"app.record.edit.change.section",
"app.record.edit.change.project",
// レコードの詳細画面を開いたとき
"app.record.detail.show"
], function(event) {
// ステータス（状態）フィールドの値を取得
const statusConstruct = event.record["construct"].value; //工事種別
const statusNewType = event.record["newType"].value; //（新築）申請種別
const statusUpper = event.record["upper"].value; //リフォーム上限（有無）
const statusYoyaku = event.record["yoyaku"].value; //リフォーム予約（有無）
const statusMethod = event.record["method"].value; //申請方法（交付申請 or 事前予約）
const statusOver = event.record["thirtyThousandOver"].value; //補助額30万円以上
const statusSection = event.record["section"].value; //（リフォーム）区分
const statusProject = event.record["project"].value; //（リフォーム）申請事業
const memo = kintone.app.record.getSpaceElement('houjinAttention'); //区分によるメモ表示スペース
//フィールドを非表示にする
kintone.app.record.setFieldShown("gyousei_applicationDay", false); //行政申請日
kintone.app.record.setFieldShown("certificateDay", false); //★認定証受領日
kintone.app.record.setFieldShown("thirtyThousandOver_check", false); //建物謄本 or 検査済証
kintone.app.record.setFieldShown("upperConditions_1", false); //リフォーム上限 世帯住民票
kintone.app.record.setFieldShown("upperConditions_2", false); //リフォーム上限 不動産売買契約書
kintone.app.record.setFieldShown("yoyakuConditions_1", false); //リフォーム予約 着工中写真
kintone.app.record.setFieldShown("yoyakuConditions_2", false); //リフォーム予約 品番の分かるもの
kintone.app.record.setFieldShown("yoyakuDay", false); //予約期限日
kintone.app.record.setFieldShown("subsidy", false); //補助金申請日（予約用）
kintone.app.record.setFieldShown("registry", false); //法人登記簿
kintone.app.record.setFieldShown("chashCard", false); //口座証明書
kintone.app.record.setFieldShown("houjinAttention", false); //メモ表示
//グループ
kintone.app.record.setFieldShown("newCompGroup", false); //新築（完了報告/行政）
kintone.app.record.setFieldShown("newCompGroup_0", false); //新築（完了報告/行政）
kintone.app.record.setFieldShown("newGroup", false); //新築（交付申請）
kintone.app.record.setFieldShown("reformGroup", false); //リフォーム
// ステータスに応じてフィールドを表示
switch (statusConstruct) {
case "新築":
kintone.app.record.setFieldShown("newGroup", true);
kintone.app.record.setFieldShown("newCompGroup_0", true);
break;
case "リフォーム":
kintone.app.record.setFieldShown("reformGroup", true);
break;
}
switch (statusNewType) {
case "長期優良住宅":
kintone.app.record.setFieldShown("gyousei_applicationDay", true);
kintone.app.record.setFieldShown("certificateDay", true);
kintone.app.record.setFieldShown("newCompGroup", true);
break;
}
//長期優良住宅なら補助金⇒100(万円)、ZEH⇒80万円、それ以外⇒空欄
if(statusNewType == "長期優良住宅") {
event.record["amount"].value = 100;
} else if (statusNewType == "ZEH") {
event.record["amount"].value = 80;
} else {
event.record["amount"].value = "";
}
switch (statusOver) { //補助額30万円以上
case "はい":
kintone.app.record.setFieldShown("thirtyThousandOver_check", true);
break;
}
switch (statusUpper) { //リフォーム上限（有無）
case "する":
kintone.app.record.setFieldShown("upperConditions_1", true);
kintone.app.record.setFieldShown("upperConditions_2", true);
break;
}
switch (statusProject) { //（リフォーム）申請事業
case "給湯省エネ":
kintone.app.record.setFieldShown("chashCard", true);
break;
case "既存賃貸給湯":
kintone.app.record.setFieldShown("chashCard", true);
break;
}
if(statusSection == "法人") { //（リフォーム）区分
kintone.app.record.setFieldShown("registry", true);
memo.innerText = "※免許証のコピーは法人担当者のもの";
memo.style.fontSize = '18px';
memo.style.color = 'black';
memo.style.textAlign = "center";
memo.style.fontWeight = "bold";
} else {
memo.innerText ="";
}
switch (statusYoyaku) { //リフォーム予約（有無）
case "する":
kintone.app.record.setFieldShown("yoyakuConditions_1", true);
kintone.app.record.setFieldShown("yoyakuConditions_2", true);
break;
}
switch (statusMethod) { //申請方法（交付申請 or 事前予約）
case "事前予約する":
kintone.app.record.setFieldShown("yoyakuDay", true);
kintone.app.record.setFieldShown("subsidy", true);
break;
}
return event;
});
})();実際に動かしてみた！
テスト環境を使って動かしてみました。
ちなみにレコードを新規作成した段階では”全て表示されています。”
工事種別を変更したときに初めて表示・非表示のカスタマイズが反映されるので悪しからず。
新築を選択して中身いじった後に同じフォームでリフォームに行くと新築の時の選択が残るので、その辺りはもしかしたら改良が必要かな…。|ω・)
とはいえ正直ここまででよっぽど問題ありません。
項目別の一覧や条件別の通知設定もしてあるので使用感としては割と満足です。
【項目別の一覧】例
①未申請
（補助金申請日が空欄のもの）
②予約済
（事前予約するにチェックがあり、補助金申請日が空欄ではないもの）
③交付申請済-新築
（工事種別が新築で交付申請日が空欄ではないもの）
④交付申請済-リフォーム
（工事種別がリフォームで交付申請日が空欄ではないもの）
⑤完了報告済
（入金予定日が空欄ではないもの）
余裕があれば、指定の書類が揃ったら「予約可」や「交付申請可」などのAttentionワードを足して行こうかな、と思います。
（memoのif文を活用すれば同様に可能です。メモ「※免許証のコピーは法人担当者のもの」の部分にはスペースを入れてフィールドコードを設定しています。）
【注意 ※Attention※】
こちらはあくまでも社内管理用のkintoneアプリです。これを導入、登録しても事務局へ申請は出来ません。（指定の申請フォームがあります。）