Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[OutSystems] MABS ビルドとは

[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/

Avatar for moriya.takasi

moriya.takasi

August 04, 2025
Tweet

More Decks by moriya.takasi

Other Decks in Programming

Transcript

  1. OutSystems でのモバイルアプリ開発 • Reactive Web App をモバイルブラウザで動かす • Phone /

    Tablet テンプレートで作って PWA スイッチを入れる (モバイルブラウザで開いて端末に「インストール」できる) • Phone / Tablet テンプレートで作って MABS ビルドする(ア プリストアに出せるアプリが作れる)
  2. OutSystems でのモバイルアプリ開発 • Reactive Web App をモバイルブラウザで動かす • Phone /

    Tablet テンプレートで作って PWA スイッチを入れる (モバイルブラウザで開いて端末に「インストール」できる) • Phone / Tablet テンプレートで作って MABS ビルドする(ス トアに出せるアプリが作れる) Mobile Apps Build Service(MABS) (OutSystems 社が用意しているクラウドサービスの名前)
  3. Cordova の使い方(開発時の超概略) • PC に Node.js を入れて npm install -g

    cordova しておく • cordova create MyApp でアプリのプロジェクトフォ ルダを作り、ここに HTML/CSS/JavaScript を書く • 動かす OS に合わせた設定ファイルを書いて、下記の ビルドコマンドを実行(下記は iOS の場合) cordova platform add ios cordova build ios • パッケージファイルが生成される のでデバイスにインストール
  4. Cordova アプリとは(ぶっちゃけ) • 開発者が用意した HTML / CSS / JavaScript と、専用の独立ブ

    ラウザを、ネイティブアプリとしてパッケージしたもの。 専用ブラウザ HTML/CSS /JS Cordova アプリ
  5. OutSystems のウェブアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP

    サーバー Web アプリ アプリユーザー PC ブラウザ パブリッシュ 設計情報 (oml) デプロイ
  6. OutSystems のウェブアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP

    サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 (oml) デプロイ ダウンロード アプリ処理通信
  7. MABS でのモバイルアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC Studio AP

    サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 (oml) デプロイ ダウンロード アプリ処理通信 MABS コンパイル ・ビルド ビルド指示 HTML/CSS /JS アプリ パッケージ
  8. ユーザーモバイル端末 モバイルアプリ MABS でのモバイルアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC

    Studio AP サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 (oml) デプロイ ダウンロード アプリ処理通信 MABS コンパイル ・ビルド ビルド指示 HTML/CSS /JS 専用ブラウザ HTML/CSS /JS アプリ パッケージ インス トール アプリ処理通信
  9. Cordova Plugin • デバイス OS を扱うネイティブコード(Android: Java、iOS: Objective-C, Swift)と、それを Cordova

    アプリから呼び出せ るようにする JavaScript I/F をまとめたもの。 専用 ブラウザ HTML/CSS /JS Cordova Plugin (ビルド後) Native Obj I/F JS
  10. OutSystems のモバイルプラグイン • MABS での Cordova ビルド時に使う Cordova Plugin を、

    OutSystems モジュール(O11)/Lib(ODC)に埋め込んだもの Cordova Plugin の JS I/F を呼び出す JavaScript コードを、Public: Yes のクライア ントアクション内の JS 要素に書く
  11. ユーザーモバイル端末 モバイルアプリ MABS でのモバイルアプリ作成 プラットホーム src 生成・コン パイル・ビルド 開発者 PC

    Studio AP サーバー Web アプリ サーバー実装 HTML/CSS/JS アプリユーザー PC ブラウザ HTML/CSS/JS パブリッシュ 設計情報 (oml) デプロイ ダウンロード アプリ処理通信 MABS コンパイル ・ビルド ビルド指示 HTML/CSS /JS 専用ブラウザ HTML/CSS /JS アプリ パッケージ インス トール アプリ処理通信 GitHub など GET Plugin ソース一式
  12. まとめ • 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 を取得 楽しい開発を!