---
title: カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: カスタムモジュールのリピーターオプションは本当に素晴らしい機能です。開発者は効率的な開発ができ、ページ更新者は柔軟にコンテンツの編集ができます。しかしフィールドがシンプルな場合、いちいち項目を追加し、コンテンツを入れ、親階層に戻り…というのが面倒な場合があります。そんなときに使えるTipsをご紹介します。
image: https://demo.100inc.co.jp/hubfs/Imported%20images/logo.png
---

[![株式会社100ロゴ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported%20images/logo.png?width=60&height=45&name=logo.png)](https://demo.100inc.co.jp)

Nov 22, 2019, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)

# カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法

## 目次

1. [目次](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#目次%20テキストフィールドを用意する%20テキストフィールド内の改行を許可する%20テキストフィールドから配列を生成する%20動作確認%20【補足】改行を表示に反映させたいときは)
   
   <https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#目次%20テキストフィールドを用意する%20テキストフィールド内の改行を許可する%20テキストフィールドから配列を生成する%20動作確認%20【補足】改行を表示に反映させたいときは>
     1. [テキストフィールド内の改行を許可する](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect2)
     2. [テキストフィールドから配列を生成する](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect3)
     3. [動作確認](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect4)
     4. [目次 テキストフィールドを用意する テキストフィールド内の改行を許可する テキストフィールドから配列を生成する 動作確認 【補足】改行を表示に反映させたいときは](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect5)
     5. [テキストフィールドを用意する まずは、繰り返したい項目用のテキストフィールドを用意します。このとき、 リピーターオプションは使用しません。 本当にただのシンプルなテキストフィールドを追加するだけです。](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect1)

カスタムモジュールのリピーターオプションは本当に素晴らしい機能です。この機能の登場（昔はありませんでした）により開発者は効率的な開発ができるようになり、またページ更新者も非常にわかりやすい構造で、柔軟にコンテンツの編集ができるようになりました。

しかし、リピートするフィールドがシンプルな場合、いちいち

1. 項目を追加し
2. コンテンツを入れ込み
3. 親階層に戻り
4. 項目を追加し…

という作業を面倒に感じてしまうことがあります。以下のようなパターンですね。

![リピートフィールドの入力が面倒くさいと感じてしまうパターン](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/resolve-hassle-of-repeater-about.gif) リピートフィールドの入力が面倒くさいと感じてしまうパターン

ページ更新者がHTMLに触れない、コンテンツにのみ集中できるという点ではこの構造は正義ですが、項目が多いとサイト運用のスピードを落としてしまうこともあります。

- ページ更新者がHTMLに触れず
- かつ項目が多い場合も楽にコンテンツを入力できる

を両立させたのが、本記事の方法です。

## 目次

1. [テキストフィールドを用意する](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect1)
2. [テキストフィールド内の改行を許可する](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect2)
3. [テキストフィールドから配列を生成する](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect3)
4. [動作確認](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect4)
5. [【補足】改行を表示に反映させたいときは](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater#sect5)

## テキストフィールドを用意する

まずは、繰り返したい項目用のテキストフィールドを用意します。このとき、 リピーターオプションは使用しません。 本当にただのシンプルなテキストフィールドを追加するだけです。

![テキストフィールドの追加](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/resolve-hassle-of-repeater-textfield.png)   
テキストフィールドの追加

## テキストフィールド内の改行を許可する

次にテキストフィールドにおいて、改行を許可するよう設定します。といっても、この設定項目はデザインツールのUIには存在しません。 [HubSpot FTP](https://designers.hubspot.com/docs/tools/hubspot-ftp) または [Local Development Tool](https://designers.hubspot.com/docs/tools/local-development) を使用してカスタムモジュールを一度ローカルにダウンロードします。カスタムモジュールはこのような構造になっています。

```
     
└──
 
水平付箋リスト.
module
   
 
├──
 _locales
   
 
├──
 fields
.
json
   
 
├──
 meta
.
json
   
 
├──
 
module
.
css
   
 
├──
 
module
.
html
   
 
└──
 
module
.
js
  
```

このうちのfileds.jsonを開くと、カスタムモジュールに設定しているフィールドの一覧が確認できます。この中で先ほど追加したテキストフィールドを探し、「allow\_new\_line」をtrueにします。

```
     
{
   
 
"allow_new_line"
:
 
false
,
 
// これをtrueにする
   
 
"default"
:
 
"テキストが入ります"
,
   
 
"validation_regex"
:
 
""
,
   
 
"name"
:
 
"list"
,
   
 
"show_emoji_picker"
:
 
false
,
   
 
"id"
:
 
"4f4e2de8-0bc2-0daa-b0d0-53e5d52fea10"
,
   
 
"label"
:
 
"リスト"
,
   
 
"locked"
:
 
false
,
   
 
"type"
:
 
"text"
,
   
 
"required"
:
 
false
   
}
  
```

ファイルを保存したら、HubSpot FTPまたはLocal Development Toolを利用してfields.jsonをアップロードします。これでカスタムモジュールをテストしてみると、テキストフィールド内で改行できるようになっていることがわかります。

![カスタムモジュールをテストしてみると、テキストフィールド内で改行できるようになっていることがわかる](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/resolve-hassle-of-repeater-after-allow-new-line.gif)   
カスタムモジュールをテストしてみると、テキストフィールド内で改行できるようになっていることがわかる

## テキストフィールドから配列を生成する

あとはテキストフィールドから改行区切りで配列を生成して、ループに渡すだけです。今回のテキストフィールドの内部名は「list」なので、 [splitフィルター](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#split)を使用して次のようにコードを書きます。

```
     
<ul
 
class
=
"bl_postits "
>
   

   
</ul>
  
```

## 動作確認

これでコンテンツを入力する際は、リピーターオプションでいちいち

1. 項目を追加し
2. コンテンツを入れ込み
3. 親階層に戻り
4. 項目を追加し…

ということをする必要がなく、1つのテキストフィールド内で改行区切りでサクサクコンテンツを入力できるようになっているはずです。確認してみましょう。

![改修後のコンテンツ入力デモ](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/resolve-hassle-of-repeater-after.gif)   
改修後のコンテンツ入力デモ

バッチリですね。

## 【補足】改行を表示に反映させたいときは

ときに、テキストの途中で改行したいこともあると思います。ただし今回は改行を区切り文字として使用してしまっているため、<br>タグを挿入してもらうのが1番シンプルです。

ただしHTMLがわかる人でないとヒントなしでは<br>タグにたどり着けませんので、ヘルプテキストを設定しましょう。

![ヘルプテキストの設定例](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/resolve-hassle-of-repeater-helptext.png)   
ヘルプテキストの設定例

以上、サイト運用を少しでもスムーズにするためのTipsでした。パンセは「お客様が更新しやすいHubSpot CMS」「お客様が長く運用できるサイト」に徹底的にこだわっています。HubSpot CMSは構築する人によっていくらでも使いやすく、また使いづらくなります。

「こんなことできないの」程度でも構いません。HubSpot CMSが使いづらいと感じている場合は、ぜひお気軽にご相談ください！

- [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fresolve-hassle-of-repeater)
- [ツイート](https://twitter.com/share?text=%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E3%83%AA%E3%83%94%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E5%85%A5%E5%8A%9B%E3%81%8C%E9%9D%A2%E5%80%92%E3%81%AA%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95%EF%BD%9CTips%EF%BD%9C%E6%97%A5%E6%9C%AC%E3%83%88%E3%83%83%E3%83%97%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEHubSpot%E3%83%86%E3%83%83%E3%82%AF%E4%BC%81%E6%A5%AD+%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%91%E3%83%B3%E3%82%BB&url=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fresolve-hassle-of-repeater)

執筆者：[Admin](https://demo.100inc.co.jp/blog/author/admin)

## 関連記事

## 人気の記事

- Nov 22, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater)
- Dec 30, 2022, 3:22:31 PM
    - [#sample](https://demo.100inc.co.jp/blog/tag/sample)
  
  
  [テストpost（複製）](https://demo.100inc.co.jp/blog/アカデミー練習-1-0)
- Jun 20, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [CSSやJSの修正をすぐに確認したければ、プレビューURLで](https://demo.100inc.co.jp/blog/tips/check-update-on-preview-url)
- Dec 11, 2017, 12:00:00 AM
    - [ブログ](https://demo.100inc.co.jp/blog/tag/ブログ)
  
  
  [INBOUND 2017参加レポート サブセッション編](https://demo.100inc.co.jp/blog/tips/inbound-2017-subsessions)
- May 9, 2024, 1:20:53 PM
    - [#通常のタグ](https://demo.100inc.co.jp/blog/tag/通常のタグ)
  
  
  [test](https://demo.100inc.co.jp/blog/test-shida)

© Pensees