コンポーネントオペレーションパネルの使い方

184 views

1. このガイドの概要

コンポーネントオペレーションパネルは、SmartUXおよびMagic xpaアプリケーションを開発する開発者向けに設計された一元管理のためのインターフェースです。この機能は、コンポーネントの名称変更、移動、削除、追加を円滑に実行できる統一された操作を提供することで、コンポーネントを管理できるワークフローを効率化します。

主なメリット

  • 統一管理: すべてのコンポーネント操作に対する一元集約型の制御
  • 同期化: SmartUX Angular コンポーネントとxpaフォーム間の自動同期
  • 効率性: 手動でのファイル管理を排除し、エラーを削減
  • ワークフロー統合: SmartUX Studioとxpa Studioの円滑な統合

システム要件

  • SmartUX Studio
  • Magic xpa Studio
  • Angular コンポーネントとxpaプログラムを含む作業可能なプロジェクト

2. 開始手順

次の手順で操作します。

2.1 パネル インターフェースの概要

コンポーネントオペレーションパネルには、2つの主要なセクションが表示されます。

  • Angular コンポーネント: SmartUX プロジェクト内の既存のコンポーネントを表示します
  • xpaプログラム: 対応する xpaプログラムとその同期状態を表示します

2.2 コンポーネントオペレーションパネルへのアクセス

  1. SmartUX Studio を起動し、プロジェクトの作業スペースに移動します
  2. 左側のサイドバーでコンポーネントを探します
  3. コンポーネントパネルのヘッダーにある歯車アイコンをクリックします
  4. コンポーネントオペレーションパネルがモーダルダイアログとして開きます

コンポーネントオペレーションパネルは効率的な確認と要素との相互関係のために必要なツールを提供します。

3. コンポーネントオペレーションパネルの概要

ではコンポーネントオペレーションパネルではどのようなことが可能で、ボタンにはどのような機能があるのか確認します。

3.1 インターフェース要素

コンポーネントオペレーションパネルには、以下のインターフェース要素が表示されます。

要素 説明 機能
リフレッシュボタン
コンポーネントの状態を更新します
現在のプロジェクトの状態と表示を同期します
検索バー
コンポーネントをフィルタリングします
特定のコンポーネントやプログラムを素早く検索
コンポーネント一覧
Angular コンポーネントの表示
利用可能なすべてのAngularコンポーネントを表示
プログラム一覧
xpaプログラムの表示
すべてのxpaプログラムとそのステータスを表示します
アクションボタン
操作コントロール
名前変更、移動、削除、追加機能

3.2 ステータスによるテキスト色の違い

コンポーネントとプログラムは、同期状態を示すために色分けされています。

  • 赤色: コンポーネント/プログラムに注意が必要です（対応するコンポーネントが欠如または不一致）
  • 黒色: 正常であり、標準の動作状態

4. コンポーネントの検索

検索機能を使用すると、プロジェクト内の特定のAngularコンポーネントとxpaプログラムを素早く見つけられます。

4.1 Angularコンポーネントを検索する手順

  1. セクション2.2の手順に従って、コンポーネントオペレーションパネルを開きます
  2. Angular コンポーネント側の上部にある検索バーを探します
  3. 検索したいコンポーネントの名前または一部を入力します
  4. 入力中にフィルタされた結果を表示します

4.2 xpaプログラムを検索する手順

  1. コンポーネントオペレーションパネルの「xpaプログラム」側に移動します
  2. xpaプログラム側の検索バーを使用してください
  3. プログラム名または部分的な識別子を入力してください
  4. 表示されたフィルタリング結果を確認してください

5. コンポーネントの名前変更

コンポーネントの名前変更は、Angular コンポーネントとその対応するxpaフォーム間の同期を同時に行います。この操作は、xpa Studio でフォーム名を変更した場合に必須です。

5.1 コンポーネントの名称変更を行うタイミング

  • xpa Studioでxpaフォームの名前が変更された場合
  • プロジェクト間の名前衝突を解決する場合

5.2 名前変更の手順

フェーズ1：XPA Studioでの準備

  1. Magic xpa Studio を起動します
  2. 対象のフォームが含まれるプログラムに移動します
  3. フォームのプロパティを探し、フォーム名を変更します（例： “Welcome” を “MyWelcome” に変更）
  4. 変更内容をxpa Studioに保存します

フェーズ2: SmartUX Studioでの更新

  1. SmartUX Studio に切り替えます
  2. コンポーネントオペレーションパネルを開きます
  3. リフレッシュボタンをクリックしてコンポーネントの状態を更新します
  4. 赤色でハイライト表示されているコンポーネントを特定します（赤色は不一致を示しています）

フェーズ3: リネーム操作の実行

  1. Angular コンポーネント側でターゲット コンポーネントを検索します
  2. コンポーネント名の横にある「名前を変更」ボタンをクリックします
  3. ポップアップダイアログに新しいコンポーネント名を入力します（XPA フォーム名と一致させる必要があります）
  4. 名前がXPAフォーム名と完全に一致していることを確認します
  5. 変更を確認するために「保存」をクリックします

