光るクリスマスツリーアプリをつくってみた kintone
じんぐるべーる♪じんぐるべーる♪すっずーがーなるっ♪
もうすぐクリスマスですねー。
去年は「カレンダーPlus」でクリスマスツリーを描きました。😀
さて今年はどうしよっかな。。。よしっ！
JSカスタマイズの勉強も兼ねて、kintoneアプリでクリスマスツリーを描いてみましょう！！
それも。。。光るやつ！！😆
光るクリスマスツリーアプリ
なんちゃって、単なる２コマのパラパラ漫画です。😅
アプリ作成といってもスペースフィールドいっこ貼るだけ。😁
要素ID：paraSpace
スペースフィールドは以下の画面くらいの幅をとってください。
クリスマスツリーのアイコンはICONE様。ありがとうございます。
で、JSのプログラムは以下のとおり。
(function() {
'use strict';
kintone.events.on('app.record.detail.show', function(event) {
const koma0 = `
🟦🟦🟦🟦🟦🟦🟦🟨🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟨🟨🟨🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟨🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟩🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟩🟩🟩🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟩🟩🟥🟩🟩🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟩🟧🟩🟩🟩🟪🟩🟦🟦🟦🟦🟦
🟦🟦🟦🟩🟩🟩🟩🟩🟥🟩🟩🟩🟦🟦🟦🟦
🟦🟦🟦🟦🟩🟩🟥🟩🟩🟩🟩🟦🟦🟦🟦🟦
🟦🟦🟦🟩🟩🟧🟩🟩🟪🟩🟩🟩🟦🟦🟦🟦
🟦🟦🟩🟩🟥🟩🟪🟩🟩🟩🟧🟩🟩🟦🟦🟦
🟦🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟫🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟫🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟧🟧🟧🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟧🟧🟧🟦🟦🟦🟦🟦🟦🟦
`;
const koma1 = `
🟦🟦🟦🟦🟦🟦🟦🟨🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟨🟨🟨🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟨🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟩🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟩🟩🟩🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟩🟩🟧🟩🟩🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟩🟥🟩🟩🟩🟥🟩🟦🟦🟦🟦🟦
🟦🟦🟦🟩🟩🟩🟩🟩🟪🟩🟩🟩🟦🟦🟦🟦
🟦🟦🟦🟦🟩🟩🟪🟩🟩🟩🟩🟦🟦🟦🟦🟦
🟦🟦🟦🟩🟩🟥🟩🟩🟧🟩🟩🟩🟦🟦🟦🟦
🟦🟦🟩🟩🟧🟩🟥🟩🟩🟩🟪🟩🟩🟦🟦🟦
🟦🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟫🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟦🟫🟦🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟧🟧🟧🟦🟦🟦🟦🟦🟦🟦
🟦🟦🟦🟦🟦🟦🟧🟧🟧🟦🟦🟦🟦🟦🟦🟦
`;
let komaFlag = 0;
const paraSpace = kintone.app.record.getSpaceElement('paraSpace');
const timer = window.setInterval(
function() {
if (komaFlag === 0) {
paraSpace.innerText = koma0;
komaFlag = 1;
} else {
paraSpace.innerText = koma1;
komaFlag = 0;
}
},1000);
return event;
});
})();短いですが、これで完成です。
以下簡単にJSの説明をします。
ざっくり説明
絵文字で描いたクリスマスツリーの絵を1秒ごとに切り替えます。
まずはレコードを1件登録してください。
で、レコード詳細を表示したら、パラパラ漫画がうごきます！
ポイント
JSカスタマイズのポイントをいくつか。
バッククォート「`」は改行も含めて処理してくれます。便利ですね！
const koma0 = `
今回キモになる命令はこれ！setInterval
setIntervalで、指定ミリ秒ごとに処理を繰りかえすことができます。
（今回は1000ミリ秒=1秒）
const timer = window.setInterval(
komaFlagで、koma0とkoma1を切り替えています。
ちなみにsetIntervalを止めるにはclearIntervalを使います（今回は使っていません）。
このへんの情報をググってみると。。。
あっ！じゅりどんさんだ！！😄
いつもありがとうございます。
完成動画
完成！やったー！！
こんな感じで光ります！✨
アプリテンプレート
添付するほどのアプリでもないですが、46uサンタからプレゼント！！🎅
今回、setIntervalという命令を使いたかったので、思いつきと勢いだけでつくったアプリです。すごくないやつ。🤣
ので何か問題や不具合があるかもしれません。大丈夫かな？
アドバイスあれば教えてください！
でわでわ！
メリークリスマス！！🎄
この記事が気に入ったらサポートをしてみませんか？