[OutSystems] MABS ビルドとは

この記事は、2025-07-17(木) に行なわれた、OutSystems Users Meetup in Hiroshima のセッションで話した内容を、あらためて解説したものです。セッションで使用したスライドは、Speaker Deck で公開しています。

【OSUG*OJEC合同開催】OutSystems Users Meetup in Hiroshima - OutSystems User Groups
https://usergroups.outsystems.com/events/details/outsystems-inc-tokyo-presents-osugojeche-tong-kai-cui-outsystems-users-meetup-in-hiroshima/

はじめに

Ver.10 以降の OutSystems に備わっている、「ネイティブモバイルアプリ作成機能（MABS ビルド機能）」は、いくつかの技術レイヤーを行ったり来たりする形で実現されているためか、「どういうコトが行なわれて、どういったモノができるのか」のイメージが、やや持ちにくい機能です。

本稿は、MABS ビルド機能について、技術詳細ではなく、その「どういうコトが行なわれて、どういったモノができるのか」をイメージできるような情報の提供を試みるものです。

MABS とは

OutSystems で作成したアプリをスマホやタブレットといったモバイルデバイスで使いたい場合、考えられる手段は次の３つです。

1. ウェブアプリを作ってデバイスブラウザで使う
2. モバイルテンプレート（Phone/Tablet）から作って、デバイスブラウザ機能で PWA（Progressive Web App）としてインストールして使う
3. モバイルテンプレート（Phone/Tablet）から作って、MABS ビルドでパッケージファイルを作り、デバイスにインストールして使う。Google や Apple のストア経由での配布も可

最後の３で出てくる本稿のテーマ MABS は、 Mobile Apps Build Service の頭文字で、これは、OutSystems 社が運用しているクラウドサービスの名称です。名称だけ見ると一般用語のようですが、OutSystems の世界でのみ使われる用語です。また、クラウドサービスではありますが、自前のサービスやブラウザから利用する方法は用意されておらず、OutSystems プラットホーム内でのみ使うことができます。

アプリ開発段階においては、例えば OutSystems 11（O11）の Service Studio では、下図の部分で設定を行なうことで、MABS を使ったビルドを実行できます。

（本稿では、1, 2 の MABS 以外を用いたモバイルアプリ作成については触れません）

Cordova アプリの作り方（開発時の超概略）

MABS ビルドで作成されるアプリは、Cordova アプリと呼ばれるものです。Cordova について調べると、ざっくり２～３行で

Apache Cordova は、HTML5、CSS3、JavaScript を使用してクロスプラットフォームのモバイルアプリケーションを開発するためのオープンソースフレームワークです。

といった情報に行きつくのですが、これだけでどういうものなのかをイメージするのは、少し難しいかもしれません。そこで、雰囲気をつかむために、OutSystems を使わずに、素の Cordova を使って、モバイルアプリを作る方法の超概略を説明してみます。

1. （準備）Node.js 開発環境を用意して、 npm install -g cordova を実行し、Cordova コマンドを使えるようにしておく
2. cordova create MyApp を実行すると下図のようなプロジェクトフォルダができる。下３つは設定ファイル。これら必要な設定ファイルを自前で用意するなら、コマンドを使わずに手動でプロジェクトフォルダを作っても OK
   
3. html/css/JavaScript を編集してアプリ内容を構築。
4. ビルド後アプリを動かすデバイスの OS に合わせて cordova platform add を実行。例えば iPhone 用のアプリをビルドするなら、 cordova platform add ios を実行
5. 設定ファイルに必要な内容を記述
6. cordova build ios を実行（iOS 用の場合）
7. パッケージファイルが生成されるので、それをデバイスにインストール

ポイントは、Cordova アプリ開発においては、開発者が作る（用意する）のは、html/css/JavaScript といった、「普段ウェブブラウザで表示したり実行したりするファイル」だけだということです。

