目次

1. はじめに
2. 完成イメージ
3. 実装方法
4. 最後に

はじめに

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

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

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

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

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

完成イメージ

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が表示されているのがわかるかと思います👀

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

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

4-2. Skinを使用

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

skinFormBGを設定すると、
Backgroundで設定したStyle ConstantsのTypeも自動的に反映され、
Commonのリソースが正常に共有できていることがわかりますね！

完成した画面がこちらです。

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

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

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

App名	リソースシェア設定	完成した画面
Delivery
Order

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

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

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

例えば、ラベルの背景色が白色になっていたので、背景を透過するよう修正を加えるとします。

ThemesタブでCommonを開き、修正対象のskinLblTitleを選択します。
背景が透明になるよう、Opacityを100->0に変更しました。

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

また、Commonを単独で開いてみると、Common本体にも変更が適用されていることがわかります。

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

最後に

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

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

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

参考