0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

rex0220 アプリマイスター・レイ 項目の多いアプリ作成

Last updated at Posted at 2025-11-27

rex0220 アプリマイスター・レイで、プラグインテスト用に項目の多いアプリを作成してみます。

概要

kintone アプリでは、最大500個の項目を配置することが出来ます。
プラグインでは、多数の項目でもプラグイン設定・動作することが必要です。
rex0220 アプリマイスター・レイで、計算式プラグインのテスト用に項目の多いアプリを作成してみます。

今回は、項目の要件を追加していきましたが、要件をまとめて依頼することもできます。

  • 作成した項目の多い商品マスタアプリ(305個の項目数)

2025-11-27_09h27_53.png

  • 計算式プラグインの設定画面

2025-11-27_09h28_30.png

項目数が305個のアプリを作成するコード

最終的なアプリ作成コードがこうなりました。

/**
 * 🦊 kintone App Meister Ray's Work
 * Project: 商品マスタ(超完全版:グループ内フィールド拡張)
 */
(async () => {
  try {
    console.log('🦊 レイ: グループ内もフル装備で構築します。フィールド数が300近くになりますよ!');

    // -------------------------------------------------------
    // 1. 新規アプリの作成(プレビュー)
    // -------------------------------------------------------
    const createAppBody = { name: '商品マスタ(計算式テスト:超完全版)' };
    const createResp = await kintone.api(kintone.api.url('/k/v1/preview/app', true), 'POST', createAppBody);
    const appId = createResp.app;

    console.log(`Step 1: アプリの枠を作成しました... App ID: ${appId}`);

    // -------------------------------------------------------
    // 2. フィールド定義の生成
    // -------------------------------------------------------
    const properties = {};

    // --- 基本情報 ---
    properties['商品コード'] = { type: 'SINGLE_LINE_TEXT', label: '商品コード', code: '商品コード', unique: true, required: true };
    properties['商品名'] = { type: 'SINGLE_LINE_TEXT', label: '商品名', code: '商品名', required: true };

    // --- A. 属性項目(10カテゴリ × 20項目 = 200項目) ---
    const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
    const itemsConfig = [
      { type: 'NUMBER', prefix: '数値', count: 5 },
      { type: 'SINGLE_LINE_TEXT', prefix: '文字', count: 5 },
      { type: 'DATE', prefix: '日付', count: 2 },
      { type: 'DROP_DOWN', prefix: 'Drop', count: 4, options: { options: { '100': { label: '100', index: 0 }, '200': { label: '200', index: 1 } }, defaultValue: '100' } },
      { type: 'CHECK_BOX', prefix: 'Check', count: 2, options: { options: { 'OK': { label: 'OK', index: 0 } }, defaultValue: [] } },
      { type: 'MULTI_LINE_TEXT', prefix: 'Multi', count: 2 }
    ];

    categories.forEach(cat => {
      itemsConfig.forEach(config => {
        for (let i = 1; i <= config.count; i++) {
          const num = String(i).padStart(2, '0');
          const fieldName = `属性_${cat}_${config.prefix}_${num}`;
          properties[fieldName] = {
            type: config.type,
            label: fieldName,
            code: fieldName,
            ...config.options
          };
          if (config.type === 'NUMBER') {
            properties[fieldName].digit = true;
            properties[fieldName].unitPosition = 'AFTER';
          }
        }
      });
    });

    // --- B. グループ(10個)と中のフィールド(各5種) ---
    for (let i = 1; i <= 10; i++) {
      const num = String(i).padStart(2, '0');
      const groupCode = `Group_${num}`;
      
      // グループ定義
      properties[groupCode] = {
        type: 'GROUP',
        label: `テストグループ ${num}`,
        code: groupCode,
        openGroup: true
      };

      // グループ内フィールド定義 (5種類)
      // 1. 数値
      properties[`${groupCode}_Num`] = {
        type: 'NUMBER', label: `G内_数値`, code: `${groupCode}_Num`, digit: true, unitPosition: 'AFTER'
      };
      // 2. 文字列
      properties[`${groupCode}_Text`] = {
        type: 'SINGLE_LINE_TEXT', label: `G内_文字`, code: `${groupCode}_Text`
      };
      // 3. 日付
      properties[`${groupCode}_Date`] = {
        type: 'DATE', label: `G内_日付`, code: `${groupCode}_Date`
      };
      // 4. ドロップダウン
      properties[`${groupCode}_Drop`] = {
        type: 'DROP_DOWN', label: `G内_Drop`, code: `${groupCode}_Drop`,
        options: { '10': { label: '10', index: 0 }, '20': { label: '20', index: 1 } }, defaultValue: '10'
      };
      // 5. チェックボックス
      properties[`${groupCode}_Check`] = {
        type: 'CHECK_BOX', label: `G内_Check`, code: `${groupCode}_Check`,
        options: { '': { label: '', index: 0 } }, defaultValue: []
      };
    }

    // --- C. テーブル(10個) ---
    for (let i = 1; i <= 10; i++) {
      const num = String(i).padStart(2, '0');
      const tableCode = `Table_${num}`;
      
      properties[tableCode] = {
        type: 'SUBTABLE',
        label: `テストテーブル ${num}`,
        code: tableCode,
        fields: {
          [`${tableCode}_Num`]: { type: 'NUMBER', label: '数値', code: `${tableCode}_Num`, digit: true },
          [`${tableCode}_Text`]: { type: 'SINGLE_LINE_TEXT', label: '文字列', code: `${tableCode}_Text` },
          [`${tableCode}_Date`]: { type: 'DATE', label: '日付', code: `${tableCode}_Date` }
        }
      };
    }

    // フィールド追加実行
    console.log('Step 2: 約300個のフィールド定義を送信中...');
    await kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', { app: appId, properties });
    console.log('Step 2: フィールド追加完了!');

    // -------------------------------------------------------
    // 3. レイアウト設定の生成
    // -------------------------------------------------------
    const layout = [];

    // 3-1. 基本情報
    layout.push({
      type: 'ROW',
      fields: [{ type: 'SINGLE_LINE_TEXT', code: '商品コード' }, { type: 'SINGLE_LINE_TEXT', code: '商品名' }]
    });

    // 3-2. 属性項目
    categories.forEach(cat => {
      layout.push({ type: 'ROW', fields: [{ type: 'HR', size: { width: 600 } }] });
      layout.push({ type: 'ROW', fields: [{ type: 'LABEL', label: `▼ カテゴリ ${cat}` }] });

      itemsConfig.forEach(config => {
        const codes = [];
        for (let i = 1; i <= config.count; i++) {
          codes.push(`属性_${cat}_${config.prefix}_${String(i).padStart(2, '0')}`);
        }
        for (let i = 0; i < codes.length; i += 4) {
          const rowFields = codes.slice(i, i + 4).map(code => ({
            type: config.type, code: code,
            size: (config.type === 'MULTI_LINE_TEXT') ? { innerHeight: 60 } : undefined
          }));
          layout.push({ type: 'ROW', fields: rowFields });
        }
      });
    });

    // 3-3. グループ項目の配置 (拡張版)
    layout.push({ type: 'ROW', fields: [{ type: 'LABEL', label: '▼ グループエリア (拡張版)' }] });
    for (let i = 1; i <= 10; i++) {
      const num = String(i).padStart(2, '0');
      const gCode = `Group_${num}`;
      
      // グループ内のレイアウト(2段に分けて配置)
      layout.push({
        type: 'GROUP',
        code: gCode,
        layout: [
          {
            type: 'ROW',
            fields: [
              { type: 'NUMBER', code: `${gCode}_Num` },
              { type: 'SINGLE_LINE_TEXT', code: `${gCode}_Text` },
              { type: 'DATE', code: `${gCode}_Date` }
            ]
          },
          {
            type: 'ROW',
            fields: [
              { type: 'DROP_DOWN', code: `${gCode}_Drop` },
              { type: 'CHECK_BOX', code: `${gCode}_Check` }
            ]
          }
        ]
      });
    }

    // 3-4. テーブル項目の配置
    layout.push({ type: 'ROW', fields: [{ type: 'LABEL', label: '▼ テーブルエリア' }] });
    for (let i = 1; i <= 10; i++) {
      const num = String(i).padStart(2, '0');
      layout.push({
        type: 'SUBTABLE',
        code: `Table_${num}`,
        fields: [
          { type: 'NUMBER', code: `Table_${num}_Num` },
          { type: 'SINGLE_LINE_TEXT', code: `Table_${num}_Text` },
          { type: 'DATE', code: `Table_${num}_Date` }
        ]
      });
    }

    console.log('Step 3: レイアウト設定を送信中...');
    await kintone.api(kintone.api.url('/k/v1/preview/app/form/layout', true), 'PUT', { app: appId, layout });
    console.log('Step 3: レイアウト設定完了');

    // -------------------------------------------------------
    // 4. アプリの公開 (Deploy)
    // -------------------------------------------------------
    console.log('Step 4: アプリの公開処理を実行中...');
    await kintone.api(kintone.api.url('/k/v1/preview/app/deploy', true), 'POST', { apps: [{ app: appId }] });

    console.log('-------------------------------------------------------');
    console.log(`🎉 レイ: 大規模アプリ構築完了です!`);
    console.log(`作成されたアプリID: ${appId}`);
    console.log('フィールド数: 約282個 (属性200 + 基本2 + グループ内50 + テーブル内30)');
    console.log('-------------------------------------------------------');

  } catch (error) {
    console.error('🦊 レイ: エラーが発生しました。', error);
    if (error.error) console.error(JSON.stringify(error.error, null, 2));
  }
})();

アプリ作成手順

適当に項目の多いアプリ作成を指示して、足りない部分を追加していきます。
依頼時に目的を記載すると、多少考慮してくれるようです。

アプリ作成1

計算式プラグインのテスト用に、項目が多いアプリを作成
・商品マスタアプリ
・商品コード、商品名
・他に商品カテゴリ別に商品の属性用項目を200個追加

image.png

アプリ作成2(項目タイプを追加)

数値以外に、文字列・ドロップダウン・チェックボックス・日付・文字列複数行の項目も必要

2025-11-27_09h41_24.png

アプリ作成3(グループとテーブルを追加)

10グループと10テーブルも追加して

2025-11-27_09h42_31.png

アプリ作成4(グループ内にも、数値・文字列・日付・ドロップダウン・チェックボックスを配置)

グループ内にも、数値・文字列・日付・ドロップダウン・チェックボックスを配置して

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?