Qiita Engineer Festa20242024年7月17日まで開催中！

UiPath

【UiPath】Apps&コネクションで生成AIモバイルアプリを作成する

Last updated at 2024-07-10Posted at 2024-07-10

はじめに

本記事ではUiPath Appsの新機能であるコネクション連携を使って生成AIアプリを作成してみたいと思います。出来上がりは ↓ このような感じです。
質問文を入力してボタンをクリックすると生成AIサービスからの回答が表示されるというシンプルなものですが、UiPath Appsを利用することによってローコードかつ自前でサーバーを用意せずにWebアプリの開発および運用が可能 です。

UiPath Appsとは？

UiPath Apps は、ユーザーエクスペリエンスに優れたエンタープライズレベルのカスタムアプリケーションを構築・共有できる、ローコードアプリケーション開発プラットフォームで UiPath Automation Cloudの一部として利用することができます。AppsではUI要素のコンポーネントを配置し、ボタンクリックなどをトリガーとして自動化プロセス実行することもできます。
まだプレビュー段階ですがアプリのコネクションによってAppsからIntegration Serviceを呼び出すことができるようになりました。Integration Service はいわゆるiPaaS (Integration Platform as a Service) で様々なWebサービスと容易に連携できます。UiPath GenAIアクティビティ などを利用すれば生成AIサービスを呼び出すこともできます。コネクション連携ではAppsからIntegration Service経由でWebサービスをコールするため、実行環境としてのUiPath Robotは不要になります。

UiPath GenAI アクティビティを利用するにはAIユニットが必要となります。プレビュー段階では無料でご利用いただけていましたが、2024年7月に一般提供(GA)されてからはアクティビティ実行ごとにAIユニットが消費されます。

Appsでこのように開発されたWebアプリはRobotが不要なためモバイル端末でも実行することができます。今回はモバイル対応の生成AIアプリをAppsで作成してみたいと思います。

Appsによる生成アプリ作成手順

Integration Serviceのコネクタを作成する

Automation Cloud に管理者アカウントにてサインインし、Integration Serviceメニューをクリックします。
UiPath GenAIアクティビティ のコネクタを作成します。OpenAIなどその他の生成AIサービスとのコネクタを作成する手順についてはこちらの記事をご参照ください。

Appsでアプリを作成する

次にAppsでアプリを作成します。Automation Cloud にてAppsメニューをクリックします。
[新しいアプリを作成] をクリックし、アプリケーション名として ChatApps と入力し [作成] をクリックします。
テンプレートは 空のページ をダブルクリックして選択します。

UIの作成

生成AIアプリのシンプルなUIを作成します。[コントロールを追加] をクリックし、入力 > テキストボックスをドラッグ&ドロップしてMainPageに追加します。
- このテキストボックスはユーザーが質問を入力するために使用します。モバイル用にUI領域を節約するために全般 > ラベルの既定値 "Label" を削除します。続いてスタイル > サイズ > 幅をひとまず 370px に設定します。モバイル端末に合わせて調整する方法については後ほど説明します。
[コントロールを追加] をクリックし、入力 > ボタンをドラッグ&ドロップしてMainPageに追加します。テキストを "Query" に変更します。ユーザーがクリックした時に質問内容を生成AIに問い合わせするように後ほどイベントルールを実装します。
再び [コントロールを追加] をクリックし、入力 > カスタムHTML をドラッグ&ドロップしてMainPageに追加します。カスタムHTMLは生成AIサービスからの応答を表示します。スタイル > サイズ > 幅を 370 px に指定します。
アプリのコネクションを追加します。[コントロールを追加] をクリックし、コネクション を選択します。
- コネクションを追加して UiPath GenAI Activities を選択し、フォルダー配下に作成されたコネクタを選択します。[追加] をクリックします。
生成AIサービスからの応答を格納する変数を作成します。左メニューの アプリの変数 > (+) をクリックし、変数名 query_response、型 Text を選択して [作成] をクリックします。

イベントルールの作成

ボタンクリック時にコネクションを利用して生成AIサービスに問い合わせするようにイベントルールを実装します。

ボタン > イベント > [ルールを作成] をクリックします。
新しいルールとして UiPath GenAI Activities > Content Generation を選択します。
Content Generation (コンテンツ作成) のパラメーターは下記のように設定します。
- Model name: "gpt-4o-2024-05-13"
- Stream: false
- Prompt: MainPage.Text.Value (※ コントロール名を変更している場合は Text 部分を置き換えます)
- その他のパラメーターはアクティビティガイドをご参照ください。
Content Generation アクティビティ実行の状態が分かるようにスピナーを追加します。
- 開始時 > スピナーを表示/非表示 をクリックし、スピナーの表示設定を true (既定値) にします。
- 完了時 > スピナーを表示/非表示 をクリックし、スピナーの表示設定を false に変更します。
アクティビティ実行の戻り値を受け取るため、完了時のルールを (+) をクリックして追加し、 値を設定 を選択します。
- 設定する項目: アプリの変数として query_response をセットします。
- 値: 式として Newtonsoft.Json.Linq.JToken.Parse(MainPage.Button.ContentGeneration.Response.RawResponse)("text").ToString をセットします。
  - Webガイドに記載の通り、生の戻り値は <PageName>.<ControlName>.<RuleName>.Response.RawResponse で受け取ります。それをJSONオブジェクトとしてパースし、応答部分のみを取り出しています。

