#Magic xpaとは？
Magic xpa Application Platform (以下、Magic xpa)は、ローコード開発ツールといわれる開発ツールのひとつです。言語によるコーディングが不要で、アプリケーションの設計情報（モデル、テーブル、ロジック、画面設計など）をリポジトリに定義することで業務アプリケーションを開発できます。
「Magic xpa」の最新バージョン、「Magic xpa 4.6」のWeb Client機能により、Magic xpaで開発した業務アプリケーションのWeb UI部をAngularプロジェクトとして自動生成できるようになりましたので、その概要ついてご紹介します。
Web Client機能の特長
- Angularを搭載したSPA型のWebアプリケーションを簡単に作成できます
- ローコード開発により、高品質、スピーディーにSPA型のWebアプリケーションを構築できます
- １クリックだけで、Magic xpaで定義されたリポジトリ情報を元にAngularプロジェクトを自動生成します
- 純粋なJavaScript、HTML5、およびCSS3で構成され、ブラウザから動作します
- Angularの豊富な機能、ライブラリ、HTML5の技術をフル活用できます
###Web Clientを利用するための準備
以下のものを、インストールします
1．Node.js
https://nodejs.org/en/download/
2．Angular CLI（※現在はAngular v8推奨）
コマンドを実行→npm install -g @angular/cli@8.3.25
3．Visual Studio Code
https://code.visualstudio.com/
4．Chromeブラウザ
5．Magic xpa 4.6
###Web Client 開発の大まかな流れ
-
Magic xpaでのプログラミング
- Magic xpaの開発環境（IDE）である、Magic xpa Studioで業務アプリケーションを作成します
- ロジックの開発はMagic xpaでローコード開発で行います（各リポジトリを定義）
- Magic xpa Studioの[Webアプリケーションの作成]を利用して画面のレイアウトを生成
- ＊.css、＊.ts、＊.html の3ファイルが生成されます
- 生成された画面コントロールとロジックとの紐づきは保持されています
- コントロールの位置、大きさ、色などの設定はここではできません
-
外部エディタでの画面完成
- 上記で自動生成されたAngularプロジェクトをベースに画面を編集します
- ＊.css と ＊.html を外部エディタで編集（Visual Studio Code 推奨）し、UIデザインを仕上げます
##まとめ
Magic xpaのWeb Client機能により、B to B、B to Cの向けのSPA型のWebアプリケーションを効率よく作成することができます。UIデザインにはAngularの自由さを活かしながら、DB定義やバックエンド処理ロジック、Web UI間のセッション管理や暗号化、などはローコードで高速に開発することができます。