目次
前回のおさらい
今回やりたいこと
フィルタ／グループを作成する
複数条件で検索したい
次回以降の展望
前回のおさらい
前回は、ノーコードツール「Glide」にて「副菜レシピ管理アプリ」の作成に着手しました。
ほしい機能はこんな感じ。
- 料理ごとに「料理名」「作り方」「食材」「和食／洋食」を記録できる
- スマホからレシピや注意点を追記していける
- 「和食／洋食」「食材」でソート・検索ができる
- （+α）そのまま買い物して帰れるように、買い物メモもつけたい
前回時点では、メイン画面に表示されたレシピ一覧をタップすると、その料理のレシピページに遷移する、というところまで作成できました。
前回はこちら。
今回やりたいこと
今回は、「和食／洋食」で絞れるようにすることと、「食材」で検索ができるようにすることを目標に作業していきたいと思います。
お出かけの帰り道に「今日はこんなものが食べたいな」「冷蔵庫にこれがあるな」と検索できるようにしたい、という目的です。（やるかどうかは別として）
フィルタ／グループを作成する
「和食／洋食」で絞れるようにする場合は、フィルタ機能が最適のようです。
「Edit List」画面で「Options」から「SEARCH」の部分を編集します。
「Show filter」のプルダウンで「和食／洋食」を選択すると、
「レシピ一覧」の右上にフィルタアイコンが表示されます。
フィルタのアイコンをクリックすると、
こんな感じで和洋食が選べるようになっていました。試しに「和食」にチェックを入れて「完了」してみます。
レシピ一覧画面が、和食の副菜だけに絞られました！
このやり方でもいいのですが、現在は登録しているレシピ数が少ないので、「和食」「洋食」「どっちもいける」をグループ化して表示するのでもいい気がしました。
「Edit List」＞「Options」で「Group by」を「和食／洋食」に設定すると、
レシピ一覧の見え方はこんな感じ。
リストの件数が多くなければ、こちらの方が視認性はいいような気がします。
逆に件数が多い場合は、フィルタで絞れた方が便利ですね。
今回はグループ化の方で進めてみますが、今後レシピが増えてきたときにフィルタに変更しようと思います。
複数条件で検索したい
さて、本日の眼目なんですが、ここでちょっと行き詰りました、、
やりたいのは、「複数の食材で検索をかけたい」ということ。
デフォルトで「Show search bar」（検索バーの表示）がONになっていたので、食材一つの検索は下記画像の通り可能なのですが、
実際検索をしたいのって、「これとこれがあるから何が作れる」という点なんですよね。
複数ワードでAND検索をしたいのです。
で、調べに調べたのですが、現状GlideのアプリでAND検索をしている例が見つからず、、
仕方なしにOR検索で妥協することにしました。悔しいところです。
OR検索は、先ほどやってみたフィルタ機能で実現できます。「食材」でフィルタをかけられるようにしてみましょう。
現在の「食材」は、筆者の不精ゆえに、複数の食材を1セルにまとめて記載しています。
そのため、「食材」でフィルタを追加すると、選択肢がこのようになってしまっています。
このままだと非常に検索がかけにくいので、食材ごとに分けます。
まずスプレッドシートの方を編集。カラム名を連番にすると、Glideの方で勝手にグループ化してくれます。
今回であれば、「食材」カラムを「食材1」～「食材5」カラムに分割。
Glideの方に移動し、「Data Editer」（画面上部 表のアイコン）でソースのスプレッドシートを更新します。
※スプレッドシートの方を更新した際、アプリ側に反映させるためには、この「DataEditor」画面で「DATA SOURCES」を都度更新する必要があります。
更新してみると、先ほどまでまとまってしまっていた「食材」カラムが、食材ごとに別の値として認識されるようになっているのがわかります。
「食材」の情報が整理できたので、フィルタを設定していきます。
「Data Editor」から、画面を編集する「Layout」画面に戻り、フィルタを「食材」に設定します。（フィルタ設定については前章を参照）
「レシピ一覧」画面でフィルタを確認してみると、先ほどとは違い、ちゃんと食材ごとになっているのがわかります。
試しに「にんじん」と「ピーマン」にチェックを入れて「完了」をタップしてみましょう。
検索結果はこんな感じ。
「にんじん」「ピーマン」のどちらか、もしくはどちらも含まれるレシピの一覧が表示されました！
AND検索の方法が見つからなかったのは痛いところですが、、目的としては満たされるので良しとしましょう！
次回以降の展望
今回は、グループ化の表示とフィルタの設定を行いました。
パブリッシュして動作確認まで行きたかったのですが、パブリッシュも少し長くなりそうなので次回に回します。
AND検索のやり方については、調べている中で「一つの選択肢でフィルタをかけてから、検索窓でもう一つの選択肢の検索をかける」というやり方で解決している方がいて、アイディアだなぁと思いました。
次回以降どうにか効率のよいやり方を見つけたら、また記事にしたいと思います。
次回はアプリのパブリッシュと、実際にユーザー側で動かしてみて最終的な調整を行っていきたいと思います！