feat: Upgrade plugin version to 2.0.0 and refactor configuration handling

- Updated version numbers in package.json, package-lock.json, and manifest.json to 2.0.0.
- Refactored configuration types to use data sources (SELF, APP) instead of type-based configurations.
- Enhanced settings UI to allow selection between using the current record or another app's record.
- Improved error handling and validation for configuration settings.
- Added new input component for better handling of text inputs in settings.
- Updated localization files for new settings structure and error messages.
- Optimized API calls with memoization for fetching form field properties and checking configurations.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "kintone-plugin-docx",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kintone-plugin-docx",
-      "version": "1.0.2",
+      "version": "2.0.0",
       "dependencies": {
         "@kintone/rest-api-client": "^5.7.5",
         "angular-expressions": "^1.5.1",
@@ -14,11 +14,11 @@
         "dayjs": "^1.11.18",
         "docxtemplater": "^3.66.4",
         "file-saver": "^2.0.5",
-        "i18next": "^25.5.2",
+        "i18next": "^25.5.3",
         "moize": "^6.1.6",
         "pizzip": "^3.2.0",
-        "react": "^19.1.1",
+        "react": "^19.2.0",
-        "react-dom": "^19.1.1",
+        "react-dom": "^19.2.0",
         "react-error-boundary": "^6.0.0",
         "react-i18next": "^16.0.0",
         "tiny-invariant": "^1.3.3"
@@ -31,9 +31,9 @@
         "@rspack/cli": "^1.5.8",
         "@rspack/core": "^1.5.8",
         "@types/file-saver": "^2.0.7",
-        "@types/node": "^24.6.0",
+        "@types/node": "^24.6.2",
-        "@types/react": "^19.1.16",
+        "@types/react": "^19.2.0",
-        "@types/react-dom": "^19.1.9",
+        "@types/react-dom": "^19.2.0",
         "cross-env": "^10.1.0",
         "cspell": "^9.2.1",
         "env-cmd": "^11.0.0",
@@ -41,7 +41,7 @@
         "npm-run-all": "^4.1.5",
         "prettier": "^3.6.2",
         "ts-node": "^10.9.2",
-        "typescript": "^5.9.2"
+        "typescript": "^5.9.3"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -2428,9 +2428,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "24.6.0",
+      "version": "24.6.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.6.2.tgz",
-      "integrity": "sha512-F1CBxgqwOMc4GKJ7eY22hWhBVQuMYTtqI8L0FcszYcpYX0fzfDGpez22Xau8Mgm7O9fI+zA/TYIdq3tGWfweBA==",
+      "integrity": "sha512-d2L25Y4j+W3ZlNAeMKcy7yDsK425ibcAOO2t7aPTz6gNMH0z2GThtwENCDc0d/Pw9wgyRqE5Px1wkV7naz8ang==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2469,9 +2469,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.16",
+      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-WBM/nDbEZmDUORKnh5i1bTnAz6vTohUf9b8esSMu+b24+srbaxa04UbJgWx78CVfNXA20sNu0odEIluZDFdCog==",
+      "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2479,13 +2479,13 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.1.9",
+      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.0.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "integrity": "sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^19.0.0"
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/retry": {
@@ -7337,9 +7337,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "25.5.2",
+      "version": "25.5.3",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.5.3.tgz",
-      "integrity": "sha512-lW8Zeh37i/o0zVr+NoCHfNnfvVw+M6FQbRp36ZZ/NyHDJ3NJVpp2HhAUyU9WafL5AssymNoOjMRB48mmx2P6Hw==",
+      "integrity": "sha512-joFqorDeQ6YpIXni944upwnuHBf5IoPMuqAchGVeQLdWC2JOjxgM9V8UGLhNIIH/Q8QleRxIi0BSRQehSrDLcg==",
       "funding": [
         {
           "type": "individual",
@@ -9906,24 +9906,24 @@
       }
     },
     "node_modules/react": {
-      "version": "19.1.1",
+      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.1.1",
+      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
-      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.26.0"
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.1.1"
+        "react": "^19.2.0"
       }
     },
     "node_modules/react-error-boundary": {
@@ -10491,9 +10491,9 @@
       "license": "MIT"
     },
     "node_modules/scheduler": {
-      "version": "0.26.0",
+      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
     "node_modules/schema-utils": {
@@ -11936,9 +11936,9 @@
       "license": "MIT"
     },
     "node_modules/typescript": {
-      "version": "5.9.2",
+      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kintone-plugin-docx",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "scripts": {
     "gen": "run-s gen:*",
     "gen:key": "node scripts/generate-private-key.js",
@@ -22,11 +22,11 @@
     "dayjs": "^1.11.18",
     "docxtemplater": "^3.66.4",
     "file-saver": "^2.0.5",
-    "i18next": "^25.5.2",
+    "i18next": "^25.5.3",
     "moize": "^6.1.6",
     "pizzip": "^3.2.0",
-    "react": "^19.1.1",
+    "react": "^19.2.0",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^16.0.0",
     "tiny-invariant": "^1.3.3"
@@ -39,9 +39,9 @@
     "@rspack/cli": "^1.5.8",
     "@rspack/core": "^1.5.8",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^24.6.0",
+    "@types/node": "^24.6.2",
-    "@types/react": "^19.1.16",
+    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.1.9",
+    "@types/react-dom": "^19.2.0",
     "cross-env": "^10.1.0",
     "cspell": "^9.2.1",
     "env-cmd": "^11.0.0",
@@ -49,6 +49,6 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   }
 }

