目次

はじめに
環境設定方法
Mobileのビルド
Tabletのビルド
Responsive Webのビルド
Live Preview
まとめ

はじめに

この記事では、Kony Visualizerバージョン9を使用して、
モバイル（iOS/Android）、タブレットおよびウェブアプリケーションをビルドする方法を説明します。

KonyFabricの環境設定方法

まずはビルド前にFabricとの接続を行います。

Kony Fabricの設定は、画面右上の「DATA & SERVICE」タブ→「メニューボタン」→ 既存のアプリがある場合は「Link to Existing App」を、新しいFabricを作りたい場合は「Create new App」をクリックして行います。

Fabricを既にお持ちであれば、「Link to Existing App 」→「Search your fabric name」を選択し、「ASSOCIATE」をクリックします。

ビルド時に出るポップアップから、Fabricの設定を変更したい場合は「Build Native Local」画面下の「Change」をクリックして変更・設定ができます。

Mobileのビルド

iOSのビルド

ここからの手順は、Xcodeがインストールされていることを前提としています。
まだインストールしていない方は、以下を参考にしてインストールしてください。
https://qiita.com/Kony_Team/items/cb012a9b3eeb5832ac9d

Version9は、現在Xcode12の利用を推奨しています。
随時対応のバージョンをダウンロード又はアップグレードするようにしてください。
参考：公式ドキュメント

まずは、以下の画像のようにウィジェットを置いた簡単なプロジェクトを作成します。

アプリの確認には、

実機を使わないシミュレーターでの確認と
実機を使って確認する方法
の2パターンあるので、
どちらかの方法をご参考下さい。

シミュレーターで実行する場合

実機を接続しない、シミュレーターでビルドをする場合の手順です。

1. シミュレーター起動
まずはシミュレーターを立ち上げます。
シミュレーターは、Xcodeアプリケーション内のフォルダにあります。
Xcodeを右クリックし「パッケージの内容を表示」を選択すると、
Xcodeの中に入っているファイルやフォルダなどが見られるようになります。

シミュレーターは、以下のフォルダにありますので、ビルド前に起動しておいてください。
/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

シミュレーターを起動すると、以下のようなiPhoneの画面が表示されますので、
起動できたら次に進みます。

2. Visualizerでビルド実行

Visualizerを開き、画面上部のメニューから
「Build」→「Build Native Local」をクリックします。

Post Build Actionから「Run on my Device/Emulator」を選択します。
Mobile Emulatorsに、起動中のシミュレーター端末が表示されるので、
対象のシミュレーターにチェックをつけて、「Build」をクリックしてください。

エラーが表示される場合
エラー文言：
「Please provide certificate details to generate IPA for your app」
▶︎解消法：
「Settings」ボタンをクリックすると
Project SettingsのNative->iPhone/iPadのBuild Localの設定ページが開きますので、
以下のように設定してください。

Development Team ID : 任意の値（※別途Xcodeで設定可能のため）
KeyChain Password : PCのパスワード

（エラー例）

ビルドが完了したら、以下の表示になります。

しばらくすると、シミュレーター側でアプリが起動します。
以上が、シミュレーターで起動する場合の手順です。

＜補足＞
一度Runを行うと、以下のパスにXcodeプロジェクトが生成されます。
"home"/KonyiOSWorkspace/"home_folder"/Kony/"build_foder"/VMAppWithKonylib/"filename.xcodeproject"

実機で実行する場合

1. Visualizerでビルド実行
iOS実機でビルドする場合、事前に以下の設定をする必要があります。

Build Setting > Native > iPhone/iPad > Build Local にて

development Team ID : 任意の値
KeyChain Password : PCのパスワード

設定が終わったら、画面上部のメニューから「Build」→「Build Native Local」をクリックし、ポップアップを表示します。

その後 Post Build Actionから「Run on my device」を選択し、
接続済の実機を選んでBuildします。

Buildすると、.karが生成された後に続けてIPAを作成しようとしますが、
こちらは失敗で構いません。(次のXcodeプロジェクトが生成されていればOKです)

以下のパスにXcodeプロジェクトが生成されます。