フェーズ4: 確認と完了

  1. 表示される確認ダイアログを確認してください
  2. 「はい」をクリックしてリネーム操作を実行します
  3. 操作が完了するまでお待ちください
  4. 「完了」をクリックしてコンポーネントオペレーションパネルを閉じます

5.3 リネーム後の検証

名前変更操作を完了した後に行います。

  1. コンポーネント パネルに戻ります
  2. コンポーネント名が更新されていることを確認してください
  3. 関連するすべてのファイルが適切にリネームされていることを確認してください
  4. TypeScript との紐づけが自動的に更新されていることを確認します

5.4 コンポーネントオペレーションパネルを閉じた後

まずはエラーが出るはずです。それはHTML上でのコンポーネント名は自動で書き換わらないからです。

  1. 名称変更したコンポーネントのテンプレートを開きます
  2. 中央ペインの下部にあるテンプレート画面を確認します
  3. コンテナタグ内に変更前のコンポネント名（[magic]=”mgc.コンポーネント名”）が表示されていることを確認します
  4. 変更後の名前に変更してください。この作業は手動入力になります。
  5. 右ペインのモデルでは注意事項が表示されます。「データモデルが更新されました.無効なマッピングを削除するには次をクリックしてください：ここ」表示の「ここ」をクリックして更新してください。

6. コンポーネントの移動

コンポーネントの移動操作はxpa Studio側で、対応するxpaプログラムが別のフォルダーに移動された際に、SmartUX側でもコンポーネントの配置を移動することです。

6.1 コンポーネントとフォルダーの関係を理解する

SmartUXのAngularコンポーネントは、xpaプログラムフォルダーと直接リンクされています。xpaプログラムを異なるフォルダーに移動した場合、対応するAngularコンポーネントとそのモジュールを更新して同期を維持する必要があります。

6.2 手順ごとの移動方法

フェーズ1: xpa Studioでプログラムを移動する方法

  1. Magic xpa Studioを開きます
  2. 対象のxpaプログラムに移動します
  3. プログラムリポジトリ画面内でフォルダーの項目を、現在のフォルダーから目的のフォルダーへ選択肢を変更してプログラムを移動します（例：MainWCからMyFolderへ）
  4. Escキーで変更を保存します

フェーズ2: SmartUX側ではxpa側で移動したコンポーネントを特定する

  1. SmartUX Studio に切り替えます
  2. コンポーネントオペレーションパネルを開きます
  3. 右上のリフレッシュボタンをクリックして状態を更新します
  4. 赤色でハイライト表示されているコンポーネント（フォルダーの不一致を示しています）を探します

フェーズ3：移動操作を実行

  1. Angular コンポーネント側で目的のコンポーネントを探します
  2. コンポーネント名の右横にある「移動」ボタンをクリックします
  3. 「移動先」のドロップダウンメニューから目的のフォルダーを選択してください
  4. フォルダーがxpaプログラム側と一致していることを確認してください
  5. 「保存」をクリックして移動操作を確認してください

フォルダ移動の際にxpa側で新しくフォルダを作成して移動した場合、新規フォルダ名が「３」の手順で出現しません。

後ほど解説する「8　新しいコンポーネントの追加」をご参考にしてコンポーネントを追加すると、新規フォルダも同時に追加されます。

フェーズ4: 確認と完了

  1. 上記作業後に保存ボタンをクリックすると確認が現れます
  2. 「はい」をクリックして移動を実行します
  3. 操作が完了するまでお待ちください
  4. 「完了」をクリックしてコンポーネントオペレーションパネルを閉じます

6.3 移動後の検証

  1. コンポーネントオペレーションパネルに移動します
  2. モジュールフォルダーを展開してください
  3. コンポーネントが変更したフォルダー位置に表示されていることを確認してください
  4. すべてのファイルパスが自動的に更新されていることを確認してください

7. コンポーネントの削除

削除方法は、Angular コンポーネントとその関連する全てのファイル、および紐づいた連携を完全に削除するための総合的な方法です。

7.1 コンポーネントを削除するタイミング

  • プロジェクトでコンポーネントが不要になった場合
  • コンポーネントの構成を統合または設計の見直しや再構成する場合
  • 廃止された、または古い機能を削除する場合

7.2 削除手順

フェーズ1: 削除対象のコンポーネントを特定する

  1. コンポーネントオペレーションパネルを開きます
  2. Angular コンポーネント側で対象コンポーネントを特定します
  3. 削除は注意するべき作業のため、選択するコンポーネントが正しいことを確認します

フェーズ2: 削除操作の実行

  1. 対象コンポーネントの横にある「削除」ボタンをクリックします
  2. すると確認ダイアログが出現するので、削除警告を確認します
  3. この操作により、以下の内容が削除されます:
    • コンポーネントファイル
    • 関連する TypeScript の連携
    • モジュール参照
    • テンプレートファイル
  4. 「確認」をクリックして削除を実行します