plugin/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
   "manifest_version": 1,
-  "version": "1.0.2",
+  "version": "2.0.0",
   "type": "APP",
   "desktop": {
     "js": ["js/desktop.js"],
@@ -15,8 +15,7 @@
   "config": {
     "html": "html/config.html",
     "js": ["js/config.js"],
-    "css": ["js/config.css"],
+    "css": ["js/config.css"]
-    "required_params": ["template"]
   },
   "name": {
     "en": "Word output plugin",

src/common/config.ts

@@ -1,29 +1,25 @@
-export const PluginConfigType = {
+export const PluginConfigDataSource = {
-  SELF: 0,
+  SELF: 'self',
-  APP: 1,
+  APP: 'app',
-  URL: 2,
 } as const;
+export type PluginConfigDataSource = (typeof PluginConfigDataSource)[keyof typeof PluginConfigDataSource];
 
 export interface PluginConfigSelf {
-  type: typeof PluginConfigType.SELF;
+  dataSource: typeof PluginConfigDataSource.SELF;
-  template: string;
+  fieldCode: string;
 }
 export interface PluginConfigApp {
-  type: typeof PluginConfigType.APP;
+  dataSource: typeof PluginConfigDataSource.APP;
   appId: string;
-  template: string;
   recordId: string;
-}
+  fieldCode: string;
-export interface PluginConfigUrl {
-  type: typeof PluginConfigType.URL;
-  template: string;
 }
 
-export type PluginConfig = PluginConfigSelf | PluginConfigApp | PluginConfigUrl;
+export type PluginConfig = PluginConfigSelf | PluginConfigApp;
 
 const DEFAULT_CONFIG: PluginConfig = {
-  type: PluginConfigType.SELF,
+  dataSource: PluginConfigDataSource.SELF,
-  template: '',
+  fieldCode: '',
 } as const;
 
 export const saveConfig = (config: PluginConfig, callback?: () => void): void => {
@@ -31,5 +27,15 @@ export const saveConfig = (config: PluginConfig, callback?: () => void): void =>
 };
 
 export const loadConfig = (pluginId: string): PluginConfig => {
-  return { ...DEFAULT_CONFIG, ...(kintone.plugin.app.getConfig(pluginId) as PluginConfig) };
+  const config = kintone.plugin.app.getConfig(pluginId);
+  if (!config || Object.keys(config).length === 0) {
+    // initial state
+    return { ...DEFAULT_CONFIG };
+  }
+  if (config.dataSource != null) {
+    // current version of config format
+    return config as PluginConfig;
+  }
+  // old version of config format
+  return { dataSource: PluginConfigDataSource.SELF, fieldCode: config.template || '' };
 };

src/common/ui/KintonePluginInputText.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
+
+export type KintonePluginInputTextProps = {
+  id?: string;
+  className?: string;
+  value: string;
+  size?: number;
+  maxLength?: number;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  onChange: (value: string) => void;
+};
+
+const KintonePluginInputText: React.FC<KintonePluginInputTextProps> = (props) => {
+  const { id, className, value, size, maxLength, disabled, required, placeholder, onChange } = props;
+  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    onChange(e.target.value);
+  };
+  return (
+    <div className={clsx('kintoneplugin-input-outer', className)}>
+      <input
+        id={id}
+        className="kintoneplugin-input-text"
+        type="text"
+        value={value}
+        size={size}
+        maxLength={maxLength}
+        disabled={disabled}
+        required={required}
+        placeholder={placeholder}
+        aria-required={required}
+        aria-disabled={disabled}
+        aria-invalid={required && value === ''}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck={false}
+        onChange={handleOnChange}
+      />
+    </div>
+  );
+};
+export default KintonePluginInputText;

src/config/ConfigApp.tsx

@@ -1,19 +1,34 @@
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+import moize from 'moize';
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import invariant from 'tiny-invariant';
 import ErrorFallback from '../common/ErrorFallback';
 import Loading from '../common/Loading';
+import type { KintoneFormFieldProperties } from '../common/types';
 import Settings from './Settings';
 
 interface ConfigAppProps {
   pluginId: string;
 }
 
+const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
+  const client = new KintoneRestAPIClient();
+  const { properties } = await client.app.getFormFields({ app: appId, preview: true });
+  return properties;
+});
+
 const ConfigApp: React.FC<ConfigAppProps> = (props) => {
   const { pluginId } = props;
+
+  const appId = kintone.app.getId();
+  invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
+  const propertiesPromise = cachedFormFieldsProperties(appId);
+
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <React.Suspense fallback={<Loading />}>
-        <Settings pluginId={pluginId} />
+        <Settings pluginId={pluginId} appId={appId} propertiesPromise={propertiesPromise} />
       </React.Suspense>
     </ErrorBoundary>
   );