"home"/KonyiOSWorkspace/"home_folder"/Kony/"build_foder"/VMAppWithKonylib/"filename.xcodeproject"

Xcodeのプロジェクトが作成されたら、続いてXcodeでビルドを行います。

ipaを直接Visualizerから作成するには証明書の設定が必要です。
設定の詳細については以下をご覧ください。
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/iOS_Automatic_Output_Generation.htm

2. Xcodeでビルド実行

生成されたXcodeプロジェクトを開いて、以下の手順で実行してください。
① Kprotected ＞ KRelease に変更
② 接続されている端末を選択
③ メニューの「Product」→「Run」（又は左側の▶︎マーク）

エラーが表示される場合
Build実行中にXcodeで次のようなエラーが表示された場合は以下を参考ください。
~~
・エラー文言：「Signing for "KRelease" requires a development team. Select a development team in the Signing & Capabilities editor」
▶︎解消法
Signing&CapabilitiesのTeamの未選択が原因として考えられます。
以下の記事を参考にして、Apple IDを設定するようにしてください。
https://chibicat.hatenablog.jp/entry/2019/05/01/164728
~~
・エラー文言：「Xcode doesn’t support "Tablet名"のiPad’s iOS "OSバージョン番号" .」
▶︎解消法
Xcodeと接続済み端末とのバージョンがマッチしていないことが原因です。
以下を参考にして、端末に対応したデバイスサポートをXcodeに入れるようにしてください。
デバイスサポートを入れた後は、Xcodeが認識できない場合があるので、
一度PCと端末の接続を解除して、再度接続しなおしてからビルドを実行するようにしてください。
https://sussan-po.com/2019/10/12/new-ios-device/

しばらくすると、端末側でアプリがインストールされるようになります。
以上でiOS実機でのビルド手順は終了です。

Androidのビルド

Preferenceを開いて、Android Home とJava Homeをのパスを指定します。

Android Studioが必要になりますので、まだの方はダウンロードして以下の手順に進んでください。

Android Homeは、Android StudioのProject Structureに記載があるパスを指定します。

例: /Users/~~/Library/Android/sdk (sdkまでのパスを指定)

Java Homeには、以下のようにパスを設定してください。
Users/hoge/Library/Java/JavaVirtualMachines/jdk_1.8.0_xxx.jdk/Contents/Home

1.8バージョンのものをダウンロードする必要がありますので、入っていない場合は「JDK インストール mac」等で検索して、ダウンロードを実行してください。

設定が終わったら、以下の画像のような簡単なプロジェクトを作成します。

ここで、使用するデバイスをPCに接続しておいてください。
実機をお持ちで無い方は、エミュレータでも実行できるので、起動してください。

・よくあるAndroidビルドエラーに関しては以下の記事を参照してください。
https://qiita.com/Kony_Team/items/81d3a84042c8470c56aa

次に、Androidでアプリをビルドするには、画面上部の「Build」→「Build Native Local」をクリックして、ポップアップの「Post Build Action」を「Run on my Device/Emulator」に設定します。

Buildをクリックすると、以下のように実行できます。

Andoridでビルドを行う手順は、以上です。
apkを作成する場合は、以下手順もご参照ください。

apkを作成する方法
メニューの「Build」→「Build Native Local」をクリックして、ポップアップの「Post Build Action」→「Generate Native App」を選択。
「Platform and Channels」→「Mobile/Android」を選択してBuildをします。

Buildが完了すると、以下のようにapkが作成されます。

作成されたapkは、以下のパスに保存されます。

Appの保存先 :  /Visualizer/konyworkspace/temp/sample2/build/luaandroid/dist/ "apk"

直接ビルドするのではなく、作成されたapkを使って実機やエミュレータで起動する場合、アプリ(apk)をPCからインストールするために、adb install というコマンドを利用します。

その際、adbコマンドを Macのターミナルで利用するためにパスを通す必要があるので、まだパスを通していない方は以下の手順を実施してください。
※既にパスが通っている方は「apkのインストール」まで飛ばしてください。

adb のパスを通す

