0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-05-08

目次

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

はじめに

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

▶︎Visualizerでのアプリビルド方法【V9】

1.iOSBuildの実行手順

これからの手順はXcodeがインストールされていることが前提となります。
インストール出来ていない方は2.開発環境の設定を参照しながらXcodeのインストールをしましょう。

サンプルプロジェクトを以下からダウンロードしてみましょう。
https://github.com/kony/HelloWorld
図1.png
__Hello world.zip__をクリックしてファイルをダウンロード。
Kony Visualizerを開き画面上部
__File__メニューから__Import__→__LocalProject__→__Open as New Project__を選択
図2.png
__Select archive~__にチェックを入れて__Browse__ボタンをクリック
先ほどダウンロードしたファイルを選択。
※Zipファイルの場合は、Archiveにチェックを入れ、それ以外の場合は、Select project~を選択
ファイルを選択したら、Finish__をクリックしてインポート完了
図3.png
画像のように表示されていればインポート成功しています!
図4.png
次に作成したアプリをエミュレータで起動するための設定を行います。
Kony Visualiverメニュータブ__Product__を選択し、Emulators & Devices Configuration__をクリック。
図5.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
成功すると以下画像が表示されるのでOKをクリック。設定終了です。
図7.png

仮想マシンでのBuild実行手順
Kony Visualizerメニュータブから__Product__を選択
Run as →__名付けたエミュレーター名__→__Native__をクリック
図10.png
Buildが完了すると、Buildタブで緑色のチェックマークが表示され、仮想マシンが自動的に起動します。
図11.png

※エラーが発生する場合
緑色のチェックマークが表示されず、エラーとなっている場合、以下を実行してみてください

1.XcodeのBuildファイルを新規作成する
前回のキャッシュが残っておりうまくBuildできない場合があり、ファイルごと作り直すと正常に動くようになります。
Finder→自分のPC名→KonyiOSWorkspace→自分のPC名→
iOS-(Konyのバージョン)→VMAppWithKonylib(→KonyのBuild時に作成されるファイル)
このファイルを削除または、名前を変更(名前を変更するだけでも新規にBuildファイルが生成されます)
Konyに戻り、再度Buildしてみる
図12.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

2.AndroidBuildの実行手順

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

AndroidStudioでの設定
__Create virtual device__を選択する
エミュレータで実行したいデバイスを選択する
例:Phone→Noxus6P→Next
図14.png
AndroidのOSバージョンを選択する
例:Lolipopなど
Downloadをクリック
ダウンロードが完了したら、
next→finishをクリック
図15.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
これで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
__Responsive Web__にチェック
__Build__をクリック
図18.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
図20.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?