IM-BloomMaker ページネーションの利用方法

2020年12月24日 2025年2月19日

kodamad

この CookBook では、2020 summer でリリースしたコンテンツ種別「Bulma」の「ページネーション」エレメントについて紹介しています。
「ページネーション」エレメントとは、表示されているデータをページ分割して表示することができるエレメントです。

完成イメージ

一覧画面

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートデータ : cookbook_185243_bloommaker_data
以下の定義が含まれています。

種別	ID	名称
コンテンツ	im_cookbook_185243_pagination	ページネーション一覧
ルーティング	im_cookbook_185243_pagination	ページネーション一覧

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/185243
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

この Cookbook では「ページネーション」エレメントを利用します。

一覧画面の作成
アプリケーション画面を公開

1. 一覧画面の作成

それではコンテンツを作成していきましょう。
デザイナを開くまでの手順については、以下のドキュメントを参考にしてください。

IM-BloomMaker ユーザ操作ガイド - コンテンツ

なお、完成サンプルではコンテンツの ID を im_cookbook_185243_pagination としています。

まずは、変数を作成してください。
右ペインにある変数タブを開き、変数タブ上のプルダウンにて「変数」が選択されていることを確認し、「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。

{
  "current": 1,
  "list": [
    [
      "見出し",
      "見出し",
      "見出し"
    ],
    [
      "1ページ目",
      "1ページ目",
      "1ページ目"
    ],
    [
      "2ページ目",
      "2ページ目",
      "2ページ目"
    ],
    [
      "3ページ目",
      "3ページ目",
      "3ページ目"
    ],
    [
      "4ページ目",
      "4ページ目",
      "4ページ目"
    ],
    [
      "5ページ目",
      "5ページ目",
      "5ページ目"
    ],
    [
      "6ページ目",
      "6ページ目",
      "6ページ目"
    ],
    [
      "7ページ目",
      "7ページ目",
      "7ページ目"
    ],
    [
      "8ページ目",
      "8ページ目",
      "8ページ目"
    ],
    [
      "9ページ目",
      "9ページ目",
      "9ページ目"
    ],
    [
      "10ページ目",
      "10ページ目",
      "10ページ目"
    ]
  ]
}

JSONエディタのOKボタンをクリックすると、以下の画像のように作成された変数を確認することができます。