kintoneプラグイン開発入門 正誤表

chapter7.md

P.144

誤）これで設定画面のHTMLは完成です。
正）これで設定画面のJavaScriptファイルは完成です。

リスト 7.23 最終的な設定画面のJavaScriptファイル（js/config.js）

誤)省略
正）

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

  const Kuc = Kucs['1.16.0'];

  // XSS を防ぐためのエスケープ処理
  const escapeHtml = (str) => {
    return str
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
      .replace(/\n/g, '&#xA;');
  };

  // スペースフィールドのセレクトボックスの項目を作成
  const createOptionsForSpaceField = async () => {
    const options = [{label: '選択してください', value: ''}];
    // kintone-config-helper を使って、アプリ内のスペースフィールドを取得する
    const spaceFields =
      await KintoneConfigHelper.getFields('SPACER');
    const spaceFieldOptions = spaceFields.map(({elementId}) => {
      return {
        label: elementId,
        value: elementId
      };
    });
    return options.concat(spaceFieldOptions);
  };

  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  // プラグイン設定に保存された値を、設定画面に表示する
  const messageTextbox = new Kuc.Text({
    label: 'メッセージを表示するフィールド',
    requiredIcon: true,
    value: config.message || '',
  });
  document.querySelector('.js-row-message').appendChild(messageTextbox);

  // スペースフィールドを選択するためのセレクトボックスを作成する
  const spaceFieldOptions = await createOptionsForSpaceField();
  const messageShownFieldSelect = new Kuc.Dropdown({
    label: 'メッセージを表示するフィールド',
    requiredIcon: true,
    items: spaceFieldOptions,
    value: config.messageShownSpace || ''
  });
  document.querySelector('.js-row-message-shown-field').appendChild(messageShownFieldSelect);

  // Current Weather API の情報
  const weatherApiInfo = {
    url: 'https://api.openweathermap.org/data/2.5/weather',
    method: 'GET'
  };

  // 秘匿情報を保存するを使って保存された値を設定画面に表示する
  const proxyConfig = kintone.plugin.app.getProxyConfig(weatherApiInfo.url, weatherApiInfo.method);
  const apiTokenTextbox = new Kuc.Text({
    label: 'OpenWeatherMap の API トークン',
    requiredIcon: true,
    value: proxyConfig?.data?.appid || '',
  });
  document.querySelector('.js-row-token').appendChild(apiTokenTextbox);

  const appId = kintone.app.getId();

  // ボタンを表示する
  const buttonHeader = document.querySelector('.js-row-header');
  const cancelButton = new Kuc.Button({
    text: 'Cancel',
    type: 'normal',
    className: 'plugin-button',
  });
  cancelButton.addEventListener('click', () => {
    // プラグイン一覧画面に遷移する
    window.location.href = `/k/admin/app/${appId}/plugin/`;
  });
  buttonHeader.appendChild(cancelButton);

  const saveButton = new Kuc.Button({
    text: 'Save',
    type: 'submit',
    className: 'plugin-button',
  });
  buttonHeader.appendChild(saveButton);

  saveButton.addEventListener('click', (e) => {
    e.preventDefault();
    let hasError = false;
    const message = escapeHtml(messageTextbox.value);
    if (message === '') {
      messageTextbox.error = 'メッセージを入力してください';
      hasError = true;
    } else {
      messageTextbox.error = '';
    }
    const messageShownSpace = messageShownFieldSelect.value;
    if (messageShownSpace === '') {
      messageShownFieldSelect.error = 'メッセージを表示するスペースフィールドを選択してください';
      hasError = true;
    } else {
      messageShownFieldSelect.error = '';
    }

    const apiToken = escapeHtml(apiTokenTextbox.value);
    if (apiToken === '') {
      apiTokenTextbox.error = 'API トークンを入力してください';
      hasError = true;
    } else {
      apiTokenTextbox.error = '';
    }

    if (hasError) {
      return;
    }

    // Current Weather API の情報を保存する
    const successCallback = () => {
      const newConfig = {
        message,
        messageShownSpace,
      };
      kintone.plugin.app.setConfig(newConfig, () => {
        // アプリの設定画面に遷移する
        window.location.href = `/k/admin/app/flow?app=${appId}`;
      });
    };
    const headers = {};
    const body = {
      appid: apiToken
    };
    kintone.plugin.app.setProxyConfig(weatherApiInfo.url, weatherApiInfo.method, headers, body, successCallback);
  });
})(kintone.$PLUGIN_ID);