Visualizer Fabric Backendのハンバーガーメニュー機能紹介


## 目次

1.はじめに
2.主に使う機能紹介
3.その他機能紹介
4.終わりに

## 1.はじめに

Visualizerでバックエンドサービスを使ったアプリを開発する際、
作成中のプロジェクトとFabric Appを接続する必要があります。

Visualizerの右端にあるハンバーガーメニューでは、
Fabric Appとの接続や解除などさまざまな機能があります。

今回はハンバーガーメニューでよく使う機能をメインとして、
その他の機能についても一部ご紹介していきたいと思います！

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c20e0855-e15f-26b8-a686-11ca2e654171.png)



## 2.主に使う機能紹介

### 1.Link to Existing Appについて

Link to Existing Appは、
Kony FabricにてPublish済みのFabric AppとVisalizerのプロジェクトを接続することができます。

ここではKony Fabricに登録されているFabric Appの一覧が表示されるので、
接続したいFabric Appを見つけてASSOCIATEを押下すると接続は完了します。
また、右上の検索ボックスからFabric Appの名前を一覧から検索することもできます。

![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/25af6b4f-b56c-ec2a-b49d-4b60f231f12b.png)

### 2.Create New Appについて

Create New Appは、
新しいFabric Appを新規作成してKony Fabricに登録します。

押下することで、現在作成しているプロジェクトの名前のFabric AppをKony Fabricに作成し、接続済みの状態にします。

![画像5 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/12b8abd5-58e8-46db-2891-3e0ea87d52e7.png)

Kony Fabric上にも画像のように作成したFabric Appが追加されますのでご確認下さい。

![画像プラス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0ac65fe2-1b9f-2321-1748-514748e947c5.png)

両方ともKony FabricのFabric Appと接続する機能ですが、複数人で一つのアプリを開発する時は既にあるFabric Appを使うことが多いのでLink to Exciting Appを、
新しくアプリを作成する、１からアプリを作成する時はCreate New Appを使用しましょう。
なお、Create New Appは**新規でKony FabricにFabric Appを作成してしまう**ので気をつけましょう。

### 3.Unlink Appについて
Unlink Appは、
現在接続しているKony FabricのFabric Appを解除します。

Fabric Appを誤って接続してしまった場合や、
バックエンドとの接続が不要なアプリの場合はこちらのメニューで接続を解除しましょう。

押下時に、下記画像のようなポップアップが表示されますので、
Visualizer上から接続していたFabric Appを削除する場合はDelete、
削除しない場合はSkipを選択します。

![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d8650ee3-b975-52ac-3c15-921361237b68.png)

## 3.その他機能紹介

### 1.Open Fabric Consoleについて
Open Fabric Consoleは、
接続しているFabric AppのFabric Consoleを開きます。

例えば、コードを書く際に呼びたいAPIのサービス名やリクエストパラメーターの値を確認したい場合、
Visualzier上から簡単にアクセスできるためとっても便利です。

![スクリーンショット 0004-10-31 11.42.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c80ebb07-a394-6480-d2a4-a9c3ff4d49a4.png)
　
また、Visualizer上から
レスポンスの値も確認することができるため、
返却値のパラメータ名などを確認する際にも活用することができます。

![スクリーンショット 0004-10-31 11.44.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4bc0d1cd-5059-a7c3-3402-d8db1fcfc112.png)

ChromeでFabric Consoleにアクセスしログインして、アプリ名を選択して、・・・  
という一手間が省けるので、とっても便利な機能となります。

VisualzierでFabric Consoleを開いた後、
コンソールを閉じる際には左上のアイコンをクリックすることで閉じることができます。

![画像2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/91e1163b-d073-444e-1501-f64931475e7c.png)


### 2.Configure Environmentsについて
Configure Environmentsは、
Project SettingsのFabric設定画面を表示します。

アプリビルド前に確認することで、
Cloud Accountの箇所で、正しいアカウントに接続されているか、
Environmentの箇所で、正しい環境に接続されているか（本番環境か検証環境か等）、
を事前にチェックし必要に応じて設定を変更することができます。

この環境設定ページは、Visualizer右側にあるアイコンからも表示できるので、
ご自身の使いやすい方で確認してみてください。

![画像8 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a9bce011-7fa8-cc38-c2cb-a6abd477048e.png)





### 3.Publish Project Servicesについて
Publish Project Servicesでは、
現在接続しているFabric AppをKony Fabricに公開することができます。

VisualizerからFabric Appを公開することは滅多にありませんが、
例えば、Visualizer上からCreate New Appで新規のFabric Appを作成し、
作成したFabric AppをそのままVisualizer上から公開したいという場合は使える機能かと思います。

以下に注意点を記載しますので、
もし使用する場合は、一読し必要に応じて使用するようにしてください。

:::note  warn
注意点

Publish Project Servicesを使い、
Visualizer上から、Publishを行うと**Fabricの設定値なども上書きされてしまいます。**

例えば、
Visualizer上のFabric設定が、実際のFabric Consoleの設定値よりも古い場合、
Visualizer上からPublishをすると古い値で上書きされてしまうため、  
意図しないPublishを行わないよう注意しましょう。

一般的なFabric Appの公開方法は以下に記載しています。  
Fabric Appの公開をしたい場合は、基本的にこちらを参考にしてPublish作業を行うようにしましょう！

:::

https://qiita.com/Kony_Team/items/80d6bbab808699ab7bef#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%85%AC%E9%96%8B%E3%81%97%E3%82%88%E3%81%86



## 4.終わりに

本記事では、Visualizerの右端にあるハンバーガーメニューの機能をそれぞれ紹介していきました。
自分が作成したいプロジェクトの目的によって、機能を使い分ける必要がありますので、
しっかりと確認して活用していきましょう！


## 参考

https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/PublishKonyFabricServicesApp.htm