Visualizerでフッターメニューを作成する方法

#目次
1. はじめに
2. App Menuを使用してメニューを作成する方法
3. Widgetを使用してメニューを作成する方法
4. まとめ
5. 参考

#はじめに
アプリでよく見るフッターにある固定メニューの作り方について、今回は2つご紹介します。
シンプルなメニューを作成したい場合は、1の方法を、
メニューを選択したときにアニメーションなどを設定したい場合は2の方法を試してみてくださいね:sunny:

#1. App Menuを使用してメニューを作成する方法
####**①画面の作成**
2つの画面を作成します。

| frmHome | frmBlog |
| ------ | ------ |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/abe43563-6d65-bd90-29c2-be97e2562ba1.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cfb77c12-6236-484c-a015-0048a09853d5.png)|

下のフッターメニューでHomeを押したら、frmHomeが
下のフッターメニューでBlogを押したら、frmBlogが
表示されます。

####**②フッターにある固定メニューを表示させる**
1) frmHomeをクリック
2) 右のメニューのProperties > General  > App MenuのEditをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/730490f5-25cf-906a-26d8-82e28a6796e1.png)
3) フッターにある固定メニューを表示させたいデバイスにチェックをいれる
4) OKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/93bd30f9-c9c6-0281-ba0b-d9b026afe2ea.png)

そうするとこのようにフッターにある固定メニューが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8210b62c-67fe-449c-20a1-922dfdd31eca.png" width=50%>
frmBlogでも同じように設定します。

####**③フッターにある固定メニューの詳細設定**
1) frmHomeをクリック
2) 青い枠の中で右クリック
3) Configure App-Menuをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3fba5ddf-621e-824f-c7a8-c239b8d0232b.png)
4) App-Menu Master Dataが表示されます。
項目の説明  

| 項目 | 説明 |
| ----- | ---- |
| Skin | アプリメニューのスキン |
| Focus Skin | アプリメニューをタップした時のスキン | 
| ID | 英数字で構成されるアプリメニューの一意の識別子 | 
| Title | アプリメニューのタイトル | 
| Icon | アプリメニューのアイコン |
| onClick | アプリメニューをタップした時のイベント | 

:warning:SkinはiOSネイティブでのみ動作します。

今回はこのように設定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/305a415c-dba7-9879-18f0-ff5b91f5c2c2.png)

各メニューをクリックした時のアクションは、`onClick`列の・・・をクリックすると、
以下のようにエディターが開きます。
![スクリーンショット 2021-03-23 14.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7f3b175e-e844-ce31-3f6f-6e984e8eb52a.png)

今回は、それぞれの画面に遷移するようにアクション設定をしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9429fc23-9c38-b3f7-ca41-af3a756ebfd5.png)

####**④実装の確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/LrfpJORNZw">pic.twitter.com/LrfpJORNZw</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1373882910256734210?ref_src=twsrc%5Etfw">March 22, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

メニューをタップするたびに画面が切り替わっているのが分かりますね！

#2. Widgetを使用してメニューを作成する方法
####**①画面の作成**
2つの画面を作成します。レイアウトは以下です。

| frmHomePage | frmBlogPage |
| ------ | ------ |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/568ce5d6-553e-b42d-020c-8242ec3048a3.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/142baa94-1e80-7b5a-dc07-7a107e9bc92e.png)|

下のフッターメニューで左を押したら、frmHomePageが
下のフッターメニューで右を押したら、frmBlogPageが
表示されます。

####**②コーディング**
2つの画面のコーディングを行います。

◆frmHomePage

```frmHomePageController.js
define({ 

 // frmBlogPageへ遷移
  onNavigateForm : function(){
    var ntf = new kony.mvc.Navigation("FooterMenu02/frmBlogPage");
    ntf.navigate();
  },
 // アクティブアイコンを設定
  onPreShow : function(){
    this.view.imgHome.src = "album_active_3.png";
  }
 });
```

◆frmBlogPage

```frmBlogPageController.js
define({ 

 // frmBlogPageへ遷移
  onNavigateForm : function(){
    var ntf = new kony.mvc.Navigation("FooterMenu02/frmHomePage");
    ntf.navigate();
  },
 // アクティブアイコンを設定
  onPreShow : function(){
    this.view.imgBlog.src = "shared_active_3.png";
  }
 });
```

####**③アクション設定**

◆frmHomePage
・frmHomePage > Action:preShow
・flxRight > Action:onClick

◆frmBlogPage
・frmBlogPage > Action:preShow
・flxLeft > Action:onClick

####**④iOSのトランジション設定**
この方法でフッターメニューを作成する場合、遷移時間のデフォルト値が0.3となっている、かつ右から左へ移動します。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/txBirYfrJ8">pic.twitter.com/txBirYfrJ8</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1374166085012922372?ref_src=twsrc%5Etfw">March 23, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらでも大丈夫ですが、もう少しユーザーフレンドリーにするため、以下の設定を行います。

1) frmHomePage > Properties > Form > Transition:IN かつ Transition OUT 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a71553c4-e239-cd64-f8a5-a5a64da669ee.png)

2) 以下のように設定

| Before | After |
| ----- | ----- |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/93ab2a0f-f354-bdef-095f-0459c5e57f27.png)| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/13784113-6237-d9c6-036d-2005ed7d4546.png) |

frmBlogPageでも同じように設定してください。

各項目の説明は以下になります。

| 項目 | 説明 |
| ----- | ----- |
| Transition Direction | フォームの遷移方向を指定|
| Transition Effect | フォームの効果を指定 | 
| Transition Duration | フォームがナビゲーションに入るまでの時間の指定 | 

####**⑤実装の確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/2NhXd9tL8c">pic.twitter.com/2NhXd9tL8c</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1374169904018911238?ref_src=twsrc%5Etfw">March 23, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらもメニューをタップするたびに画面が切り替わっているのが分かりますね！

#まとめ
今回は、フッターにある固定メニューの作り方について説明しました。
デフォルトのApp Menuを使った方法は、
GUIで簡単に複数フォームに固定メニューを作成できるので、おすすめです！
みなさんもぜひ活用してみてくださいね:wave:

#参考
App Menu Widget：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#App_Menu.htm

inTransitionConfig Property：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/FlexForm_Properties.htm#inTransitionConfig