AppSheetで爆速ノーコードアプリ開発 その7 - Sliceでデータを絞り込んで表示する
カカト@ノーコード開発推しです。
「AppSheetで爆速ノーコードアプリ開発」と題して、ノーコードアプリ開発ツール 「AppSheet」の基本的な使い方の説明を連載形式で投稿しています。
７回目となる今回は、AppSheetの「Slice」という機能を使い、表示するデータの絞り込みを行う方法を説明します。
なお、当連載ですがあと２回くらいを予定しています。
開発時間より読む時間の方が長くてめんどくさい・・かもしれませんが、もう少々お付き合いいただけると幸いです＾＾
それでは今回もよろしくお願いします。
Sliceとは？
和訳すると、Sliceとは動詞で「（薄く）切る、切り取る」を意味します。
その言葉通り、AppSheetでSlice機能を使うことで、表からデータを切り取ることができます。
検温履歴を例としますと、
・体温が37.5度以上の人のみ
・直近一週間の検温結果の履歴
・調子が"少し悪い" または "かなり悪い"かつ、体温が37.5度未満
といったような情報が求められると思いますが、それぞれの要件（条件）に基づいたSliceを作ることで、ユーザーが都度検索しなくてもピンポイントで情報を表示することができます。
ということで、早速Slice機能を使ってみましょう。
「今日の検温結果」のSliceを作る
まずは「本日（システム日付）登録された検温結果」だけを絞り込むSliceを作ってみます。
AppSheetのメニューより、「Data」→「Slices」タブをクリックします。
「New Slice」をクリックすると、Sliceの新規作成画面が表示されます。
「Slice Name」に、"今日の検温結果" と入力し、「Source Table」は "検温履歴" を選択してください。
Source Tableの下にある、「Row filter condition」のテキストボックスをクリックします。
ここで、AppSheetの関数を使い、データの絞り込み条件を設定します。
Expression Assistantが開きますので、以下で入力します。
Date([記録日時]) = TODAY()
この式で何をしているかというと、検温履歴表の記録日時をDate型に変換し、TODAY()関数の戻り値（Excelの関数と同様、本日日付が返ってきます）と一致したものを絞り込み対象としています。
続けて、Sliceに表示する列を編集します。
「Slice Columns」で、右の「Custom」タブを選択し、以下のように項目を設定します。
これでSliceの作成は完了です。一旦SAVEしておきましょう。
Sliceを作っただけでは画面に反映されませんので、作成したSliceを使いUIを作ります。
「UX」メニュー → 「Views」タブを開き、「New View」をクリックします。
「View name」に ”今日の検温結果” と入力し、「For this data」には 先ほど作った"今日の検温結果(slice）"を選択します。
※Sliceには必ず（slice）が付くのでわかりやすいです。
「View type」には "deck"を選択します。
下にスクロールし、「View Options」 でデッキ型の各項目を以下のように設定してください。
これで、今日の検温結果Sliceの内容を表示する画面が出来ました。
メニューへの配置は後にして、もう１つSliceを作りましょう。
「昨日・今日の体温が37.5度以上の人」のSliceを作る
Slicesに戻り、「New Slice」をクリックし新規作成します（先ほど作ったSliceを Copy でもオッケーです）。
Slice Name, Source Tableは以下のように設定してください。
Row filter condition には、以下の式を入力します。
AND(DATE([記録日時]) >= TODAY()-1, [体温] >= 37.5)
AND()関数を使い、二つの条件に一致したものだけを対象としています。その条件とは、（１）記録日時がTODAY()-1 （昨日以降）（２）体温が 37.5 以上 となります。
TODAY()-1 の負数の部分を変えることで、経過観察的なことができます。
Slice Columns には以下を設定します。
はい、これでSliceの作成は完了です。
続けて、先ほどと同様に UX メニューに行き、新規ビューを作成します。
VIew name、For this dataを以下に設定し、こちらも deck を View typeに指定しましょう。
このViewですが、記録日時での一覧ではなくユーザー毎に履歴を見たいので、「Group by」に "ユーザー名" を設定しましょう。
Main image以降は以下のように設定してください。
はい、これでViewも出来ましたのでSAVEしましょう。
さて、Sliceを元に二つのViewを作成したわけですが、ユーザーとしてはこの２つの情報を一括で見たいはずです（きっと・・いや、絶対そうだろうｗ）。
ということで、最後にAppSheetのダッシュボード機能を使い、今回作成した２つのViewを１つにまとめて表示するようにします。
ダッシュボードを使いViewをまとめて表示する
UXメニューに行き、New Viewをクリックして新規Viewを作ります。
「View name」に、"ホーム" と入力し、「View type」で "dashboard" を選択してください。
その下の 「Position」ですが、これはアプリ下メニューの配置場所を決めるものですので、"left most" (一番左）に設定します。
dashboardを選ぶと、View Options に "View entries" という項目が表示されますので、ここで先ほど作成した２つのViewを追加します。
このダッシュボードですが、アプリを開いた際に一番最初に表示される、ホーム画面的なものにしたいので、アイコンを "home" で設定しておきましょう。
※アプリのホーム画面設定方法は次々回説明します。
そうすると、こんな感じで "今日の検温結果" のView と、"昨日・今日の対応が37.5度以上" のView が１画面にまとまって表示されます。
このように、AppSheetのダッシュボード機能（というかView type）を使うことで、複数のViewをまとめて表示することができます。
なお、Sliceを直接ダッシュボードに・・ということはできません。あらかじめViewとして作成しておく必要がありますのでご注意ください。
Primary Views, Menu Views について
今回３つのViewを作ったのもあり、そろそろ Views 画面がゴチャゴチャしてきてると思います。ちょっと整理しましょう。
Views の画面で、Primary Views と、Menu Views というエリアがありますが、ここに置くViewを変えることで、アプリメニュー上での配置場所を変えることができます。
Primary Views：アプリの下にあるメニューに表示されるView
Menu Views：サイドバーメニューに表示されるView
現在のViews設定だと、左から ホーム、今日の検温結果、プロフィール、検温履歴 の順番でアプリ下メニューに表示されています。
"今日の検温結果"はホーム（のダッシュボード）に表示されているので、、Menu Views（サイドバー）に移しちゃいましょう。
"今日の検温結果"の箱をクリックし、「Position」を "menu” にします。
すると、今日の検温結果 が 下メニューから消え、サイドバーの方に表示されます。
残念ながら（現時点では）、Main Views と Menu Views 間でドラッグ＆ドロップによるViewの配置を変えることはできないようです。
また、Main Views と Menu Views で配置・順序変えの仕方が違いますので、以下に説明します。
Main Views
変更したい対象のView（の箱）をクリックし、「Position」の設定を変えます。
・left most：一番左
・left：左（left most と centerの間）
・center：中央
・right：右（centerとright mostの間）
・right most：一番右
・menu：サイドメニューに移動
・ref：ref viewsに移動（これは次回の投稿にて説明します）
Menu Views
Main Viewsに持っていく方法は、上記と同様にPositionの設定をleft most ～ right mostに変えればオッケーです。
Menu Views内での並び順ですが、「Rearrange」ボタンをクリックすると、以下の画面が表示されますので、ここでドラッグ＆ドロップで変更することができます。
長くなりましたが最後に１つ。
Main・Menu Viewsに表示したくない（けど View自体は消したくない）場合、「Position」 で "ref" を選択することで画面上非表示となります。
次回予告
さて、これで８割くらい機能の実装は完了しました。
次回の投稿は以下の内容を予定しています。
・Inline View を弄ってグラフを表示する
最後までお読みいただき、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？