[OutSystems] MABS ビルドとは

2025-07-17(木) に開催された OutSystems Users Meetup in Hiroshima のセッション発表で使用したスライドです。
スライドの内容に対応する解説は、下記で公開しています。

[OutSystems] MABS ビルドとは #outsystems - Qiita
https://qiita.com/moriya-takasi/items/c890cd8682ffe48c3824

イベント情報：
[【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/

Transcript

1. MABS ビルドとは [OSUG*OJEC合同 Users Meetup in Hiroshima] 2025-07-17 Thu 守谷 崇 ＠伊藤忠テクノソリューションズ
2. About Me https://www.outsystems.com/profile/wyd1ajex5p
3. このセッションの概要 O11 や ODC でのネイティブモバイルアプリ作成につい て、OutSystems 経験がそれなりにある方であっても、 実際には何が行なわれるのかについて、いまひとつイ メージがつかめていないことがあります。このセッショ ンでは、技術詳細ではなく、「MABS ビルドとは何かの イメージ」をつかんでもらうことを狙った話をさせても らいます。
4. OutSystems でのモバイルアプリ開発 • Reactive Web App をモバイルブラウザで動かす • Phone / Tablet テンプレートで作って PWA スイッチを入れる （モバイルブラウザで開いて端末に「インストール」できる） • Phone / Tablet テンプレートで作って MABS ビルドする（ア プリストアに出せるアプリが作れる）
5. OutSystems でのモバイルアプリ開発 • Reactive Web App をモバイルブラウザで動かす • Phone / Tablet テンプレートで作って PWA スイッチを入れる （モバイルブラウザで開いて端末に「インストール」できる） • Phone / Tablet テンプレートで作って MABS ビルドする（ス トアに出せるアプリが作れる） Mobile Apps Build Service（MABS） （OutSystems 社が用意しているクラウドサービスの名前）
6. Cordova とは Apache Cordova は、HTML5、CSS3、JavaScript を使用 してクロスプラットフォームのモバイルアプリケーショ ンを開発するためのオープンソースフレームワークです。
7. Cordova の使い方（開発時の超概略） • PC に Node.js を入れて npm install -g cordova しておく • cordova create MyApp でアプリのプロジェクトフォ ルダを作り、ここに HTML/CSS/JavaScript を書く • 動かす OS に合わせた設定ファイルを書いて、下記の ビルドコマンドを実行（下記は iOS の場合） cordova platform add ios cordova build ios • パッケージファイルが生成される のでデバイスにインストール
8. Cordova アプリとは（ぶっちゃけ） • 開発者が用意した HTML / CSS / JavaScript と、専用の独立ブ ラウザを、ネイティブアプリとしてパッケージしたもの。 専用ブラウザ HTML/CSS /JS Cordova アプリ
9. OutSystems のウェブアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP サーバー Web アプリ アプリユーザー PC ブラウザ パブリッシュ 設計情報 （oml） デプロイ
10. OutSystems のウェブアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 （oml） デプロイ ダウンロード アプリ処理通信
11. MABS でのモバイルアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 （oml） デプロイ ダウンロード アプリ処理通信 MABS コンパイル ・ビルド ビルド指示 HTML/CSS /JS アプリ パッケージ
12. ユーザーモバイル端末 モバイルアプリ MABS でのモバイルアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 （oml） デプロイ ダウンロード アプリ処理通信 MABS コンパイル ・ビルド ビルド指示 HTML/CSS /JS 専用ブラウザ HTML/CSS /JS アプリ パッケージ インス トール アプリ処理通信
13. Cordova Plugin • デバイス OS を扱うネイティブコード（Android: Java、iOS: Objective-C, Swift）と、それを Cordova アプリから呼び出せ るようにする JavaScript I/F をまとめたもの。 専用 ブラウザ HTML/CSS /JS Cordova Plugin (ビルド後) Native Obj I/F JS
14. OutSystems のモバイルプラグイン • MABS での Cordova ビルド時に使う Cordova Plugin を、 OutSystems モジュール(O11)／Lib(ODC)に埋め込んだもの Cordova Plugin の JS I/F を呼び出す JavaScript コードを、Public: Yes のクライア ントアクション内の JS 要素に書く
15. ユーザーモバイル端末 モバイルアプリ MABS でのモバイルアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 （oml） デプロイ ダウンロード アプリ処理通信 MABS コンパイル ・ビルド ビルド指示 HTML/CSS /JS 専用ブラウザ HTML/CSS /JS アプリ パッケージ インス トール アプリ処理通信 GitHub など GET Plugin ソース一式
16. まとめ • MABS (Mobile Apps Build Service) は OutSystems 社の SaaS • MABS が作るのは Cordova アプリ • Cordova アプリは「HTML/CSS/JS と専用ブラウザ」のパック • 生成した HTML/CSS/JS を MABS で Cordova Build してる • Cordova Plugin は Cordova のネイティブ機能拡張の仕組み • OutSystems のモバイルプラグインは Cordova Plugin のラッパー • MABS がビルド時に GitHub などから Cordova Plugin を取得 楽しい開発を！