![見出し画像](https://assets.st-note.com/production/uploads/images/151058830/rectangle_large_type_2_ec396de37942610f8a273b2cd545b589.jpeg?width=1200)
#9 メニュー画面の作成 AppGyverでアプリ開発
前回#8の記事では、検索結果をクリックすると、結果の詳細ページに移動し、さらに外部のURLに飛ばすという機能を紹介しました。
今回はアプリ開発画面の紹介としては最後、ユーザーの使いやすさをもっと高める機能として、『メニュー画面の作成』の機能を作成したいと思います。
今回が終われば、残すのはアプリの公開のみです。
ぜひとも、最後までお付き合いいただければと思います。
・今回の開発の大まかな流れ
メニュー画面の作成で紹介する大まかな流れは以下の通りです。
メニューページの作成
メニューページ画面の作成
メニューを開いたり・閉じたりするロジックの作成
他のページに移動できるリストアイコンの作成
リストアイコンから選択したページに飛べるようにロジックの作成
リストアイコンを他のページにも作る
それでは、紹介していきます。
・設計開始!
1. メニューページの作成
初めに、メニューページとして新しいページを作成します。
![](https://assets.st-note.com/img/1723882491065-ZZ4403j3zT.png?width=1200)
![](https://assets.st-note.com/img/1723882491129-Mhj6geymbF.png?width=1200)
![](https://assets.st-note.com/img/1723882491100-hvbJC62Bb5.png)
ここまでは、これまでと同じやり方です。
2. メニューページ画面の作成
次にメニューページの画面の作成していきます。
まず、タイトルだけを残し、他のコンポーネントは削除します。
![](https://assets.st-note.com/img/1723882491135-4A6Q9Ac3jt.png?width=1200)
続いて、メニューのコンポーネントを作成していきます。
まず、Containerコンポーネントを配置します。
![](https://assets.st-note.com/img/1723882491192-J1tBo8pO8x.png?width=1200)
Containerコンポーネントの中にRowコンポーネントを配置します。
![](https://assets.st-note.com/img/1723882491368-KoxDESDlc0.png?width=1200)
Rowコンポーネントに入れないようにContainerコンポーネントの中にTextコンポーネントを配置します。
![](https://assets.st-note.com/img/1723882491423-Jme2z8yFOb.png?width=1200)
※各コンポーネントの配置は以下の感じです。
![](https://assets.st-note.com/img/1723882491465-3ou4AyWv6s.png)
RowコンポーネントにあるCellの数を3つにします。
![](https://assets.st-note.com/img/1723882491519-wkIP2Llk6M.png?width=1200)
3つのCellに必要なコンポーネントを配置していきます。(左から、「Icon」「Text」「Icon」)
![](https://assets.st-note.com/img/1723882491635-mg4GoFTVNP.png)
コンポーネントを配置したら、LAYOUTで各コンポーネントの配置を決めていきます。
![](https://assets.st-note.com/img/1723882491649-2BKmAD5aK3.png?width=1200)
アイコンの形は、Iconコンポーネントの「Icon」をクリックすると変更できます。
![](https://assets.st-note.com/img/1723882491614-JeqvwXMd0N.png?width=1200)
以下のような一覧から好きなアイコンを選択できます。(今回は「i:インフォメーション」のアイコンを選択)
![](https://assets.st-note.com/img/1723882491674-dj531jXza5.png?width=1200)
文字のフォントは、STYLEタブから、Editを押すことで変更できます。
![](https://assets.st-note.com/img/1723882491681-Ute03FDDUa.png?width=1200)
STYLEではフォントサイズ・色・太さ・デザインを変更できます。
![](https://assets.st-note.com/img/1723882491686-Ko9RycMwc7.png)
3つ目のアイコンは下向きの矢印にします。
![](https://assets.st-note.com/img/1723882491744-xtWH2mf6fp.png)
下向きの矢印と同じCell内にもう一つ、Iconコンポーネントを配置します。
![](https://assets.st-note.com/img/1723882491735-Vu6BQimmyC.png?width=1200)
配置したアイコンを上向きの矢印にします。
![](https://assets.st-note.com/img/1723882491770-wjj3qC4pnt.png)
上向きの矢印のアイコンは、LAYOUTからPositionを開き、Absoluteを選択します。
![](https://assets.st-note.com/img/1723882491804-qB1DxBEf7y.png?width=1200)
Text内のContentを入力します。
![](https://assets.st-note.com/img/1723882491813-chVO2OJ761.png?width=1200)
メニュー画面に必要なコンポーネントを入れた状態で、Containerコンポーネントを選択し、STYLEタブを開きます。
![](https://assets.st-note.com/img/1723882491862-AsiJv7iwKN.png?width=1200)
STYLEを「List Item」にすると、コンポーネント内の背景を白色にでき、メニューっぽくなります。
![](https://assets.st-note.com/img/1723882491949-INYvPW9eDC.png?width=1200)
以上で、メニュー画面の作成は完了です。
3. メニューを開いたり・閉じたりするロジックの作成
続いて、メニューをクリックした時に詳細(中の文章)を開いたり、閉じたりできるようにロジックを作成していきます。
メニュー画面で、VARIABLESをクリックします。
![](https://assets.st-note.com/img/1723882491996-TWj1Ig1MTS.png?width=1200)
PAGE VARIABLESを選択
ADD PAGE VARIABLEをクリックし、新しい変数を作成
Variable nameを「detailsVisible」に設定
Variable value typeを「True/false」に設定
![](https://assets.st-note.com/img/1723882492013-Bfk1VphXeh.png?width=1200)
変数の設定ができたら、画面(View)に戻ります。
下向きのアイコンを選択し、PROPERTEISをクリックします。
![](https://assets.st-note.com/img/1723882492043-B5c0NrI2VC.png?width=1200)
その後、Visibleをクリックします。
![](https://assets.st-note.com/img/1723882492071-fs3RB68ElC.png)
Formulaを選択します。
![](https://assets.st-note.com/img/1723882492105-lWNVSd2Pku.png?width=1200)
Formulaでは「NOT(pageVars.detailsVisible)」に設定します。
![](https://assets.st-note.com/img/1723882492157-DnWKmtFWft.png?width=1200)
次に、上向きのアイコンを選択します。
![](https://assets.st-note.com/img/1723882492189-3JEN08LcU1.png?width=1200)
同じようにPROPERTEISからVisibleをクリックします。
![](https://assets.st-note.com/img/1723882492226-KxlNx4jSvo.png)
Formulaを選択します。
![](https://assets.st-note.com/img/1723882492270-awQz5vA6Uu.png?width=1200)
Formulaでは「pageVars.detailsVisible」に設定します。
![](https://assets.st-note.com/img/1723882492315-wkImoxLr2s.png?width=1200)
次に、Textコンポーネントを選択します。
![](https://assets.st-note.com/img/1723901336549-9sPyVkp4m1.png?width=1200)
Formulaを選択し、「pageVars.detailsVisible」に設定します。
![](https://assets.st-note.com/img/1723901336572-f3xHY6DBFG.png?width=1200)
続いて、Rowコンポーネントを選択し、LOGIC CANVASを開き、Set page variableを設置します。
![](https://assets.st-note.com/img/1723882609269-EUmD3EWw6o.png?width=1200)
Component tapとSet page variableを繋げ、Assigned valueをクリックします。
![](https://assets.st-note.com/img/1723882609348-Qk5ayoreTm.png?width=1200)
Formulaを選択します。
![](https://assets.st-note.com/img/1723882609301-uej0LpQp3K.png?width=1200)
Formulaでは「NOT(pageVars.detailsVisible)」に設定します。
![](https://assets.st-note.com/img/1723882609383-ibp294sKoc.png?width=1200)
以上で、メニューを開いたり・閉じたりするロジックの作成は完了です。
4. 他のページに移動できるリストアイコンの作成
次に他のページに移動できるリストアイコンを作成します。
まず、下図のようにRowコンポーネントを配置し、左側にタイトル、右側には三本線(三)のアイコンと×のアイコンを重ねて表示できるようにします。
![](https://assets.st-note.com/img/1723882609417-hPn9pNyMph.png)
続いて、下図のようにContainerコンポーネントの中に3つのRowコンポーネントを配置します。
![](https://assets.st-note.com/img/1723882609441-tCNcZfqOEC.png)
3つのRowコンポーネントのセルに必要なアイコンとテキストコンポーネントを入れます。
![](https://assets.st-note.com/img/1723882609459-r1fK78Bd6R.png)
先ほどと同じようにContainerコンポーネントのスタイルを変更します。
![](https://assets.st-note.com/img/1723882609482-wmJ5qmIrtf.png?width=1200)
スタイルを変更したのち、LAYOUTで各コンポーネントの配置、サイズ等を調整していきます。
![](https://assets.st-note.com/img/1723882609521-84soA4LBVy.png?width=1200)
好みのレイアウトができたら、ContainerコンポーネントのLAYOUTタブからPositionをAbsoluteにします。
![](https://assets.st-note.com/img/1723882609557-EccdlqCyek.png?width=1200)
Positionの下にある画面の位置決めから作成したメニューバーの下に来るように配置を整えます。
![](https://assets.st-note.com/img/1723882609738-kzYd0gYrPG.png?width=1200)
作成したContainerコンポーネントが最背面に来てしまっているので、右下のTREEから表示の順番を調整します。
![](https://assets.st-note.com/img/1723895939599-Gcr3r561dg.png?width=1200)
今回は、Container1をContainer2と入れ替えることで、最上面に来るようにしています。
![](https://assets.st-note.com/img/1723895979596-ki8S9oi5GO.png?width=1200)
以上で、他のページに移動できるリストアイコンの作成は完了です。
5. リストアイコンから選択したページに飛べるようにロジックの作成
次にリストアイコンから選択したページに飛べるようにロジックを作成したいきます。
まず、VARIABLESをクリックし、変数の作成画面に移ります。
その後、以下のステップで変数の作成を行います。
APP VARIABLESを選択
ADD APP VARIABLEをクリックし、新しい変数を作成
Variable nameを「menu」に設定
Variable value typeを「True/false」に設定
![](https://assets.st-note.com/img/1723882609777-dYQK5bcYD4.png?width=1200)
変数の作成ができたら、ロジックに組み込んでいきます。
まず、アイコン・コンポーネントの表示/非表示を設定していきます。
⑴三本線のアイコン(三)はVisibleを「NOT(appVars.menu)」に設定します。
![](https://assets.st-note.com/img/1723955419472-8aXtrny6Rw.png?width=1200)
![](https://assets.st-note.com/img/1723955434730-rTgNPusZ4U.png?width=1200)
⑵バツのアイコン(×)はVisibleを「appVars.menu」に設定します。
![](https://assets.st-note.com/img/1723955562313-uwHYGXhbAg.png?width=1200)
![](https://assets.st-note.com/img/1723955572674-c87QCMHtwk.png?width=1200)
⑶メニューリストが入ったContainerコンポーネントはVisibleを「appVars.menu」に設定します。
![](https://assets.st-note.com/img/1723955637955-NN698mJCqD.png?width=1200)
![](https://assets.st-note.com/img/1723955645719-Z1N9FSZcnB.png?width=1200)
以上で、アイコン・コンポーネントの表示/非表示の設計は完了です。
次に、三本線のアイコン(三)をクリックした時に、menu変数の「True/false」が変わるように設定していきます。
手順としては、以下の順番です。
三本線のアイコン(三)を選択
LOGIC CANVASを開く
Set app variableフローをドラッグ&ドロップ
Component tapと繋げて、「Set app variable」を選択
Variable nameを「menu」に変更
Assigned valueを「NOT(appVars.menu)」に変更
![](https://assets.st-note.com/img/1723954546798-MLviwgY5pO.png?width=1200)
続いて、同じやり方で×のアイコンをクリックした時に、menu変数の「True/false」が変わるように設定していきます。
![](https://assets.st-note.com/img/1723954434087-5lKjTFdTDF.png?width=1200)
以上で、三アイコン・×アイコンのクリックでmenu変数が「True⇆false」で切り替えられるようになりました。
最後に、各メニューリストをクリックした時に、指定したページに移動できるようにロジックを作成します・
メニューリストから、検索画面のRowコンポーネントを選択し、LOGIC CANVASを開きます。
![](https://assets.st-note.com/img/1723882610028-s65YIHbLrJ.png?width=1200)
Open pageのフローをドラッグ&ドロップで設置し、Component tapと繋げたのち、Pageを「検索画面」に設定します。
![](https://assets.st-note.com/img/1723882610054-lS36E697kb.png?width=1200)
それぞれ、他の画面も同じように設定していきます。
![](https://assets.st-note.com/img/1723882610141-tGqtfg0iJ1.png?width=1200)
以上で、 メニューバーから選択したページに飛べるようにロジックの作成が完了しました。
6. メニューバーを他のページにも作る
最後に、ここまで作成したメニューバーを別のページにも作成します。
が、一から作るのは大変なので、コピー&ペーストで貼り付ければOKです。
![](https://assets.st-note.com/img/1723882610180-VibzAYQLqM.png)
上記の状態から、RowコンポーネントでメニューバーをペーストできるCellを作成しておきます。
![](https://assets.st-note.com/img/1723882610238-U89G8sS5eh.png)
お気に入りのページから作成したコンポーネントをコピーします。
![](https://assets.st-note.com/img/1723882610239-eS76iRoFA9.png?width=1200)
お気に入りのページに貼り付けます。
![](https://assets.st-note.com/img/1723956441728-gVZt7ODJHT.png)
同様に、×アイコンや作成したメニューリストのコンポーネントも貼り付けていきましょう。
![](https://assets.st-note.com/img/1723894342012-a06lqF0gsX.png?width=1200)
以上でメニューバーを他のページにも作ることができました。
これでアプリ開発の説明は以上です。
おつかれさまでした!!
・最後に…次回はアプリ開発紹介のラスト『アプリの公開方法』
今回はいかがだったでしょうか。
ご質問などもありましたら、気軽にコメントいただければと思います!
次回は、今回のAppGyverでアプリ開発紹介のラストになります。
内容は『#10 アプリの公開方法』です。
それでは、次回もよろしくお願いします!