#5 検索機能の実装 AppGyverでアプリ開発

前回の記事#4では、GoogleスプレッドシートとAppGyverを繋げる方法について紹介しました。

また、番外編として、Googleドライブにある画像をAppGyver上で表示させる方法についても、紹介しております。

今回は、『検索機能の実装』ということで、検索欄の作成〜検索結果をアプリ上で表示させる方法について説明します。

検索アプリの肝となる機能なので、ぜひご覧頂けると幸いです！

1. 検索欄と検索ボタンの作成

まず、UIの作成を行っていきます。

左のコンポーネント欄から、検索欄とボタンのコンポーネントを配置します。

しかし、上下に並んでしまうため、セルというコンポーネントを使用し、検索欄と検索ボタンが横並びになるように配置していきます。

1. 「Row」コンポーネントの配置

2. 「検索欄」コンポーネントを「Row」の左に埋め込む

3. 「Button」コンポーネントを「Row」の右に埋め込む

2. 画像付きラベルの作成

次に、画像付きラベルのコンポーネントを配置します。

「Image list item」コンポーネントを入れる

ひとまず、UIの作成は以上とし、検索スキームの作成に移ります。

3. 検索機能の実装

1. VARIABLE画面でロジックの作成

UIの画面から、ロジックの画面に移ります。

※ここから少し複雑な内容になりますので、わかりにくい部分があればコメント等で教えて頂けるとありがたいです！

１.「VIEW画面」から「VARIABLES画面」に移動
２.「App variables」を選択
３.「ADD APP VARIABLE」を押す
４.「Variable name」に「globalSearchQuery」と入力
５.「Variable value type」は「text」にする

1から5までの順序

同じように「SearchResults」も作成します。
※「Variable value type」は「List」にする
→その後、「List item type」を「Object」にする

「ADD APP VARIABLE」から「SearchResults」を作成

自動的に生成される「id」のオブジェクトを削除する。

「id」のオブジェクトを削除

次に「Data variables」に移ります。

「ADD DATA VARIABLE」を押し、「Sheet11（作成したデータの名称）」を選択

「Data variables」→「ADD DATA VARIABLE」

クエリの部分を先程作成した、「globalSearchQuery」にします。

クエリをクリック

「globalSearchQuery」を選択し、保存

その後、右下のロジック画面を開く

右下のロジック画面を開く

「Get record collection」をクリックし、以下であることを確認
Resource name：Sheet1
クエリ：globalSearchQuery

「Get record collection」をクリック

「Set data variable」を「Set app variable」に置き換える

「Set data variable」を削除

「Set app variable」をドラッグ&ドロップ

「Get record collection」と「Set app variable」を繋げる

「Get record collection」と「Set app variable」を繋げる

「Assigned value」を「outputs["Get record collection"].records」にする

「Assigned value」をクリック

「Formula」を選択

「Output of another node」で「outputs["Get record collection"].records」を選択

「Variable name」を「SearchResults」にする

「Variable name」をクリック

「App variable」を選択

「SearchResults」を選択

以上で、VARIABLE画面でのロジックの作成は終了です。

2. 検索欄の入力を「globalSearchQuery」に連携

VIEW画面に戻り、「Search bar」を選択します。

「Value」を「globalSearchQuery」にする

「Search bar」をクリックし、「Value」をクリック

「Data and Variables」を選択

「globalSearchQuery」を選択

3. 表示機能の作成

データの「Image list item」をクリック

「Repeat with」をクリックし、「Sheet1」に接続

「Image list item」をクリックし、「Repeat with」をクリック

「Data and Variables」を選択

「Data variable」を選択

「sheet11」を選択し、保存

「Image source」を「AI画像」に接続

「Image source」をクリック

「Data item in repeat」を選択

「current」→「AI画像」を選択

「Primary label」を「都道府県」に接続

「Primary label」をクリック

「Data item in repeat」→「current」→「都道府県」を選択

「Secondary label」を「県庁所在地」に接続

「Secondary label」をクリック

「Data item in repeat」→「current」→「県庁所在地」を選択

→完成！！

完成画面

上記のように連携したGoogleスプレッドシートの内容が表示されたら、表示機能の完成です。

4. 検索機能の作成

次に検索ボタンをクリックした際に、検索結果が呼び出されるようにロジックを作成します。

検索ボタンをクリック→右下のロジック画面を表示

検索ボタンをクリックし、右下のロジック画面を表示させる

「Get record collection」をドラッグ&ドロップ

「Get record collection」をドラッグ&ドロップ

「Component tap」と「Get record collection」を繋げ、クエリを「globalSearchQuery」にする

「Component tap」と「Get record collection」を繋げ、クエリをクリック

「App variable」を選択

「globalSearchQuery」を選択

次に「Set app variable」をドラッグ&ドロップ

コンポーネントの「Set app variable」をドラッグ&ドロップ

「Get record collection」と「Set app variable」を繋げ、
「Variable name」を「SearchResults」にする

「Variable name」をクリック

「SearchResults」を選択

「Assigned value」を「outputs["Get record collection"].records」にする

「Variable name」の下にある「Assigned value」をクリック

「Formula」を選択

「Output of another node」で「outputs["Get record collection"].records」を選択

完成画面が以下↓

完成画面

検索機能の作成は以上です。

5. 検索結果を表示するようにリピート機能を修正

「3. 表示機能の作成」で「Repeat with」を「Sheet1」に接続しているかと思います。

ここの部分を検索結果である「SearchResults」が表示されるように修正します↓

データの「Image list item」をクリックし、「Repeat with」をクリック

「Formula」を選択

App variableの「appVar. SearchResults」を選択

以下で、完成です！

4. 動きの確認

最後に実際の動きを確認していきます。

WEB上でアプリの動きを確認します。

※作成画面の上にある「LAUNCH」→「Preview your app」→「Preview on web」から作成中の画面が表示できます。

検索欄になんでもいいので好きな県を入れてみます（県名の一部でも可能です）

「愛」と入力し、検索ボタンを押す

検索ボタンを押すと、

「愛知県」と「愛媛県」が表示される

愛知県、愛媛県のデータが表示されました！

ちなみに、「県」と入力すると、都道府県のうち、県が全て表示されます。

「県」と入力すると、「都道府」以外が表示される

これで、検索機能の実装は以上となります。

5. 最後に、次回は「スピナーの作成」

いかがだったでしょうか？

今回の記事では検索機能を実装しました。

一方、私が初めてこの検索機能を作成した時に、

「フリーズしているのか、検索中なのか分からない」

ということがありました。

そこで、次回の記事では、以下の2点について紹介したいと思います。

・検索中のマーク（スピナー：通信やローディング時にくるくる回るアニメーション）の作成
・都道府県の詳細画面（都道府県のHPリンクに飛ばす）の作成

ぜひ、最後までご覧になって下さい。