---
title: HubDBで行の並べ替えを行う｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: HubDBはとても便利なツールですが、本記事執筆現在でまだ少し痒い所に手が届かないこともあり、そのうちの1つとしてHubDB管理画面上で行を並べ替えできないことがあげられます。ただし日付列を作成することによってページ出力時の並び順を制御することはできますので、その方法を解説します。
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)

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

# HubDBで行の並べ替えを行う

## 目次

1. [目次](https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#目次%20日付列を作成し、各行で設定する%20フィルタ条件を指定してHubDBにアクセスする)
   
   <https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#目次%20日付列を作成し、各行で設定する%20フィルタ条件を指定してHubDBにアクセスする>
     1. [目次 日付列を作成し、各行で設定する フィルタ条件を指定してHubDBにアクセスする](https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#sect2)
     2. [フィルタ条件を指定してHubDBにアクセスする](https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#sect2)
        
        [各行に日付値の設定ができれば、あとはHubDBにアクセスしてデータを取得するだけです。HubSpot CMS上のテンプレートでの使用であれば、](https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#sect2)[hubdb\_table\_rows関数](https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#hubdb-table-rows) を使用します。hubdb\_table\_rows関数は次の通りの書式になっています。
        
        ```
         hubdb_table_rows(テーブルID, フィルタ条件) 
        ```
        
        このフィルタ条件に、日付を使用したソート条件を指定します。詳細についてはHubDB APIの [Get table rows](https://developers.hubspot.com/docs/methods/hubdb/v2/get_table_rows) ページにまとめられていますが、手っ取り早くいってしまえば次のように記述します。
        
        ```
          日付列を作成し、各行で設定する 既に触れましたが、ページ出力時に並べ替えを行うには予め「日付」列を作成します。本来の日付の用途と混同しないため、私は列ラベルを「日付（並び替え用）」とすることが多いです。 日付列を追加した様子 日付列の追加が完了したら、ブログ記事を出力する際の「最新記事から表示」という形と同じように、各行に適宜日付を割り当てていきます。なおHubDBへのアクセス時に、昇順/降順を切り替えることも可能です。 各行に日付を設定した様子 フィルタ条件を指定してHubDBにアクセスする 各行に日付値の設定ができれば、あとはHubDBにアクセスしてデータを取得するだけです。HubSpot CMS上のテンプレートでの使用であれば、 hubdb_table_rows関数 を使用します。hubdb_table_rows関数は次の通りの書式になっています。 hubdb_table_rows(テーブルID, フィルタ条件) このフィルタ条件に、日付を使用したソート条件を指定します。詳細についてはHubDB APIの Get table rows ページにまとめられていますが、手っ取り早くいってしまえば次のように記述します。 
        ```

[HubDB](https://www.pensees.co.jp/hubspot/cms/hubdb)はとても便利なツールですが、本記事執筆現在でまだ少し痒い所に手が届かないこともあり、そのうちの1つとしてHubDB管理画面上で行を並べ替えできないことがあげられます。

ここで並べ替えを行い、ページへの出力時もその通りの順番で……とできれば本当は1番よいのですが、残念ながらそこまではできません。ただし日付列を作成することによってページ出力時の並び順を制御することはできますので、その方法を解説します。

**【2022/01/31 追記】**  
記事執筆当時は日付での並び替えしか確認できていましたが、現在は単純に数値列にて並び替えが可能です（文字列列でも同じく可能です）。

## 目次

1. [日付列を作成し、各行で設定する](https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#sect1)
2. [フィルタ条件を指定してHubDBにアクセスする](https://demo.100inc.co.jp/blog/tips/sort-hubdb-rows#sect2)

## 日付列を作成し、各行で設定する

既に触れましたが、ページ出力時に並べ替えを行うには予め「日付」列を作成します。本来の日付の用途と混同しないため、私は列ラベルを「日付（並び替え用）」とすることが多いです。

![日付列を追加した様子](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/hubdb-sort1.png)

 日付列を追加した様子

日付列の追加が完了したら、ブログ記事を出力する際の「最新記事から表示」という形と同じように、各行に適宜日付を割り当てていきます。なおHubDBへのアクセス時に、昇順/降順を切り替えることも可能です。

![各行に日付を設定した様子](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/hubdb-sort2.png)

 各行に日付を設定した様子

## フィルタ条件を指定してHubDBにアクセスする

各行に日付値の設定ができれば、あとはHubDBにアクセスしてデータを取得するだけです。HubSpot CMS上のテンプレートでの使用であれば、 [hubdb\_table\_rows関数](https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#hubdb-table-rows) を使用します。hubdb\_table\_rows関数は次の通りの書式になっています。

```
      hubdb_table_rows(テーブルID, フィルタ条件)    
```

このフィルタ条件に、日付を使用したソート条件を指定します。詳細についてはHubDB APIの [Get table rows](https://developers.hubspot.com/docs/methods/hubdb/v2/get_table_rows) ページにまとめられていますが、手っ取り早くいってしまえば次のように記述します。

```
     
<ul>
   
 
   
 
   
</ul>
  
```

**出力結果**

```
     
<ul>
   
 
<li>
株式会社A.KA Tokyo
</li>
   
 
<li>
パン食普及協議会
</li>
   
 
<li>
特定非営利活動法人 難民を助ける会
</li>
   
 
<li>
公益社団法人 日本缶詰協会
</li>
   
 
<li>
AvanStrate（アヴァンストレート）株式会社
</li>
   
</ul>
  
```

ただしこの結果は、日付が古い順から出力されています。順序を逆にするには、HubDB列名の頭にマイナスを付けます。

```
     
<ul>
   
 
   
 
   
</ul>
  
```

**出力結果**

```
     
<ul>
   
 
<li>
株式会社ロイヤルホテル
</li>
   
 
<li>
株式会社ジャパンタイムズ
</li>
   
 
<li>
医療社団法人ゆみの
</li>
   
 
<li>
株式会社 アバン アソシエイツ
</li>
   
 
<li>
一般財団法人自治体国際化協会(CLAIR／クレア)
</li>
   
</ul>
  
```

この方法に関してはもちろんテンプレートのhubdb\_table\_rows関数だけでなく、HubSpot APIにURLでアクセスする際も同じです。

- [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fsort-hubdb-rows)
- [ツイート](https://twitter.com/share?text=HubDB%E3%81%A7%E8%A1%8C%E3%81%AE%E4%B8%A6%E3%81%B9%E6%9B%BF%E3%81%88%E3%82%92%E8%A1%8C%E3%81%86%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%2Fsort-hubdb-rows)

執筆者：[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