src/config/Settings.module.css

@@ -1,3 +1,10 @@
+.settings .app {
+  display: flex;
+  gap: 2em;
+  align-items: center;
+  margin-bottom: 1em;
+}
+
 .buttons > *:not(:last-child) {
   margin-right: 0.5em;
 }

src/config/Settings.tsx

@@ -1,85 +1,176 @@
-import { KintoneRestAPIClient } from '@kintone/rest-api-client';
-import moize from 'moize';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import invariant from 'tiny-invariant';
+import type { PluginConfig } from '../common/config';
-import { PluginConfigType, saveConfig } from '../common/config';
+import { loadConfig, PluginConfigDataSource, saveConfig } from '../common/config';
 import { naturalCompare } from '../common/stringUtils';
 import type { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginAlert from '../common/ui/KintonePluginAlert';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
 import KintonePluginDesc from '../common/ui/KintonePluginDesc';
+import KintonePluginInputText from '../common/ui/KintonePluginInputText';
 import KintonePluginLabel from '../common/ui/KintonePluginLabel';
 import KintonePluginRequire from '../common/ui/KintonePluginRequire';
 import KintonePluginRow from '../common/ui/KintonePluginRow';
 import KintonePluginSelect, { type KintonePluginSelectOptionData } from '../common/ui/KintonePluginSelect';
 import KintonePluginTitle from '../common/ui/KintonePluginTitle';
-import styles from './Settings.module.css';
 
-const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
+import styles from './Settings.module.css';
-  const client = new KintoneRestAPIClient();
-  const { properties } = await client.app.getFormFields({ app: appId, preview: true });
-  return properties;
-});
 
 interface SettingsProps {
   pluginId: string;
+  appId: number;
+  propertiesPromise: Promise<KintoneFormFieldProperties>;
 }
 
 const Settings: React.FC<SettingsProps> = (props) => {
-  const { pluginId } = props;
+  const { pluginId, appId, propertiesPromise } = props;
   const { t } = useTranslation();
-  const config = kintone.plugin.app.getConfig(pluginId);
+  const config = loadConfig(pluginId);
-  const appId = kintone.app.getId();
+  const properties = React.use(propertiesPromise);
-  invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
+  // data source options
-  const properties = React.use(cachedFormFieldsProperties(appId));
+  const dataSourceOptions = [
+    { value: PluginConfigDataSource.SELF, label: t('settings.datasource.labels.self') },
+    { value: PluginConfigDataSource.APP, label: t('settings.datasource.labels.app') },
+  ];
+  const [dataSource, setDataSource] = React.useState<
+    (typeof PluginConfigDataSource)[keyof typeof PluginConfigDataSource]
+  >(config.dataSource);
+
+  // states for SELF data source
   const fileFields = Object.values(properties)
     .filter((property) => property.type === 'FILE')
     .sort((a, b) => naturalCompare(`${a.label} (${a.code})`, `${b.label} (${b.code})`));
   const options: KintonePluginSelectOptionData[] = [
-    { value: '', label: t('settings.template.messages.select-an-attachment-fields'), disabled: true }, // Default option
+    { value: '', label: t('settings.self.messages.select-an-attachment-fields'), disabled: true }, // Default option
     ...fileFields.map((property) => ({
       value: property.code,
       label: `${property.label} (${property.code})`,
     })),
   ];
+  const [fieldCode, setFieldCode] = React.useState<string>(
+    () =>
+      options.find((option) => config.dataSource === PluginConfigDataSource.SELF && option.value === config.fieldCode)
+        ?.value ?? '',
+  );
 
-  const [template, setTemplate] = React.useState<string>(
+  // states for APP data source
-    () => options.find((option) => option.value === (config.template ?? ''))?.value ?? '',
+  const [otherAppId, setOtherAppId] = React.useState<string>(
+    config.dataSource === PluginConfigDataSource.APP ? config.appId : '',
+  );
+  const [otherRecordId, setOtherRecordId] = React.useState<string>(
+    config.dataSource === PluginConfigDataSource.APP ? config.recordId : '',
+  );
+  const [otherFieldCode, setOtherFieldCode] = React.useState<string>(
+    config.dataSource === PluginConfigDataSource.APP ? config.fieldCode : '',
   );
 
   const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    saveConfig({ type: PluginConfigType.SELF, template }, () => {
+    let configToSave: PluginConfig;
+    if (dataSource === PluginConfigDataSource.SELF) {
+      configToSave = { dataSource: PluginConfigDataSource.SELF, fieldCode };
+    } else if (dataSource === PluginConfigDataSource.APP) {
+      configToSave = {
+        dataSource: PluginConfigDataSource.APP,
+        appId: otherAppId,
+        fieldCode: otherFieldCode,
+        recordId: otherRecordId,
+      };
+    } else {
+      return;
+    }
+    saveConfig(configToSave, () => {
       alert(t('on-saved'));
       window.location.href = `../../flow?app=${appId}`;
     });
   };
 
-  const handleOnChangeTemplate = (value: string) => {
-    setTemplate(value);
-  };
-
   const handleOnClickCancel = () => {
     window.location.href = `../../${appId}/plugin/`;
   };
 
   return (
-    <section className="settings">
+    <div className={styles.settings}>
       <KintonePluginLabel>{t('title')}</KintonePluginLabel>
       <form onSubmit={handleOnSubmit}>
         <KintonePluginRow>
           <KintonePluginTitle>
-            {t('settings.template.title')}
+            {t('settings.datasource.title')}
             <KintonePluginRequire>*</KintonePluginRequire>
           </KintonePluginTitle>
-          <KintonePluginDesc> {t('settings.template.description')}</KintonePluginDesc>
+          <KintonePluginDesc>{t('settings.datasource.description')}</KintonePluginDesc>
-          {fileFields.length === 0 ? (
+          <KintonePluginSelect
-            <KintonePluginAlert>{t('settings.template.errors.no-attachment-field-found')}</KintonePluginAlert>
+            value={String(dataSource)}
-          ) : (
+            onChange={(value) => {
-            <KintonePluginSelect value={template} onChange={handleOnChangeTemplate} options={options} />
+              const newDataSource = value as PluginConfigDataSource;
-          )}
+              if (Object.values(PluginConfigDataSource).includes(newDataSource)) {
+                setDataSource(newDataSource);
+              }
+            }}
+            options={dataSourceOptions.map((opt) => ({ value: String(opt.value), label: opt.label }))}
+          />
         </KintonePluginRow>
+        {dataSource === PluginConfigDataSource.SELF && (
+          <KintonePluginRow>
+            <KintonePluginTitle>
+              {t('settings.self.title')}
+              <KintonePluginRequire>*</KintonePluginRequire>
+            </KintonePluginTitle>
+            <KintonePluginDesc>{t('settings.self.description')}</KintonePluginDesc>
+            {fileFields.length === 0 ? (
+              <KintonePluginAlert>{t('settings.self.errors.no-attachment-field-found')}</KintonePluginAlert>
+            ) : (
+              <KintonePluginSelect value={fieldCode} onChange={(value) => setFieldCode(value)} options={options} />
+            )}
+          </KintonePluginRow>
+        )}
+        {dataSource === PluginConfigDataSource.APP && (
+          <KintonePluginRow>
+            <KintonePluginTitle>
+              {t('settings.app.title')}
+              <KintonePluginRequire>*</KintonePluginRequire>
+            </KintonePluginTitle>
+            <KintonePluginDesc>{t('settings.app.description')}</KintonePluginDesc>
+            <div className={styles.app}>
+              <label htmlFor="otherAppIdInput">
+                {t('settings.app.labels.app-id')} <KintonePluginRequire>*</KintonePluginRequire>
+                <br />
+                <KintonePluginInputText
+                  id="otherAppIdInput"
+                  value={otherAppId}
+                  required
+                  onChange={(value) => {
+                    setOtherAppId(value);
+                  }}
+                />
+              </label>
+              <label htmlFor="otherRecordIdInput">
+                {t('settings.app.labels.record-id')} <KintonePluginRequire>*</KintonePluginRequire>
+                <br />
+                <KintonePluginInputText
+                  id="otherRecordIdInput"
+                  value={otherRecordId}
+                  required
+                  onChange={(value) => {
+                    setOtherRecordId(value);
+                  }}
+                />
+              </label>
+              <label htmlFor="otherFieldCodeInput">
+                {t('settings.app.labels.field-code')} <KintonePluginRequire>*</KintonePluginRequire>
+                <br />
+                <KintonePluginInputText
+                  id="otherFieldCodeInput"
+                  value={otherFieldCode}
+                  required
+                  onChange={(value) => {
+                    setOtherFieldCode(value);
+                  }}
+                />
+              </label>
+            </div>
+          </KintonePluginRow>
+        )}
         <KintonePluginRow className={styles.buttons}>
           <KintonePluginButton variant="dialog-cancel" type="button" onClick={handleOnClickCancel}>
             {t('buttons.cancel')}
@@ -89,7 +180,7 @@ const Settings: React.FC<SettingsProps> = (props) => {
           </KintonePluginButton>
         </KintonePluginRow>
       </form>
-    </section>
+    </div>
   );
 };
 export default Settings;

src/config/locales/en.json

@@ -1,15 +1,32 @@
 {
   "title": "Settings for the Kintone Word output plugin",
   "settings": {
-    "template": {
+    "datasource": {
+      "title": "Select data source for Word template file",
+      "description": "Please select the data source for the Word template file.",
+      "labels": {
+        "self": "Own record",
+        "app": "Record from another app"
+      }
+    },
+    "self": {
       "title": "Template",
-      "description": "Select a attachment field that contains the Word template file.",
+      "description": "Select an attachment field that contains the Word template file.",
       "messages": {
         "select-an-attachment-fields": "(Select an attachment field)"
       },
       "errors": {
         "no-attachment-field-found": "No attachment fields found in the app. Please add an attachment field to use this plugin."
       }
+    },
+    "app": {
+      "title": "Attachment file info from another app",
+      "description": "Enter App ID, Record ID, and Attachment Field Code.",
+      "labels": {
+        "app-id": "App ID",
+        "record-id": "Record ID",
+        "field-code": "Attachment Field Code"
+      }
     }
   },
   "buttons": {

src/config/locales/ja.json

@@ -1,7 +1,15 @@
 {
   "title": "Word出力プラグイン設定",
   "settings": {
-    "template": {
+    "datasource": {
+      "title": "WORD雛形ファイルのデータソース選択",
+      "description": "WORD雛形ファイルのデータソースを選択してください。",
+      "labels": {
+        "self": "自レコード",
+        "app": "他アプリのレコード"
+      }
+    },
+    "self": {
       "title": "雛形ファイル",
       "description": "Word雛形ファイルを保存する添付ファイルフィールドを選択してください。",
       "messages": {
@@ -10,6 +18,15 @@
       "errors": {
         "no-attachment-field-found": "このアプリに添付ファイルフィールドが見つかりません。フォームに添付ファイルフィールドを追加してください。"
       }
+    },
+    "app": {
+      "title": "他アプリの添付ファイル情報",
+      "description": "アプリID・レコード番号・添付ファイルフィールドコードを入力してください。",
+      "labels": {
+        "app-id": "アプリID",
+        "record-id": "レコード番号",
+        "field-code": "添付ファイルフィールドコード"
+      }
     }
   },
   "buttons": {

src/desktop/DesktopApp.tsx

@@ -1,7 +1,12 @@
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+import moize from 'moize';
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { loadConfig, type PluginConfig } from '../common/config';
 import ErrorFallback from '../common/ErrorFallback';
 import Loading from '../common/Loading';
+import type { KintoneFormFieldProperties } from '../common/types';
+import { checkConfig } from './checkConfig';
 import MenuPanel from './MenuPanel';
 
 interface DesktopAppProps {
@@ -9,12 +14,34 @@ interface DesktopAppProps {
   event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
 }
 
+const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
+  const client = new KintoneRestAPIClient();
+  const { properties } = await client.app.getFormFields({ app: appId, preview: false });
+  return properties;
+});
+
+const cachedConfigCheck = moize.promise(
+  async (config: PluginConfig, record: kintone.types.SavedFields): Promise<string> => {
+    return await checkConfig(config, record);
+  },
+);
+
 const DesktopApp: React.FC<DesktopAppProps> = (props) => {
   const { pluginId, event } = props;
+
+  const config = loadConfig(pluginId);
+  const propertiesPromise = cachedFormFieldsProperties(event.appId);
+  const fileKeyPromise = cachedConfigCheck(config, event.record);
+
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <React.Suspense fallback={<Loading />}>
-        <MenuPanel pluginId={pluginId} event={event} />
+        <MenuPanel
+          pluginId={pluginId}
+          event={event}
+          propertiesPromise={propertiesPromise}
+          fileKeyPromise={fileKeyPromise}
+        />
       </React.Suspense>
     </ErrorBoundary>
   );

src/desktop/MenuPanel.tsx

@@ -1,58 +1,30 @@
 import { KintoneRestAPIClient } from '@kintone/rest-api-client';
 import saveAs from 'file-saver';
-import moize from 'moize';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { loadConfig, type PluginConfig, PluginConfigType } from '../common/config';
 import type { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
-import { checkConfig } from './checkConfig';
 import generateWordFileData from './generateWordFileData';
 
 export interface MenuPanelProps {
   pluginId: string;
   event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
+  propertiesPromise: Promise<KintoneFormFieldProperties>;
+  fileKeyPromise: Promise<string>;
 }
 
-const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<KintoneFormFieldProperties> => {
-  const client = new KintoneRestAPIClient();
-  const { properties } = await client.app.getFormFields({ app: appId, preview: false });
-  return properties;
-});
-
-const cachedConfigCheck = moize.promise(
-  async (config: PluginConfig, record: kintone.types.SavedFields): Promise<string> => {
-    return checkConfig(config, record);
-  },
-);
-
-const downloadFile = async (config: PluginConfig, template: string): Promise<ArrayBuffer> => {
-  if (config.type === PluginConfigType.SELF || config.type === PluginConfigType.APP) {
-    const client = new KintoneRestAPIClient();
-    const content = await client.file.downloadFile({ fileKey: template });
-    return content;
-  } else {
-    // PluginConfigType.URL
-    const [body, status, _headers] = await kintone.proxy(template, 'GET', {}, {});
-    if (status !== 200) {
-      throw new Error(`Failed to download the file from URL: ${template}`);
-    }
-    return new Uint16Array(Array.from(String(body), (c) => c.charCodeAt(0))).buffer;
-  }
-};
-
 const MenuPanel: React.FC<MenuPanelProps> = (props) => {
-  const { pluginId, event } = props;
+  const { event, propertiesPromise, fileKeyPromise } = props;
   const { t } = useTranslation();
-  const appId = event.appId;
   const language = kintone.getLoginUser().language;
-  const config = loadConfig(pluginId);
+  const properties = React.use(propertiesPromise);
-  const template = React.use(cachedConfigCheck(config, event.record));
+  const fileKey = React.use(fileKeyPromise);
-  const properties = React.use(cachedFormFieldsProperties(appId));
 
   const handleOnClickOutputButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    downloadFile(config, template)
+    const client = new KintoneRestAPIClient();
+    client.file
+      .downloadFile({ fileKey })
       .then((content) => {
         const out = generateWordFileData(content, properties, event.record, language);
         saveAs(out, 'output.docx');

src/desktop/checkConfig.ts

@@ -3,18 +3,17 @@ import i18n from 'i18next';
 import {
   type PluginConfig,
   type PluginConfigApp,
+  PluginConfigDataSource,
   type PluginConfigSelf,
-  PluginConfigType,
-  type PluginConfigUrl,
 } from '../common/config';
 import { DOCX_CONTENT_TYPE } from '../common/constants';
 
 const checkConfigSelf = (config: PluginConfigSelf, record: kintone.types.SavedFields): string => {
-  const { template } = config;
+  const { fieldCode } = config;
-  if (template === '') {
+  if (fieldCode === '') {
     throw new Error(i18n.t('errors.template-field-is-required'));
   }
-  const field = record[template];
+  const field = record[fieldCode];
   if (!field) {
     throw new Error(i18n.t('errors.template-field-is-not-available'));
   }
@@ -35,21 +34,21 @@ const checkConfigSelf = (config: PluginConfigSelf, record: kintone.types.SavedFi
 };
 
 const checkConfigApp = async (config: PluginConfigApp): Promise<string> => {
-  const { appId, template, recordId } = config;
+  const { appId, fieldCode, recordId } = config;
   if (appId === '') {
     throw new Error(i18n.t('errors.app-id-is-required'));
   }
   if (recordId === '') {
     throw new Error(i18n.t('errors.record-id-is-required'));
   }
-  if (template === '') {
+  if (fieldCode === '') {
     throw new Error(i18n.t('errors.template-field-is-required'));
   }
   const client = new KintoneRestAPIClient();
   const { record } = await client.record.getRecord({ app: appId, id: recordId }).catch((_error) => {
     throw new Error(i18n.t('errors.record-is-not-available'));
   });
-  const field = record[template];
+  const field = record[fieldCode];
   if (!field) {
     throw new Error(i18n.t('errors.template-field-is-not-available'));
   }
@@ -69,24 +68,11 @@ const checkConfigApp = async (config: PluginConfigApp): Promise<string> => {
   return files[0].fileKey;
 };
 
-const checkConfigUrl = (config: PluginConfigUrl): string => {
-  const { template } = config;
-  if (template === '') {
-    throw new Error(i18n.t('errors.template-field-is-required'));
-  }
-  if (!template.startsWith('http://') && !template.startsWith('https://')) {
-    throw new Error(i18n.t('errors.template-field-must-be-a-valid-url'));
-  }
-  return template;
-};
-
 export const checkConfig = async (config: PluginConfig, record: kintone.types.SavedFields): Promise<string> => {
-  if (config.type === PluginConfigType.SELF) {
+  if (config.dataSource === PluginConfigDataSource.SELF) {
     return checkConfigSelf(config, record);
-  } else if (config.type === PluginConfigType.APP) {
+  } else if (config.dataSource === PluginConfigDataSource.APP) {
     return checkConfigApp(config);
-  } else if (config.type === PluginConfigType.URL) {
-    return checkConfigUrl(config);
   }
   throw new Error(i18n.t('errors.unexpected-error-occurred'));
 };

src/desktop/generateWordFileData.ts

@@ -179,10 +179,41 @@ const generateWordFileData = (
   language: string,
 ) => {
   const zip = new PizZip(content);
+  const parser = expressionParser.configure({
+    filters: {
+      toUpperCase: (str: string): string => str.toUpperCase(),
+      toLowerCase: (str: string): string => str.toLowerCase(),
+      regexMatch: (str: string, regex: string): boolean | string[] => {
+        const pattern = new RegExp(regex);
+        return pattern.test(str);
+      },
+      regexFilter: (arr: string[], regex: string): string[] => {
+        const pattern = new RegExp(regex);
+        if (Array.isArray(arr)) {
+          return arr.filter((item) => pattern.test(item));
+        }
+        return [];
+      },
+      includes: (arr: string[] | string, str: string): boolean => {
+        if (Array.isArray(arr)) {
+          return arr.includes(str);
+        } else {
+          return arr === str;
+        }
+      },
+      indexOf: (arr: string[] | string, str: string): number => {
+        if (Array.isArray(arr)) {
+          return arr.indexOf(str);
+        } else {
+          return arr === str ? 0 : -1;
+        }
+      },
+    },
+  });
   const doc = new Docxtemplater(zip, {
     paragraphLoop: true,
     linebreaks: true,
-    parser: expressionParser,
+    parser: parser,
     nullGetter: () => '',
   });
   doc.render(record2templateData(properties, record, language));

src/desktop/locales/en.json

@@ -10,7 +10,6 @@
     "app-id-is-required": "The app ID for the template file is required. Please check the plugin settings.",
     "record-id-is-required": "The record ID for the template file is required. Please check the plugin settings.",
     "record-is-not-available": "The record is not available. Please check the plugin settings.",
-    "template-field-must-be-a-valid-url": "The template field must be a valid URL. Please check the plugin settings.",
     "unexpected-error-occurred": "An unexpected error occurred."
   },
   "buttons": {

src/desktop/locales/ja.json

@@ -10,7 +10,6 @@
     "app-id-is-required": "雛形ファイルを格納するアプリIDが設定されていません。プラグインの設定を見直してください。",
     "record-id-is-required": "雛形ファイルを格納するアプリのレコードIDが設定されていません。プラグインの設定を見直してください。",
     "record-is-not-available": "雛形ファイルを格納されたアプリのレコードが取得できません。プラグインの設定を見直してください。",
-    "template-field-must-be-a-valid-url": "テンプレートフィールドは有効なURLである必要があります。プラグインの設定を見直してください。",
     "unexpected-error-occurred": "予期しないエラーが発生しました。"
   },
   "buttons": {