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 Version9 でのアプリビルド方法

Last updated at Posted at 2021-12-09

目次

  1. はじめに
  2. 環境設定方法
  3. Mobileのビルド
  4. Tabletのビルド
  5. Responsive Webのビルド
  6. Live Preview
  7. まとめ

はじめに

この記事では、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」をクリックします。

スクリーンショット 2021-12-06 16.43.09.png

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

スクリーンショット 2021-12-06 16.44.22.png

スクリーンショット 2021-12-06 16.45.38.png

Mobileのビルド

iOSのビルド

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

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

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

アプリの確認には、

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

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

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

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

シミュレーターは、以下のフォルダにありますので、ビルド前に起動しておいてください。
/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app
スクリーンショット 0004-04-22 13.20.57.png

シミュレーターを起動すると、以下のようなiPhoneの画面が表示されますので、
起動できたら次に進みます。
スクリーンショット 0004-04-22 13.27.33.png

2. Visualizerでビルド実行

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

スクリーンショット 0004-04-22 13.36.20.png

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

スクリーンショット 0004-04-22 13.32.37.png

エラーが表示される場合:disappointed_relieved:
エラー文言:
「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のパスワード

(エラー例)
スクリーンショット 0004-04-28 11.52.21.png

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

スクリーンショット 0004-04-22 13.43.35.png

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


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

実機で実行する場合

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

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

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

スクリーンショット 2021-11-11 11.43.58.png

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

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

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

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f64616239363761362d653265652d643738632d333431322d3662656330653838643563362e706e67.png

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

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

2. Xcodeでビルド実行

生成されたXcodeプロジェクトを開いて、以下の手順で実行してください。
KprotectedKRelease に変更
② 接続されている端末を選択
③ メニューの「Product」→「Run」(又は左側の▶︎マーク)
スクリーンショット 0004-04-22 14.13.43.png

エラーが表示される場合:disappointed_relieved:
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に記載があるパスを指定します。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f35323334653665382d383561372d343431332d303430392d3337653535306630336664332e706e67 (1).png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f36313634376234322d383437322d393030642d656634362d6232373264313037373536352e706e67 (1).png

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

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

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

スクリーンショット 2021-06-03 12.48.33.png

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

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f66356137633164652d313331332d313830342d386631302d6539313431393535326435642e706e67.png

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

image032.jpg

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f30646535376631342d356438612d326133642d376431302d3835316630373061663063652e706e67.png

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

image035.png

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

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

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

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

adb のパスを通す

Android Studioを開き、左上の「Android Studio」から「Preferences...」をクリックします。
スクリーンショット 2021-06-18 13.10.11.png

Android SDKの格納場所を確認するために、「Appearance & Behavior」→「System Settings」→「Android SDK」の順に開き、「Android SDK Location」に記載されていることを確認します。
スクリーンショット 2021-06-18 13.15.15.png

次に、ターミナル内で

$ vi ~/.bash_profile 

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

スクリーンショット 2021-12-06 17.06.17.png

開くと以下のように空白のファイルが表示されます。
スクリーンショット 2021-12-06 17.07.11.png

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

スクリーンショット 2021-12-06 17.07.26.png

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

スクリーンショット 2021-12-06 17.07.51.png

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

$ source ~/.bash_profile
$

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

$ adb 

apkのインストール

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

$ adb install "apkのパス"

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

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

スクリーンショット 2021-06-18 11.31.33.png

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

スクリーンショット 2021-06-18 11.32.44.png
Successが表示されたら完了です。
デバイス上にアプリがインストールされたことを確かめてください。
スクリーンショット 2021-06-18 11.33.44.png

TabletのBuild

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

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

Mobileと同様、まず新規プロジェクトを作成し適当なWidgetを配置してタブレットアプリを作成します。
スクリーンショット 0004-05-10 14.21.54.png

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

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

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

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

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

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

ビルドが成功すると、シミュレーターに作成したアプリが表示されます。
スクリーンショット 0004-05-10 14.35.12.png

実機で実行する場合

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

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

スクリーンショット 0004-05-10 15.00.50.png

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

Responsive Webのビルド

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

image020.png

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

スクリーンショット 2021-06-03 11.05.23.png

こちらが実行結果です。

スクリーンショット 2021-06-03 11.07.54.png

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

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

image022.png

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

スクリーンショット 2021-12-06 16.49.09.png

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f33313036336263372d396561652d313836622d643465322d6365316430366464366230662e706e67.png

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f34616131643265352d346562662d336239362d376636382d6665366639346662303062362e706e67.png

LivePreview

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

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

まとめ

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

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

参考

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?