CodexをつかったAIコーディングについて試してみようと思い、ちょうど良さそうなSalesforceAPI連携アプリの開発を試してみました。
CodexはMac版のデスクトップアプリがあるのでWebサイトからインストールして使用します。
通常のChatGPTアプリとは違い、ターミナルやコードの差分を確認するパネルが表示できます。（右上のアイコンをクリックすると出たりします。）
※ターミナルなどを出すのはプロジェクトとの紐付けがされているときでした。
プロジェクトの作成
Codexを利用するにあたりプロジェクトを作成します。
プロジェクトを作成後にGitリポジトリと紐付けます。そのため、作業用ディレクトリは先に用意した方が良さそうです。GitHubに新規リポジトリを作成して作業用ディレクトリとして用意します。
このあたりの操作あGitHubデスクトップアプリを使用するのが便利です。新規リポジトリ作成を開始すると次のようなポップアップが表示されます。ライセンスはMITを選択してみました。GitIgnoreはスクリーンショットだとNoneになっていますが、今回はNodeを選択しました。GitIgnoreに適切な情報が初期セットされるくらいなのでそこまで気にしなくて良さそうです。
Codexのプロジェクトと作業ディレクトリが用意できたら、チャット欄に入力していく形でCodexに指示を出します。
今回の指示の内容はこちら。この内容に深い意味は無いのでとりあえず動かしてみた版です。
この指示の内容についてもCodexとのチャットで生成したもの。最初はざっくりやりたいことを伝えたら、その情報を元に細かい部分まで形にしていってくれました。
チャットでやりとりを続けていくとCodex側でコード生成など必要なやりとりを進めてくれました。ときどきコマンドを実行して良いかの確認が出てくるので、はい / いいえ を回答するくらいです。
なんどかのやりとりでCodexが開発してくれたアプリケーションの枠部分が作成されました。
Salesforce側の環境構築
Codex側が形になったら、接続先のSalesforce環境を用意します。勉強用なので個人のDeveloper Editionを使いますが、Trailheadのハンズオン組織作成が便利です。
SalesforceのPlayground組織を用意したら環境にログインします。ハンズオン組織の場合は専用のタブからパスワードリセットができます。また、ユーザー言語が英語になっているのでユーザー設定で日本語に変更しておきます。
初期設定を行い、作業準備ができるようになったら、API連携用の設定に入ります。
外部クライアントアプリケーションの作成
これまでは接続アプリケーションを使って連携用の情報を用意しましたが、数年前から外部クライアントアプリケーションの設定を利用する形に切り替わりました。接続アプリケーションは古い方法となり、移行が必要となっていきます。
新規作成画面は次のようになっています。
外部アプリケーションの設定の入力例です。
外部クライアントアプリケーション名: - Salesforce API Playground API 参照名: - Salesforce_API_Playground OAuth 有効化: - コールバック URL: http://localhost:3000/api/auth/callback で OK OAuth 範囲: - API を使用してユーザーデータを管理 (api) - いつでも要求を実行 (refresh_token, offline_access) - ID トークンを設定 は今回は不要なので未チェックで OK - 配布状態が ローカル でも学習・検証用途なら OK 作成後にやることは、発行される以下を .env.local に入れることです。 - SALESFORCE_CLIENT_ID=コンシューマ鍵 - SALESFORCE_CLIENT_SECRET=コンシューマの秘密 - SALESFORCE_REDIRECT_URI=http://localhost:3000/api/auth/callback - SALESFORCE_LOGIN_URL=https://login.salesforce.com - SALESFORCE_API_VERSION=v60.0 - SESSION_SECRET=32文字以上のランダム文字列
外部クライアントアプリケーションの作成ができたら、詳細ページにアクセスし直します。
コンシューマ鍵の参照ボタンがあるのでクリックします。
これで認証用の情報を確認できます。この情報は非公開情報です。Gitリポジトリなどに含めては行けません。
Salesforce側は一旦これで設定完了となります。
API連携アプリ側の認証設定
今回Codexに作成してもらったのは以下の開発構成でした。
技術スタック:
- Next.js
- TypeScript
- Node.js
- UIはSalesforce Lightning Design System 2 / SLDS 2をベースにする
- Tailwind CSS、Bootstrap、Sassは使わない
- DBは使わない
Salesforceとの認証情報は「.env.example」「.env.local」などで管理されます。
「.env.example」はテンプレートです。Gitリポジトリにも追加します。
「.env.local」がローカル環境からSalesforceに接続するための認証情報を保持するためのファイルです。こちらは非公開です。Gitリポジトリにも含めません。
「.env.local」ですが、ターミナルで次のコマンドを実行すると「.env.example」の情報を作成してくれます。
% cp .env.example .env.local
SALESFORCE_CLIENT_IDとSALESFORCE_CLIENT_SECRETは外部クライアントアプリケーションのコンシューマ鍵と秘密の情報を入力します。
SESSION_SECRETはまた別です。32文字以上のランダムな値を入力します。これは次のコマンドを実行するとちょうどいい値が作成されます。
% openssl rand -base64 48
「.env.local」に必要な情報を入力したらSalesforceの接続ができる状態となっています。
アプリの動作確認
まずはローカル環境でアプリを起動します。
% npm run dev
コマンド実行したあとに「http://localhost:3000」をブラウザでアクセスします。これでCodexが作成したアプリケーションが表示されます。
今回Codexが作成したアプリでは画面の右上にConnect Salesforceというボタンが表示されていました。ボタンをクリックするとSalesforceの認証画面が表示されます。外部クライアントアプリケーションのラベルはこうした認証画面はログの情報で使われます。
Salesforceの認証を許可するとこのアプリでは接続情報が表示されて、Developer Edition組織にあるサンプルデータを取得して一覧表示されます。画面に表示されたとおり、SalesforceAPI連携が動作しています。
新規作成、編集、削除と基本操作ができるアプリが生成されました。
取引先の新規作成は問題なく動作しました。
Codexを使ったSalesforceAPI連携アプリの開発はこのような形で最初の動くところまでが作成できました。これをベースに実装したいことのイメージを固めていってCodexに指示を出していく流れになるようです。
Salesforceのハンズオン組織は有効期間が短期間ですが、新しく作成して外部アプリケーションを作成。認証情報をenvファイルに記載する初期設定作業を行えばすぐに接続し直しできます。
Codexのチャットのやりとりでは都度気になることを質問していき、Gitに含めては行けない情報が含まれていないか、こうした心配がありますなど相談していくと都度回答や対応をしてくれました。Codexを使ったSalesforceAPI連携アプリの開発についてこのような形で試してみることができました。
