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

# 目次
1. はじめに
1. 完成イメージ
1. 実装方法
1. 最後に

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

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


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

【MicroAppアーキテクチャ入門】
- [MicroAppの概要と連携方法について](https://qiita.com/Kony_Team/items/13a337475d707ff3a59c)
- 複数App間でのリソース共有方法について（👈今回のパート）
- [複数App間で画面遷移を行う方法について](https://qiita.com/Kony_Team/items/d88043af3e5736dadc2a)
- [Foundry Appとの連携方法について](https://qiita.com/Kony_Team/items/7bb8f40d8502badc0b01)

# 完成イメージ

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

![スクリーンショット 0005-03-08 16.53.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6eeebd8f-9d51-3743-7cd3-2b537606f93e.png)




# 実装方法
では早速作っていきましょう！

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

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

https://qiita.com/Kony_Team/items/13a337475d707ff3a59c


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

![スクリーンショット 0005-03-07 16.33.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/48b30c84-a080-69e7-8cb6-340ce5d89d08.png)

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

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

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

https://qiita.com/Kony_Team/items/aefc3e2d4e25662670d4

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

![スクリーンショット 0005-03-08 16.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/aac29db5-6f00-8832-cae0-13255bc24238.png)

4つの色を設定するので、4つ新しいカラーを作成します。
それぞれのNameとColorの設定は以下のように作成しました。
|Name|カラーコード|
|---|---|
|firstColor|`#2B3467`|
|secondColor|`#BAD7E9`|
|thirdColor|`#FCFFE7`|
|fourthColor|`#EB455F`|

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

背景のSkinはSkins->Formを右クリックし、New Skin->Skinを選択します。
![スクリーンショット 0005-03-08 15.08.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dfe9576b-e79f-43aa-d114-4fa0222008ca.png)

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

![スクリーンショット 0005-03-08 15.11.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/756e6066-225d-c9d7-7803-c3407ec1076f.png)

これでフォームの背景Skinが完成しました。
![スクリーンショット 0005-03-08 15.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fde68d9d-8f91-630c-103d-e13f820b380b.png)

次にラベルのSkinを作成します。
Skins->Labelを右クリックし、New Skin->Skinを選択します。  
![スクリーンショット 0005-03-08 15.15.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/24eb9f76-9549-145f-76c3-8f86cffc6604.png)

右側のSkinタブでSkinの名前を設定し、カラーを決めます。
ラベルのSkinは、Style Constantsで設定した`firstColor`の色を設定し、
サイズも150%に設定しました。
![スクリーンショット 0005-03-08 15.17.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5f591c36-6fa8-bb94-a99d-167587334811.png)

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

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

Templates->Componentsを右クリックし、Newをクリックします。
![スクリーンショット 0005-03-08 15.23.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4f432ac6-7c01-d734-bb83-4bed7e93c37e.png)
ヘッダー部分のコンポーネントなので、ヘッダーとわかるよう以下のように名前を設定しました。
![スクリーンショット 0005-03-08 15.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/93cf2ca4-8424-deee-34ff-08c7f99ffa78.png)

ヘッダーの高さは10%にして、ラベルのSkinは先ほど作成した`sknLblTitle`を設定しました。
![スクリーンショット_0005-03-08_15_32_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/55321be6-b07c-c3dd-c20a-03bd559fa3fe.png)

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

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

### 3-1. App同士を接続する
まずCommonのリソースを使用したいMicroAppを開きます。
今回はInquiryのアプリを開きます。
![スクリーンショット_0005-03-08_15_37_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/256f4151-5527-e277-6056-424c371bcc13.png)

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

Project->Link Micro Appをクリックしてアプリ一覧を開く。
![スクリーンショット 0005-03-08 15.39.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/88c57dd4-ea82-b8f0-11c5-a14aba839dbf.png)
Commonと接続したいので、Commonにチェックを入れてLinkボタンをクリックします。
![スクリーンショット 0005-03-08 15.41.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9799e587-ab63-7203-f7ea-419befb44f57.png)

開いていたアプリの下にLinkしたアプリが表示されたらOKです。
![スクリーンショット 0005-03-08 17.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8f19696b-01cb-2237-ac9f-e437257e6dfa.png)

### 3-2. リソースシェアを有効にする
次にリソースを共有するための設定を行います。
ハンバーガーメニュー->Micro App Configurationをクリックします。
![スクリーンショット 0005-03-08 15.43.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/aa8036bd-763c-81bc-02f8-abb70853adc4.png)

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

![スクリーンショット 0005-03-08 15.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1616ae5d-e05a-f2d5-facd-3772470d66dd.png)

ポップアップが表示されるのでConfirmをクリック。
![スクリーンショット_0005-03-08_15_47_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6fb64930-1e17-94f2-914c-2c182c6586f4.png)
接続が成功すると、MicroAppの名前の横にリンクアイコンが表示されるようになります。

![スクリーンショット_0005-03-08_15_49_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/850b3dd6-67e8-ef55-ca40-d9499c6a0692.png)
最後にSaveボタンを押して変更を保存したら完成です。

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

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

### 4-1. Componentを使用
InquiryのFormにCommonで作成したComponentを追加してみます。

TemplatesタブをクリックしCommonアプリの中を見てみると、
作成したComponentが表示されているのがわかるかと思います👀
![スクリーンショット_0005-03-08_15_51_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dfbbd0c5-7c2e-4abf-a956-d88452a0bc03.png)

配置したいコンポーネントをフォーム上にドラッグアンドドロップすると、、
![ezgif-5-e04eb155b0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/54208a77-634f-e7cf-eab7-2cdfa682ee40.gif)

見事コンポーネントを配置することができました！
![スクリーンショット 0005-03-08 16.03.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c698a88c-286e-cd1a-7c00-e4ccee6dba72.png)


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

![ezgif-5-587c5c1eba.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/56cc0703-56a6-508c-a702-e416dc13ea01.gif)

他MicroAppのリソースを使用したい場合は、
忘れずMicroApp ConfigurationでResource Shareを有効にしておくようにしましょう！

:::

### 4-2. Skinを使用

Skinも同様に設定していきます。
Formを選択した状態でPROPERTIESのSkinタブを開きます。
Nameの検索ボタンをクリックすると、Commonで作成した`skinFormBG`が表示されるようになりました！

![スクリーンショット_0005-03-08_16_05_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2f4cd415-fa67-1a7b-7d93-ad560df1523b.png)

`skinFormBG`を設定すると、
Backgroundで設定したStyle ConstantsのTypeも自動的に反映され、
Commonのリソースが正常に共有できていることがわかりますね！
![スクリーンショット 0005-03-08 16.09.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/737a2acb-400f-0076-d78a-f8ef33b545eb.png)

完成した画面がこちらです。
![スクリーンショット 0005-03-08 17.09.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d8a51436-b9a1-40fb-8896-bd0b9d26e7dc.png)

InquiryアプリでCommonのリソースを利用して画面作成できたので、
DeliveryとOrderのアプリも画面を作成していきましょう！

手順は同じです。
DeliveryとOrderそれぞれのアプリからもCommonと接続を行い、リソースシェアを有効にした後
各アプリ上で画面作成を行います。

リソースシェアの設定と完成した画面はそれぞれ以下の通りです。

|App名|リソースシェア設定|完成した画面|
|--|--|--|
|Delivery|![スクリーンショット 0005-03-08 16.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6a9411c4-2efd-864c-2d3a-48defe07a701.png)|![スクリーンショット 0005-03-08 16.37.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0f40594f-2a72-a7fc-32b1-22444a8c0031.png)|
|Order|![スクリーンショット 0005-03-08 16.31.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d60c2268-1995-0f6e-b066-78a53eb61fc4.png)|![スクリーンショット 0005-03-08 16.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/90db6aca-5deb-a39a-5e42-d7c3e413c7ea.png)|

これでCommonのリソースを使って3画面のUIを作成することができました！
最後に補足説明をおこなって本パートは終了です🌱


## （補足）途中でアプリに修正を入れたい場合は？

もし、Commonアプリで設定したSkinに修正を加えたい場合、 
他Appを開いたままCommonアプリ内のSkinを修正することができます。

例えば、ラベルの背景色が白色になっていたので、背景を透過するよう修正を加えるとします。
![スクリーンショット_0005-03-08_16_11_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5dcb6d52-2501-494f-c9a9-4d1f8ef07492.png)

ThemesタブでCommonを開き、修正対象の`skinLblTitle`を選択します。
背景が透明になるよう、Opacityを100->0に変更しました。
![スクリーンショット_0005-03-08_16_13_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/80849d03-0e0a-ff40-6670-42e9450121aa.png)

Projectタブに戻り、InquiryアプリのForm1を見てみると変更が適用され、
ラベルの背景が透明になりました。

また、Commonを単独で開いてみると、Common本体にも変更が適用されていることがわかります。
![スクリーンショット_0005-03-08_16_14_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d4340ad1-dcae-2e09-2041-549d3b60310d.png)

このように、リソースシェアを有効にすると、
外部アプリから変更を行なった場合でも、本体に変更が適用されるので、
その点をよく理解した上で使用を行うようにしましょう！



# 最後に
リソースシェアの方法について説明は以上です！
今回、はじめてMicroAppのリソースシェア機能を使ってみて、
最初は戸惑う点もありましたが、慣れるとさくさく設定を行えるようになります。

複数のアプリを開いたり閉じたりする場面が多いですが、
以前のバージョンよりも起動が早く変更内容もすぐに反映されるので、
スムーズに開発を行うことができるのも良いポイントでした👍

次回はアプリ間の画面遷移方法についてご紹介していきますので、
気になる方はそちらもチェックしてみたくださいね！

# 参考
https://opensource.hcltechsw.com/volt-mx-docs/95/docs/documentation/Iris/iris_microapps/Content/MicroApp.html