# 動的ドロップダウンカスタマイズ（React対応）

**URL:** <https://community.cybozu.dev/t/topic/7353>\
**Category:** kintone 開発相談\
**Created:** [2021 年 1 月 28 日午前 5:26 UTC](https://community.cybozu.dev/t/topic/7353 "2021-01-28T05:26:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 1 月 28 日午前 5:26 UTC](https://community.cybozu.dev/t/topic/7353/1 "2021-01-28T05:26:16Z")

</div>

[kintone UI Componentを使って動的ドロップダウンを作成しよう！](https://community.cybozu.dev/hc/ja/articles/360014149732)の機能をReactで実装しました．

## ソースコード

コードをReactに対応してプラグインで使えるようにしました．  
[https://github.com/Atsushi-Eda/dynamic-dropdown](https://github.com/Atsushi-Eda/dynamic-dropdown)

## プラグイン設定

### space

- 動的ドロップダウンを表示するスペースフィールド．
- グループフィールド内のスペースフィールドは選択できません．
- 動的ドロップダウンを複数設置する場合は，スペースフィールドを複数用意してください．

### majorChoiceField

- 絞り込み条件となる大選択肢のフィールド．
- 「文字列 (1行)」，「ラジオボタン」，「ドロップダウン」のみ指定できます．

### minorChoiceField

- 絞り込みされる小選択肢のフィールド．
- 「文字列 (1行)」，「ドロップダウン」のみ指定できます．

### choiceCombinations

- 大選択肢と小選択肢の値の組み合わせ．

#### choiceCombinations.majorChoice

- 大選択肢の値．

#### choiceCombinations.minorChoices.minorChoice

- 小選択肢の値．

※フォーム設定を変更した際は，プラグイン設定も再編集してください．

## 応用編

大選択肢，中選択肢，小選択肢のような使い方もできるので，ぜひご利用ください．

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2829](https://avatars.discourse-cdn.com/v4/letter/l/a5b964/32.png) [@Legacy\_Account2829](https://community.cybozu.dev/u/Legacy_Account2829)\
**Post date:** [2021 年 8 月 1 日午前 2:42 UTC](https://community.cybozu.dev/t/topic/7353/2 "2021-08-01T02:42:58Z")

</div>

江田様

コメント失礼します。  
下記URLに遷移してみたのですが、こちらをどのようにしてプラグインで使うのかが分からず、、、  
[https://github.com/Atsushi-Eda/dynamic-dropdown](https://github.com/Atsushi-Eda/dynamic-dropdown)

ZIPでダウンロードして、プラグインを取り込む画面でそのZIPを取り込むのかなと思い試してみたのですが、

「インストールに失敗しました。プラグインのファイルが不足している、または正しくありません。」というエラーとなりました。

お手数をおかけしますが、ご回答お待ちしております。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 8 月 1 日午後 11:56 UTC](https://community.cybozu.dev/t/topic/7353/3 "2021-08-01T23:56:38Z")

</div>

藤井さん

お世話になっております。

下記リンクからダウンロード頂けるかと思います。  
[https://github.com/Atsushi-Eda/dynamic-dropdown/raw/master/plugin.zip](https://github.com/Atsushi-Eda/dynamic-dropdown/raw/master/plugin.zip)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2829](https://avatars.discourse-cdn.com/v4/letter/l/a5b964/32.png) [@Legacy\_Account2829](https://community.cybozu.dev/u/Legacy_Account2829)\
**Post date:** [2021 年 8 月 2 日午前 1:45 UTC](https://community.cybozu.dev/t/topic/7353/4 "2021-08-02T01:45:50Z")

</div>

江田様

お世話になっております。藤井です。

リンクを教えていただき、ありがとうございます。無事ダウンロードできました。  
ちなみに、こちらはkintoneや、kintone UI Componentのバージョンアップにより動かなくなる可能性もあると思っていた方が良いですか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2021 年 8 月 2 日午前 2:04 UTC](https://community.cybozu.dev/t/topic/7353/5 "2021-08-02T02:04:08Z")

</div>

藤井さん

お世話になっております。

機能しなくなる可能性は低いと考えております。

[そのカスタマイズ大丈夫？ アップデートの影響を受けにくいカスタマイズ Tips](https://community.cybozu.dev/hc/ja/articles/360041059392)で紹介されているようなリスクのあるカスタマイズはしていないので、kinotneのバージョンアップの影響は受けにくいかと思います。

また、kintone UI Componentの新バージョンが公開されても、インストール済みのプラグインに自動で反映されることはないので、影響はないかと思います。

ただし、将来kintoneのUIが変更された場合も、プラグインで作成したパーツのUIはそのままなので、見た目の一貫性がないという問題は起こり得ます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2829](https://avatars.discourse-cdn.com/v4/letter/l/a5b964/32.png) [@Legacy\_Account2829](https://community.cybozu.dev/u/Legacy_Account2829)\
**Post date:** [2021 年 8 月 2 日午前 2:43 UTC](https://community.cybozu.dev/t/topic/7353/6 "2021-08-02T02:43:20Z")

</div>

江田様

承知いたしました。ご回答いただきまして、ありがとうございます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account189](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@Legacy\_Account189](https://community.cybozu.dev/u/Legacy_Account189)\
**Post date:** [2022 年 8 月 20 日午後 3:17 UTC](https://community.cybozu.dev/t/topic/7353/7 "2022-08-20T15:17:39Z")

</div>

便利なプラグインありがとうございます！！ JavaScriptで対処していたのですが、ものっっすごく便利です。

見た目の、瑣末な話で恐縮なのですが、応用編の中選択肢、小選択肢のように、ドロップダウンを横に並べると、入力画面で微妙に縦の位置がずれる（縦に並べると左の位置がずれる）のを調整する方法はありますでしょうか。

スペースのサイズを変えてみたり、位置関係を変えてみたりしたのですが、どうしても「なんかちょっとずれてる」という感じになります。

元の記事の方もちょっとずれているように見えるので、そういうものなのかな…と思いつつなのですが、もし方法があったら教えてください。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 3 日午前 6:13 UTC](https://community.cybozu.dev/t/topic/7353/8 "2024-09-03T06:13:32Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
