#9 メニュー画面の作成 AppGyverでアプリ開発
前回#8の記事では、検索結果をクリックすると、結果の詳細ページに移動し、さらに外部のURLに飛ばすという機能を紹介しました。
今回はアプリ開発画面の紹介としては最後、ユーザーの使いやすさをもっと高める機能として、『メニュー画面の作成』の機能を作成したいと思います。
今回が終われば、残すのはアプリの公開のみです。
ぜひとも、最後までお付き合いいただければと思います。
・今回の開発の大まかな流れ
メニュー画面の作成で紹介する大まかな流れは以下の通りです。
メニューページの作成
メニューページ画面の作成
メニューを開いたり・閉じたりするロジックの作成
他のページに移動できるリストアイコンの作成
リストアイコンから選択したページに飛べるようにロジックの作成
リストアイコンを他のページにも作る
それでは、紹介していきます。
・設計開始！
1. メニューページの作成
初めに、メニューページとして新しいページを作成します。
ここまでは、これまでと同じやり方です。
2. メニューページ画面の作成
次にメニューページの画面の作成していきます。
まず、タイトルだけを残し、他のコンポーネントは削除します。
続いて、メニューのコンポーネントを作成していきます。
まず、Containerコンポーネントを配置します。
Containerコンポーネントの中にRowコンポーネントを配置します。
Rowコンポーネントに入れないようにContainerコンポーネントの中にTextコンポーネントを配置します。
※各コンポーネントの配置は以下の感じです。
RowコンポーネントにあるCellの数を3つにします。
3つのCellに必要なコンポーネントを配置していきます。（左から、「Icon」「Text」「Icon」）
コンポーネントを配置したら、LAYOUTで各コンポーネントの配置を決めていきます。
アイコンの形は、Iconコンポーネントの「Icon」をクリックすると変更できます。
以下のような一覧から好きなアイコンを選択できます。（今回は「i：インフォメーション」のアイコンを選択）
文字のフォントは、STYLEタブから、Editを押すことで変更できます。
STYLEではフォントサイズ・色・太さ・デザインを変更できます。
3つ目のアイコンは下向きの矢印にします。
下向きの矢印と同じCell内にもう一つ、Iconコンポーネントを配置します。
配置したアイコンを上向きの矢印にします。
上向きの矢印のアイコンは、LAYOUTからPositionを開き、Absoluteを選択します。
Text内のContentを入力します。
メニュー画面に必要なコンポーネントを入れた状態で、Containerコンポーネントを選択し、STYLEタブを開きます。
STYLEを「List Item」にすると、コンポーネント内の背景を白色にでき、メニューっぽくなります。
以上で、メニュー画面の作成は完了です。
3. メニューを開いたり・閉じたりするロジックの作成
続いて、メニューをクリックした時に詳細（中の文章）を開いたり、閉じたりできるようにロジックを作成していきます。
メニュー画面で、VARIABLESをクリックします。
PAGE VARIABLESを選択
ADD PAGE VARIABLEをクリックし、新しい変数を作成
Variable nameを「detailsVisible」に設定
Variable value typeを「True/false」に設定
変数の設定ができたら、画面（View）に戻ります。
下向きのアイコンを選択し、PROPERTEISをクリックします。
その後、Visibleをクリックします。
Formulaを選択します。
Formulaでは「NOT(pageVars.detailsVisible)」に設定します。
次に、上向きのアイコンを選択します。
同じようにPROPERTEISからVisibleをクリックします。
Formulaを選択します。
Formulaでは「pageVars.detailsVisible」に設定します。
次に、Textコンポーネントを選択します。
Formulaを選択し、「pageVars.detailsVisible」に設定します。
続いて、Rowコンポーネントを選択し、LOGIC CANVASを開き、Set page variableを設置します。
Component tapとSet page variableを繋げ、Assigned valueをクリックします。
Formulaを選択します。
Formulaでは「NOT(pageVars.detailsVisible)」に設定します。
以上で、メニューを開いたり・閉じたりするロジックの作成は完了です。
4. 他のページに移動できるリストアイコンの作成
次に他のページに移動できるリストアイコンを作成します。
まず、下図のようにRowコンポーネントを配置し、左側にタイトル、右側には三本線（三）のアイコンと×のアイコンを重ねて表示できるようにします。
続いて、下図のようにContainerコンポーネントの中に3つのRowコンポーネントを配置します。
3つのRowコンポーネントのセルに必要なアイコンとテキストコンポーネントを入れます。
先ほどと同じようにContainerコンポーネントのスタイルを変更します。
スタイルを変更したのち、LAYOUTで各コンポーネントの配置、サイズ等を調整していきます。
好みのレイアウトができたら、ContainerコンポーネントのLAYOUTタブからPositionをAbsoluteにします。
Positionの下にある画面の位置決めから作成したメニューバーの下に来るように配置を整えます。
作成したContainerコンポーネントが最背面に来てしまっているので、右下のTREEから表示の順番を調整します。
今回は、Container1をContainer2と入れ替えることで、最上面に来るようにしています。
以上で、他のページに移動できるリストアイコンの作成は完了です。
5. リストアイコンから選択したページに飛べるようにロジックの作成
次にリストアイコンから選択したページに飛べるようにロジックを作成したいきます。
まず、VARIABLESをクリックし、変数の作成画面に移ります。
その後、以下のステップで変数の作成を行います。
APP VARIABLESを選択
ADD APP VARIABLEをクリックし、新しい変数を作成
Variable nameを「menu」に設定
Variable value typeを「True/false」に設定
変数の作成ができたら、ロジックに組み込んでいきます。
まず、アイコン・コンポーネントの表示/非表示を設定していきます。
⑴三本線のアイコン（三）はVisibleを「NOT（appVars.menu）」に設定します。
⑵バツのアイコン（×）はVisibleを「appVars.menu」に設定します。
⑶メニューリストが入ったContainerコンポーネントはVisibleを「appVars.menu」に設定します。
以上で、アイコン・コンポーネントの表示/非表示の設計は完了です。
次に、三本線のアイコン（三）をクリックした時に、menu変数の「True/false」が変わるように設定していきます。
手順としては、以下の順番です。
三本線のアイコン（三）を選択
LOGIC CANVASを開く
Set app variableフローをドラッグ&ドロップ
Component tapと繋げて、「Set app variable」を選択
Variable nameを「menu」に変更
Assigned valueを「NOT（appVars.menu）」に変更
続いて、同じやり方で×のアイコンをクリックした時に、menu変数の「True/false」が変わるように設定していきます。
以上で、三アイコン・×アイコンのクリックでmenu変数が「True⇆false」で切り替えられるようになりました。
最後に、各メニューリストをクリックした時に、指定したページに移動できるようにロジックを作成します・
メニューリストから、検索画面のRowコンポーネントを選択し、LOGIC CANVASを開きます。
Open pageのフローをドラッグ&ドロップで設置し、Component tapと繋げたのち、Pageを「検索画面」に設定します。
それぞれ、他の画面も同じように設定していきます。
以上で、 メニューバーから選択したページに飛べるようにロジックの作成が完了しました。
6. メニューバーを他のページにも作る
最後に、ここまで作成したメニューバーを別のページにも作成します。
が、一から作るのは大変なので、コピー&ペーストで貼り付ければOKです。
上記の状態から、RowコンポーネントでメニューバーをペーストできるCellを作成しておきます。
お気に入りのページから作成したコンポーネントをコピーします。
お気に入りのページに貼り付けます。
同様に、×アイコンや作成したメニューリストのコンポーネントも貼り付けていきましょう。
以上でメニューバーを他のページにも作ることができました。
これでアプリ開発の説明は以上です。
おつかれさまでした！！
・最後に…次回はアプリ開発紹介のラスト『アプリの公開方法』
今回はいかがだったでしょうか。
ご質問などもありましたら、気軽にコメントいただければと思います！
次回は、今回のAppGyverでアプリ開発紹介のラストになります。
内容は『#10 アプリの公開方法』です。
それでは、次回もよろしくお願いします！
この記事が気に入ったらサポートをしてみませんか？