クリスマスメッセージプラグインをつくってみた

先日、kintoneプラグイン開発用テンプレートを自作したので、その使用感を試しながら、クリスマス感のあるプラグインをつくってみました。

https://github.com/NoriyukiKobori/hazime-plugin-template-for-ktn

プラグインの機能

kintoneアプリでレコードの追加に成功すると、クリスマス感のあるアニメーションとメッセージが表示されます。

ソースコードの抜粋

index.ts

// スタイルシートの読み込み
import './main.scss';
// アニメーション関連の関数をインポート
import { createOverlay, createSnowflakes, showMessage } from './func';

((PLUGIN_ID) => {
  'use strict';

  // プラグイン設定を取得
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  // レコード登録成功時のイベント
  kintone.events.on('app.record.create.submit.success', (event) => {
    return new Promise((resolve) => {
      // 半透明の黒いオーバーレイを表示(背後の操作を防止)
      const overlay = createOverlay();
      // 雪の結晶アニメーションを開始
      createSnowflakes();
      // 設定されたメッセージを表示
      showMessage(config.messageText);

      // 4秒後にイベントを完了
      setTimeout(() => {
        resolve(event); // kintoneイベントを解決
      }, 4000); // 3秒表示 + フェードアウト 1秒
    });
  });
})(kintone.$PLUGIN_ID);

func.ts

/**
 * オーバーレイ(半透明の背景)を作成
 */
export const createOverlay = () => {
  // div要素を新規作成
  const overlay = document.createElement('div');
  overlay.id = 'christmas-overlay';
  document.body.appendChild(overlay);
  return overlay;
};

/**
 * 雪の結晶を生成してアニメーション開始
 */
export const createSnowflakes = () => {
  // 雪の結晶の数
  const snowCount = 50;
  // 指定数だけ雪を生成
  for (let i = 0; i < snowCount; i++) {
    // div要素を新規作成
    const snow = document.createElement('div');
    snow.classList.add('snowflake');
    snow.innerHTML = '❄';

    // 横位置をランダムに配置(0~100vw)
    snow.style.left = Math.random() * 100 + 'vw';
    // 画面外上方にランダムに配置(-100vh ~ 0の範囲)
    snow.style.top = -(Math.random() * 100) + 'vh';
    // サイズをランダムに設定(10~30px)
    snow.style.fontSize = Math.random() * 20 + 10 + 'px';
    // アニメーション時間をランダムに設定(5~11秒)
    snow.style.animationDuration = Math.random() * 6 + 5 + 's';
    // body要素に追加して表示
    document.body.appendChild(snow);
    // アニメーション終了時に要素を削除
    snow.addEventListener('animationend', () => snow.remove());
  }
};

/**
 * メッセージを表示
 */
export const showMessage = (message: string) => {
  // div要素を新規作成
  const msg = document.createElement('div');
  msg.id = 'christmas-message';
  // メッセージテキストを設定(未設定時はデフォルトメッセージ)
  msg.textContent = message || '🎅 Merry Christmas 🎄';
  document.body.appendChild(msg);

  // 0.1秒後にフェードイン開始(opacity: 0 → 1)
  setTimeout(() => (msg.style.opacity = '1'), 100);
  // 3秒後にフェードアウト開始
  setTimeout(() => {
    msg.style.opacity = '0'; // opacity: 1 → 0
    // フェードアウト完了後(1秒後)に要素を削除
    setTimeout(() => msg.remove(), 1000);
  }, 3000);
};

main.scss

// Main styles

// === 変数定義 ===
// 各要素の重なり順を管理するz-index値
$z-index-overlay: 9998; // オーバーレイ(背景)
$z-index-snowflake: 9999; // 雪の結晶
$z-index-message: 10000; // メッセージ(最前面)

// 共通で使用する色を変数化
$color-white: #ffffff; // 白色(雪とテキストに使用)
$color-overlay-bg: rgba(0, 0, 0, 0.5); // 半透明の黒(オーバーレイ背景)
$color-text-shadow: rgba(0, 0, 0, 0.6); // テキストの影色

// === Mixins(再利用可能なスタイル) ===
// 全画面を覆うfixed配置のスタイル
@mixin fixed-full {
  position: fixed; // スクロールしても固定
  top: 0; // 上端から配置
  left: 0; // 左端から配置
  width: 100%; // 幅100%
  height: 100%; // 高さ100%
}

// 画面中央に配置するスタイル
@mixin center-transform {
  position: fixed; // スクロールしても固定
  top: 40%; // 上から40%の位置
  left: 50%; // 左から50%の位置
  transform: translate(-50%, -50%); // 自身の中心を基準に中央配置
}

// === アニメーション定義 ===
// 雪が降るアニメーション
@keyframes snow {
  0% {
    opacity: 1; // 開始時は完全に表示
  }
  100% {
    transform: translateY(200vh); // 画面の2倍下に移動
    opacity: 0; // 終了時は完全に透明
  }
}

// === アニメーションオーバーレイ ===
#christmas-overlay {
  @include fixed-full; // 全画面を覆う配置
  background-color: $color-overlay-bg; // 半透明の黒背景
  z-index: $z-index-overlay; // 雪やメッセージより背面
  pointer-events: all; // クリックイベントを遮断(背後の操作を防ぐ)
}

// === 雪の結晶 ===
.snowflake {
  position: fixed; // スクロールしても固定
  color: $color-white; // 白色で表示
  font-size: 12px; // 基本サイズ(JSで個別に上書き)
  pointer-events: none; // クリックイベントを無効化
  user-select: none; // テキスト選択を無効化
  animation: snow linear; // snowアニメーションを等速で実行
  z-index: $z-index-snowflake; // オーバーレイより前面に表示
}

// === メッセージ表示 ===
#christmas-message {
  @include center-transform; // 画面中央に配置
  width: 80%; // 画面幅の80%
  text-align: center; // テキストを中央揃え
  font-size: 43px; // 文字サイズ指定
  color: $color-white; // テキストカラー指定
  font-weight: bold; // 太字
  text-shadow: 2px 2px 8px $color-text-shadow; // 影をつける
  z-index: $z-index-message; // 最前面に表示
  opacity: 0; // 初期状態は透明(JSで制御)
  transition: opacity 1s ease; // 透明度の変化を1秒かけて滑らかに
}

ブログの方には、パッケージングしたファイルや設定画面のソースコードも掲載しております。
【kintone Advent Calendar 2025】クリスマスメッセージプラグインをつくってみた

それでは、素敵なクリスマスをお過ごしください🎅🎄☃️