ããã«ã¡ã¯ð
æ ªåŒäŒç€ŸããããŠã¬ã®@YushiYamamotoã§ãïŒ
ãããããµã€ãã®éçºã»éå¶ãæ
åœããªãããReact.jsã»Next.jså°éã®ããªãŒã©ã³ã¹ãšã³ãžãã¢ãšããŠã掻åããŠããŸãâïž
è¿å¹Žãåãæ¹ã®å€æ§åãé²ã¿ããã«ãªã¢ãŒãã§ã®ãããžã§ã¯ãéè¡ã¯çãããªããªããŸãããç¹ã«ãæ¥åæ¹åãã©ãããã©ãŒã ãšããŠäººæ°ã®ãKintoneïŒãã³ããŒã³ïŒãã¯ããã®æè»æ§ãããªã¢ãŒãç°å¢ã§ã®éçºã»éçšã«ãé©ããŠããŸããããããå Žæãéžã°ãªãèªç±ãã®è£ã§ãããŒã 飿ºããããžã§ã¯ã管çã®é£ãããæããæ¹ãå°ãªããªãã§ãããã
ãã®èšäºã§ã¯ããã«ãªã¢ãŒãç°å¢ã§Kintoneéçºãããžã§ã¯ããåæ»ã«é²ããããŒã 飿ºãæåãããããã®å ·äœçãªç®¡çè¡ãã³ãããç§ã®çµéšã亀ããªããã玹ä»ããŸãïŒããã°ã©ãã³ã°åå¿è ã®æ¹ããKintoneéçºã«ããããææŠããæ¹ãããã²åèã«ããŠãã ãããâš
Kintoneãšã¯ïŒ ð€
ãŸããKintoneã«ã€ããŠç°¡åã«ããããããŸãããã
Kintoneã¯ããµã€ããŠãºæ ªåŒäŒç€ŸãæäŸããã¯ã©ãŠãåã®æ¥åã¢ããªã±ãŒã·ã§ã³äœæãã©ãããã©ãŒã ã§ããããã°ã©ãã³ã°ã®ç¥èããªããŠãããã©ãã°ïŒããããæäœã§ããŒã¿ããŒã¹åã®ã¢ããªãç°¡åã«äœæã§ããŸãã

