Slide 1

Slide 1 text

生成AIのODC周辺開発 (External Logic)への適用例 Developer Day Tokyo 2025/04/24 OutSystems MVP 渡部 潤司 : https://qiita.com/jyunji_watanabe : https://twitter.com/JyunjiW : https://www.linkedin.com/in/watanabejyunji/ Qiita X LinkedIn

Slide 2

Slide 2 text

本日の内容 1.ODCでの生成AI利用 2.生成AIでExternal LogicのC#を作る手順 3.プロンプトの工夫と改善 4.まとめ

Slide 3

Slide 3 text

1. ODCでの生成AI利用

Slide 4

Slide 4 text

ODCでのAI利用をざっくり整理すると 1.Appそのものを作る ○ Mentorの生成AI機能 2.開発をAIで支援する ○ Mentorの静的解析や、コード補完機能 ○ 生成AIでODC周辺開発(CSS・JavaScript・C#)を行う、調査を支援してもらう ○ 生成AIでテストケース・テストデータ作成をしてもらう 3.外部のAIサービスに接続して利用する ○ MentorのAI Agent Builder ○ その他様々なベンダーが提供している外部APIにアクセスする ○ (2025/4/14追加)AIモデル管理する組み込みの機能、およびAI検索サービスへの接続機能 2025/03のOSUGで 説明 [1]

Slide 5

Slide 5 text

生成AIとは ● AIの一種で、学習済みの内容をもとに、新しい何かを作るもの ● 開発者の視点で言うと、(他にも色々作れるが)日本語の 指示文に従ってプログラムそのものを作る機能 ● 今日は、生成AIとしてGitHub Copilotを利用する ● GitHub Copilotは、プロンプトや既存コードのコンテキストから、 次に作成すべきコードの塊を提案したり、代わりに書いてくれた りする

Slide 6

Slide 6 text

GitHub Copilotの環境情報 ● 有償のCopilot Pro(トライアルもある) ● VS CodeにExtensionをインストールして利用 ○ Version 1.293.0

Slide 7

Slide 7 text

External Logicとは C#のメソッドを、OutSystemsのServer Actionとして利用する ● OutSystemsが提供するライブラリを参照して、.NET 8を利用す るClass Libraryを作る ● ライブラリが提供する属性を付与したメソッドが、OutSystemsの Server Actionになる ● 実行時には、Appコンテナのメモリ上ではなく、AWS Lambdaで動 作する(つまり背後ではHTTPSの通信が行われる) [2]

Slide 8

Slide 8 text

今日話すこと OutSystems開発プロジェクトであるのに、External Logic作成にはC#のスキルが必要。 そこで、生成AIを使って、以下のことができるか確認する ● C#スキルがなくてもExternal Logic開発できるか ● そこまでいけないとしても、C#スキルのある人がODCの External Logic開発を効率的に行えるか

Slide 9

Slide 9 text

2.生成AIでExternal LogicのC#を作る手順

Slide 10

Slide 10 text

External Logic作成手順 ● :定型的な作 業なので手順書 を用意して対応 ● :今日のテー マ。この部分のコ ードを生成AIで 作成してみる 1.Projectを作 成する 2.SDK参照を 追加 3.interfaceを 作成 4.classを作成 5.publish 6.zip化 7.ODC Portal にUpload 8.動作確認 9.Release Library

Slide 11

Slide 11 text

1-2 Projectを作り、SDK参照を追加する 定型的なコマンドで実行できるので、必要な部分を書 き換えて実行するか、スクリプト化すれば良い [3] dotnet new sln -o DeveloperDayTokyo2025 cd DeveloperDayTokyo2025 dotnet new classlib -o DeveloperDayTokyo2025 --framework net8.0 dotnet sln add DeveloperDayTokyo2025/DeveloperDayTokyo2025.csproj cd DeveloperDayTokyo2025 dotnet add package OutSystems.ExternalLibraries.SDK

Slide 12

Slide 12 text

3-4 コード作成 (1)仕様検討 動作確認用にシンプルな仕様にする。 ①Excelの指定セルに値を書き込むAction Excelのバイナリファイル、シート位置、セル位置、値を渡し、該当 セルに値を書き込んだ結果のExcelバイナリファイルを返す。 ②Excelの指定セルから値を読み込むAction Excelのバイナリファイル、シート位置、セル位置を渡し、該当セル から値を読み、文字列として返す。

Slide 13

Slide 13 text

3-4 コード作成 (2)プロンプトを用意 ● まずは、手順を示す目的でプロンプトのみ次スライド に示す(こういうプロンプトにしている理由は後述) ● どのExternal Logic作成時にも使える共通部分は 「前提」の下に書く ● 特定のExternal Logic作成に使う個別の仕様は 「仕様」の下に書く

Slide 14

Slide 14 text

次の条件を満たすC#のメソッドを作成してください。 前提 - .NET 8 - OSはLinux - ソリューション及びプロジェクトの作成は不要 - NuGetにあるライブラリを使って良い(必要なNuGetライブラリについては、VSCode上でプロジェクトに追加するため のコマンドリストを生成すること) - メソッドはinterfaceで定義し、そのinterfaceを実装する - interfaceとclassは別ファイルで定義する - interfaceには「OSInterface」属性を付与する - interface内のメソッドには「OSAction」属性を付与する - OSInterface及びOSAction属性は別の場所で定義したものを参照するので、定義部分は出力しない 仕様 - Excelの指定セルに値を書き込むメソッド Excelのバイナリファイル、シート位置、セル位置、値を渡し、該当セルに値を書き込んだ結果のExcelバイナリファイルを 返す - Excelの指定セルから値を読み込むメソッド Excelのバイナリファイル、シート位置、セル位置を渡し、該当セルから値を読み、文字列として返す。

Slide 15

Slide 15 text

3-4 コード作成 (3)プロンプト入力1回目 ● EPPlus(Ver 5からは有償)が使われるコード ● 生成AIが指定したライブラリのライセンス・素性・今後 のアップデート可能性等考慮しなければならない ● プロンプトに「無償で使えるライブラリに限定」を追加

Slide 16

Slide 16 text

3-4 コード作成 (3)プロンプト入力2回目 ● 今度はNuGetのClosedXMLを利用するコードが出 力された ● ClosedXML 0.104.2がインストールされた [4] ● NuGetの該当パッケージページを見ると、MITライセ ンスなので、これを使うことにする dotnet add package ClosedXML

Slide 17

Slide 17 text

3-4 コード作成 (3)プロンプト入力2回目 ● 出力されたinterfaceファイル using System; // OSInterface属性を付与 [OSInterface] public interface IExcelService { // OSAction属性を付与 [OSAction] byte[] WriteCell(byte[] excelFile, string sheetName, string cellAddress, string value); [OSAction] string ReadCell(byte[] excelFile, string sheetName, string cellAddress); } External Logicが要求する 属性が付与されている ActionのI/Fにマッピングさ れるメソッドのシグネチャに も問題なさそう

Slide 18

Slide 18 text

● 出力されたClassファイルのメソッド部分 1/2 public byte[] WriteCell(byte[] excelFile, string sheetName, string cellAddress, string value) { using (var memoryStream = new MemoryStream(excelFile)) using (var workbook = new XLWorkbook(memoryStream)) { var worksheet = workbook.Worksheet(sheetName); if (worksheet == null) { throw new ArgumentException($"Sheet '{sheetName}' not found."); } worksheet.Cell(cellAddress).Value = value; using (var outputStream = new MemoryStream()) { workbook.SaveAs(outputStream); return outputStream.ToArray(); } } } IDisposableを実装するClass のオブジェクトを作成する処理 をusingで囲んでいる シート取得(取得できなかった 時のエラー処理もある) シートオブジェクトを経由して、 指定したセルアドレスに書き 込み 書き込みが終わったオブジェ クトからExcelファイルのバイ ナリを取得している

Slide 19

Slide 19 text

● 生成されたClassファイルのメソッド部分 2/2 public string ReadCell(byte[] excelFile, string sheetName, string cellAddress) { using (var memoryStream = new MemoryStream(excelFile)) using (var workbook = new XLWorkbook(memoryStream)) { var worksheet = workbook.Worksheet(sheetName); if (worksheet == null) { throw new ArgumentException($"Sheet '{sheetName}' not found."); } var value = worksheet.Cell(cellAddress).GetString(); return value; } }

Slide 20

Slide 20 text

3-4 コード作成 (4)生成されたファイルを配置 ● ファイル毎に、「Apply」のアイコンをクリックするとプロ ジェクトにファイルを配置できる ● Interfaceファイルには、OutSystemsが提供する 必要なライブラリへの参照が足りていないので追加が 必要だった

Slide 21

Slide 21 text

5-7 ODCに登録 1. Publish(ターミナルから「dotnet publish -c Release -r linux-x64 --self-contained false」を入力) 2. Publishで生成されたファイル群をzip圧縮 3. ODC Portal > External logicページからアップロ ードして作成 o 「Try library in an app」で、テスト用App に参照を追加しておく

Slide 22

Slide 22 text

動作確認 ● 取り込まれた、ODC上のAction→ ● シンプルなExcelファイルでテスト ○ WriteCellでC3に「修正済み」という文字列を書き込む ○ ReadCellでC2, C3, C4を読んで値を画面に表示する

Slide 23

Slide 23 text

動作確認 ● 前スライドの処理結果をListに詰めて、JSON化 ● 生成AIで出力したコードをほぼそのまま取り込んで Excelに読み書きするExternal Logicを作れた

Slide 24

Slide 24 text

3. プロンプトの工夫と改善

Slide 25

Slide 25 text

「前提」のように細かい条件を指定した理由 ● External Logicの仕様を踏まえ、条件を明示しな いと、間違いや不足する実装が出力されたため ● ドキュメントのURLを渡してもダメだった ● 間違いの例:必要なC#の属性を使わないコードが 出た、存在しないライブラリをusingした、など ● 知識のある人がプロンプトを整備して、Wikiやバージ ョン管理ツールで共有する形なら使いやすくなるかも

Slide 26

Slide 26 text

コード改善(Description追加) ● External LogicそのものやActionにDescription が設定されていないので、そこを改善してみる ● プロンプト「OSInterface属性やOSAction属性に は、Descriptionプロパティがあります。それぞれ修飾 する対象に適切な値を設定してください。ただし、言 語は日本語で。」 ● 日本語を指定しないと、英語で書いてきた

Slide 27

Slide 27 text

コード改善(Description追加) ● External Logic・ActionのDescriptionに反映 ● プロンプトは、改善した最新版をどこかに維持しておく のが良さそう

Slide 28

Slide 28 text

In-context learning ● プロンプト中に参照すべき(ドキュメントからの抜粋な ど)情報を記述しておくことによって、生成AIはその 情報を踏まえた出力をしてくれる ● 例えば、JavaScriptで非同期処理用の関数を使う コードを出力したいとき、ドキュメントから該当部分を コピーすることで、うまくコードを書いてくれた

Slide 29

Slide 29 text

In-context learning(例)[5] ● In-context. learning部分のみ抜粋

Slide 30

Slide 30 text

プロンプトではうまくいかないケースもあった ● ODCの任意のList型とCSVを変換する機能を生成AI で試してみたときは、コンパイルできるが実行時エラーを 吐くコードが出力され、改善できなかった ○ なお、この機能自体は、自力でC#コードを書けば実現可能 ● あんまり複雑なことをやらせると、正しくないばかりでなく、 エラー原因の調査と修正が難しいコードが出力されてし まう → 担当者が開発の熟練者でないなら、何らかの 対応を検討しなければならない

Slide 31

Slide 31 text

4. まとめ

Slide 32

Slide 32 text

まとめ 1. C#スキルがなくてもExternal Logic開発できるか o 可能ではある o スキルが無いと出力されたコードの問題点に気づけなかったり、修正対応ができない可能性がある o 対応する範囲を限定する(シンプルな開発に絞る)、問題発生時には相談できる体制を用意する 2. そこまでいけないとしても、C#スキルのある人がODC のC#開発を効率的に行えるか o こちらは、問題なしでかなり有用 o 大量のコードを即時出力してくれる o 細かい手順まで提示してくれる(間違っていることはあるので判断力は必要) o 知らないライブラリを使ったコードも即時出力してくれるので、開発のとっかかりにも良い

Slide 33

Slide 33 text

現時点での結論的なもの ● 生成AIによる開発支援はかなり有用 ● 現時点では、手放しで任せ切れるものでなく、開発者の知識・ スキル・判断力が必要 ● 生成AIの時代でも、開発スキルの習熟をさほど要せず、比較 的高生産性を出せるローコードの役割はまだありそう ● →ここからさらに、生成AIの能力が大幅な発展をしたらわから ないが…… ● (しそうではある)

Slide 34

Slide 34 text

参考資料

Slide 35

Slide 35 text

1. SpeakerDeck. 「Mentor 生成アプリ の構造解析」. https://speakerdeck.com/junjiwatanabe/mentor-sheng- cheng-apuri-nogou-zao-jie-xi 2. External LogicがAWS Lambda上で動作する点については、以下のONE2023の動画で確認できる o ONE Conference 2023. 「‘Level Up’ Your Low-Code Game with New Innovations 19:20あたりのスライ ド」.https://learn.outsystems.com/training/journeys/one-conference-2023-695/-level-up-your-low-code- game-with-new-innovations/odc/3832, (参照2024-04-18) o ONE Conference 2023. 「Extending ODC: the new Integrations capabilities of ODC 28:00あたりの説 明」. https://learn.outsystems.com/training/journeys/one-conference-2023-695/extending-odc-the-new- integrations-capabilities-of-odc-/odc/3821, (参照2024-04-18) 3. Qiita. 「External LogicをVisual Studio Codeで作成する」. https://qiita.com/jyunji_watanabe/items/04ffd0bc25ed4e845661 4. NuGet. 「ClosedXML Version 0.104.2」. https://www.nuget.org/packages/ClosedXML/0.104.2 5. Qiita. 「生成AI(GitHub Copilot)にODC向けの非同期JavaScriptを書かせてみる」. https://qiita.com/jyunji_watanabe/items/1f3e05ab985c85495991

Slide 36

Slide 36 text

以上