MENU

ミガロ.の「Valence AI Assistant」 ~ローコード開発ツールに生成AIを統合し、自然な日本語の記述だけでWeb/モバイルアプリケーション開発

ローコード開発の方法が
画期的に進化      

Valenceは、ミガロ.が2018年から販売するWeb/モバイルアプリケーション開発ツールである。①データソースの作成、②ウィジェットの作成、③アプリケーションの作成、という3つのステップでコーディングなしに開発が行え、さらに業務部門などのニーズにあわせて細かく作り込みたい場合はRPGプログラムとの連携も可能という「IBM i対応のローコード開発ツール」である(図表1)。

図表1 Valenceはウィジェットに従って3ステップで開発
図表1 Valenceはウィジェットに従って3ステップで開発

そのValenceが最新のバージョン 6.3で「Valence AI Assistant」と呼ぶ生成AI機能を搭載し、ローコード開発の方法を画期的に進化させた。このレポートではValence AI Assistantの機能を中心に、新しいWebアプリケーション開発の方法を紹介してみたい。

なおValence 6.3ではValence AI Assistantのほかに、新機能や既存機能の拡張・修正が多数あるが、本レポートではValence AI Assistantに絞って紹介したい。

最初に、従来のValence(バージョン 6.2以前)がバージョン 6.3となり、Valence AI Assistantを搭載して開発の方法がどう変わったのかを見ていこう。

Valence 6.2までの
ローコード開発手法  

冒頭で触れたように、Valenceは3つのステップでWeb/モバイルアプリケーションを開発できる。バージョン 6.2までは以下の手順で開発してきた。

①データソースの作成

アプリケーションで利用するファイルなどを選択し、使用するフィールドなどを定義するステップである。

初めに、データソースとなるファイルを選択する。選択可能なファイルとしては、受注ファイルや得意先マスターといったIBM i上のデータベースファイルに加えて、IBM i上のクエリー定義やSQL Server、MySQLなどのオープン系データベースのテーブルでもよい。またファイルは1つだけでなく複数を選択でき、結合条件を指定して表示項目や抽出条件、並び順などを登録することができる。

データソースの作成はウィザードに従って下記の(1)→(7)の順に進める。項目の選択や指定だけで済み、コーディングは不要である。

(1)データ元となるファイルの選択
(2)複数ファイルを使用する場合、結合条件を指定
(3)データベースから必要な項目(カラム)を選択
(4)レコードの抽出条件を指定
(5)項目単位で数値またはカウンター集計などを指定
(6)昇順、降順、出力順などを指定
(7)設定条件を実行してデータをプレビュー表示

②ウィジェットの作成

このステップは、①で作成したデータソースの表示形式を決めるための作業で、ウィジェットを選択し、ウィジェットごとに見せ方などの調整を行う。たとえば、表形式で表示させたい場合は「グリッド」を選択し、項目名や並び順を調整する。

ウィジェットは現在16種類ある。グリッド、地図、フォーム、カレンダー、タイル、タイムラインといったUIウィジェットと、円、棒、折れ線、ゲージなどの6種類のグラフウィジェットである。

③アプリケーションの作成

③は、②で作成したウィジェットを画面に配置し、アプリケーションを完成させるステップである。配置したウィジェットに対して、「行」をクリックしたときのアクション(処理)や、ウィジェットが複数ある場合の連携方法などを設定する。

以上でWebアプリケーションの作成は終了である。一般的なWebアプリケーションであれば、ノーコードで①~③を作成できる。

また、企業独自の業務ロジックやValence標準の機能では実現できない機能を追加したい場合は(たとえば、受注ファイル更新時の在庫ファイル同時更新、独自ルールに基づくエラーチェックなど)、RPGでコーディングし実装可能である。

Valence AI Assistantによる
ローコード開発手法   

Valence 6.3に搭載されたValence AI Assistantは、3ステップの開発という特徴は継承しつつ、各ステップにおける開発方法を革新的に一変させている。ここでは、①のデータソース作成に着目して紹介する。

データソース作成の初期画面から「データソースの作成を手伝ってください」部分をクリックするとValence AI Assistantが起動する。初めにデータソースに必要となるファイルを選択し、あとはどのようなデータソースを作成したいかを文章で記述すれば目的のデータソースを作成できる。この記述は「受注ファイルを顧客コード、受注番号順にすべての項目を抽出してほしい」といった自然な日本語でよい。

従来は、データ元とするファイルにどのような情報を含まれるのかフィールド構造の知識が不可欠だったが、Valence AI Assistantでは作成したいデータソースの内容を記述するだけでAIが構造を解析し、データソースの定義を提案してくれる。

