![見出し画像](https://assets.st-note.com/production/uploads/images/144127035/rectangle_large_type_2_a780c62a1102d4e64aedddba2c38e683.jpeg?width=1200)
#5 検索機能の実装 AppGyverでアプリ開発
前回の記事#4では、GoogleスプレッドシートとAppGyverを繋げる方法について紹介しました。
また、番外編として、Googleドライブにある画像をAppGyver上で表示させる方法についても、紹介しております。
今回は、『検索機能の実装』ということで、検索欄の作成〜検索結果をアプリ上で表示させる方法について説明します。
検索アプリの肝となる機能なので、ぜひご覧頂けると幸いです!
1. 検索欄と検索ボタンの作成
まず、UIの作成を行っていきます。
左のコンポーネント欄から、検索欄とボタンのコンポーネントを配置します。
しかし、上下に並んでしまうため、セルというコンポーネントを使用し、検索欄と検索ボタンが横並びになるように配置していきます。
![](https://assets.st-note.com/img/1718248827370-WTY9i7fPod.png?width=1200)
![](https://assets.st-note.com/img/1718248899329-MLnmGYMyX8.png?width=1200)
![](https://assets.st-note.com/img/1718248954904-Dhmev2kX4A.png?width=1200)
2. 画像付きラベルの作成
次に、画像付きラベルのコンポーネントを配置します。
![](https://assets.st-note.com/img/1718249167069-upkp1EEAZt.png?width=1200)
ひとまず、UIの作成は以上とし、検索スキームの作成に移ります。
3. 検索機能の実装
1. VARIABLE画面でロジックの作成
UIの画面から、ロジックの画面に移ります。
※ここから少し複雑な内容になりますので、わかりにくい部分があればコメント等で教えて頂けるとありがたいです!
1.「VIEW画面」から「VARIABLES画面」に移動
2.「App variables」を選択
3.「ADD APP VARIABLE」を押す
4.「Variable name」に「globalSearchQuery」と入力
5.「Variable value type」は「text」にする
![](https://assets.st-note.com/img/1718365754523-8bUmjQv4NL.png?width=1200)
同じように「SearchResults」も作成します。
※「Variable value type」は「List」にする
→その後、「List item type」を「Object」にする
![](https://assets.st-note.com/img/1718366010617-ZVwNdzDuF8.png?width=1200)
自動的に生成される「id」のオブジェクトを削除する。
![](https://assets.st-note.com/img/1718366039304-8JVxeydF3b.png?width=1200)
次に「Data variables」に移ります。
「ADD DATA VARIABLE」を押し、「Sheet11(作成したデータの名称)」を選択
![](https://assets.st-note.com/img/1718366090369-HqTkWseg1P.png?width=1200)
クエリの部分を先程作成した、「globalSearchQuery」にします。
![](https://assets.st-note.com/img/1718366230597-7VcRouu76K.png?width=1200)
![](https://assets.st-note.com/img/1718366391624-S5UHsBMg0n.png?width=1200)
その後、右下のロジック画面を開く
![](https://assets.st-note.com/img/1718366136382-qaRqxN12vd.png?width=1200)
「Get record collection」をクリックし、以下であることを確認
Resource name:Sheet1
クエリ:globalSearchQuery
![](https://assets.st-note.com/img/1718366338693-Y0hrzWZrG7.png?width=1200)
「Set data variable」を「Set app variable」に置き換える
![](https://assets.st-note.com/img/1718366489976-PhMgQ4wXsx.png?width=1200)
![](https://assets.st-note.com/img/1718367762021-rq1HHImCyd.png?width=1200)
「Get record collection」と「Set app variable」を繋げる
![](https://assets.st-note.com/img/1718367743619-M1CPekVuWZ.png?width=1200)
「Assigned value」を「outputs["Get record collection"].records」にする
![](https://assets.st-note.com/img/1718366251773-CfvOnKz7GK.png?width=1200)
![](https://assets.st-note.com/img/1718367840930-cp8jEWXOkZ.png?width=1200)
![](https://assets.st-note.com/img/1718366550038-sS7C9MI1Yp.png?width=1200)
「Variable name」を「SearchResults」にする
![](https://assets.st-note.com/img/1718366276767-pZo2ARTRMU.png?width=1200)
![](https://assets.st-note.com/img/1718368551602-ZtpJj6BYFY.png?width=1200)
![](https://assets.st-note.com/img/1718368573741-yYPTf4E7kM.png?width=1200)
以上で、VARIABLE画面でのロジックの作成は終了です。
2. 検索欄の入力を「globalSearchQuery」に連携
VIEW画面に戻り、「Search bar」を選択します。
「Value」を「globalSearchQuery」にする
![](https://assets.st-note.com/img/1718369496391-O7LK59idJ0.png?width=1200)
![](https://assets.st-note.com/img/1718369515016-Z0fn9CAu4n.png?width=1200)
![](https://assets.st-note.com/img/1718369532497-J5N8XqrXjd.png?width=1200)
3. 表示機能の作成
データの「Image list item」をクリック
「Repeat with」をクリックし、「Sheet1」に接続
![](https://assets.st-note.com/img/1718371449134-wnndpvJGOT.png?width=1200)
![](https://assets.st-note.com/img/1718371466142-XPocHmOmmd.png?width=1200)
![](https://assets.st-note.com/img/1718371477258-vGRUCujase.png?width=1200)
![](https://assets.st-note.com/img/1718371484618-RH8VP2AVr1.png?width=1200)
「Image source」を「AI画像」に接続
![](https://assets.st-note.com/img/1718371493523-HcTXLAXPtX.png)
![](https://assets.st-note.com/img/1718371503601-3fG6zr8LMb.png?width=1200)
![](https://assets.st-note.com/img/1718371514585-H1XeWXrEAh.png?width=1200)
「Primary label」を「都道府県」に接続
![](https://assets.st-note.com/img/1718371525198-hBXac5bnNk.png)
![](https://assets.st-note.com/img/1718371536705-8fG14wkNlI.png?width=1200)
「Secondary label」を「県庁所在地」に接続
![](https://assets.st-note.com/img/1718371545954-yhgaEzy9ZU.png)
![](https://assets.st-note.com/img/1718371559082-rj9Ad3Eftx.png?width=1200)
→完成!!
![](https://assets.st-note.com/img/1718371576926-au2JWV3jek.png?width=1200)
上記のように連携したGoogleスプレッドシートの内容が表示されたら、表示機能の完成です。
4. 検索機能の作成
次に検索ボタンをクリックした際に、検索結果が呼び出されるようにロジックを作成します。
検索ボタンをクリック→右下のロジック画面を表示
![](https://assets.st-note.com/img/1718365439081-YtmF1pz9Wm.png?width=1200)
「Get record collection」をドラッグ&ドロップ
![](https://assets.st-note.com/img/1718367474380-icJVcBOY54.png?width=1200)
「Component tap」と「Get record collection」を繋げ、クエリを「globalSearchQuery」にする
![](https://assets.st-note.com/img/1718367543342-FdlVJwqlSF.png?width=1200)
![](https://assets.st-note.com/img/1718367613608-oGr6i3X6pe.png?width=1200)
![](https://assets.st-note.com/img/1718368462208-COgpvzXQz1.png?width=1200)
次に「Set app variable」をドラッグ&ドロップ
![](https://assets.st-note.com/img/1718367494760-TPjd7wXYUJ.png?width=1200)
「Get record collection」と「Set app variable」を繋げ、
「Variable name」を「SearchResults」にする
![](https://assets.st-note.com/img/1718365442614-xEFJFSsBfH.png?width=1200)
![](https://assets.st-note.com/img/1718369863491-iKtrcq36ik.png?width=1200)
「Assigned value」を「outputs["Get record collection"].records」にする
![](https://assets.st-note.com/img/1718365441938-o3hRNI9eR2.png?width=1200)
![](https://assets.st-note.com/img/1718369822025-5Qkse6WHj9.png?width=1200)
![](https://assets.st-note.com/img/1718369840023-UzxmUC4FCd.png?width=1200)
完成画面が以下↓
![](https://assets.st-note.com/img/1718365440410-trnLLrJABD.png?width=1200)
検索機能の作成は以上です。
5. 検索結果を表示するようにリピート機能を修正
「3. 表示機能の作成」で「Repeat with」を「Sheet1」に接続しているかと思います。
ここの部分を検索結果である「SearchResults」が表示されるように修正します↓
![](https://assets.st-note.com/img/1718368120439-gHAX2wSRsM.png?width=1200)
![](https://assets.st-note.com/img/1718368020836-Uu4cGFTaFw.png?width=1200)
![](https://assets.st-note.com/img/1718368052403-PMTZR9FIEj.png?width=1200)
以下で、完成です!
4. 動きの確認
最後に実際の動きを確認していきます。
WEB上でアプリの動きを確認します。
※作成画面の上にある「LAUNCH」→「Preview your app」→「Preview on web」から作成中の画面が表示できます。
検索欄になんでもいいので好きな県を入れてみます(県名の一部でも可能です)
![](https://assets.st-note.com/img/1718249904779-xxml1VKhsr.png?width=1200)
検索ボタンを押すと、
![](https://assets.st-note.com/img/1718249966454-7A22ZIdITX.png?width=1200)
愛知県、愛媛県のデータが表示されました!
ちなみに、「県」と入力すると、都道府県のうち、県が全て表示されます。
![](https://assets.st-note.com/img/1718250056190-8sOI79ypsJ.png?width=1200)
これで、検索機能の実装は以上となります。
5. 最後に、次回は「スピナーの作成」
いかがだったでしょうか?
今回の記事では検索機能を実装しました。
一方、私が初めてこの検索機能を作成した時に、
「フリーズしているのか、検索中なのか分からない」
ということがありました。
そこで、次回の記事では、以下の2点について紹介したいと思います。
・検索中のマーク(スピナー:通信やローディング時にくるくる回るアニメーション)の作成
・都道府県の詳細画面(都道府県のHPリンクに飛ばす)の作成
ぜひ、最後までご覧になって下さい。
この記事が気に入ったらサポートをしてみませんか?