見積書のPDFから、kintone アプリを作ってみます。
概要
rex0220 アプリマイスター・レイ で、画面からアプリを作成できたので、「PDFからも出来んじゃねぇ！」ということで、やってみました。
※rex0220 アプリマイスター・レイ 画面からアプリ作成
ちゃんと項目を再現してくれますね。
小計・消費税・合計は、計算項目で縦並びまで再現してくれます。
あとは、マニュアルで細かな調整すればOK！
スペース項目で、位置調整もしている
アプリ作成
アプリマイスター・レイへのプロンプト
見積書のPDF を添付して、アプリ作成を依頼します。
アプリマイスター・レイの回答
はい、お任せください！
ご提示いただいた「見積-A-20250224-002.pdf」の内容を基に、kintone で使いやすい**「見積書アプリ」**を構築します。
[cite_start]PDFの内容 [cite: 272] を分析し、現場で入力しやすく、自動計算もしっかり効く構成に設計しました。
📋 アプリ設計のポイント
- [cite_start]基本情報: 「見積番号」[cite: 273][cite_start]、「発行日」[cite: 273][cite_start]、「宛名」[cite: 274] など、ヘッダー情報を配置します。
- [cite_start]明細テーブル: 商品名や数量、単価を入力する部分は、行を自由に追加できる「サブテーブル」にします [cite: 279]。
-
自動計算:
- [cite_start]行ごとの金額（単価 × 数量） [cite: 279]
- [cite_start]小計（行金額の合計） [cite: 281]
- [cite_start]消費税（小計 × 10%） [cite: 281]
- [cite_start]合計金額（小計 ＋ 消費税） [cite: 275, 281]
これらを自動で算出するように計算式を組み込みます。
それでは、以下のコードをブラウザのコンソールで実行して、アプリを作成してください！
/**
* 🦊 kintone App Meister Ray's Work
* Project: 見積書アプリ（PDF取込・自動計算対応）
*/
(async () => {
try {
console.log('🦊 レイ: 見積書アプリの構築を開始します！');
// -------------------------------------------------------
// 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 fieldsBody = {
app: appId,
properties: {
// --- ヘッダー情報 ---
'見積番号': {
type: 'SINGLE_LINE_TEXT',
label: '見積番号',
code: '見積番号',
unique: true,
required: true
},
'発行日': {
type: 'DATE',
label: '発行日',
code: '発行日',
defaultNowValue: true
},
'有効期限': {
type: 'DATE',
label: '有効期限',
code: '有効期限'
},
'宛名': {
type: 'SINGLE_LINE_TEXT',
label: '宛名 (会社名)',
code: '宛名',
required: true
},
'担当者': {
type: 'USER_SELECT',
label: '担当者',
code: '担当者',
defaultValue: [{ type: 'FUNCTION', code: 'LOGINUSER()' }]
},
// --- 明細テーブル ---
'見積明細': {
type: 'SUBTABLE',
label: '見積明細',
code: '見積明細',
fields: {
'商品名': {
type: 'SINGLE_LINE_TEXT',
label: '商品名',
code: '商品名'
},
'数量': {
type: 'NUMBER',
label: '数量',
code: '数量',
digit: true,
unitPosition: 'AFTER'
},
'単価': {
type: 'NUMBER',
label: '単価',
code: '単価',
digit: true,
unit: '円',
unitPosition: 'AFTER'
},
'金額': {
type: 'CALC',
label: '金額',
code: '金額',
expression: '単価 * 数量', // 行ごとの自動計算
format: 'NUMBER_DIGIT',
unit: '円',
unitPosition: 'AFTER'
}
}
},
// --- 集計エリア ---
'小計': {
type: 'CALC',
label: '小計',
code: '小計',
expression: 'SUM(金額)', // テーブルの合計
format: 'NUMBER_DIGIT',
unit: '円',
unitPosition: 'AFTER'
},
'消費税': {
type: 'CALC',
label: '消費税(10%)',
code: '消費税',
expression: 'ROUND(小計 * 0.1)', // 税計算
format: 'NUMBER_DIGIT',
unit: '円',
unitPosition: 'AFTER'
},
'合計金額': {
type: 'CALC',
label: '合計金額',
code: '合計金額',
expression: '小計 + 消費税', // 総合計
format: 'NUMBER_DIGIT',
unit: '円',
unitPosition: 'AFTER'
},
// --- その他 ---
'備考': {
type: 'MULTI_LINE_TEXT',
label: '備考',
code: '備考'
}
}
};
await kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', fieldsBody);
console.log('Step 2: フィールド設定完了。計算式もセットしました！');
// -------------------------------------------------------
// 3. レイアウト設定
// -------------------------------------------------------
const layoutBody = {
app: appId,
layout: [
{
type: 'ROW',
fields: [
{ type: 'SINGLE_LINE_TEXT', code: '見積番号', size: { width: 200 } },
{ type: 'USER_SELECT', code: '担当者', size: { width: 200 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'DATE', code: '発行日', size: { width: 200 } },
{ type: 'DATE', code: '有効期限', size: { width: 200 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'SINGLE_LINE_TEXT', code: '宛名', size: { width: 400 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'LABEL', label: '▼ 見積内容' }
]
},
{
type: 'SUBTABLE',
code: '見積明細',
fields: [
{ type: 'SINGLE_LINE_TEXT', code: '商品名', size: { width: 300 } },
{ type: 'NUMBER', code: '数量', size: { width: 100 } },
{ type: 'NUMBER', code: '単価', size: { width: 120 } },
{ type: 'CALC', code: '金額', size: { width: 150 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'HR', size: { width: 600 } }
]
},
// 集計を見やすく右寄せ風に配置
{
type: 'ROW',
fields: [
{ type: 'SPACER', size: { width: 300, height: 1 } },
{ type: 'CALC', code: '小計', size: { width: 200 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'SPACER', size: { width: 300, height: 1 } },
{ type: 'CALC', code: '消費税', size: { width: 200 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'SPACER', size: { width: 300, height: 1 } },
{ type: 'CALC', code: '合計金額', size: { width: 200 } }
]
},
{
type: 'ROW',
fields: [
{ type: 'MULTI_LINE_TEXT', code: '備考', size: { width: 500, innerHeight: 100 } }
]
}
]
};
await kintone.api(kintone.api.url('/k/v1/preview/app/form/layout', true), 'PUT', layoutBody);
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('見積書の明細を入力して、合計金額が自動計算されるか確認してみてくださいね。');
console.log('-------------------------------------------------------');
} catch (error) {
console.error('🦊 レイ: エラーが発生しました。', error);
if (error.error) console.error(JSON.stringify(error.error, null, 2));
}
})();
次のステップ
作成されたアプリを確認してみてください。
もし、「商品名はマスタアプリからルックアップで取得したい」や「顧客情報もマスタ化したい」などのご要望があれば、続けて設計しますのでおっしゃってくださいね！
アプリ作成スクリプトの実行
kintone を開いた画面の console で、スクリプトを実行します。
まとめ
PDFからアプリ作成ができると、いろいろ捗りますね