CursorにFileMaker Pro のWebビューアのコードを書かせてみる
Cursor(カーソル)はVSC(Visual Studio Code)をベースに開発されたコードエディタで、生成AIとコードエディタを融合させた革新的なツールです。今回はこのCursorを活用してFileMaker ProのWebビューアに記述するコードを書かせてみよう思います。
今回、Cursorのインストール、詳細な使い方についてはふれません。最後に参考としたサイトのリンクをのせています。参考にしてください。
*Visual Studio Code : Microsoft
テスト用のfmp12を用意する
今回用意したテスト用のfmp12の内容は下記になります。
▼フィールド(テーブル 「cursor」としました)
(名前、評価、色、内容のフィールドはなくてもかまいません)
▼計算フィールド「c_Output_HTML」
▼レイアウト
「HTML_Field」、「CSS_Field」、「JS_Field」配置してCursorで作成されたコードを入力できるようにします。
▼レイアウト Webビューア
計算フィールド「c_Output_HTML」を表示します。
Cursorインストール
Cursorのインストール、詳細な使い方については参考サイトのリンク先を参照ください。
ここでは、これだけは設定しておいてほしいことを記載しておきます。
1.インストールは、無料のHobbyで大丈夫です。必要となったら有料に変更できます。
2.拡張機能のJapanese Language Packをインストールします。
拡張機能ボタンをクリック > 検索に「Japanese」と入力 > 「Japanese Language Pack for Visual Studio Code」を選択してインストール
Cursorでコードを生成する
1. New chatに下記のように入力してSendボタンをクリックします。
指示内容は、動作を確認するための本当に簡単なものにしてみます。
※ LLMはclude-3.5-sonnetを選択しています。
右にある「∨」をクリックすることで切り替えることができます。
2.指示の内容に下記のように返答が表示されていきます。
3.生成された下記の内容をFileMaker Proにコピーして貼り付けします。
・index.html→「HTML_Field」
・style.css→「CSS_Field」
・script.js→「JS_Field」
ここでは、とりあえずそのまま、貼り付けして動作を確認しながらコードの内容を精査していくようにします。
4. FileMaker Proのスクリプトを作成
AIは親切にスクリプトの内容も指示してくれたのでその内容に従って作成していきます。
▼スクリプト
5.ブラウズモードでWebビューアを表示したら「ダイアログを表示」ボタンをクリックしてみます。
無事にカスタムダイアログが表示されました。
最後に
いかがでしょうか。指示内容によっては、何度もchatに指示をしてトライ&エラーを繰り返しして作り上げる場合がほとんどかと思います。
しかし、AIがコードを生成してくれるのでかなりの作業が楽になるのではないでしょうか。
生成AIの技術のすさまじい進歩を垣間見ることができたのではないでしょうか。
今回の記事が参考になれば幸いです。
※Cursorの仕様については最新の情報を確認してください。
参考サイト
以下のサイトを参考にさせていただきました。ありがとうございます。
