AIを活用したQodlyのカスタムコンポーネント作成における私の初めての体験

このブログ記事では、1行のコードも書かず、自分で何かを構築することもなく、Qodly向けの最初のカスタムコンポーネントの開発を始めた経緯についてお話しします。すべての大変な作業は、明確なプロンプトに基づいてAIが行ってくれました。

適切なプロンプトをいくつか指定するだけで、VSCodeとGitHub Copilotを使って最初のカスタムコンポーネントを手に入れることができました。AIのおかげで、複雑な技術的な開発のことは気にせず、自分のニーズや要望を明確に伝えることに集中できます。

続きを読んで、さらに詳しく知ってください。

始める前に

ドキュメントで説明されている通り、4D Qodly Proが標準で提供していないコンポーネントが必要な場合、カスタムコンポーネントは柔軟な解決策となります。

これは、さまざまなプロジェクト間で、あるいはQodlyコミュニティ内で共有することができます。一度利用可能になれば、他のネイティブなQodlyコンポーネントと同様に使用できます。

まず、この完全なデモを視聴しました。基本的な考え方を理解した後、以下の手順に従いました。

2つの要素

スキルのダウンロード

AIが正常に動作するには、一連のスキルが必要です。スキルとは、AIが方法論として従わなければならないガイドラインのことです。これらのスキルのおかげで、AIはカスタムコンポーネント（フレームワーク、アーキテクチャなど）の実装方法や、自動テストの記述方法を理解することができます。

私はこのGitHubリポジトリからそれらのスキルをダウンロードしました。

VS Codeで空のフォルダを作成し、その中に.github/skillsというフォルダを作成して、スキルファイルを格納しました。

そして、私の出番がやってきました

私の役割は、コンポーネントの契約（入力、リスニングすべきイベント、動作など）を記述することでした。

その簡潔な仕様とスキルに基づいて、AIは独自にカスタムコンポーネントを実装します。

提供する情報は以下の通りです：

– コンポーネント名と目的

–プロパティ：コンポーネントの挙動を制御するプロパティ

– 外観：デザインモードおよびレンダリングモードにおけるコンポーネントの見た目

–イベント：コンポーネントが反応すべきユーザーの操作

–動作：イベントやプロパティに応じてコンポーネントがどのように動作するか

これらすべては、自然言語でAIに与えられます。

例：「クリップボードにコピー」カスタムコンポーネント

私の目的は、Qodlyの文字列データソースを（クリックが行われたマシンの）クリップボードにコピーできる、非常にシンプルなコンポーネントを作成することでした。このコンポーネントは、4D Qodly Proには標準で存在しません。

最初のメインプロンプト

AIにプロンプトを送る時が来ました。動画で説明したように、このプロンプトは一種のミニ仕様書、つまり前述の3つの主要部分からなる契約に基づいています。

スキルをインストールした後、最初のプロンプトを送信しました：

以下に、コピーして貼り付けるためのプロンプトテキストを示します：

今は空のフォルダの中にいます。

.gihubフォルダ内には、いくつかのスキルがあるだけです。

これらのスキルは、Qodly用のカスタムコンポーネントを作成することを目的としています。

それでは、カスタムコンポーネントの作成を始めましょう。

qodly-custom-componentスキルを使用してください。

@qodly/cli を使用してスケルトンを作成し、標準的な Build / Render / Config / Settings の構造に従ってコンポーネントを実装します。

Qodly用のコンポーネントをゼロから作成してください。コンポーネントは、Props、Events、Behaviorという3つの要素からなる契約を使用する必要があります。

必要に応じて、コンポーネント名、バージョン、およびその他の必要な情報の入力について私に尋ねてください。

詳細は以下の通りです：

Props は、コンポーネントに流入する内容を定義します：
• datasource: 必須の Qodly 文字列データソース
• デザインモードおよびレンダリング時のコンポーネントの外観：一般的なコピーアイコン

イベントは、コンポーネントから何が流出するかを定義します：
• onClick: コンポーネントがクリックされたときに発火

動作:
• コンポーネントがクリックされると、バインドされたデータソースの内容をローカルクリップボード（クリックが行われたマシンのクリップボード）にコピーします。
• データソースが空またはnullの場合、何もコピーされず、クリックが行われたマシンのローカルクリップボードは変更されません。
• コンポーネントが String 型の Qodly データソースにバインドされていない場合、何もコピーされず、クリックが行われたマシンのローカルクリップボードは変更されません。

AIの回答

以下が得られた回答です：

そして、私の「copyclipboard」カスタムコンポーネントは作成されていました

作業のテスト

次に、コンポーネントをローカルでテストする方法を尋ねました。Copilotからは、次のように実行するよう指示されました：

その後、ブラウザで http://localhost:5001/ を開くことで、カスタムコンポーネントをローカルでテストできます

4Dインスタンスの実行が必要です

http://localhost:5001/ はVite サーバーのローカル URL です。これは、カスタムコンポーネントを含むローカル開発環境のみを提供します。 Qodlyソースや利用可能なORDA関数など、Qodly Studioのすべての機能を活用するには、4DプロジェクトのQodly StudioインスタンスをHTTPSポート7443で提供するように設定する必要があります。

そこで、以下のWeb設定で空の4Dプロジェクトを作成して開きました：

また、4DインスタンスのWeb管理設定は以下の通りです：

これにより、私の4DプロジェクトのQodly Studioインスタンスは https://localhost:7443/studio で提供されます。これは、http://localhost:5001/ を実行している間のローカル開発環境で使用されます。

そして、これがその結果です！

ビルドと公開

カスタムコンポーネントの最終バージョンをビルドして公開するために、既存の他のカスタムコンポーネントと同様に、Copilotにビルドを依頼しました。Copilotには例（例：https://github.com/b-fadwa/Qodly-file-download）を示しました。

また、ソースコードとリリースの両方を含めて、指定したGitHubリポジトリにコンポーネントを公開するよう依頼しました。

これで完了です。

これにより広がる可能性

この最初の体験から、AIによってQodly Studioを拡張するためのハードルが大幅に下がることがわかります。コンポーネントが何を行うべきか（そのプロパティ、イベント、動作）を記述できれば、AIが代わりに構築してくれます。

したがって、Qodly Studioをカスタマイズする可能性は非常に広範です。今日は「クリップボードにコピー」ボタンでも、明日はアプリケーションに必要なあらゆるコンポーネントでも、フロントエンドの専門家でなくても実現できます。唯一の真の制限は、仕様の明確さだけです。