ITの活用が不可欠となった現代のビジネスにおいて、業務に用いるシステム・アプリケーションの開発・運用は極めて重要なミッションといえる。変化し続ける市場のニーズに対応するためには、ウォーターフォール型で時間をかけて構築する開発手法だけでなく、より現場に近いところでアジャイルに開発する手法も適材適所で取り入れていく必要があるだろう。特に昨今では、PCやスマートフォン、タブレットなどマルチデバイスで使えることが求められており、柔軟かつ迅速に業務アプリケーションを構築できるローコード開発ツールへの注目が高まっている状況だ。
そこで本稿では、Web、モバイル、およびデスクトップのビジネスアプリケーションを簡単・スピーディに作成できるローコード開発プラットフォーム「Magic xpa Application Platform」（以下Magic xpa：マジックエックスピーエー）に改めて注目。
TECH+編集部では以前に、Magic xpaハンズオンセミナーを受講させていただき、ローコード開発ツールのリポジトリベースによる開発手法を体験させてもらっているのだが、実は新たに、Magic xpa の中にAngularベースのアプリケーションが開発できる新機能Web Clientがリリースされたそうだ。
Magic xpaハンズオンセミナー体験記事はこちら
「コードを書かないプログラミングMagic xpaの開発を体験」そこで今回、HTMLのコードが少しわかる程度のTECH+ 制作担当者が、Angularフレームワークを意識しなくても、Web Clientで生成したコードをベースに、UI/UXをノーコードで容易に作成できる「SmartUXエディタ」のハンズオンセミナーを受講したので、導入実績豊富なローコード開発ツールに触れた感想と、実際のセミナー内容を紹介していきたい
講師紹介
マジックソフトウェア・ジャパン コンサルティング事業部
アプリケーション部 コンサルタント札幌営業所
斎藤 誌乃氏
「Magic xpa」項目を選択するだけでプログラムを作成
業種や規模を問わず、国内45,000社以上の多様な業種の企業に導入されているローコード開発ツール「Magic xpa」は、クライアント/サーバーからWebブラウザ、RIA（Rich Internet Application）、さらにシングルページアプリケーション（SPA）まで、多様なアプリケーションを構築することができる。今回参加した「Magic xpa SmartUXハンズオンセミナー」では、ドラッグ＆ドロップで画面をデザインできる最新機能「SmartUX」の使い方をオンラインで体感しながら、Magic xpaを用いたシングルページアプリケーションの構築方法が解説された。講師は、マジックソフトウェア・ジャパン コンサルティング事業部 アプリケーション部 コンサルタントの斎藤 誌乃さんだ。
「今回は、PCやスマートフォンのブラウザから利用できるWebアプリケーションを構築する一連の流れを紹介したいと思います」という斎藤さんの言葉で今回のハンズオンセミナーは幕を開けた。5章構成で展開され、1章ではローコード開発ツールのMagic xpaと、Web画面デザイナーとして開発された「SmartUX」の概要を紹介、続く2章では、実際に「SmartUX」を用いて画面を作成する手順を体験する流れだ。
「以前は、Web画面をデザインする際にHTMLやCSS、 JavaScriptのコードを書く必要がありましたが、最新のMagic xpaに標準搭載されているWeb UIエディタのSmartUXを使うと、ドラッグ＆ドロップの直感的な操作で画面を作れるようになりました。まずは実際に手を動かして、SmartUXで2つの画面を作成してみましょう」（斎藤氏）
最初のステップとして、ユーザーIDとメッセージで構成される簡単な入力画面の作成がスタート。開発の手順はMagic xpaで行う「①プロジェクトの作成」「②Web Clientでのプログラム作成」とSmartUXで行う「③アプリケーションテンプレート適用」「④項目間マッピングデザイン更新」で、斎藤さんの指示のもと、②～④を体験することになった。
Magic xpa Studioを起動してあらかじめ用意されているプロジェクトを開き、画面左のナビゲーター画面の「リポジトリ」から「プログラム」をダブルクリック。「Hello」と名前をつけてプログラムを追加し、タスク特性画面の「タスクタイプ」から「Web Client」を選択。これで作成したプログラム（タスク）がWeb Clientバージョンになる。続けて「データビュー」タブで「UserId」「UserMessage」という2つの変数を作り、モデル一覧から部品を選択する。さらに「式」画面を開いて「マジック」と「ハロー」と文字を代入。
-
ナビゲーター画面の「リポジトリ」から「プログラム」を開き、「Hello」と名前をつけてプログラムを追加
-
タスク特性を「Web Client」へ変更
-
「UserId」「UserMessage」の2つの変数を作成
続いて「フォーム」タブを選択して「Hello」をダブルクリックして画面を表示し、そこに「UserId」と「UserMessage」をドラッグ＆ドロップして配置。「プログラムリポジトリ」画面に戻って変更内容を保存する。さらに「インターフェイス」タブでの設定や、「MainRouting」プログラムの設定変更などを行い、②のプログラム作成を完了させる。
-
「UserId」と「UserMessage」をドラッグ＆ドロップで配置
ここまでほとんどの操作は、マウスや簡単なキーボード入力で行っており、プログラムを作成しているという感覚は感じなかった。直観的な操作が可能なため、プログラミング未経験でも十分触りやすいだろう。
ドラッグ＆ドロップでWeb画面をデザイン、SmartUXがユーザー体験の向上に繋がる
Magic xpaでのプログラム作成が終わったら、「SmartUX」を起動して画面を作り込んでいく。画面上部の「Web」メニューから「SmartUX Studioで開く」を選択。「SmartUX」の画面が表示されたら、画面左（左ペイン）から書類アイコンを選択し、コンポーネント（フォルダ一覧）を表示させる。ここに先ほど作成した「Hello」プログラムを追加し、テンプレートの選択画面から「Blank Template」を選択して、コンポーネントの追加と、③のテンプレート適用を完了させる。
さらに「MainRouting」の「ルートの追加」から、プログラムに「Hello」を選択したら、いよいよ画面デザインに着手。画面右（右ペイン）の「プロパティシート」→「コンテナ」「イベントデータ」→「Form Name」に「mgc.Hello」を選択したら、画面中央の「コンテナ」欄に、画面左の「UXウィジェット」からウィジェット（部品）をドラッグ＆ドロップして追加し、入力フォーム画面を作成していく。
-
赤枠内のウィジェットをドラッグ&ドロップで画面中央のコンテナ内へ配置していく
今回の作業で使用した以外にもさまざまなウィジェットが用意されており、デザインの自由度はかなり高いと感じられた。作業が終わったら保存し、「ライブプレビュー」画面で確認。実際のWeb画面で作成したデザインが表示されるのは感動的で、簡単に入力を進めただけでここまでの画面が完成することに驚いた。ウィジェットの配置だけでUIを決定していけるため、実際のWebアプリケーション開発の際も満足度はかなり高いだろう。
今回のハンズオンセミナーでは、入力画面に続いて「TODOリスト」プログラムの画面デザインも体験できる。こちらもあらかじめプログラムが用意されていたため、「SmartUX」で中央のキャンバス画面にコンテナを配置し、ウィジェットをドラッグ＆ドロップして画面の作成を進めていく。先ほどより複雑な画面のため、手間と時間はかかったが、基本的な手順は同じで、設定項目やウィジェットの内容を理解すれば、自由にWeb画面をデザインできる手応えを感じられ、もっとさまざまなデザインを試してみたくなった。
-
実際に制作したTODOリスト
システム/アプリケーション開発のリードタイムを短縮、Magic xpaの仕組みに迫る
2章では、主に「SmartUX」を使った画面デザインを実践してきたが、第3章では、プログラム側、すなわちMagic xpaの仕組みが紹介された。斎藤さんは、Magic xpaでアプリケーションが早く作れる理由について、次のように解説してくれた。
「Magic xpaでは、アプリケーション開発に必要なすべての情報が「リポジトリ」に格納されます。共有項目や共通部品の設計・定義を格納する「モデルリポジトリ」と、データレイアウトの設計を格納する「データリポジトリ」、そしてロジックや画面フォームの定義など実行プログラムの設計を格納する「プログラムリポジトリ」の3つは、継承・自動変更機能でリンク。１カ所の変更が即座に全体に反映されます。また関連性を検索するクロスリファレンス（影響分析）も容易で、プログラミング言語と比べて作業量は大幅に少なくなります」（斎藤氏）
Magic xpaの開発生産性は、一般的に使われるプログラミング言語よりも優れていると斎藤さん。セミナーでは、PostgreSQL＋PHPでのトランザクション（処理）とMagic xpaのリンク定義を使ったトランザクションの違いが提示され、開発リードタイムの短縮につながっていることが説明された。
さらにセミナー後半では、ペットショップ・テンプレートで作られた実際のWebシステムを用いて、Magic xpa Web Clientで何ができるのか、どうやって構築できるのかを解説。Web Clientで開発する際、作り方の指針となるように構築されたサンプルアプリケーションはシンプルでわかりやすく、伝票入力や受注グラフの表示といったデモからは、Webアプリケーション開発における、「Magic xpa＋SmartUX」の有用性が強く感じられた。
-
デモサイトTOPページ。レイアウトはSmartUXで作成されている。
-
受注内容を登録できるデモ画面。伝票番号検索や顧客コードの一覧表示など、実用的に仕上げられている。商品名や数量を選択して受注を入力することが可能だ。
斎藤さんは、「マスターすれば、これ1本でアプリケーションが作れます」とMagic xpa Web Clientの実力に太鼓判を押す。さらにクラウドベースの展開やマルチデバイスに対応するなど、モダンなアプリケーション開発に必要な要素が網羅されていると力を込め、最後に次のような言葉でハンズオンセミナーを締めくくった。
「今回のハンズオンでは、Magic xpaがローコード開発プラットフォームであり、Webシステム（アプリケーション）の開発を迅速に実行できるように設計されていることを説明いたしました。Magic xpa、及びSmartUXを通じて、皆さまのビジネスが成功しますことを切に願っております」（斎藤氏）
システム開発パートナーの業務効率化から、ユーザー企業のシステム開発内製化まで幅広く支援
ハンズオンセミナーを実際に受講して分かったのは、想像以上に簡単にWebアプリケーションの開発が行えることだ。確かにローコードツールである以上、多少の知識が必要になる場面も存在するが、それでもプログラミング経験がゼロであるTECH+の制作担当が参加しているなかで、今回のセミナー中に難しいと感じるポイントは無かった。さらに、実際に導入してさまざまなアプリケーションを開発していくために、Magic xpaの各種トレーニングも用意されている。
しかし、Magic xpaの強みはこれだけではない。というのも今回のハンズオンセミナーは、Magic xpaのWeb Client機能でできることを紹介していたが、実はMagic xpa自体は、ミッションクリティカルな基幹システムの構築や、レガシーシステムの再構築・マイグレーションも可能な総合開発プラットフォームであり、ドラッグ＆ドロップの直感的な開発手法とコーディングを組み合わせることで、複雑なシステム要件にも対応できるのだ。
近年では、市場に浸透してきたノーコードツールと混同して、ローコードツールを「プログラムのスキルがなくてもシステム・アプリケーションを開発できるが、簡単なものしか作れない」ものと捉える向きもあり、実際にそのようなツールも存在するが、Magic xpaは、それとはまったく異なるコンセプトで開発された製品となる。“プロの開発者を手助けする”ことも重視しており、それがユーザー企業はもちろん、システム開発会社にも愛されてきた理由といえる。
今回のハンズオンセミナーで解説された「SmartUX」については、Magic xpaプログラムは書けるが、Webデザイン、HTMLやJavaScriptの部分でつまずいているという開発パートナーの声に応えて開発された機能だそうだ。開発パートナーからエンドユーザーまで、数多くの企業が35年以上にわたり活用してきた実績のあるMagic xpaは、以前から利用しているユーザーにとってはクライアントサーバー型システムの開発ツールという印象が強いとのことで、市場の要求に合わせてバージョンアップを重ねた結果だという。
そうしてMagic xpaは、基幹システムからWebアプリケーションまでアジャイルに構築できるローコード開発ツールとなって、ユーザー満足度の高いシステム・アプリケーションを開発したいというニーズに応えてくれる製品となっている。
Magic xpaは、昨今のITトレンドといえる「内製開発」を実現するためのプラットフォームとしても有効だ。とはいえ、今回のようにコードを書いた経験がないまったくの初心者、たとえば現場の業務部門がシステム開発にチャレンジするといった場合には、複雑な基幹システムにも対応したローコードツールなだけに、準備無しで取り組むと挫折してしまう可能性も否めない。
そこでマジックソフトウェア・ジャパンでは、Magic xpa基礎やトランザクション、Web Client基礎などのトレーニングコースを用意している。さらにその後は、経験豊富な開発パートナーに伴走してもらうことで、ノウハウやスキルを蓄積していきながら内製化を図るという段階的なアプローチを推奨している。パートナー企業の支援を受けながら実際にMagic xpaを活用していくことで、最終的にアプリケーション開発を自走して行えるようになっていけるだろう。
また、すでにコーディングのスキルを持ったエンジニアを確保しているといったケースにおいても、部品の共通化やクロスリファレンスなど、システム開発の工数を削減できる機能が使えることは見逃せないメリットだ。実際、ハンズオンセミナーやトレーニングプログラムに参加し、使用中のローコードツールから、Magic xpa への乗り換えを検討する企業は少なくないという。
アジャイルで効率的な開発環境を構築してビジネスを加速させたいシステム開発会社や、システム・アプリケーション開発の内製化を押し進めたいユーザー企業は、まずWebサイトから申し込みできる無料のハンズオンセミナーに参加して、Magic xpaを体感してみてはいかがだろうか。
Windows 11スタートメニューの大幅アップデート正式発表、Microsoft
