# JavaScriptで生成したフィールドの値更新について

**URL:** <https://community.cybozu.dev/t/topic/2905>\
**Category:** kintone 開発相談\
**Created:** [2018 年 3 月 1 日午後 12:27 UTC](https://community.cybozu.dev/t/topic/2905 "2018-03-01T12:27:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account623](https://avatars.discourse-cdn.com/v4/letter/l/7c8e57/32.png) [@Legacy\_Account623](https://community.cybozu.dev/u/Legacy_Account623)\
**Post date:** [2018 年 3 月 1 日午後 12:27 UTC](https://community.cybozu.dev/t/topic/2905/1 "2018-03-01T12:27:25Z")

</div>

お世話になります。佐藤と申します。

&nbsp;

&nbsp;

kintoneをきっかけにWebアプリを勉強し始めて17日目です。

制御系とWindows業務アプリの経験はあるため、一応ソースの読み書きはできます。

しかし、サンプルやコミュニティを調べても良く分からなかったため、

3つ質問させてください。

※前置きが長いです。質問は一番下にあります。

&nbsp;

既存のWindows業務アプリのWeb化を目指し、下記のサイトなどを参考に、

下図のようなフィールドを生成しました。

&nbsp;

《はじめようkintone API》

[https://developer.cybozu.io/hc/ja/articles/201755040](https://developer.cybozu.io/hc/ja/articles/201755040)&nbsp;

《ドットインストール》

[https://dotinstall.com/](https://dotinstall.com/)&nbsp;

《kintoneスタイルシート記述サンプル》

[https://joyzo.github.io/kintone\_css/](https://joyzo.github.io/kintone_css/)&nbsp;

《「51-modern-default.css」スタイルシート対応表》

[https://developer.cybozu.io/hc/ja/articles/203302214-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E5%88%A9%E7%94%A8](https://developer.cybozu.io/hc/ja/articles/203302214-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E5%88%A9%E7%94%A8)&nbsp;

&nbsp;

&nbsp;

●区分マスタからレコードを取得し、『ＤＭ発送』『友の会』の

二つのフィールドを、メインのアプリにJavaScriptで生成しました。

&nbsp;

●JavaScriptソース

```
//*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
//* 入力画面（初期表示）
//*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
(function() {
"use strict";

// 《区分マスタのアプリケーションＩＤ》
var _APP_KBN_APP_ID = 31;

// 《ＤＭ発送ドロップダウン用変数》
var _DM_SEND_KBN_INFO = {
kubnKey: 'ＤＭ発送区分',
selectBoxId: 'dm_send_kbn',
selectBoxCaption: 'ＤＭ発送',
isRequired: true
};

// 《友の会ドロップダウン用変数》
var _FELLOWSHIP_KBN_INFO = {
kubnKey: '友の会区分',
selectBoxId: 'fellowship_kbn',
selectBoxCaption: '友の会',
isRequired: true
};

// 《区分選択用コントロール生成》
function createKubnSelectBox(kubnKey, selectBoxId, selectBoxCaption, isRequired) {
var appKubnParams = {
app: _APP_KBN_APP_ID,
query: 'kubn_key = "' + kubnKey + '"'
};

// 《複数行取得するため、kintone.apiはrecordsを指定》
kintone.api('/k/v1/records', 'GET', appKubnParams).then(function(resp) {
(function() {
var space = kintone.app.record.getSpaceElement('space_' + selectBoxId);

// 《ラベル生成》
if (isRequired) {
$(space).append(
$('<div>').addClass('kintoneplugin-label').text(selectBoxCaption).append(
$('<span>').addClass('kintoneplugin-require').html('*')
)
);
} else {
$(space).append(
$('<div>').addClass('kintoneplugin-label').text(selectBoxCaption)
);
}

// 《ドロップダウンのような何かを生成》
(function() {
var $selectBox = $('<select>').addClass('kintoneplugin-dropdown-list-item').attr('id', selectBoxId);

$(resp.records).each(function(index, rec){
var $option = $('<option>').addClass('kintoneplugin-dropdown-list-item-name');
$option.attr('value', rec.kubn_code.value).text(rec.kubn_text.value);
$selectBox.append($option);
});

$(space).append(
$('<div>').append(
$('<div>').addClass('kintoneplugin-select-outer').append(
$('<div>').addClass('kintoneplugin-select').append(
$selectBox
)
)
)
);
})();
})();
},
function(error) {
var errmsg = 'レコード取得時にエラーが発生しました。';
if (error.message !== undefined) {
errmsg += '' + error.message;
}
alert(errmsg);
});
}

// 《各初期表示時のイベント生成》
var eventsShow = ["app.record.create.show", "app.record.edit.show", "app.record.detail.show"];
kintone.events.on(eventsShow,
(function(e) {
// カスタムフィールド生成
createKubnSelectBox(_DM_SEND_KBN_INFO.kubnKey, _DM_SEND_KBN_INFO.selectBoxId, _DM_SEND_KBN_INFO.selectBoxCaption, _DM_SEND_KBN_INFO.isRequired);
createKubnSelectBox(_FELLOWSHIP_KBN_INFO.kubnKey, _FELLOWSHIP_KBN_INFO.selectBoxId, _FELLOWSHIP_KBN_INFO.selectBoxCaption, _FELLOWSHIP_KBN_INFO.isRequired);

return e;
}));

// 《各サブミット時のイベント生成》
var events = ["app.record.create.submit", "app.record.edit.submit"];
kintone.events.on(events,
(function(e) {
var record = e.record;

//TODO "record"内に、生成したフィールド名が無いため保留
/*
record[_DM_SEND_KBN_INFO.selectBoxId]['value'] = $('#' + _DM_SEND_KBN_INFO.selectBoxId).val();
record[_FELLOWSHIP_KBN_INFO.selectBoxId]['value'] = $('#' + _FELLOWSHIP_KBN_INFO.selectBoxId).val();
*/

return e;
}));

})();

```

&nbsp;

●質問

① 最後らへんの //TODO の所なのですが、

RDBMSでいう所の、tableにcolumnを追加するような事は

kintoneで可能なのでしょうか？

&nbsp;

② もし①が出来ないとしたら、

フォームのデザイン画面で適当なテキストボックスを置き、

『適当なテキストボックス ⇔ JavaScriptで生成したフィールド』間での

データやりとりをJavaScriptで記述するのが

kintoneの一般的な手法なのでしょうか？

&nbsp;

③ 使い方が良く分からないのですが、

フォームのデザイン画面でドロップダウンを置き、

下記リンクの処理でドロップダウンの内容を書き換える事が

kintoneの一般的な手法なのでしょうか？

《フォームの設定の変更》

&nbsp;[https://developer.cybozu.io/hc/ja/articles/204529724-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AE%E5%A4%89%E6%9B%B4#anchor\_changeform\_changefields](https://developer.cybozu.io/hc/ja/articles/204529724-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AE%E5%A4%89%E6%9B%B4#anchor_changeform_changefields)&nbsp;

&nbsp;

&nbsp;

以上、よろしくお願いいたします。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1491](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1491](https://community.cybozu.dev/u/Legacy_Account1491)\
**Post date:** [2018 年 3 月 9 日午前 6:41 UTC](https://community.cybozu.dev/t/topic/2905/2 "2018-03-09T06:41:46Z")

</div>

佐藤さん

本文を見るに、実現したいことは、

区分マスタに登録されている選択肢を、お客様情報登録テストで選択、保存したい

という解釈でよいでしょうか。

&nbsp;

選択肢が運用上、増減する前提であれば、kintoneの一般的な手法としては、ルックアップフィールドを

使用することになるかと。

通常私が組むときは、友の会区分アプリ と DM区分アプリを 作成して、それをルックアップで選択します。

&nbsp;

もし、選択肢がほぼ、増減しないのであれば、ドロップダウンを設置して、そこに設定で直接埋め込んで

しまう形を取ります。

参考になりますでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account623](https://avatars.discourse-cdn.com/v4/letter/l/7c8e57/32.png) [@Legacy\_Account623](https://community.cybozu.dev/u/Legacy_Account623)\
**Post date:** [2018 年 3 月 18 日午前 4:12 UTC](https://community.cybozu.dev/t/topic/2905/3 "2018-03-18T04:12:12Z")

</div>

上海レンユアー

松村様

&nbsp;

ご回答ありがとうございます。

返信が遅くなり大変申し訳ありません。

&nbsp;

実現したかった事は、松村様が仰るとおりでした。

複数の画面で出現する項目のため、各画面で直接値を埋め込みたくなかったのと

見た目でドロップダウンの形にこだわっていました。

&nbsp;

しかし、各社の事例発表や松村様の実現方法を見てからは

標準フォームパーツで実現できるのであれば、そちらを使用したほうが保守もしやすい事が分かりました。

&nbsp;

大変参考になりました。どうもありがとうございます。

今後ともよろしくお願いいたします。