顧客管çãæ¡ä»¶ç®¡çãæ¥å ±ãåãåãã管çãªã©ãæ§ã ãªæ¥åã¢ããªãã¹ããŒãã£ã«æ§ç¯ã§ããã®ãé åã§ããããã«ãJavaScriptãCSSã䜿ã£ãŠã«ã¹ã¿ãã€ãºããããšã§ãããé«åºŠãªæ©èœããã¶ã€ã³ãå®çŸããããšãå¯èœã§ãã
Kintoneã®äž»ãªç¹åŸŽ
- ããŠã¹æäœã§ã¢ããªäœæïŒããŒã³ãŒãïŒ
- è±å¯ãªAPIãšJavaScript/CSSã«ããã«ã¹ã¿ãã€ãºïŒããŒã³ãŒãïŒ
- ããŒã å ã§ã®æ å ±å ±æã容æ
- ã¢ãã€ã«å¯Ÿå¿
- å€éšãµãŒãã¹é£æº
ãã«ãªã¢ãŒãKintoneéçºã®èª²é¡ ð¥
ãã«ãªã¢ãŒãã§ã®éçºã¯ã¡ãªãããå€ãã§ãããç¹æã®èª²é¡ãååšããŸãã
-
ã³ãã¥ãã±ãŒã·ã§ã³ã®åžèå ð£ïžð¬
- 察é¢ã§ã®æ°è»œãªçžè«ãéè«ãæžããèªèã®ãºã¬ãçããããã
- ããã¹ãããŒã¹ã®ããåãã§ã¯ããã¥ã¢ã³ã¹ãäŒããã«ããã
-
é²æç¶æ³ã®äžéæå ð
- 誰ãäœãããŠããã®ããã©ããŸã§é²ãã§ããã®ããèŠãã«ããã
- ã¿ã¹ã¯ã®ããã«ããã¯ãçºèŠãã¥ããã
-
ã¢ãããŒã·ã§ã³ç¶æã®é£ãã ðª
- å€ç¬æãæãããããããŒã ã®äžäœæãéžæããã«ããã
-
ç°å¢å·®ã«ããåé¡ ð»
- éçºç°å¢ããã¹ãç°å¢ã®å·®ç°ãåé¡ãåŒãèµ·ããããšãããã
- Kintoneã®ã«ã¹ã¿ãã€ãºã§ã¯ãæ¬çªç°å¢ãšéçºç°å¢ã®é©åãªäœ¿ãåããéèŠã
ãããã®èª²é¡ãå æãããããžã§ã¯ããæåã«å°ãããã®å ·äœçãªç®¡çè¡ãèŠãŠãããŸãããïŒ
ãã«ãªã¢ãŒãKintoneéçºãããžã§ã¯ã管çè¡ ð ïž
1. ã³ãã¥ãã±ãŒã·ã§ã³æŠç¥ã®ç¢ºç« ð£
ãªã¢ãŒãã¯ãŒã¯æåã®éµã¯ãã³ãã¥ãã±ãŒã·ã§ã³ãã§ãã以äžã®ç¹ãæèããŸãããã
-
ããŒã«ã®éžå®ãšã«ãŒã«å:
- ãã£ããããŒã«ïŒSlack, Microsoft Teamsãªã©ïŒ: æ¥åžžé£çµ¡ã質çå¿ç
- ãããªäŒè°ããŒã«ïŒZoom, Google Meetãªã©ïŒ: å®äŸäŒè°ããã¢ããã°ã©ãã³ã°ãè€éãªä»æ§ã®è°è«
- Kintoneã®ã³ã¡ã³ãæ©èœ: åã¬ã³ãŒãã«é¢ããè°è«ãç³ãéã
-
宿çãªããŒãã£ã³ã°:
- ãã€ãªãŒã¹ã¿ã³ãã¢ããïŒæäŒïŒ: 10-15åçšåºŠã§ãæšæ¥ãã£ãããšãã仿¥ããããšããå°ã£ãŠããããšããå ±æã
- ãŠã£ãŒã¯ãªãŒããŒãã£ã³ã°: 鱿¬¡ã§ã®é²æç¢ºèªã課é¡å ±æã次é±ã®èšç»ã
- 1on1ããŒãã£ã³ã°: åå¥ã®çžè«ããã£ãŒãããã¯ã®æ©äŒã
-
ããªãŒããŒã³ãã¥ãã±ãŒã·ã§ã³ããå¿ããã:
- å°ãéå°ãªãããæ å ±ãå ±æããæèã倧åã§ãããããã¯èšããªããŠããããã ãããã¯çŠç©ã
- 鲿ã課é¡ãæ°ã¥ããããšãªã©ãç©æ¥µçã«çºä¿¡ããŸãããã
2. KintoneãæŽ»çšããã¿ã¹ã¯ç®¡çãšé²æå¯èŠå ð
Kintoneèªäœããããžã§ã¯ã管çããŒã«ãšããŠæŽ»çšããã®ãéåžžã«å¹æçã§ãã
-
ãããžã§ã¯ã管çã¢ããªã®äœæ:
Kintoneã§ä»¥äžã®ãããªãã£ãŒã«ããæã€ã¿ã¹ã¯ç®¡çã¢ããªãäœæããŸãã- ã¿ã¹ã¯åïŒæåå1è¡ïŒ
- æ åœè ïŒãŠãŒã¶ãŒéžæïŒ
- ã¹ããŒã¿ã¹ïŒããããããŠã³ïŒæªçæ, äœæ¥äž, ã¬ãã¥ãŒäž, å®äº, ä¿çïŒ
- æéïŒæ¥ä»ïŒ
- åªå 床ïŒããããããŠã³ïŒé«, äž, äœïŒ
- 詳现ïŒãªããããã¹ãïŒ
- é¢é£ã¬ã³ãŒãïŒã¢ããªé£æºïŒä»æ§æžã¢ããªãªã©ïŒ
- å®çžŸå·¥æ°ïŒæ°å€ïŒ
- 鲿çïŒæ°å€ or èšç®ïŒ
-
ããã»ã¹ç®¡çæ©èœã®æŽ»çš:
ã¿ã¹ã¯ã®ã¹ããŒã¿ã¹å€æŽãããã»ã¹ç®¡çã§èšå®ããæ¿èªãããŒãªã©ãçµã¿èŸŒãããšã§ãã¿ã¹ã¯ã®é²æãæç¢ºã«ããŸãã -
ããã·ã¥ããŒããã°ã©ãã§å¯èŠå:
Kintoneã®æšæºæ©èœã§ãæ åœè å¥ã¿ã¹ã¯ç¶æ³ããããžã§ã¯ãå šäœã®é²æç¶æ³ãã°ã©ãåããããŒã¿ã«ã«è¡šç€ºããŸããããã«ãããããŒã å šå¡ãäžç®ã§ç¶æ³ãææ¡ã§ããŸãã
3. Kintoneã«ã¹ã¿ãã€ãºéçºã®ããŒãžã§ã³ç®¡çãšãããã€ãã㌠ð
Kintoneã®JavaScriptãCSSã«ã¹ã¿ãã€ãºãè¡ãå ŽåãããŒãžã§ã³ç®¡çã¯å¿ é ã§ãã
-
GitãšGitHub/GitLabã®æŽ»çš:
- ã«ã¹ã¿ãã€ãºçšã®JavaScriptãã¡ã€ã«ãCSSãã¡ã€ã«ãGitã§ããŒãžã§ã³ç®¡çããŸãã
-
main
(ormaster
) ãã©ã³ããæ¬çªçšãdevelop
ãã©ã³ããéçºçšãšããæ©èœéçºã¯ãã£ãŒãã£ãŒãã©ã³ã (feature/xxx
) ã§è¡ããŸãã
# æ°æ©èœéçºãã©ã³ããäœæ git checkout develop git pull origin develop git checkout -b feature/add-input-validation # éçºåŸ... git add . git commit -m "feat: 顧客åãã£ãŒã«ãã®å ¥åããªããŒã·ã§ã³è¿œå " git push origin feature/add-input-validation
ãã®åŸãGitHubãªã©ã§ãã«ãªã¯ãšã¹ããäœæããã¬ãã¥ãŒãçµãŠããŒãžããŸãã
-
Kintoneéçºç°å¢ã®æŽå:
ãµã€ããŠãºããæäŸãããéçºè ã©ã€ã»ã³ã¹ãå©çšããæ¬çªç°å¢ãšã¯å¥ã«éçºçšKintoneç°å¢ãçšæããŸããããããã«ãããæ¬çªç°å¢ã«åœ±é¿ãäžããããšãªãå®å šã«éçºã»ãã¹ããè¡ããŸãã -
ã«ã¹ã¿ãã€ãºã¢ããããŒãããŒã«ã®å©çš:
æåã§ã®ã¢ããããŒãã¯ãã¹ãçºçãããããããCLIããŒã«ã掻çšããŸãã-
@kintone/customize-uploader
: Kintoneå ¬åŒã®ã¢ããããŒããŒã -
kintone-cli
(yoshikawaããã®ããŒã«): 髿©èœã§èšå®ãã¡ã€ã«ããŒã¹ã§ã®äžæ¬ã¢ããããŒããªã©ãå¯èœã
@kintone/customize-uploader
ã䜿ã£ãèšå®ãã¡ã€ã«ã®äŸ (customize-manifest.json
):{ "app": "123", // ã¢ããªID "scope": "ALL", // PCçãšã¢ãã€ã«çäž¡æ¹ã«é©çš "desktop": { "js": [ "https://your-cdn.com/path/to/desktop/library.js", // CDNäžã®ã©ã€ãã©ãª "dist/desktop/main.js" // ããŒã«ã«ãã¡ã€ã« ], "css": [ "css/desktop-custom.css" ] }, "mobile": { "js": [ "dist/mobile/main.js" ], "css": [] } }
ã¢ããããŒãã³ãã³ãäŸ:
npx @kintone/customize-uploader --base-url https://yourdomain.cybozu.com --username YOUR_USERNAME --password YOUR_PASSWORD customize-manifest.json
ãã¹ã¯ãŒããã³ãã³ãã©ã€ã³ã«çŽæ¥èšè¿°ããã®ã¯ã»ãã¥ãªãã£äžå¥œãŸãããããŸãããç°å¢å€æ°ã
@kintone/rest-api-client
ã®èªèšŒæ©èœãå©çšãããªã©ãããå®å šãªæ¹æ³ãæ€èšããŠãã ããããããã€ãããŒã®äŸ:
CI/CDããŒã« (GitHub Actions, Jenkinsãªã©) ãå°å ¥ããããšã§ãç¹å®ãã©ã³ããžã®ããã·ã¥ãããªã¬ãŒã«ãèªåã§ãã«ãããã¹ããéçºç°å¢ãžã®ãããã€ãè¡ãããšãå¯èœã§ãã
-
4. ããã¥ã¡ã³ãæåã®éžæ ð
ãªã¢ãŒãã¯ãŒã¯ã§ã¯ãæé»ç¥ããããã«ã圢åŒç¥ãã«å€ããããéèŠã§ãã
- Kintoneã¢ããªèšèšæž: ã¢ããªã®ç®çããã£ãŒã«ãå®çŸ©ãããã»ã¹ç®¡çãã¢ã¯ã»ã¹æš©èšå®ãªã©ãèšé²ã
- ã«ã¹ã¿ãã€ãºä»æ§æž: JavaScript/CSSã®æ©èœãããžãã¯ãå©çšã©ã€ãã©ãªãªã©ãæèšã
- éçºã»éçšã«ãŒã«: ã³ãŒãã£ã³ã°èŠçŽããã©ã³ãæŠç¥ããããã€æé ãã¬ãã¥ãŒããã»ã¹ãªã©ã
- è°äºé²: ããŒãã£ã³ã°ã®æ±ºå®äºé ãTODOãèšé²ãå ±æã
ãããã®ããã¥ã¡ã³ãã¯ãKintoneã¢ããªãå ±æã¹ãã¬ãŒãž (Google Drive, SharePointãªã©)ãWikiããŒã« (Confluence, Notionãªã©) ã§äžå 管çããŸãããã
5. Kintone JavaScriptã«ã¹ã¿ãã€ãºã®ã³ãŒãã£ã³ã°å®è·µäŸ ð»
ç°¡åãªäŸãšããŠãã¬ã³ãŒãä¿åæã«ç¹å®ãã£ãŒã«ãã空æ¬ã ã£ãããšã©ãŒã衚瀺ããã«ã¹ã¿ãã€ãºãèŠãŠã¿ãŸãããã
Kintone JS: ä¿åæå ¥åãã§ãã¯
// (function() { // 峿颿°ã§ã¹ã³ãŒããéå®
// 'use strict'; // ã¹ããªã¯ãã¢ãŒã
// // ã¬ã³ãŒãä¿åã€ãã³ã
// kintone.events.on('app.record.create.submit', function(event) {
// const record = event.record;
// // ãã¿ã¹ã¯åããã£ãŒã«ãïŒãã£ãŒã«ãã³ãŒã: TaskNameïŒã空ããã§ãã¯
// if (!record.TaskName.value) {
// event.error = 'ã¿ã¹ã¯åã¯å¿
é é
ç®ã§ããå
¥åããŠãã ããã';
// // Kintoneã®æšæºãšã©ãŒã¡ãã»ãŒãžè¡šç€ºæ©èœã䜿ã
// // alert('ã¿ã¹ã¯åãå
¥åããŠãã ããïŒ'); // alertã¯ãŠãŒã¶ãŒäœéšãæãªãå¯èœæ§ãããã®ã§æ³šæ
// }
// return event; // eventãªããžã§ã¯ããè¿ãããšãå¿ããã«
// });
// // ã¬ã³ãŒãç·šéã€ãã³ã (åæ§ã®ãã§ãã¯ã远å ããå Žå)
// kintone.events.on('app.record.edit.submit', function(event) {
// const record = event.record;
// if (!record.TaskName.value) {
// event.error = 'ã¿ã¹ã¯åã¯å¿
é é
ç®ã§ããå
¥åããŠãã ããã';
// }
// return event;
// });
// })(); // 峿颿°ã®å®è¡
// äžèšã³ãŒãã¯ãã®ãŸãŸäœ¿ããŸããã
// createãšeditã§åãåŠçããããªã颿°ã«ãŸãšããã®ãè¯ãã§ãããã
(function() {
'use strict';
// ããªããŒã·ã§ã³é¢æ°
function validateRecord(event) {
const record = event.record;
if (!record.TaskName.value) { // ãã£ãŒã«ãã³ãŒãã 'TaskName' ãšä»®å®
event.error = 'ã¿ã¹ã¯åã¯å¿
é é
ç®ã§ããå
¥åããŠãã ããã';
}
// ä»ã®ãã£ãŒã«ãã®ããªããŒã·ã§ã³ãããã«è¿œå å¯èœ
// äŸ:
// if (record.DueDate.value && new Date(record.DueDate.value) < new Date()) {
// event.error = 'æéæ¥ã¯éå»ã®æ¥ä»ã«ã§ããŸããã';
// }
return event;
}
// ã€ãã³ããã³ãã©ãŒã®é
å
const events = [
'app.record.create.submit',
'app.record.edit.submit'
];
kintone.events.on(events, validateRecord);
})();
ãã€ã³ã
-
峿颿°
(function() { ... })();
: ã°ããŒãã«ã¹ã³ãŒãã®æ±æãé²ããŸãã -
'use strict';
: ãšã©ãŒãçºèŠããããããã¹ããªã¯ãã¢ãŒãã -
ãã£ãŒã«ãã³ãŒã: Kintoneã¢ããªèšå®ç»é¢ã§ç¢ºèªã»èšå®ããã³ãŒãã§ããäžèšäŸã§ã¯
TaskName
ãšããŠããŸãã -
event.error
: Kintoneã®æšæºæ©èœã§ããã£ãŒã«ãã®äžéšããã€ã¢ãã°ã§ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸããalert()
ãããæšå¥šãããŸãã -
ã€ãã³ããã³ãã©ã®å
±éå:
create
ãšedit
ãªã©ãåãåŠçãè€æ°ã®ã€ãã³ãã§è¡ãå Žåã¯ã颿°ã«ãŸãšããŠåŒã³åºããšã³ãŒããã¹ãããªããŸãã
6. ã»ãã¥ãªãã£æèã®åŸ¹åº ð
ãªã¢ãŒãç°å¢ã§ã¯ç¹ã«ã»ãã¥ãªãã£ãžã®é æ ®ãäžå¯æ¬ ã§ãã
- Kintoneã®ã¢ã¯ã»ã¹æš©èšå®ãé©åã«è¡ããå¿ èŠãªäººã«å¿ èŠãªæ å ±ã ããèŠããããã«ããã
- APIããŒã¯ã³ã®ç®¡çãå³éã«è¡ãïŒã³ãŒãã«çŽæ¥åã蟌ãŸãªããäžèŠãªæš©éãäžããªãïŒã
- JavaScriptã«ã¹ã¿ãã€ãºã§ã¯ãå€éšã©ã€ãã©ãªã®éžå®ã«æ³šæããXSSïŒã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°ïŒãªã©ã®è匱æ§ãäœã蟌ãŸãªãããã«ããã
ãŸãšã âš
ãã«ãªã¢ãŒãç°å¢ã§ã®Kintoneéçºãããžã§ã¯ããæåãããããã«ã¯ã以äžã®ç¹ãéèŠã§ãã
- ð£ïž æç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³æŠç¥ ãšããŒã«ã®æŽ»çš
- ð KintoneãæŽ»çšããã¿ã¹ã¯ç®¡ç ãšé²æã®å¯èŠå
- ð GitãšCLIããŒã«ã«ããã«ã¹ã¿ãã€ãºéçºãã㌠ã®ç¢ºç«
- ð ç©æ¥µçãªããã¥ã¡ã³ãäœæã»å ±ææå ã®éžæ
- ð 培åºããã»ãã¥ãªãã£æè
ãããã®ç®¡çè¡ãå®è·µããããšã§ãããŒã ã¡ã³ããŒãå°ççã«é¢ããŠããŠããäžäœæãæã¡ãå¹ççã«ãããžã§ã¯ããé²ããããšãã§ããŸããKintoneã®ããã³ã·ã£ã«ãæå€§éã«åŒãåºãããªã¢ãŒãã¯ãŒã¯ã®ã¡ãªããã享åããŸãããïŒ
ä»åã®èšäºããçããã®ãã«ãªã¢ãŒãKintoneéçºã®äžå©ãšãªãã°å¹žãã§ãð
æåŸã«ïŒæ¥åå§èšã®ãçžè«ãæ¿ããŸã
ç§ã¯æ¥åå§èšãšã³ãžãã¢ãšããŠWEBå¶äœãã·ã¹ãã éçºãè«ãè² ã£ãŠããŸããææ°æè¡ã掻çšããã¬ã¹ãã³ã·ããªWebãµã€ãå¶äœãã€ã³ã¿ã©ã¯ãã£ããªã¢ããªã±ãŒã·ã§ã³éçºãAPI飿ºãªã©å¹ åºããèŠæã«å¯Ÿå¿å¯èœã§ãã
ã課é¡è§£æ±ºã«åãã峿Šåãæ¬²ããããé«å質ãªWebå¶äœãäŸé Œãããããšããæ¹ã¯ããæ°è»œã«ãçžè«ãã ãããäžç·ã«ããžãã¹ã®æé·ãç®æããŸãããïŒ