kintone.events.onを書かないkintoneカスタマイズ

Kintonejavascript

last modified date 2021-7-28

2021-6-27

kintoneカスタマイズを行う際、必ずと言っていいほど記述するコードは何でしょうか？

kintoneが独自に用意する関数やプロパティはいろいろありますが、kintone.events.onは誰しもが頻繁に使用されていると思います。

しかし、頻繁に使うものほど冗長の影あり…

というわけで今回はkintone.events.onを内包し、機能を代替する便利な関数の作り方・使い方を紹介します。

あなたがkintone.events.onと書くのは、今回で最後です！

この記事の目次

イベント登録を肩代わりする関数

イベント登録を肩代わりする関数

今回定義する関数は以下です。IEでも動く記述方法と、新しい記述方法それぞれ用意しました。

// es5
/**
 * @param {{events: string[]; action: (event) => event}} configs
 */
function launch(configs) {
  for (var i = 0; i < configs.length; i++) {
    var config = configs[i];

    kintone.events.on(config.events, config.action);
  }
}

// esnext
/**
 * @param {{events: string[]; action: (event) => event}} configs
 */
const launch = (configs) => {
  for (const { events, action } of configs) {
    kintone.events.on(events, action);
  }
};

使い方

通常のイベント登録は以下のように行います。

kintone.events.on(
  ["app.record.create.show", "app.record.edit.show"],
  (event) => {
    console.log("レコード作成・編集時に実行されます");
    return event;
  }
);

kintone.events.on(["app.record.index.show"], (event) => {
  console.log("レコード一覧で実行されます");
  return event;
});

前述したlaunch関数の場合は以下のようになります。

const eventsA = ["app.record.create.show", "app.record.edit.show"];
const actionA = (event) => {
  console.log("レコード作成・編集時に実行されます");
  return event;
};

const eventsB = ["app.record.create.show", "app.record.edit.show"];
const actionB = (event) => {
  console.log("レコード一覧で実行されます");
  return event;
};

launch([
  { action: actionA, events: eventsA },
  { action: actionB, events: eventsB },
]);

launch関数を使った場合は、複数のイベントタイプ・実行イベントのペアを配列として渡し、ひとまとめで実行することとなります。

ここまでだと書き方を変えただけでコードが長くなっていますし、何のメリットがあるのかまだ分かりづらいと思います。

まとめてモバイルに対応させる

先ほどのlaunch関数を以下のように書き換えます。

/**
 * @param {{events: string[]; action: (event) => event}} configs
 */
const launch = (configs) => {
  for (const { events, action } of configs) {
    const mobileEvents = events.map((event) => "mobile." + event);

    kintone.events.on([...events, ...mobileEvents], action);
  }
};

const mobileEvents = events.map((event) => "mobile." + event);の部分を追加しています。

この1行を追加するだけで、launchから登録された全てのイベントを一括でモバイル版でも実行するよう変更できます。

まとめて実行可否を制御する

続いて、複数のイベントに対して共通する、実行可否を制御したい場合の記述方法です。

/**
 * @param {{events: string[]; action: (event) => event}} configs
 */
const launch = (configs) => {
  for (const { events, action } of configs) {
    const handler = (event) => enables(event) ? action(event) : event;

    kintone.events.on(events, handler);
  }
};

const enables = (event) => {
  return event.record["valid"].value;
}

const handler = (event) => enables(event) ? action(event) : event;を追加しました。関数enablesの結果によって、launchに登録された全てのイベントの実行可否が制御できます。また、実行可否を判定する関数を引数にすることで、動的に制御することもできます。

まとめてエラー処理を行う

複数のイベントで共通するエラー処理が必要な場合は以下のように記述します。

/**
 * @param {{events: string[]; action: (event) => event}} configs
 */
const launch = (configs) => {
  for (const { events, action } of configs) {
    const handler = (event) => {
      try {
        action(event);
      } catch (error) {
        errorHandler(event, error);
      }
    };

    kintone.events.on(events, handler);
  }
};

const errorHandler = (event, error) => {
  console.error(`${event.record.$id.value}でエラーが発生しました`, error);
};

これによってすべてのイベント登録前にエラー処理で覆わなくても、launchに登録するだけで汎用的なエラー処理を実行することができます。例えばエラー処理の中でKintone REST APIを使用し、エラーログを別アプリに残す処理を入れておけば、作業者の報告が無くても発生したエラーを確認したりできます。

みなさんのKintoneカスタマイズのお役に立てれば幸いです。最後まで読んでいただき、ありがとうございました。