Node.js は、Windows でも macOS でも使えますが、Windows 上の Node.js で cordova build ios を実行しても iOS 用のアプリのビルドはできません。これは、Cordova には最終ビルドコマンドが含まれておらず、別途 OS にインストールされているビルドコマンドを利用する形になっているため。iOS 用ビルドのためには、Xcode のインストールされた macOS 環境で Cordova を使う必要があります。

Cordova アプリとは（ぶっちゃけ）

語弊をおそれずにぶっちゃけると、Cordova アプリとは、次のようなものです。

• 開発者が用意した html/css/JavaScript と、専用の独立ブラウザを、ネイティブアプリとしてパッケージしたもの

無理やり図示するとしたら下図のような感じでしょうか。

OutSystems のウェブアプリ作成

OutSystems は、皆さんご存じの通り、もともとウェブアプリを作成するためのシステムです。ウェブアプリ開発では、まず、開発者の PC で、専用 IDE を使って構築した設計情報（.oml）をプラットホームサーバーにパブリッシュします。すると、ソースコード生成、コンパイル・ビルドが行なわれ、出来上がったアプリが AP サーバーにデプロイされる、という流れが実行され、アプリユーザーがブラウザからそれを使うことができるようになります（下図）。

O11 の開発環境では多くの場合、この図のプラットホームサーバーと AP サーバーは同一ホストです。一方、ODC の場合、AP サーバーはコンテナーであり、プラットホームサーバーがビルドするのは、アプリを含んだコンテナイメージです。O11 と ODC で、そのような違いはあるものの、全体のイメージとしては、OutSystems におけるウェブアプリの作成は、上図の流れで行なわれます。

上図では、デプロイされたウェブアプリを１つの枠で表しましたが、実際のウェブアプリは、サーバー実装と html/css/JavaScript とがセットになったものです。このうち、html/css/JavaScript が、ユーザーのブラウザにダウンロードされて、その JavaScript 実装が AP のサーバー実装と通信を行なうことで、アプリの動作が実現するわけです（下図）。

当然ですが、この図の左下にある「ブラウザの上に html/css/JavaScript が展開されている」部分は、前の節でぶっちゃけた Cordova アプリの構造と同じです。

MABS でのモバイルアプリ作成

というわけで、パブリッシュしたときに生成した html/css/JavaScript を使って Cordova ビルドしたもの、というのが、OutSystems が作成するネイティブモバイルアプリです。Android と iOS 両方のビルドを行なうことも踏まえ、プラットホームサーバー上で Cordova ビルドするのではなく、Cordova ビルドをするための外部サーバーを用意し、ここに、パブリッシュしたときに生成した html/css/JavaScript を送ってビルド指示を出せるようにした。これが OutSystems 専用のモバイルアプリビルドサービス MABS というわけです（下図）。

MABS はクラウドで運用されているサービスのため、オンプレで構築した O11 環境で MABS ビルドを行ないたい場合は、MABS への通信経路を確保する必要があります。

MABS でのビルドで作成された、単一のパッケージファイルは、プラットホームサーバーに戻されます。このパッケージファイルを、モバイル端末にインストールすると、先に見た「html/css/JavaScript と、専用の独立ブラウザ」の Cordova アプリが端末で動作し、その JavaScript 実装が AP のサーバー実装と通信を行なうことになります（下図）。

OutSystems のモバイルプラグイン

OutSystems でモバイルアプリを作成するときに、MABS ビルドを選択する理由の多くは、モバイルプラグインでないとできないことがある、というものです。OutSystems のモバイルプラグインは、基本的には、Cordova Plugin のラッパーで、この Cordova Pluguin は、Cordova アプリに OS ネイティブコードで機能を追加することができる仕組み。ここで言う OS ネイティブコード、というのは、Android だったら Android の OS API を呼び出す Java プログラム、iOS だったら、iOS の OS API を呼び出す Objective-C または Swift によるプログラムのこと。

