#8 お気に入り機能の作成 AppGyverでアプリ開発
前回#7の記事では、検索結果をクリックすると、結果の詳細ページに移動し、さらに外部のURLに飛ばすという機能を紹介しました。
そして、現在までに、検索アプリとして欠かせない以下3点の機能作成を紹介しております。
Googleスプレッドシートで一覧を作成し、AppGyverから呼び出す #4
検索ページの作成と結果の表示 #5、#6
表示された検索結果から詳細ページを開く #7
今回はユーザーの使いやすさをさらに高める機能として、『お気に入り登録』の機能を作成したいと思います。
・今回の開発の大まかな流れ
お気に入り登録機能の作成で今回紹介する大まかな流れは以下の通りです。
お気に入りアイコンの作成
お気に入りページの作成
お気に入りを保存・削除するロジックの作成
お気に入りページに移動するボタンの作成
お気に入り登録の有無によってアイコンの色が変わるようにロジックを修正
いよいよ、今回紹介する検索アプリの作成も大詰めです。
あと2回程度でこのアプリ開発の紹介も終わりになりますので、
最後までお付き合いいただければと思います！
・今回の完成画面（noteを見てる人だけの限定公開）
今回の紹介で出来上がる完成画面は以下になります。
気になる方は、ぜひ続きをご覧頂ければと思います。
※Youtubeはこのnoteを見てくださる方のみの限定公開にしております。
・設計開始！
1. お気に入りアイコンの作成
始めに、お気に入りアイコン（★）を作成します。
検索結果の隣に表示させたいので、ROWコンポーネントを配置し、右側のセルに検索結果のコンポーネントをドラッグ&ドロップで移動させます。
次に、アイコン（★）のコンポーネントを配置して、リピートを検索結果（Image list item）と同じ「appVars.SearchResults」にします。
最後に、アイコンのサイズや配置を修正します。
以上で、「1. お気に入りアイコンの作成」は完了です。
※最後に、お気に入り登録の有無で色を変えたりします（「5.お気に入り登録の有無によってアイコンの色が変わるようにロジックを修正」で説明）が、一旦ここで止めて次に移ります。
2. お気に入りページの作成
続いて、お気に入り登録した結果を表示させる、お気に入りページの作成です。
まず、新しいページを追加します。
次に、変数（VARIABLES)を設定していきます。
まず、APP VARIABLESを2つ追加します。
1.favorites：list of objects
→お気に入り登録したデータを保存する際に入力先として指定する変数
2.loadFavorites：list of objects
→保存したデータを呼び出したときに出力先として指定する変数
続いて、PAGE PARAMETERを追加します。
（ADD PARAMETERをクリックするだけで特にデータのタイプ等を変える必要はありません）
設定が必要な変数の最後は、DATA VARIABLESです。
1.DATA VARIABLESを選択
2.ADD DATA VARIABLESをクリックし、データを選択（画面ではsheet1）
3.LOGIC CANVASを開き、Get record collectionをクリック
4.右側に現れるPROPERTIESでクエリを先ほど設定したpage parameterにしておきます。
Set data variableのPROPERTIESのうち、Record collectionをsheet1（自分で設定したシート名）にしておきます。
以上で、変数の設定は完了です。
次に、お気に入りページのレイアウトを作成します。
1.登録したお気に入りを表示させるため、「Card」のコンポーネントを使用します。
2.Repeat withをsheet1（Data変数で設定したデータ）に設定します。
次に、Contentを「current.都道府県」に設定します。（sheet1にあるデータから表示させたい項目を選択、今回は都道府県名を表示させています）
再び、Repeat withに戻り、一度設定した「sheet1」を「loadFavorites」の変数に変更します。
以上で、「2. お気に入りページの作成」は完了です。
3. お気に入りを保存・削除するロジックの作成
次にお気に入りを保存したり、削除したりできるようにLOGIC CANVASでフローを作成していきます。
まず、お気に入りページのLOGIC CANVASを開きます。
（この時、LOGIC CANVASの名前が「Page:お気に入り」になっていることを確認）
LOGIC CANVASの選択画面でINSTALLEDからMARKETPLACEを選択
MARKETPLACEでは2つのロジックフローをインストールします。
1.Get item from storage
2.Set item to storage
インストール後の画面が以下の通りです。
お気に入りページでは、「Get item from storage」のロジックフローを使用します。
インストールした「Get item from storage」を設置し、Page mountedに接続、Item keyを「favoriteList」と手打ちで入力します。
「Get item from storage」の隣に「Set app variable」のフローを設置し、Variable nameのところに「loadedFavorite」をセットします。
次にその下、Assigned valueを選択しbinding typeをFormulaにし、そこに『DECODE_JSON(outputs["Get item from storage"].item)』と
入力します。
Variable nameとAssigned valueの設定画面が以下の通りです。
次に検索画面のページに戻ります。
お気に入りアイコンを選択し、LOGIC CANVASを開きます。
そして、「If condition」のフローを設置、「Component tap」と接続します。
Conditionを選択し、binding typeをFormulaに変更、内容を『IS_IN_ARRAY(appVars.favorites, repeated.current)』にします。
（数式の意味としては、「選択したデータが、favoritesの変数に存在している時」）
「If condition」フローの上側（YESの方向）に「Set app variable」を接続し、Variable nameがfavoritesであることを確認します。
そして、 Assigned valueを開きます。
binding typeをFormulaに変更、内容を『REMOVE_ITEM_BY_KEY(appVars.favorites, "id", repeated.current.id)』にします。
（数式の意味としては、「選択したデータのidをfavorites変数から探して、そのデータを除外する」）
次に、「If condition」フローの下側（NOの方向）に「Set app variable」を接続し、Variable nameがfavoritesであることを確認します。
そして、 Assigned valueを開きます。
binding typeをFormulaに変更、内容を『WITH_ITEM(appVars.favorites, repeated.current)』にします。
（数式の意味としては、「選択したデータをfavorites変数に保存する」）
つまり、
1.If conditionで選択したデータがfavorites変数にあるか確認
2.YESの場合、favorites変数から対象のデータを削除
3.NOの場合、favorites変数に対象のデータを保存
を条件分岐で行っています。
その後、インストールした「Set item to storage」を設置し、YESとNOの条件式のSet app variableを接続します。
「Set item to storage」のItem keyに「favoritesList」と手打ちで入力します。
「Data to store」を選択し、binding typeを「Formula」にし、『ENCODE_JSON(appVars.favorites)』と入力します。
以上、「3. お気に入りを保存・削除するロジックの作成」は完了です。
4. お気に入りページに移動するボタンの作成
次に、お気に入りページに移動するボタンを作成していきます。
表題の下に、ROWコンポーネントを設置し、ROWコンポーネントの左側に表題（「都道府県一覧」）右側にButtonコンポーネントを設置します。
1.Buttonコンポーネントをクリックし、
2.LOGIC CANVASを開き、「Open page」のフローを選択
3.「Open page」のフローを「Component tap」に接続し、
4.Pageを「お気に入り」に変更
5.下に表示されるParametersをクリック
Parameter1を「parameter1」に変更します。
以上で、「4. お気に入りページに移動するボタンの作成」は完了です。
5. お気に入り登録の有無によってアイコンの色が変わるようにロジックを変更
最後に、お気に入りに登録されているかどうかで、アイコンの色が変わるように変更します。
（そうすることで、選択したデータがお気に入りに登録されているか一目で確認できるようになります。）
その前に、検索結果の隣にお気に入りのアイコンが並ぶようにLAYOUTを変更します。
次に、アイコンのSTYLEを選択し、Colorをクリックします。
binding typeをFormulaにし、『IF(IS_IN_ARRAY(appVars.favorites, repeated.current), "#00BFFF", "#FFFFFF")』と入力します。
（数式の意味としては、「選択したデータがfavorites変数にある場合は、カラーコード#00BFFFに設定し、ない場合はカラーコード#FFFFFFに設定」）
カラーコードに関しては設定を変えると好きな色に変更できます。
私はここを参考にして選択しました↓
以上で、全ての設定が完了しました！
・最後に…次回は『メニュー画面の作成など』
今回はいかがだったでしょうか。
検索アプリを作る上で欠かせないのが、『お気に入り機能』です。
少し複雑だったかも知れませんが、ぜひ覚えていってください。
ご質問などもありましたら、気軽にコメントいただければと思います！
次回は、画面開発としては最後になります。
内容は『メニュー画面の作成』です。
それでは、次回もよろしくお願いします！
この記事が気に入ったらサポートをしてみませんか？