# リストとページネーション

*スキルレベル: エキスパート*

## 開始前に

* まず、[データ型を扱う](https://help.adalo.com/ja/integrations/xano/working-with-data-types-in-adalo-and-xano)ガイドを完了してください。
* この機能を使用するには、TeamまたはBusiness Adaloプランが必要です。
* 子リストは親リストからのMagicText情報を使用してクエリを実行することはできません。

## 動画

{% embed url="<https://www.youtube.com/watch?v=vJLPWawtmBw>" %}

## 手順

{% hint style="info" %}
**注意:** Adaloのリストでは、プログレッシブローディング（ページネーションとも呼ばれる）はデフォルトで無効になっています。つまり、AdaloはデフォルトでXanoテーブル内のすべてのレコードをロードしようとします。
{% endhint %}

#### 1. プログレッシブローディング（ページネーション）をオンにするには、まず最初にリストのデータ型を最初のドロップダウンで設定してください。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-363940944135412cb2d7e17f345007546a4edbc5%2FScreenshot%202024-07-23%20at%201.35.49%E2%80%AFPM%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### 2. 次に、\[詳細オプション]セクションをクリックし、\[ユーザーがスクロールするとアイテムをロード]トグルをオンにします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-74e07c339d587c4aa8d6a93f29b68ca71b0a6dc0%2FScreenshot%202024-07-23%20at%201.36.11%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 4. Xanoダッシュボードで、左メニューのAPIタブをクリックし、リストが参照しているテーブルのエンドポイントを保持するAPIグループを選択します。

この例では、Eventsテーブルのエンドポイントを保持するデフォルトのエンドポイントグループのみを持っているため、それを選択しています。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-96a3239207fb969982976f34c44a105d672af0e1%2FScreenshot%202024-07-23%20at%201.42.42%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 5. Adaloのリストに対応するテーブルの「GET All」エンドポイントを見つけ、クリックして開きます。

この例では、Companiesテーブルを見ています。デフォルトのAPIグループを使用している場合、これはリストで最初に見るGETになります。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-2122267970766cb9bac15cd8fadc66df4dac9f3e%2FScreenshot%202024-07-23%20at%201.48.22%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 6. エンドポイントを開いたら、入力ボックスの上にカーソルを合わせて追加アイコンをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-4b98a2fe536c0b015480dbae4c92b2f0264a33b8%2FScreenshot%202024-07-23%20at%201.47.21%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 7. 右メニューでIntegerオプションをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0a5db6ce885d3ae8927d64aed6f32d0e3721acb9%2FScreenshot%202024-07-23%20at%201.50.36%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 8. 名前入力欄に「limit」と入力し、\[入力を追加]をクリックします。

{% hint style="warning" %}
**重要:** 「limit」という単語は大文字と小文字を区別します！すべて小文字である必要があります！
{% endhint %}

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-76e3924a076be64e0eb58a4ba8668a7e091c399a%2FScreenshot%202024-07-23%20at%201.51.34%E2%80%AFPM.png?alt=media" alt="" width="301"><figcaption></figcaption></figure>

#### 9. 入力セクションで再度追加ボタンをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e2e17f013436d23977caf0f2b952dad7bd16ac0c%2FScreenshot%202024-07-23%20at%201.53.50%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 10. 今度は「offset」という別のIntegerを追加し、\[入力を追加]をクリックします。

{% hint style="info" %}
**重要:** 単語 "offset" は大文字と小文字を区別します。常に小文字である必要があります！
{% endhint %}

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-fb819fffffbb6d16b35a6c6c530184ee6f21c44b%2FScreenshot%202024-07-23%20at%201.54.17%E2%80%AFPM.png?alt=media" alt="" width="299"><figcaption></figcaption></figure>

#### 11. ファンクションブロックのクエリステップをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a38d76664d124579af1e91b20cfd6cc7bfbe44d0%2FScreenshot%202024-07-23%20at%201.56.53%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 12. 今、右側のメニューの出力タブをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-6192e31f9a5c8aa4fee71a829f40c91307ef3f44%2FScreenshot%202024-07-23%20at%201.57.15%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 13. 最初の編集/鉛筆アイコンをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-7cf9d26ca09b6ca50489e583a2ec747f617b8454%2FScreenshot%202024-07-23%20at%202.00.44%E2%80%AFPM.png?alt=media" alt="" width="317"><figcaption></figcaption></figure>

#### 14. "ページングを有効にする" の横にあるボックスをチェックし、"メタデータを含める" のチェックを外してから保存をクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-70c949d52a70a771db6e3d9fdddf7e1dadabf02e%2FScreenshot%202024-07-23%20at%201.18.49%E2%80%AFPM%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### 15. メニューの上部にある外部タブをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-ed7a85c196e532baa0f4e0d148934cfc5385440d%2FScreenshot%202024-07-23%20at%202.03.06%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 16. ページごとのドロップダウンメニューで "limit" オプションを選択します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-c37baeed1509c9a4c1087fc702f90a1b9b39fb00%2FScreenshot%202024-07-23%20at%202.03.48%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 17. オフセットのドロップダウンメニューで "offset" オプションを選択します。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-c442478533df5fe883bc0bf26a73aa86953d4dc8%2FScreenshot%202024-07-23%20at%202.03.59%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 18. メニューの下部にある保存ボタンをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-75c25bfcb1a89c33966a3652a90e5f178ac55625%2FScreenshot%202024-07-23%20at%202.05.38%E2%80%AFPM.png?alt=media" alt="" width="321"><figcaption></figcaption></figure>

#### 19. 変更をライブにするために右上の緑色の公開ボタンをクリックし、変更にオプションのメッセージを付けて最終的に公開するために右下の公開ボタンをクリックします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-9ca86194620a55dd6a7d5d8439f9c03852073a23%2FScreenshot%202024-07-23%20at%202.06.38%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

## もっと詳しく

* [ステップ14](#14.-check-the-box-next-to-enable-paging-then-click-save.) で見られるページごとの数入力を変更することで、Adalo に一度に提供されるレコードの数を変更できます。
* ユーザーコレクションの GET ALL に対してページネーションをオンにすることはできませんのでご注意ください。
* ページネーションの使用は強くお勧めします。リストの読み込み速度が大幅に向上します（ページネーションを使用しない場合と比較して初期リストの読み込み速度が最大7倍速くなります）。
* メタデータはオフにする必要があります。そうしないとリストが正しく読み込まれない場合があります。
* このビデオをチェックしてください: [Adalo & Xano: How to Use Adalo Query Parameters to Filter a List on a Screen](https://www.youtube.com/watch?v=vXz2HfXKJGo) 、私たちの素晴らしい Adalo Makers の1人から！

## ヘルプ

すべての統合と同様に、Adaloは統合のAdalo側のサポートのみを提供できます。Xanoアカウント、ダッシュボード、または実装に関する支援が必要な場合は、Xanoの[ドキュメント](https://docs.xano.com/)、Xano [コミュニティ](https://community.xano.com/)、[Xano University](https://www.youtube.com/nocodebackend)、または[Xanoサポート](https://www.xano.com/contact/)に直接お問い合わせください。

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿にこの記事へのリンクを貼り付けることもお忘れなく！また、[Adalo App AcademyのXanoコース](https://appacademy.adalo.com/course/getting-started-with-xano)も役立つかもしれません！

チュートリアルやヘルプドキュメントのリクエストがありましたら、[お知らせください！](https://ideas.adalo.com/tutorial-requests)