VisualizerでのアプリBuild手順【V8】

# 目次
1.iOSBuildの実行手順
2.AndroidBuildの実行手順
3.WebBuildの実行手順

# はじめに
VisaulzierでのアプリBuild方法について紹介します。
V9でのビルド方法は以下の記事を参考にしてください。

▶︎[Visualizerでのアプリビルド方法【V9】](https://qiita.com/Kony_Team/items/3e3c52c379583df57c08)


# 1.iOSBuildの実行手順
これからの手順はXcodeがインストールされていることが前提となります。
インストール出来ていない方は[2.開発環境の設定](https://qiita.com/Kony_Team/private/cb012a9b3eeb5832ac9d)を参照しながらXcodeのインストールをしましょう。

サンプルプロジェクトを以下からダウンロードしてみましょう。
https://github.com/kony/HelloWorld
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/946076cc-953b-08e5-3a1d-b98adfc4380c.png)
__Hello world.zip__をクリックしてファイルをダウンロード。
Kony Visualizerを開き画面上部
__File__メニューから__Import__→__LocalProject__→__Open as New Project__を選択
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/eb9ac393-935e-8ad5-6ae9-4bc895c62568.png)
__Select archive~__にチェックを入れて__Browse__ボタンをクリック
先ほどダウンロードしたファイルを選択。
※Zipファイルの場合は、Archiveにチェックを入れ、それ以外の場合は、Select project~を選択
ファイルを選択したら、__Finish__をクリックしてインポート完了
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/f0283451-538b-e5e7-aea1-da12626895f6.png)
画像のように表示されていればインポート成功しています！
![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/3814e6ff-f53e-1826-e27f-8c7694bcabe9.png)
次に作成したアプリをエミュレータで起動するための設定を行います。
Kony Visualiverメニュータブ__Product__を選択し、__Emulators & Devices Configuration__をクリック。
![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/1537c337-4e6a-66c9-5efd-99f4fb329b98.png)
Preferenceが表示されるのでKony Visualizer→Emulatorを開き、
Mobileの場合→__Mobile__
タブレットの場合→__Tablet__
開いた後はiOSを選択
次にConfigure Emulatorで、iPhoneまたはiPadを選択。
Nameでエミュレータの名前を設定(ex.iPhoneX,iPad)
名前を設定したらFetch Xcode DetalisをクリックしてXcodeと連携します。
成功したら、iOS Build Optionsに正常に構成されたXcodeとエミュレータバージョンの情報が表示されます。
Saveをクリックし変更内容を保存します。
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/254ce18c-1480-f0d6-f65b-b3f67da7fd74.png)
成功すると以下画像が表示されるのでOKをクリック。設定終了です。
![図7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/742243d2-550c-3a91-ce2e-6b974cd4ae4b.png)

__仮想マシンでのBuild実行手順__
Kony Visualizerメニュータブから__Product__を選択
__Run as__ →__名付けたエミュレーター名__→__Native__をクリック
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/fa9a64e0-7bb8-2d5b-4ab2-acad2b62bc13.png)
Buildが完了すると、Buildタブで緑色のチェックマークが表示され、仮想マシンが自動的に起動します。
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/99e6c4d1-a0d1-d5da-67ad-0ed515b2d84b.png)

__※エラーが発生する場合
緑色のチェックマークが表示されず、エラーとなっている場合、以下を実行してみてください__
1.XcodeのBuildファイルを新規作成する
前回のキャッシュが残っておりうまくBuildできない場合があり、ファイルごと作り直すと正常に動くようになります。
Finder→自分のPC名→KonyiOSWorkspace→自分のPC名→
iOS-(Konyのバージョン)→VMAppWithKonylib(→KonyのBuild時に作成されるファイル)
このファイルを削除または、名前を変更(名前を変更するだけでも新規にBuildファイルが生成されます)
Konyに戻り、再度Buildしてみる
![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/a8f4ef86-2f12-0af0-0296-da3a2f83eac8.png)

2.その他
NFIやFFI等を使うアプリの場合、
173のエラーが発生することがありますが、エミュレーターで実行することができない機能のため、
エミュレーターではなくXcodeを通して本番マシン（実機）で実行を行うようにしてください。