下図は、Felica 対応の Android 端末のタッチセンサーで、交通系 IC のカード識別 ID を読み出す検証で作成した Cordova Plugin。上段の .java に、Android の NFC 機能の API を呼び出すネイティブ実装がされており、下段の .js には、そのネイティブ実装を Cordova アプリから呼び出す JavaScript インターフェースが実装されています。この例では、Android 実装だけしか含まれていませんが、ひとつの Cordova Plugin に、Android と iOS 両方の実装を含めておくことも可能です（ビルド時に指定された方が使われる）。

Cordova ビルドを行なう際に、このような Cordova Plugin を組み込むように指定することで、もともとの Cordova アプリにある専用ブラウザには存在しない機能をアプリで使うことができるようになります。イメージとしては、下図のような感じでしょうか。実際にビルドされたものでは、プラグイン部分の JavaScript やネイティブオブジェクトは、それ以外の部分とセットになっているので、あくまでイメージですが。

世界中の多くの開発者が開発したたくさんの Cordova Plugin が GitHub などのリポジトリで公開されており、OutSystems の Forge にあるモバイルプラグインの多くが、それらを参照する内容になっています。O11 であればモバイルモジュール、ODC であれば Lib の、Extensibility Configurations というプロパティに、Cordova Plugin のリポジトリ URL が指定されていて、これが MABS ビルド時に組み込まれます。そして、クライアントアクション内の JavaScript 要素に書いたスクリプトから、その Cordova Plugin のインターフェースを呼び出すことで、Codova Plugin で拡張された機能が、MABS ビルドで作成したアプリでも使えるようになる、という構成になっています。

O11 では、リポジトリアドレスを指定するのではなく、モジュール自体の Resources に、.zip に固めた Cordova Plugin を格納し、Extensibility Configurations で、そのリソースファイルを指定する、という方法も可能です。

モバイルプラグインで指定された、Cordova Plugin リポジトリへのアクセスは、ビルド時に MABS サーバーから行なわれます（下図）。そのため、オンプレ環境に構築した O11 環境で、GitHub の Cordova Plugin を用いたい、という場合であっても、プラットホームサーバーから GitHub への通信経路を確保する必要はありません。

ここまでで見てきたように、OutSystems のモバイルプラグインは、基本的には、Cordova Plugin を組み込むことで機能実現するものなので、MABS ビルド専用です。一部、公式の Camera Plugin のように、「PWA で使われた場合は、ブラウザ機能（Web API）で実現する実装」を含んでいて、MABS でなくとも使える、というものも存在しますが、ごく少数です。
OutSystems のモバイルアプリの話で、「プラグイン」という語を使うときは、OutSystems コンポーネントとしてのプラグインのことを指しているのか、Cordova Plugin のことを指しているのかを、きちんと意識して、誤解を招かないように注意しましょう。

おわりに

OutSystems の「ネイティブモバイルアプリ作成機能（MABS ビルド機能）」について、「どういうコトが行なわれて、どういったモノができるのか」をイメージできるようになる解説を試みました。要点をまとめると次の通り。

• MABS（Mobile Apps Build Service）は、OutSystems 社が用意しているクラウドサービス
• MABS が作るのは Cordova アプリで、ぶっちゃけると「html/css/JavaScript と専用ブラウザ」をパックしたもの
• プラットホームサーバーで生成した html/css/JavaScript が MABS に送られて Cordova ビルドが実行される
• OutSystems のモバイルプラグインは Cordova Plugin のラッパーで、Cordova Plugin はデバイス OS ネイティブ機能を使って Coddova アプリを機能拡張する仕組み
• MABS でビルドされるときに、リポジトリから Cordova Plugin がダウンロードされて組み込まれる

本稿の内容が、楽しい OutSystems 開発の一助になれば幸いです。
（本稿で解説した情報は、2025 年 7 月時点の情報です）

参考文献

• モバイルアプリのパッケージ化とデリバリー - OutSystems 11 ドキュメンテーション
  https://success.outsystems.com/ja-jp/documentation/11/deploying_apps/mobile_apps_packaging_and_delivery/
• モバイルアプリパッケージを作成する - ODC Documentation
  https://success.outsystems.com/ja-jp/documentation/outsystems_developer_cloud/building_apps/mobile_apps/create_mobile_app_package/