フェーズ3: 削除結果の確認

  1. 削除後にコンポーネントオペレーションパネルを確認してください
  2. 削除されたコンポーネントは、xpaプログラム側の名前が赤色でハイライト表示されます
  3. この状態はxpaプログラムが利用可能ですが、対応する Angularコンポーネントが存在しないことを示します

7.3 削除後の確認

  1. コンポーネント パネルに戻ります
  2. 対象のコンポーネントが一覧に表示されなくなったことを確認してください

8. 新しいコンポーネントの追加

「コンポーネントの追加」機能を使用すると、現在対応するAngularコンポーネントか、既存のxpaプログラムに基づいて、新しいAngularコンポーネントを作成できます。

8.1 コンポーネントを追加するタイミング

  • 新しいxpaプログラムにAngularコンポーネントの対応が必要になった場合
  • 以前に削除されたコンポーネントを再び追加する場合
  • プロジェクトの機能を新しいコンポーネントで拡張する場合

8.2 追加手順

フェーズ1: 利用可能なXPAプログラムを特定する

  1. コンポーネントオペレーションパネルを開きま
  2. xpaプログラム側を確認します
  3. 赤色でハイライト表示されているプログラム（対応するAngularコンポーネントがないことを示す）を特定します

フェーズ2: 追加操作を開始

  1. 対象のxpaプログラムの横にある「追加」ボタンをクリックします
  2. 「プログラムの追加」ダイアログが開きます
  3. 利用可能なコンポーネントテンプレートを確認します
    • 共通機能を備えた事前設定済みテンプレート
    • カスタム開発用の空白(Blank)テンプレート

フェーズ3: テンプレートを選択して作成

  1. 利用可能なオプションから好みのテンプレートを選択してください
  2. テンプレートの説明を確認し、要件を満たしていることを確認してください
  3. 「完了」をクリックして新しいコンポーネントを作成します
  4. 作成プロセスが完了するまでお待ちください

フェーズ4: 追加の確認

  1. コンポーネントオペレーションパネルを確認してください
  2. 新しいコンポーネントがAngularコンポーネント側に表示されていることを確認してください
  3. 「完了」をクリックしてパネルを閉じます
  4. コンポーネント オペレーションパネルに移動
  5. 新しいコンポーネントが一覧に表示され、アクセス可能であることを確認します

9. 最適解とヒント

同期の最適解
  • 操作を行う前に、必ずコンポーネントオペレーションパネルを再読み込みしてください
  • SmartUX Studio に切り替える前に、xpa Studio の変更が保存されていることを確認してください
  • xpaフォームとAngular コンポーネントの間でコンポーネント名が完全に一致していることを確認してください
  • 両プラットフォーム間で一貫した命名規則を使用します
  • 関連する操作をグループ化してパネルの開閉を最小限に抑えます
  • 大規模なプロジェクトで多くのコンポーネントがある場合、検索機能を使用します
  • 主要な操作後にコンポーネントの機能をテストします
  • 作業を進める前に必ず確認すること
  • 主要なコンポーネントの再構成前にバックアップを作成してください
  • xpaとSmartUX間のフォルダー構造が一致していることを確認してください
  • 削除前にコンポーネントの依存関係を確認します
  • コンポーネントの変更内容をチームメンバーに共有してください
  • バージョン管理システムを使用してコンポーネントの変更を追跡しましょう
  • 一貫性を保つための命名規則を確立してください

10. トラブルシューティング

よくある問題と解決策

問題：リフレッシュ後にコンポーネントが赤色で表示される

原因: XPAプログラムとAngularコンポーネントの名称不一致である可能性があります

解決策: ファイル名やコンポーネントの場所を同期させるため、リネームまたは移動操作を使用してください

原因：コンポーネントが存在しないか、検索語句を厳密に特定しすぎている可能性があります

解決策：検索フィールドをクリアし手動で閲覧するか、スペルを確認してください

原因:Angularコンポーネントが既に存在している可能性があります

解決策: Angularコンポーネント側で既存のコンポーネントを確認してください

原因: ファイルシステム権限またはロックされたファイルの可能性があります

解決策: 他のアプリケーションでファイルが開かれていないことを確認し、権限を確認してください

結論

コンポーネントオペレーションパネルは、SmartUX開発環境におけるコンポーネント管理を大幅に効率化する強力なツールです。これらの操作をマスターすることで、開発者はxpaプログラムとAngularコンポーネント間の同期を向上させ、手動エラーを削減し、全体的な開発効率を向上させることができます。

追加のサポートや高度な設定オプションが必要な場合は、システム管理者にお問い合わせいただくか、SmartUXの公式ドキュメントをご参照ください。

ドキュメントバージョン: 1.0

最終更新日: 2025年7月23日

対応バージョン: SmartUX Studio (2.0.1)、Magic XPA Studio (4.11)

Share this Article

コンポーネントオペレーションパネルの使い方

Or copy link

CONTENTS

Powered By Magic Software Enterprises