カスタムHTMLコントロールの設定

カスタムHTMLの外観を設定し、生成AIサービスからの応答を表示するようコードを記述します。

カスタムHTML > 全般 > コードエディターを開く をクリックします。

コードエディターにてそれぞれ次のように設定して [保存] をクリックします。

HTML

<div id="textContainer">
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP");

div {
  background-color: #ffffff;
  font-family: 'Noto Sans JP';
  font-size: 13px;
  color: #333333;  
  display: grid;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 2px 4px;
  color: #333333;
}

JAVASCRIPT

async function init() {
  const text_container = document.getElementById('textContainer');

  App.onVariableChange("query_response", value => {
    console.log("Response: ", value);
    text_container.innerHTML = value;
  })
}
init();

実行確認とデバック・微調整

これで基本部分は実装できましたので動作確認してみましょう。[プレビュー] をクリックすると別タブにてアプリが起動します。
- コネクションを更新 が表示される場合には、コネクタを選択して [実行] をクリックします。
UIが表示されましたらテキストボックスに質問文 (例: UiPath Automation Cloudについて教えて) を入力して [Query] ボタンをクリックします。30秒ほどで応答が表示されます。
現段階では見栄えはあまり良くありませんので後ほど調整します。

デバッグとモバイル対応

もし応答が正常に表示されない場合にはF12を押下して開発者ツールを起動し、Console タブを開きます。
- Selected context only をオンにします。
- 上部のドロップダウンを top → html-control-base.html に変更します。JavaScript コード console.log(変数) によってセットされた変数の値をコンソール出力してデバッグに役立てることができます。
モバイル端末でのUI微調整も開発者ツールで行うことができます。Elements タブ左のモバイルアイコンをクリックし、画面左上部で端末の種類を選択します。見栄えが良くなるようにテキストコントロールやカスタムHTMLのサイズやマージン(余白)を調整します。
- モバイル対応のデザインに関する詳細はこちらのガイドもご参照ください。

Markdown→HTML変換

現段階ではカスタムHTMLにて生成AIサービスの応答をそのまま表示していますが、改行などがされておらず可読性があまり良くありません。応答は主にMarkdown形式であるため、既存コードに少し手を加えてHTMLに変換し見栄えを改善してみましょう。
Markdown→HTML変換のJavaScriptライブラリはいくつかありますが、今回は Showdown を使用したいと思います。
- カスタムHTMLのコードエディターを開き、外部リソースをクリックし、JavaScriptのソースとして https://unpkg.com/showdown/dist/showdown.min.js を指定し [保存] をクリックします。

コードエディターを再度開き、JavaScriptを次のように変更して [保存] をクリックします。

JAVASCRIPT

async function init() {
  const text_container = document.getElementById('textContainer');
  const converter = new showdown.Converter();

  App.onVariableChange("query_response", value => {
    let answer_html = converter.makeHtml(value);
    console.log("HTML: ", answer_html);
    text_container.innerHTML = answer_html;
  })
}
init();

再度プレビュー実行すると、応答がHTML変換され読みやすくなっていることを確認します。

アプリのデプロイ

アプリをデプロイするには [パブリッシュ] をクリックします。
必要に応じて説明を入力して [パブリッシュ] をクリックします。次の手順にて [今すぐデプロイ] をクリックします。
アプリはOrchestratorフォルダーごとにデプロイします。利用ユーザーが割り当てられているフォルダーを選択し、オートメーション > アプリ > [アプリをデプロイ] をクリックします。
- アプリとして ChatApps を選択し [デプロイ] をクリックします。
- デプロイされたアプリの縦三点 > URLをコピーをクリックし、このURLをモバイル端末に共有します。
モバイル端末でURLを開きます。まずAutomation Cloudへの認証が求められますので権限のないユーザーはアクセスできません。Automation Cloudへのサインイン後、質問文を入力してQueryボタンをクリックし、応答が表示されることを確認します。

おわりに

本記事ではUiPath Appsのコネクション連携機能を使用してモバイル端末に対応した生成AIアプリを作成してみました。今回紹介したコネクション・アクティビティ以外にも様々なサービスとの連携が利用可能ですし、UIデザインもカスタマイズできます。Appsユーザーガイドを参照して皆さんのニーズに合わせたアプリ開発をお試しいただければと思います！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up