kintoneでゼロから始めるノーコード開発 第4回 「データの一覧」を見やすくしてスクロールを減らそう

「アプリの設定画面」が表示されるので、「一覧」タブを選択する。続いて、「＋」アイコンをクリックし、「新しい一覧」の作成を開始する。

「新しい一覧」の表示方法を設定する画面が表示される。まずは、これから作成する「一覧」に適当な名前を付けておこう。今回は「省略表示」という一覧名を指定した。

続いて、この「一覧」に表示する項目を指定していく。この操作は、左側に表示されている項目（フィールド名）をマウスでドラッグ＆ドロップしていくと実行できる。

今回の例では、「社名」→「部署」→「氏名」→「メールアドレス」→「TEL」という順番で各項目を表示するように指定した。他の「住所」や「FAX」などの項目は頻繁に参照するデータではないため、表示を省略しても特に問題はないと考えられる。

さらに、データを絞り込んだり、並べ替えたりする機能も用意されている。今回は「社名フリガナ」の昇順に並べ替えて、社名の50音順にデータを一覧表示するように指定した。すべて指定できたら「保存」ボタンをクリックする。

元の画面に戻るので、先ほど指定した内容が「一覧」タブに追加されていることを確認し、「アプリを更新」ボタンをクリックする。

以上で「新しい一覧」の作成は完了だ。先ほど指定したように、「社名」→「部署」→「氏名」→「メールアドレス」→「TEL」の順番で、社名の50音順にデータが一覧表示されていることを確認できるだろう。この一覧も縦罫線のドラッグにより「各列の幅」を自由に変更することが可能だ。

これで取引先の「メールアドレス」や「TEL」を即座に確認できるようになる。いちいち画面を左右にスクロールする必要はない。

なお、表示を省略した「住所」などのデータを参照したいときは、画面左上にあるボックスを操作して、一覧の表示方法を「（すべて）」に切り替えればよい。すると、初期状態である「全項目を表示する一覧」に戻すことができる。

念のため、スマートフォンで閲覧したときの様子も紹介しておこう。画面が小さいため、いちどに表示できる項目数は限られるが、それでも以前より「データの一覧が格段に見やすくなっている」ということを実感できるだろう。

「メールアドレス」や「TEL」の項目はリンクとして機能しているため、タップするだけで電話したり、メールの編集画面を開いたりすることが可能だ。もちろん、「一覧」の表示方法を切り替える操作にも対応している（上図、右の画面）。