kintone JS API – スマートフォン用/レコード保存前イベント を試してみる

2016年12月11日のkintoneアップデートでモバイル（スマートフォン）向けのkintone JavaScript APIが強化されました。これまで、モバイルにおける保存ボタン押下時には mobile.app.record.detail.show イベントが2回走る等使いづらさがありましたが、今回のアップデートでモバイルにも「レコード保存前イベント」、「フィールド変更時イベント」が追加されました。

スマートフォン用のレコード追加/編集画面の保存実行前イベント

今回はスマートフォン用の「レコード追加/編集画面の保存実行前イベント」の動きを確認したいと思います。「レコード保存前イベント」と言えば、PC版はkintone.Promiseの返却に対応しているということで、これについても合わせて確認できるよう「kintone.Promiseを紐解く」の記事で登場させた「ユーザーの重複チェック」を拡張することにしましょう。

「ユーザーの重複チェック」カスタマイズ（PC版）

まず、PC版のおさらいです。ユーザー選択フィールドにセットしたユーザーが他のレコードでセット済みでないかの重複チェックするサンプルです（ユーザー選択フィールドは選択系フィールドということもあって標準機能に重複チェックはありません）。マスタアプリ等で利用できるシナリオでkintone.Promiseへの理解を深める例としてご紹介しました。

(function() {
  "use strict";

  kintone.events.on([
    'app.record.create.submit',
    'app.record.edit.submit'
  ], function(event) {
    console.log(event);
    var record = event.record;
    var key_field = 'ユーザー選択';
    var own_id = kintone.app.record.getId(); // 新規でnull、編集時には値がセットされる
    var query = '';

    // ユーザー選択フィールドが空の場合にはここで、return
    if (record[key_field].value.length === 0) {
      return event;
    }

    // key_fieldがユーザー選択フィールドの時のquery
    switch (record[key_field].type) {
      case 'USER_SELECT':
        for (var i = 0; i < record[key_field].value.length; i++) {
          query += key_field + ' in ("' + record[key_field].value[i].code + '") or ';
        }
        query = query.slice(0, -3);
        break;
    }

    // 新規登録（null）と編集（自レコード除外）に対応
    if (own_id) {
      query = query + ' and $id != ' + own_id;
    }

    // 検索対象のレコードは0または1個なので、limit 1で絞り込み
    query = query + ' limit 1';

    // 重複チェック
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: kintone.app.getId(),
      query: query
    }).then(function(resp) {
      // レコードの重複をフィールドエラーにセット
      if (resp.records.length === 1) {
        record[key_field].error = '値がほかのレコードと重複しています。';
      }
      return event;
    }).catch(function(err) {
      event.error = '既存レコードの取得に失敗しました。'
      return event;
    });
  });
})();

「ユーザーの重複チェック」カスタマイズのモバイルへの拡張

PC版からPC・スマートフォンの両対応にするための拡張を行います。PC用とスマートフォン用のJSカスタマイズファイルはそれぞれkintoneに設定することができますので、それぞれに最適にコーディングすることができますが、今後ますますPC用とスマートフォン用は統一的に記述できるようになっていくと思いますので、積極的に共用する書き方を試みたいと思います。

まず、追加された次のイベントを追記します。
– mobile.app.record.create.submit
– mobile.app.record.edit.submit

次に、モバイル対応に伴い、次の2箇所を修正します。
– kintone.app.getId() -> event.appId
– kintone.app.record.getId() -> event.recordId
これは、kintone.app.getId() と kintone.app.record.getId() がモバイル対応していないためです。

これでOKです。

(function() {
  "use strict";

  kintone.events.on([
    'app.record.create.submit',
    'app.record.edit.submit',
    'mobile.app.record.create.submit', // 追記箇所
    'mobile.app.record.edit.submit' // 追記箇所
  ], function(event) {
    console.log(event);
    var record = event.record;
    var key_field = 'ユーザー選択';
    var own_id = event.recordId ? event.recordId : null; // 新規でnull、編集時には値がセットされる/修正箇所
    var query = '';

    // ユーザー選択フィールドが空の場合にはここで、return
    if (record[key_field].value.length === 0) {
      return event;
    }

    // key_fieldがユーザー選択フィールドの時のquery
    switch (record[key_field].type) {
      case 'USER_SELECT':
        for (var i = 0; i < record[key_field].value.length; i++) {
          query += key_field + ' in ("' + record[key_field].value[i].code + '") or ';
        }
        query = query.slice(0, -3);
        break;
    }

    // 新規登録（null）と編集（自レコード除外）に対応
    if (own_id) {
      query = query + ' and $id != ' + own_id;
    }

    // 検索対象のレコードは0または1個なので、limit 1で絞り込み
    query = query + ' limit 1';

    // 重複チェック
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: event.appId, // 修正箇所
      query: query
    }).then(function(resp) {
      // レコードの重複をフィールドエラーにセット
      if (resp.records.length === 1) {
        record[key_field].error = '値がほかのレコードと重複しています。';
      }
      return event;
    }).catch(function(err) {
      event.error = '既存レコードの取得に失敗しました。'
      return event;
    });
  });
})();

このファイルを「JavaScript/CSSでカスタマイズ」の設定画面で次のようにセットします。前述の通り、PC用とスマートフォン用に同じファイルを適用します。

モバイルビューで、既に別レコードで登録されているユーザーを選択して、レコード保存を試みます。

保存前イベントで、PCビューと同じようにフィールドエラーがセットされます。また、kintone.Promiseの動きはモバイルでも健在のようです。

まとめ

今回は、レコード保存前イベントがモバイル対応したため、これをkintone.Promiseの返却を含めて、試してみました。PC/モバイル早見表を見ると、まだまだ「×」印も多いですが、これを機にモバイル対応も走り出しそうな予感ですので、今後はPCビューで適用しようとするカスタマイズがモバイルビューで適用可能かどうか見極めつつ、統一的に適用可能な場合には同時に適用してしまうと良いかと思います。