Android Studioを開き、左上の「Android Studio」から「Preferences...」をクリックします。

Android SDKの格納場所を確認するために、「Appearance & Behavior」→「System Settings」→「Android SDK」の順に開き、「Android SDK Location」に記載されていることを確認します。

次に、ターミナル内で

$ vi ~/.bash_profile

を実行し、bash_profileを開きます。

開くと以下のように空白のファイルが表示されます。

iを押してINSERTモードに変更したら、先ほど確認したAndroid SDKを以下のように入力します。
「export PATH=$PATH:/Users/kony/Library/Android/sdk/platform-tools」

入力が完了したら、escボタンを押下 => :wq(保存・終了コマンド) を入力してEnterを押下してください。

その後、bash_profileを再度読み込むために

$ source ~/.bash_profile
$

と入力し、Enterを押下します。
試しに adb と入力してみて、「adb : command not found」と表示されなければ、成功です。

$ adb

apkのインストール

パスが通ったことが確認できたら、ターミナルに以下を入力してください

$ adb install "apkのパス"

apkファイルをターミナル上にドラック&ドロップすることで、apkのパスを簡単に入力することができます。

ここでデバイスが起動していることを確認して、Enterを押下します。

インストールが始まるので、完了まで待機します。

Successが表示されたら完了です。
デバイス上にアプリがインストールされたことを確かめてください。

TabletのBuild

タブレットでのビルド方法を紹介します。
Mobileのビルド方法と、手順はほとんど同じです。

Visualizerの左メニューに「Tablet」デバイスのメニューが表示されない場合、
以下記事を参考にしてください。
▶︎Visualizer v9で各デバイス（Web,Mobile,Tablet etc..）メニューが表示されない

Mobileと同様、まず新規プロジェクトを作成し適当なWidgetを配置してタブレットアプリを作成します。

ビルド方法には、実機とシミュレーターでの実行の2通りの方法があります。
実行したい方をどちらか選んで手順通りに進めてください。

シミュレーターで実行する場合

Mobileのシミュレーターで実行する場合の手順と同様、
シミュレーターを起動しておきます。

今回はタブレットなので、
Simulatorの上部メニューでFileをクリックし、
Open Simulator->iOS XX.X（確認を行いたいOSバージョン）->iPadXX（確認を行いたい端末）を選択します。

シミュレーターが起動できたら、Mobileと同様
Visualizerに戻り、上部メニューから
Build->Build Native Localをクリックします。

ポップアップが開いたら、
Post Build Action : 「Run on my Device/Emulator」を選択
Configured Device & Emulators : シミュレーターで起動中の端末を選択し、
Buildをクリックしたら完了です。

ビルドが成功すると、シミュレーターに作成したアプリが表示されます。

実機で実行する場合

実機でビルドする場合もMobileと同様、
実機で実行する場合の手順で進めます。

Tabletの一覧から接続済みの端末を選択するようにしてください。

ビルドが成功すると、タブレット側にアプリが入り自動的にアプリが起動します。
ビルド結果↓

Responsive Webのビルド

以下の画像のような簡単なプロジェクトを作成します。

基本的には「Run Live Preview」(cmd + R) でアプリを実行する事ができます。

こちらが実行結果です。

※ 以下のビルドは意図しないPublishが発生する可能性があります。

Webアプリケーションのビルドには、ビルドと同時にPublishを実行できるものもあります。
「Build」 → 「Build and Publish Web」を選択してください。

ポップアップが表示されたら、「Platform and Channels」で「RESPONSIVE WEB」を選択し、クリックしてビルドします。

ビルドが終わったら、リンクをクリックするかリンクをコピーしてWebブラウザで結果を確認できます。

LivePreview

Visualizer V9では、ビルドの他にも Live Previewでモバイルアプリケーションを実行出来ます。

Live Previewに関しては、こちらの記事で紹介しております。

まとめ

今回はVisualizer Version9 でのアプリビルド方法についてご紹介いたしました。
こちらの記事がVersion9での環境構築のお役に立てば幸いです。

Version8 でのビルドについては以下の記事で紹介しています。

参考