More than 1 year has passed since last update.

VoltMX Iris9.5 MicroAppアーキテクチャ入門 - 複数App間でのリソース共有方法について -

Last updated at 2023-03-22Posted at 2023-03-13

はじめに

前回、MicroAppアーキテクチャの概要とアプリの連携方法についてご紹介しました。
今回は連携したアプリ同士でリソース共有を行う方法についてご紹介していきたいと思います！

Micro Appのリソース共有を有効にすると、リンクしている全てのMicro AppとBase Appは、
Micro Appのリソース（Themes、Form Templates、Components、Image等）を利用することができます。

MicroAppアーキテクチャに関して、
その他の内容が気になる方は以下リンクを参照ください。

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

完成イメージ

CommonというAppを新たに作成し、SkinやComponent等全てのリソースをまとめて、
全てのMicroAppからアクセスができるようなアプリを作っていきます。

実装方法

では早速作っていきましょう！

1. リソースをまとめるMicroApp作成

まずはじめにリソースを管理するMicroAppを作成します。

MicroAppの作成方法は、通常通りProjectSetting->New Projectから作成可能です。
設定が不安な方は以下の記事をご確認ください。

MicroAppの名前は「Common」と設定しました。

2. Common内に必要なリソースを作成

次に作成したCommonアプリの中に、
必要なリソース（Skin,Components等）を作成していきます。

V9.5.5で新しく追加された、Style Constantsを使ってアプリの全体テーマを決めましょう。

Style Constantsの使用方法については、別記事でまとめているため詳しい説明は省きます。
作成方法について知りたい方は以下も併せてご確認ください。

Themes->Style Constantsのメニューを開き、
Colorメニューを右クリックします。
新しいカラーを作成したいので、Add Newをクリックします。

4つの色を設定するので、4つ新しいカラーを作成します。
それぞれのNameとColorの設定は以下のように作成しました。

Name	カラーコード
firstColor	`#2B3467`
secondColor	`#BAD7E9`
thirdColor	`#FCFFE7`
fourthColor	`#EB455F`

2-1. Skin作成

次にアプリ全体で使用する背景とラベルのSkinを作成していきます。

背景のSkinはSkins->Formを右クリックし、New Skin->Skinを選択します。

SkinのNameを任意の名前に設定し、色を設定します。
これまでは、Colorを選択し直接色を設定していましたが、
Style Constants設定しておくと、Typeのプルダウンから設定済みのスタイルを選択することができます。

これでフォームの背景Skinが完成しました。

次にラベルのSkinを作成します。
Skins->Labelを右クリックし、New Skin->Skinを選択します。

右側のSkinタブでSkinの名前を設定し、カラーを決めます。
ラベルのSkinは、Style Constantsで設定したfirstColorの色を設定し、
サイズも150%に設定しました。

これでアプリ全体で使用する背景とラベルのSkinが完成です！

2-2. Component作成

アプリ全体で使用する共通のコンポーネントも作成しましょう。
どのアプリでも共通で表示する、ヘッダー部分を作っていきたいと思います。

Templates->Componentsを右クリックし、Newをクリックします。

ヘッダー部分のコンポーネントなので、ヘッダーとわかるよう以下のように名前を設定しました。

ヘッダーの高さは10%にして、ラベルのSkinは先ほど作成したsknLblTitleを設定しました。

これでComponentも完成し、MicroAppsで使用するリソースが用意できました！

3. リソースシェア方法

次にそれぞれのMicroAppがCommonに存在するリソースにアクセスできるよう設定します。

3-1. App同士を接続する

まずCommonのリソースを使用したいMicroAppを開きます。
今回はInquiryのアプリを開きます。

対象のアプリが開いたら、まずCommonアプリとの接続を行います。

Project->Link Micro Appをクリックしてアプリ一覧を開く。

Commonと接続したいので、Commonにチェックを入れてLinkボタンをクリックします。

開いていたアプリの下にLinkしたアプリが表示されたらOKです。

3-2. リソースシェアを有効にする

次にリソースを共有するための設定を行います。
ハンバーガーメニュー->Micro App Configurationをクリックします。

以下のような画面が出てくるため、
リソース共有を有効にしたいMicroAppの列にある・・・をクリック後、
表示されたメニューからEnable Resource Sharingを選択します。

ポップアップが表示されるのでConfirmをクリック。

接続が成功すると、MicroAppの名前の横にリンクアイコンが表示されるようになります。

最後にSaveボタンを押して変更を保存したら完成です。

これで他のMicroAppからCommonのリソースを参照することができるようになりました！

4. リソースを使ってみる

早速Commonで作成したリソースが、
リソース共有を有効にしたInquiryアプリでも使用できるのか確認してみましょう。

4-1. Componentを使用

InquiryのFormにCommonで作成したComponentを追加してみます。

TemplatesタブをクリックしCommonアプリの中を見てみると、
作成したComponentが表示されているのがわかるかと思います👀

配置したいコンポーネントをフォーム上にドラッグアンドドロップすると、、

見事コンポーネントを配置することができました！

リソースシェアを有効にしていない場合どうなる？🙄
Link Micro Appでアプリの接続を行うだけでもComponentやSkin等リソースを表示することはできますが、
それらのリソースを別MicroAppのフォーム上にドラックアンドドロップしようとすると、
「You are not allowed to drop formheader[FlexContainer] into ~~」のようなエラーが表示され
リソースを使用することができません。