Quantum Visualizerの環境設定

# 目次
1. Kony Visualizerの環境設定
2. Xcodeでの設定
3. Android Studioでの設定
3. 【番外編】Visualizerバージョンアップ方法


# はじめに
ここではモバイルアプリケーション統合プラットフォームである、Kony Visualizerでアプリケーション開発を行う際に必要な、環境設定について説明します。

# Kony Visualizerの環境設定


## 1. Visualizerダウンロード 

1. まず下記リンクにアクセスし、Visualizerをダウンロードします。<br>https://community.kony.com/downloads<br>

ダウンロードしたいバージョンがV8かV9によって、
ダウンロードする箇所が異なるため、下記に沿ってダウンロードを進めてください。

### Version9の場合
Version9をダウンロードする場合、「Visualizer」からダウンロードを行います。

「Visualizer」の箇所で、プルダウンからダウンロードしたいバージョンを選択し、
バージョン選択後、Installer_対象のOS名をクリックしダウンロードを行ってください。
![スクリーンショット 0004-04-25 13.29.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e0cd1c9c-9d97-7ab0-f304-b00275a023d9.png)

### Version8の場合
Version8をダウンロードする場合、「Visualizer Classic (formally Visualizer Enterprise)」
からダウンロードを行います。

「Visualizer Classic」の箇所で、プルダウンからダウンロードしたいバージョンを選択し、
バージョン選択後、Installer_対象のOS名をクリックしダウンロードを行ってください。
![スクリーンショット 0004-04-25 13.30.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d7aa1051-6944-fe49-2563-73539aee3783.png)

ダウンロードが完了したら、下記の通りインストールを進めてください。
<br>



## 2. Visualizerインストール
1. 「KonyVisualizerEnterprise」ファイルを実行し、「Next」をクリックする。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/096268a6-0926-088e-cf89-b5b393f4ed2c.png)
3. 許諾契約のすべてを読み、「使用許諾契約の条項に同意します」をチェック後、「Next」ボタンをクリックする。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6b2a386b-a4f3-02b9-272d-ce3b8ed85493.png)
4. 設定するパスを選択して、「Next」をクリックする。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/744e478b-caf9-184c-d4ec-3cea4c3146f1.png)

5. 「Proceed」ボタンをクリックする。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/db280846-ab6c-1981-afb9-407795600c49.png)

6. 「Next」ボタンをクリックする。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/190c4462-8e42-f2e3-7c87-498fcb8e0d06.png)


7. Visualizerをインストールしたいフォルダのパスを選択して、「Next」をクリックする。
※指定するパスには、空のフォルダを指定するようにしてください。
<br>アプリケーションフォルダに新しくフォルダを作成してインストールを行うと良いです。
指定パスの例：`/Applications/Visualizer95（バージョン名）`
他バージョンを持っていて共存させたい場合は、以下のリンクの方法をお試しください。<br>

https://qiita.com/Kony_Team/items/41c94e7d8225306eb1b4#5-visualizer%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4bf8885b-7e67-6dab-05eb-c4b06474ae0e.png)

8. 「Install」ボタンをクリックする。  
8. ![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e953983b-a676-3533-eeed-7e3c01a4d22a.png)

9. インストールの完了を待つ<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/eb6c0032-a7ea-80d7-61bc-37761ba15c34.png)


10. 「Next」をクリックして設定を完了する。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/98cbd747-6e77-a50c-b97e-8955dcb87226.png)

以上で、Visualizerのダウンロードは完了となります。


# Xcodeの設定
1.　下記リンクにアクセスし、Xcodeをダウンロードする。<br>https://developer.apple.com/support/xcode に行って Xcodeをダウンロードする。
2.　ダウンロードした「Xcode」を実行して設定を行う。
3.　iOSシミュレーター用のXcodeとKony Visualizerの設定を行います。<br>Kony VisualizerでProductタブを選択し、エミュレーターとデバイスの設定をクリック![スクリーンショット 2020-03-12 12.47.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6754f445-d823-807b-8828-e7de148ee8bc.png)


4.　以下はモバイルでBuildする場合の手順です。
1. Kony Visualizer
2. Emulater
3. Mobile
4. iOSを選択
5. Configura EmulatorでiPhoneを選択
6. Nameでエミュレーターの名前いを設定
7. Fetch Xcode Detailsをクリックして、Xcodeと連携します。iOS Build Optionsに正常に構成されたXcodeとエミュレーターのバージョン情報が表示されます。
8. "Save"をクリックし、変更を保存します。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/80f56b6a-e70b-2048-5927-a629a39908ba.png)

9. 成功すると、下記のように表示されるので"OK"をクリックすると設定が完了します。<br>![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f347650d-337a-cf1a-8b43-7a5b4a7f68d4.png)

<br>設定が正常に保存されると、Build時のデバイス選択画面に、先ほど設定したエミュレーターの名前が表示されます。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/27e13243-4758-fb7c-816a-abf8beca2e5e.png)
<br>
<font color="Red">**Kony上でXcodeが表示されない場合**</font><br>Xcodeは、Macマシンのアプリケーションフォルダに存在する必要があります。 Xcodeの命名規則は「Xcode」でなければなりません。  また、"Xcode is not found"とエラーが発生する場合、XcodeのメニューからPreferenceを選択し、locationで該当のXcodeバージョンを選択してください。<br>![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/29018d6d-181d-1a86-e3e4-c6458eac4ce3.png)


# Android Studioの設定
1. https://developer.android.com/studioに行って Android Studioをダウンロードする。
2. ダウンロード完了したらKony Visualizerで、[Preferences（環境設定）]を選択する。
3. 環境設定で、
 1.Kony Visualizer 
 2.Buildを順に選択する
 3.Android Home欄にフォルダーのURLを選択する 
 例: /Users/~~/Library/Android/sdk
 (sdkまでのパスを指定)


# 補足
## Visualizerバージョンアップ方法
Visualizerを既に持っていて、バージョンアップを行いたい場合は、
以下のリンクを参照してください。


https://qiita.com/Kony_Team/items/9623c054c3f3b122621f

## iOSバージョンアップ後にXcodeをアップデートせずにデバッグをする方法
今後iOSのアップデートがあった際に、Xcodeのアップデートを行わなくても
バージョン対応できる方法があります。
必要な時に以下のリンクを参考にしてみてくださいね。

https://qiita.com/Kony_Team/items/29b1a4bdfe5dab62180b

# 次の記事

第一章はこれで終了です！
次回から、「2章：基本的な使い方の説明」に入っていきます。

まずは、Visualizerのワークスペースの基本的な使い方をご紹介します！
▶︎[Visualizerワークスペースの基本的な使い方](https://qiita.com/Kony_Team/items/8d6afaed19229d01454e)

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

# 最後に一言
より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！

# 参考にしたサイト
https://www.kony.com/products/visualizer
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/SUGinstallKonyStudio.htm
https://developer.apple.com/support/xcode
https://developer.android.com/studio