末尾に、Valence AI Assistantによるデータソース作成の手順をまとめた(図表3〜図表18)。開発方法が一変していることを確認できるだろう。

データソースが完成すれば、あとは従来どおり、②ウィジェット作成と③アプリケーション作成へと進めば作業は終了である。 

なお、これらのステップにおいても、設定に若干手間がかかる工程についてはAIがアシストしてくれる。たとえばフォームウィジェットのレイアウト作成や、ブラウザ上に追加するロジックのスクリプト(JavaScript)作成などにValence AI Assistantを利用できる。

柔軟なアーキテクチャと
実データを公開しないセキュリティ 

Valence 6.3は3つの要素で構成されている。IBM i上の「Valence 6.3」と、クラウド上の「Valence AIサービス」、クラウド上の「大規模言語モデル」(生成AI)の3つである(図表2)。

図表2 Valence AI Assistantのシステム構成
図表2 Valence AI Assistantのシステム構成

Valence AI Assistantは、IBM i上のValence 6.3に統合されている生成AI用のソフトウェアである。開発者はValence AI Assistantを起動して、対話式にやり取りしながら開発を進めることができる。

仕組みとしては、以下の流れで処理が行われる。

❶「受注ファイルを顧客コード、受注番号順にすべての項目を抽出してほしい」といった指示文をValence AI Assistantに投入すると、リクエストはValenceからクラウド上のValence AIサービスへ送信される。

❷Valence AIサービスでは、大規模言語モデルで処理するためにValence独自の情報を付加する前処理が行われる。

❸前処理を含めた「情報」が大規模言語モデルへ送られる。

❹大規模言語モデルは「情報」の解析と回答文の生成を行う。

❺回答文は、Valence AIサービス経由で開発者のPCへ返される。

この仕組みにおけるポイントは、セキュリティとアーキテクチャの2つである。
セキュリティについては、ValenceからValence AIサービスへ送信されるデータは、ファイル名、フィールド名、説明などのメタデータに限られ、かつHTTPSプロトコルで暗号化されているという点が挙げられる。このため実データが外部に公開されることは一切なく、セキュリティが守られている。

一方アーキテクチャについては、生成AI対応ツールの“肝”である大規模言語モデルを必要に応じて切り替えられるという点が挙げられる。今回のValence 6.3では「ChatGPT-4o」(OpenAI社)を採用しているが、よりよい大規模言語モデルが登場すればいつでも切り替えられるという。大規模言語モデルは世界中で開発競争が進み、日進月歩で進化している。大規模言語モデルに柔軟に対応できるということは、Valenceの拡張性と可能性を担保するものと見ていいだろう。

Valence 6.3は、Valenceの保守契約を結んでいるユーザーであれば無償でバージョンアップできる。つまり通常のライセンスでValence AI Assistantを利用できる。生成AI対応ツールはオプションとなるケースが多い中で、これも特筆すべき点である。

Valence AI Assistantによるデータソース作成の手順

図表3 Valenceのトップページ。「App Builder」を選択してWebアプリケーション開発へ

図表4 [データソース&ウィジェット]タブを開いて、右下の[データソース作成]アイコンをクリック

図表5 上部の「データソースの作成を手伝ってください」をクリックすると、Valence AI Assistantが起動

図表6 データソース作成で対象とするファイルを指定し、[続ける]をクリック。右欄に、対象とするファイルが記載される

図表7 下段の空欄に、作成したいデータソースをふつうの日本語で記述。次に右下の「↑」(「問い合わせ」ボタン)を押すと、ファイルの解析が始まる

図表8 入力内容と対象のファイルを解析中

図表9 Valence AI Assistantが回答結果を表示。「貼り付け」を押すと、結果がデータソース作成画面に転記される

図表10 データソースの定義が作成され、右欄にデータベースの項目が表示されている。定義が完成したら、[次]をクリック

図表11 プレビューで問題なければ、データソースに名前を付けて保存

図表12 左欄のメニューより「ウィジェットの作成」から「Grid」を選択

図表13 「受注データソース」を基にGridウィジェットを設計する画面が表示される。左欄の[カラム]ではGridに表示したい項目、[設定]では見た目(UI)のカスタマイズが行える。右欄のウィジェット名を入れ、定義が完了したら、保存ボタンをクリック。「受注一覧ウィジェット」として保存される

図表14 [アプリケーション]タブを開いて、新規アプリケーション作成ボタンをクリック

図表15 [受注一覧ウィジェット]を選択

図表16 [受注一覧ウィジェット]が画面に追加される。追加後、右下の保存ボタンをクリック

図表17 [受注照会]とアプリケーション名を設定して保存

図表18 Valence Portalに「受注照会アプリ」が追加された

[i Magazine 2024 Autumn掲載]

新着