kintone アプリ画面のスクリーンショットを参考にアプリを作成してみます。
概要
プラグインのお問合せでは、画面のスクリーンショットと現象から問題を調査することがあります。
同じようなアプリを作って再現するのは、なかなか面倒です。
そこで、アプリマイスター・レイ に画面のスクリーンショットからアプリを作成できるか試してみました。
実行結果をみると、アプリの項目・レイアウトを含めて、よく出来ています。
ルックアップ元の顧客情報アプリも一緒に作ってくれました。
ラベルも再現されていますが、太字になっていないところがちょっと残念。
- 元アプリのスクリーンショット
- スクリーンショットから作成したアプリ
- 作成したアプリのフォーム設定画面
- 一緒に作成された顧客情報アプリ
- こちらは、必要最小限の項目でした
アプリマイスター・レイへのプロンプト
アプリの画像を添付して、下記を入れるだけです。
画像の請求管理アプリと同様のアプリを作成したい
アプリマイスター・レイの回答
- ちょっと休憩
画像のご提示、ありがとうございます！
🦊 rex0220 アプリマイスター・レイ です。
ご提示いただいた画像は「請求管理アプリ」ですね。
画像の内容を拝見すると、以下のような構成になっているようです。
-
顧客情報の連携（ルックアップ）
- 「顧客番号」を入力して「取得」すると、「取引先名」などが自動入力される仕組みが見えます。
- これを再現するために、今回は**「顧客マスタ」も一緒に自動作成**して、連携するように構築しますね。
-
担当者
- ユーザー選択フィールドですね。
-
金額・日付・時刻
- 請求金額は「円」単位で、桁区切りが入っています。
-
明細テーブル
- 日付、金額、作業内容、受注ID、識別IDが含まれるテーブル（サブテーブル）があります。
これらをまるっと再現するスクリプトを用意しました。
以下のコードを、kintoneのポータル画面（または任意のアプリ一覧画面）で実行してください。
🛠️ 請求管理アプリ構築スクリプト（マスタ連携対応版）
/**
* 🦊 kintone App Meister Ray's Work
* Project: 請求管理アプリ構築（顧客マスタ連携セット）
* Description: 画像の「請求管理アプリ」と、連携元の「顧客マスタ」をセットで作成します。
*/
(async () => {
try {
console.log('🦊 レイ: 請求管理アプリの構築セットを開始します！');
// =======================================================
// Phase 1: 連携用の「顧客マスタ」を作成・公開
// =======================================================
const createMasterBody = { name: '顧客マスタ（請求連携用）' };
const masterResp = await kintone.api(kintone.api.url('/k/v1/preview/app', true), 'POST', createMasterBody);
const masterAppId = masterResp.app;
console.log(`Step 1: 顧客マスタを作成しました... App ID: ${masterAppId}`);
// マスタのフィールド設定
const masterFields = {
app: masterAppId,
properties: {
'顧客番号': {
type: 'SINGLE_LINE_TEXT', label: '顧客番号', code: '顧客番号',
unique: true, required: true
},
'取引先名': {
type: 'SINGLE_LINE_TEXT', label: '取引先名', code: '取引先名',
required: true
},
'会社名': { // 画像の上部にあった「会社名」用
type: 'SINGLE_LINE_TEXT', label: '会社名', code: '会社名'
}
}
};
await kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', masterFields);
// マスタの公開 (Deploy) - ルックアップ設定のために先に公開が必要です
console.log('Step 2: 顧客マスタを公開処理中...');
await kintone.api(kintone.api.url('/k/v1/preview/app/deploy', true), 'POST', { apps: [{ app: masterAppId }] });
// 公開反映待ち（安全のため少し待機）
console.log('⏳ (マスタの反映を待っています...)');
await new Promise(resolve => setTimeout(resolve, 8000));
// =======================================================
// Phase 2: 「請求管理アプリ」の作成
// =======================================================
const createAppBody = { name: '請求管理' };
const appResp = await kintone.api(kintone.api.url('/k/v1/preview/app', true), 'POST', createAppBody);
const targetAppId = appResp.app;
console.log(`Step 3: 請求管理アプリを作成しました... App ID: ${targetAppId}`);
// -------------------------------------------------------
// フィールド設定
// -------------------------------------------------------
const fieldsBody = {
app: targetAppId,
properties: {
// --- ルックアップ部分 ---
'顧客番号': {
type: 'SINGLE_LINE_TEXT', label: '顧客番号', code: '顧客番号',
lookup: {
relatedApp: { app: masterAppId },
relatedKeyField: '顧客番号',
lookupPickerFields: ['顧客番号', '取引先名'],
fieldMappings: [
{ field: '取引先名', relatedField: '取引先名' }
]
}
},
'取引先名': {
type: 'SINGLE_LINE_TEXT', label: '取引先名', code: '取引先名'
},
// --- 担当・日付・金額 ---
'担当': {
type: 'USER_SELECT', label: '担当', code: '担当',
defaultValue: [], entities: []
},
'請求日': {
type: 'DATE', label: '請求日', code: '請求日'
},
'請求金額': {
type: 'NUMBER', label: '請求金額', code: '請求金額',
digit: true, unit: '円', unitPosition: 'AFTER'
},
'時刻': {
type: 'TIME', label: '時刻', code: '時刻'
},
// --- 明細テーブル ---
'明細テーブル': {
type: 'SUBTABLE', label: '明細テーブル', code: '明細テーブル',
fields: {
'日付': { type: 'DATE', label: '日付', code: '日付' },
'金額': { type: 'NUMBER', label: '金額', code: '金額', digit: true },
'作業内容': { type: 'SINGLE_LINE_TEXT', label: '作業内容', code: '作業内容' },
'受注ID': { type: 'SINGLE_LINE_TEXT', label: '受注ID', code: '受注ID' },
'識別ID': { type: 'SINGLE_LINE_TEXT', label: '識別ID', code: '識別ID' }
}
}
}
};
await kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', fieldsBody);
console.log('Step 4: フィールド設定完了');
// -------------------------------------------------------
// レイアウト設定（画像の配置を再現）
// -------------------------------------------------------
const layoutBody = {
app: targetAppId,
layout: [
{ type: 'ROW', fields: [{ type: 'LABEL', label: '請求管理' }] },
// 顧客情報の行
{
type: 'ROW',
fields: [
{ type: 'SINGLE_LINE_TEXT', code: '顧客番号', size: { width: 193 } },
{ type: 'SINGLE_LINE_TEXT', code: '取引先名', size: { width: 300 } }
]
},
// 担当
{
type: 'ROW',
fields: [
{ type: 'USER_SELECT', code: '担当', size: { width: 250 } }
]
},
// 請求日・金額・時刻
{
type: 'ROW',
fields: [
{ type: 'DATE', code: '請求日', size: { width: 150 } },
{ type: 'NUMBER', code: '請求金額', size: { width: 180 } },
{ type: 'TIME', code: '時刻', size: { width: 120 } }
]
},
// テーブル
{
type: 'SUBTABLE', code: '明細テーブル',
fields: [
{ type: 'DATE', code: '日付', size: { width: 130 } },
{ type: 'NUMBER', code: '金額', size: { width: 130 } },
{ type: 'SINGLE_LINE_TEXT', code: '作業内容', size: { width: 250 } },
{ type: 'SINGLE_LINE_TEXT', code: '受注ID', size: { width: 150 } },
{ type: 'SINGLE_LINE_TEXT', code: '識別ID', size: { width: 100 } }
]
}
]
};
await kintone.api(kintone.api.url('/k/v1/preview/app/form/layout', true), 'PUT', layoutBody);
console.log('Step 5: レイアウト設定完了');
// -------------------------------------------------------
// アプリの公開 (Deploy)
// -------------------------------------------------------
console.log('Step 6: 請求管理アプリを公開します...');
await kintone.api(kintone.api.url('/k/v1/preview/app/deploy', true), 'POST', { apps: [{ app: targetAppId }] });
console.log('-------------------------------------------------------');
console.log('🎉 レイ: 作業完了です！以下の2つのアプリが作成されました。');
console.log(`1. 顧客マスタ (ID: ${masterAppId})`);
console.log(`2. 請求管理 (ID: ${targetAppId})`);
console.log('※ まず「顧客マスタ」にデータを登録してから、「請求管理」でルックアップを試してくださいね！');
console.log('-------------------------------------------------------');
} catch (error) {
console.error('🦊 レイ: エラーが発生しました。', error);
if (error.error) console.error(JSON.stringify(error.error, null, 2));
}
})();
💡 レイのワンポイントアドバイス
-
ルックアップについて
- 今回は「顧客番号」をキーにして「取引先名」を取得する設定にしました。画像のようにボタンを押すと顧客情報を引っ張ってこれます。
- 重要: アプリ作成後、まずは**「顧客マスタ」**にテストデータ（例: 顧客番号「19」、取引先名「林田商会」）を登録してください。そのあとで請求管理アプリを使うと、うまく動作しますよ。
-
テーブルについて
- 明細行の「金額」フィールドも、合計計算がしやすいように数値型で設定しておきました。
続けて、このアプリに**「明細行の金額を合計して、請求金額に自動セットする計算式」**を設定しましょうか？
アプリ作成スクリプトの実行
kintone の画面を開き、console 画面に、JavaScript コードをコピペして、enter で実行します。
作成されたアプリをアプリ一覧で確認
無事に、アプリが作成されました。
