はじめに
Mendixでモバイルアプリを開発する（ハイブリッドアプリ） に続き、ネイティブアプリ編です。
Mendixのモバイルアプリは、Web、ハイブリッドアプリ、ネイティブアプリが選択できます。
- レスポンシブWeb
- MendixのWebアプリケーションを最速でモバイルに展開できます(React JS)
- PWA
- アプリストアに依存でずに、シンプルに展開できます。
- ハイブリッドアプリ
- 既存のWeb機能を活用しながら、アプリを展開できます。PhoneGap/Apache Cordovaをベースにしています
- ネイティブアプリ
- 最適なユーザーエクスペリエンスとデバイス統合できます(React Native)
どれか１つの形態に縛られるのではなく、これらを目的に合わせて選択して利用することができるのがMendixのメリットの１つです。
Mendix Studio Pro 8.15.0
Mendix Studio Pro 8.15.0より前のバージョンではNative Builderがコマンドラインツールとして提供されていましたが、Mendix Studio Pro 8.15.0からNative Builderが組み込まれました。
コマンドライン版もプロキシは通らなかったけど、GUI版もプロキシは通らないみたいです。今日はここまで
ネイティブアプリを作る - 概要（8.14.1以前）
ネイティブアプリは、Mendixが公開しているドキュメント Deploy Your First Mendix Native Mobile App の流れで作成します。
Bendix Studio Proで作成したプロジェクトを元にして、Native Builderというコマンドラインツールを使用して、GitHubリポジトリを作成し、Microsoft Azure Visual Studio App Centerを利用してビルドします。
ネイティブアプリを作る - 前提
ネイティブアプリの開発には以下が必要です、
- Mendix Studio Pro（ネイティブアプリの開発はMendix Studio Proを使用します）
- Java JDK 11（Mendix Studio Proに含まれてインストールされます）
- Native Builder（こちらのDropbox のサイトからダウンロードします。最新版は3.2.1です）
- ネイティブ対応アプリ（以下で説明します）
- GitHub アカウント（無償で使えます）
- App Center アカウント（無償で使えますが、頻繁にアプリをビルドする場合は有償が推奨されています）
ネイティブアプリを作る - アカウントの準備
GitHub のトークン
- GitHub にログインします。
- 右上のプロファイル画像をクリックして Settings に移動します。
- メニュー左下の Developer settings をクリックします。
- Personal access tokens に移動して、Generate new token をクリックし、アクセストークンを作成します。
- Note 欄には Native Builder と入力します。
- Select scopes の下で repo を選択します。
- Generate token をクリックします。
- 表示されたトークンを安全な場所に記録します。再表示はできないので、なくした場合は新しく作成して古いものを削除します。
App Center のトークン
- App Center にログインします。
- 右上のプロファイルアイコンをクリックして Settings をクリックして Account Settings に移動します。
- API Tokens タブで、New API token をクリックします。
- トークンの説明を Description に追加し、Full Access を選択して、Add new API token をクリックして API トークンを作成します。
- 表示されたトークンを安全な場所に記録します。再表示はできないので、なくした場合は新しく作成して古いものを削除します。
ネイティブアプリを作る - アプリの作成
まず、Bendix Studio Proでアプリを作成します。今回は「Native Mobile Quickstart App」テンプレートを使用して作成します。
アプリを作成したら、「Run locally」をクリックしてローカルでテストします。
アプリストアからスマホに「Make it Native」アプリをダウンロード＆インストールしてテストします。
ネイティブアプリを作る - Native Builder
準備
Native Builder の prepare コマンドでネイティブアプリ開発環境を準備します。Mendix Studio Proのプロジェクトから、GitHubリポジトリとApp Centerのアプリを作成します。
prepare コマンドの実行例です。
native-builder.exe prepare --project-name MyFirstNativeApp --java-home "C:\Program Files\AdoptOpenJDK\jdk-11.0.3.7-hotspot" --project-path "C:\Users\<user>\Documents\Mendix\MyFirstNativeApp-main\MyFirstNativeApp.mpr" --mxbuild-path "C:\Program Files\Mendix\8.14.1.6605\modeler\mxbuild.exe" --github-access-token <github-access-token> --appcenter-api-token <appcenter-api-token> --runtime-url "https://myfirstnativeapp102-sandbox.mxapps.io" --app-name "MyFirstNativeApp" --app-identifier "com.mendix.myfirstnativeapp" --mendix-version "8.14.1"
一回目は下記のようなメッセージでエラーが出力されました。
この場合、App Centerにログインして、BuildからアプリとGitHubリポジトリを手動で接続（connect）します。iOS、Androidそれぞれ接続を確認します。
prepare コマンドを再度実行します。
ビルド
準備ができたらビルドです。次のようなコマンドでビルドが実行されます。
native-builder.exe build --project-name MyFirstNativeApp --build-number 1 --app-version 0.1.0
ビルドできました。自分の環境では20分くらいかかりました。
テスト
Native Builderを配置したフォルダーの下に、buildsフォルダーが作成され、その中にiOS、Androidの実行モジュールがzip形式で格納されます。
Androidの実行モジュールapkを解凍して、Androidに転送します。
adb install app-appstore-debug.apk
動きました！
最後に
環境構築に少し手間がかかりますが、一旦準備ができれば、Native Builderを使用してApp CenterとGitHubを連携して簡単にビルドを繰り返すことができます。