VoltMX Iris9.5 MicroAppアーキテクチャ入門 - MicroAppsの概要と連携方法について -

目次

1. MicroAppアーキテクチャの概要
2. 全体の完成イメージ
3. 実装の前に
4. 実装方法
5. 最後に

MicroAppアーキテクチャの概要

VoltMX9.5では新しくMicro Apps Architectureという概念が生まれました。

大規模なアプリケーションは、Micro appsアーキテクチャを使用して、
より小さなアプリケーションにモジュール化することができるようになりました。
ユーザーは、任意の順序や組み合わせで結合できるマイクロアプリケーションを作成し、
より大きなスーパーアプリケーションを形成することができます。

マイクロアプリケーションは、大規模なアプリケーションをより小さく、
管理しやすい独立したアプリケーションに分割することで、アプリケーション開発者の複雑さを軽減します。

これからMicroAppアーキテクチャを実際に使って概要を説明していきますが、
解説の量が多くなってしまうため、以下パートに分けて説明を行っていきたいと思います👀

【MicroAppアーキテクチャ入門】

• MicroAppの概要と連携方法について（👈今回のパート）
• 複数App間でのリソース共有方法について
• 複数App間で画面遷移を行う方法について
• Foundry Appとの連携方法について

では早速スタートしましょう！

全体の完成イメージ

今回は、例として注文と問い合わせの2つの機能を持った
商品配達のアプリケーションを作成していきたいと思います。

それぞれのパートでは、具体的に以下のような解説を行います。

• MicroAppの概要と連携方法について（👈今回のパート）
  →アプリのメインとなるDeliveryアプリとMicroAppのOrder,Inquiryを作成し
  アプリ同士を接続する方法について解説します。
• 複数App間でのリソース共有方法について
  →CommonというAppにSkinなどのリソースを全て管理するアプリを作成し、
  他アプリからアクセスする方法について解説します。
• 複数アプリ間で画面遷移を行う方法について
  →アプリのメインとなるDeliveryアプリのメニュー一覧画面から、
  Orderアプリの商品注文画面、Inquiryの問い合わせ画面に画面遷移する方法について解説します。
• Foundryの連携方法について
  →個々のMicroAppでFoundryAppを作成する方法や接続方法について解説します。

実装の前に

MicroApps機能の使用を開始する前に、まず BaseApp を作成する必要があります。
BaseApp は、プロジェクトの作成を開始するメインアプリです。
今回の場合、DeliveryアプリからそれぞれOrderやInquiryアプリを利用するため、
DeliveryアプリがBase Appとなります。
Base App は、リンクされた Micro App を含むことも、含まないこともできます。

Micro Appsをより大きなアプリにまとめたものをComposite App（またはSuper App）と呼び、
下記の図のようにBase Appと1つまたは複数のMicro Appsで構成されます。

本パートでは、それぞれのMicroAppの作成方法と、
どのようにして1つのアプリに統合するのか具体的な方法を説明していきます！

実装方法

1. Appを作成

プロジェクトで必要になるBaseApp,MicroAppをそれぞれ作成していきます。

1-1.BaseAppを作成

まずはベースとなるアプリを作成していきます。
アプリの作成方法はいつも通り、
Project->New Projectをクリックして新しいプロジェクトを作成します。

デバイス選択画面では、今回モバイルを作成したいので、Native Appを選択します。

アプリ名は任意の値を入力します。今回はDeliveryと名前をつけました。

しばらくするとアプリが作成されるので、以下のようにアプリが表示されればOKです。

1-2.MicroApp作成

次に、MicroAppの「Order」と「Inquiry」を作成します。

先ほど同様、Project->New Projectをクリックして新しいプロジェクトを作成します。

プロジェクト名は任意の名前を指定します。今回は「Order」に設定しました。
この手順をもう一度繰り返して「Inquiry」も作成しましょう。

作成したらワークスペースを確認してみましょう。
このように作成したアプリ群が同じワークスペース内に入っていればOKです。

これでプロジェクトで作成するアプリが用意できました！
MicroApp,BaseAppどちらもこれまでと変わりなく作成が可能です。

次の手順で、BaseAppとMicroAppsをまとめ、
1つのアプリ（CompositeAppまたはSuperApp）として構成する方法を説明します！

2. MicroAppの接続

プロジェクトで使用する個々のアプリを作成できたので、
それぞれのアプリ同士で接続ができるように設定を行なっていきたいと思います。

BaseAppのDeliveryアプリを開きます。

他のMicroAppと接続を行うため、
Projectメニューをクリックし、Link Micro App (From Workspace)を選択してください。

Link Micro App (From Workspace)のメニューが表示されない場合✍️
Link Micro Appのメニューが表示されない場合、
一度Irisを終了し、/Users/username/Iris/irisdata/temp/sessionsの中にある
ファイルを全て削除後、Irisを再起動を行なってください。

それでも表示されない場合は、
Project->Open->Refreshをクリックして更新を行うか、PCの再起動を行ってください。

Link Micro App (From Workspace)を選択すると、
アプリ一覧が開くので現在開いているアプリと連携したいMicroAppにチェックを入れましょう。

この時、もしMicroApp同士がリンク済みの場合、
どちらかを選択すると自動的に片方のAppも選択されます。
今回接続したいのは、InquiryとOrderなのでどちらもチェックがついていればOKです。
Linkボタンを押して接続を完了させましょう。

接続が完了すると、開いていたAppの下に接続したAppが表示されるようになります。
これで作成した3つのアプリを連携し、1つのアプリとしてまとめることができました。

（補足）MicroAppの接続解除方法

誤って異なるアプリを接続した場合でも、簡単に解除が可能です。

ハンバーガーメニューをクリックし、Micro App Configurationをクリックします。

現在接続されているアプリが表示されるので、
右側のアクションメニューをクリックしUnlinkボタン押下後、
Saveをクリックすれば接続解除することができます。

最後に

Micro Apps Architectureを使ったアプリケーションの作成方法は理解できたでしょうか？
個々の機能をMicroAppとして独立させることで、
各アプリごとにビルドができたり修正をすることができるようになります。
今回はアプリの連携方法だけでしたが、今後画面遷移やリソースの共有方法など
便利な機能をご紹介していくので、是非引き続きチェックしてみてくださいね！

参考