カード型UIをノーコードでデザインできるForguncyのリピーターを使ってモバイルに最適な一覧画面をつくる

今回は、ノーコードツールForguncyを使ってモバイルでデータ一覧を表示する際に最適な「カード型UI」をデザインする方法を紹介します。Forguncy６の「リピーター型セル」を使うとモバイルアプリのカード型UIのようなデザインをカンタンに作成できます。本時事では動画を使って、リピーター型セルを使ったモバイル用の簡単なアプリ作成方法について記述します。

リピーターとは

リピーターは、ページとは別にレイアウトしたテンプレートをリストビューのデータの件数分繰り返して表示するセル型です。表示だけでなく、データの編集も可能です。Excelのような「行」でレコードを表現するのではなく「カード型UI」や「単票形式」など自由な外観にできるので、スマホやタブレットでも見やすい一覧画面をデザインできます。

モバイルアプリの作成

ここからは次の動画に従って、モバイルアプリを作成してみます。
アプリの概要は、「今週の出荷リストを表示する」と言うものです。
https://twitter.com/forguncy/status/1265560183901761537

先ずは、モバイルページを作成します。［作成］タブの［モバイルページ］をクリックして、新しいページを開きます。

「モバイルページ」は「ページ」と異なり、モバイルデバイスの画面サイズに合わせた行数と列数にあらかじめ設定されています。モバイルの画面をイメージし下図のように業務の内容がわかるようタイトルをデザインします。

次にリピーターでカード型のUIをデザインしていきますが、リピーターに表示するデータはテーブルではなくリストビューを使用します。そこで、まずは元データとなるリストビューを作成します。

なお、元データとなるリストビューは必ずしも実行時の画面上に表示されている必要はなく、非表示行や非表示列として、画面上に表示しないようにしても構いません。動画では、リストビューに受注テーブルの出荷日、出荷先住所、出荷先電話番号、出荷先名を連結しています。

リストビューにクエリー条件を設定します。
［デザイン］－［クエリー］－［クエリー条件］をクリックして、開いた「クエリー条件」ダイアログに新しい条件を設定します。タイトルに「今週の…」とありますが、動画では「今日から7日間」という条件になっています。

動画には出ていませんが、リストビューを右クリックして表示したメニューから［列名を自動設定］を選択し、すべての列に列名を設定します。リピーター型セルのテンプレートでは、テーブルのフィールドに対して直接データ連結を行うのではなくリストビューの列に対して連結を行うため、列名が必要となります。

さていよいよ、リピーターセル型を設定します。モバイルページの残りの領域を全て選択し、セル型を「リピーター」にします。

リピーターセル型を選択した状態で、右ペイン「セル型」の「データソースとするリストビュー」は「リストビュー１」を選択し、「テンプレートの編集」をクリックして、テンプレート編集画面へと作業ウィンドウを切り替えます。

テンプレートをデザインし、リストビューを表示させたいセルに右ペイン［セル型］の［連結するリストビューの列］に任意の列名を設定します。

テンプレートのシート上に表示されている破線は、親ページの［リピーター］型セルの大きさを表しています。

［デザイン］タブの［操作］－［親ページのスナップショット］をクリックすると、親ページの状態を同時に確認しながらテンプレートを編集できます。もう一度クリックすると元の状態に戻ります。
テンプレートの編集が終わったら［テンプレート編集の終了］をクリックして、親ページへ戻ります。

［ホーム］タブにあるデバッグの［開始］をクリックすると、リストビューのレコード数分だけリピーターのテンプレートに連結データが表示され、繰り返し表示が行われることを確認できます。

表示モードは縦1列に並べる縦方向と、横1列に並べる横方向、または領域の終端で折り返す折り返しを選択できます。
既定値は縦方向ですが、リピーター型セルの右ペイン［セル型］の「表示モード」をクリックすると変更可能です。

また別に親ページでの表示モードは、すべてを表示するオーバーフローか、指定した領域内にスクロールバーを表示するスクロールか、指定した領域に表示できる分だけ表示するカットかを選択できます。
既定値はスクロールですが、リピーター型セルの右ペイン［セル型］の「親ページへの表示方法」をクリックすると変更可能です。

まとめ

Forguncyではリピーター型セルを使って、簡単に柔軟な一覧画面を作成することができます。もちろんコードは不要で、エクセルの様にデザインをし、一つ一つデータを設定していくだけです。

設計時の補足と注意事項

リピーター型セルは編集も可能です。データの編集を行った場合のデータ更新タイミングは、データソースとするリストビューの設定によります。

テンプレートを編集したリピーター型セルをコピーして貼り付けた場合、テンプレートの編集内容はコピーされません。ページを複製した場合や、別のForguncyプロジェクトからページをインポートした場合はこの限りではありません。

リストビュー上のセルにおいてのみ使用可能な［レコードの削除］コマンドは、テンプレート内のセルでも使用できます。

親ページ上のセルなど、テンプレート以外のセルをコピーしてテンプレート上に貼り付けた場合、セル型は反映されずスタイルのみが反映されます。

テンプレートでは数式がサポートされないため数式バーは表示されませんが、セルに数式を直接入力した場合や、既定値の設定に数式を設定した場合も同様にサポートされません。

テンプレート内で［Excelエクスポート（ページ）］コマンド、および［PDFエクスポート］を［ボタン］型セル等に設定した場合、エクスポート対象はクリックしたボタンが存在するレコードのテンプレート部分のみとなります。その際のExcelのファイル名は、「リストビュー名」にレコード番号を付加した名称となります。なお、親ページをエクスポートすることはできません。

［リピーター］型セルのデータソースとするリストビューの［編集を許可］の設定値に関わらず、リピーターによる更新は有効となります。

［リピーター］型セルを使用して新規データを追加する方法はありません。

アプリ実行時の補足事項

［リピーター］型セルのデータソースとするリストビューにおいてロードオンデマンドの設定が有効な場合、リピーターのスクロールバーを下端、あるいは右端にスクロールさせることでロードオンデマンドの機能が動作します。

リピーター上の各レコードに相当する領域をクリックした場合、そのクリックした領域に合わせてリストビューのカレントレコードが遷移します。

以上、リピーターについてまとめました。

参照：https://docs.forguncy.com/v6/#createrepeater.html#i-header-content
　　　（GrapeCity Forguncy 6 オンラインヘルプ）