__本番マシンでの実行手順__
これまでの手順に従って仮想マシンでMobile/Tabletを実行する
Xcodeを開く→File→Open→(あなたのパソコンの名前)→KonyiOSWorkspace
→(あなたの作成したファイル）→Kony
→Build時のKonyのバージョンファイル（例：iOS-8.4.28....07192038）
→VMAppWithKonylibを選択。
モバイル端末をコンピューターに接続する
左上のメニューをクリックし__KRelease__→__（あなたのiPhone名）__を選択する
実行[▶︎]をクリック
![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/2884d0f8-8f13-1244-447e-ca403f56207f.png)

# 2.AndroidBuildの実行手順
AndroidStudioをダウンロード
AndroidStudioのインストールについては、こちらの参照をお願いします。
https://www.atmarkit.co.jp/ait/articles/1709/04/news015.html

AndroidStudioでの設定
__Create virtual device__を選択する
エミュレータで実行したいデバイスを選択する 
例:Phone→Noxus6P→Next
![図14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/3d27d40a-e158-efa0-7bb6-9b421fbe7c6b.png)
AndroidのOSバージョンを選択する
例:Lolipopなど
Downloadをクリック
ダウンロードが完了したら、
next→finishをクリック
![図15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/f221a13e-fa02-ae6d-8296-b8981c171746.png)
これで、emulatorで起動させるための仮想デバイスが用意できました。

次に、KonyでBuildしたアプリをemulatorで起動させる場合の設定です。

KonyVisualizer上での設定
1.Kony Visualizer→2.Emulators→3.Mobile→4.Androidを選択
5.Nameと6.Locationを入力する
例：/Users/~~/Library/Android/sdk/emulator/emulator
7.AVD名を選択した後→Save→OK
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/7073f0ea-d803-ff3b-4c51-17eb3dfe4868.png)
これでKonyからエミュレータを実行するための設定ができました。

次にエミュレーターを起動するための手順です。 
 iOSと同じく、メニューからKony Visualizerのメニューから__Product__を選択し、
 __Run as__→__名付けたエミュレーター名__→__Native__をクリック
Buildが完了すると、Buildタブで緑色のチェックマークが表示され、仮想マシンが自動的に起動します。

__本番マシンでの実行手順__(こちらよく使います)
Clean and buildで__Android__にチェックを入れる
Buildが完了すると、Console上に以下のようなパスが表示されるので、クリックしFinderを開く。
/Users/（PC名）/（ワークスペース名）/temp/プロジェクト名/build/luaandroid/dist/プロジェクト名前

1.スマホをコンピューターに接続

2.ターミナルで以下コマンドを実行
abd install 
/Users/(PC名)/(ワークスペース名)/temp/プロジェクト名/build/luaandroid/dist/プロジェクト名前
abd install のコマンドをインストールする方法は、こちらを参照
https://qiita.com/furusin_oriver/items/f956848788c7a63922bd

成功した場合、接続したAndroidで実行される

# 3.WebBuildの実行手順
Kony Visualizerのメニューから__Product__を選択し、__Build__をクリック
![図17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/b36e8eb7-63aa-40ec-471e-a594a92a5855.png)
__Responsive Web__にチェック
__Build__をクリック
![図18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/bcdda4b8-7561-abe8-a240-c02a6ba5b25b.png)

__※注意__
Build後にエラーが発生する場合、 下記チェックを行いエラーを解消してください。

・Project Settings→Kony Fabricで
CloudAccountとKonyFabricEnvironmentを確認しFinishをクリック
(CloudAccountとKonyFabricEnvironmentを予めご用意下さい。)
・Kony FabricのAppsと正常に接続されているか確認。
・接続されているにもかかわらず、エラーが出る場合、一度Unlinkした後、再接続を行う。
・Clean and Buildの実行
・Web画面（Chrome等）のキャッシュ削除
・Web画面（Chrome等）のLocalStorageのデータ削除
![図19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/2635b61b-e404-c595-a744-64727660c36a.png)
![図20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599796/e199fabf-9b37-acae-45ed-5cf18bcf2520.png)