CodeAGIを使って開発を行っていきます。（連載２回目）

# 【連載第2回】「CodeAGI」の概要
「SoppraDX」勤務の「CodeAGI」の開発担当をしております。
今回は連載第２回目という事で「CodeAGIの概要」として「CodeAGI」がどのようなツールで、どのように利用するのかという点と基本的なセットアップ方法や必要な準備についてをご紹介していきます。

## 1.「CodeAGI」の概要
「CodeAGI」とはシステム開発の現場で利用される設計書や定義書からプログラムコードを自動生成できるアプリケーションサービスです。

### 「CodeAGI」の特徴
「CodeAGI」の特徴として以下の様な点があげられます。
- 企業独自の多様なフォーマットの設計書解析を実現
- 設計書やデータ構造を学習し整合性を担保した正確なコード自動生成を実現
- リレーショナルデータベースの解析による複雑なSQLの自動生成を実現
- テストケース・テストデータの生成を実現
- 画像データを解析することで、画面プログラムのコード生成を実現

### 「CodeAGI」利用の概要
冒頭でも触れましたが「CodeAGI」はシステム開発の現場で利用される設計書や定義書をクライアント端末上で解析を行い、生成AIを利用してプログラムコードを自動生成するアプリケーションサービスです。「CodeAGI」のアプリケーション上で、生成したいプログラムコードの環境情報等を設定し、設計書や定義書を指定するだけでプログラムコードが自動生成される優れたアプリケーションサービスとなっております。
※現在利用できる設計書や定義書は「Microsoft Excel」のみで取り扱えるファイル形式は「.xlsx」となっています。

それでは実際に「CodeAGI」を利用してプログラムコードを生成していく準備を行っていきます。

## 2.「CodeAGI」の利用方法
「CodeAGI」を利用する為には生成AIサービスとの連携が前提条件となっております。
現在「CodeAGI」が連携可能な生成AIサービスは以下4つのサービスです。
- OpenAI API
- Google Vertex AI
- Anthropic API
- Azure OpenAI Service

これらの生成AIサービスの何れかと事前契約が必要となります。
それぞれのAPIサービスは有料とはなりますが、ご契約頂く事で各生成AIサービスから発行されますAPIキーを「CodeAGI」に設定する事で「CodeAGI」アプリケーションの利用が可能となります。
今回ご紹介するのは、現在最も利用されているであろうOpenAI APIを使用して「CodeAGI」を利用していこうと思います。

### OpenAIのAPIキー取得方法
OpenAIのキー取得方法ですが、
[OpenAIのAPIキー取得方法|2024年7月最新版|料金体系や注意事項](https://qiita.com/kurata04/items/a10bdc44cc0d1e62dad3)
こちらの記事がとても丁寧で分かりやすく説明されておりましたので、参考にしてください。

#### 取得手順
詳しくは上記の記事を参照頂ければと思いますが簡単に手順をご紹介致します。

　1\. サインアップする（ユーザー登録をする）
　2\. APIキーを作成する（作成には電話番号認証が必要になります）
　3\. 支払い情報を登録する
　4\. クレジットを購入する

##### 1\. サインアップする
[OpenAIプラットフォーム](https://platform.openai.com/docs/overview)のサイトにアクセスし画面右上の「Sign up」からユーザー登録をします。メールアドレスとパスワード登録が促され、メールアドレス認証が行われます。メールアドレスの認証が正常に行われましたらユーザー名、組織（任意）、生年月日を入力するだけで、ユーザー登録は完了します。

##### 2\. APIキーを作成する
ユーザー登録が完了したら上部メニューから「Dashboard」を選択し、左メニューの「API keys」を選択します。ここからAPIキーの作成ができます。
![APIKey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/05f9b00f-d7e7-5acb-317c-09e3ce6aaf53.png)

電話番号認証が必要になります。「Start verification」から電話番号認証を行ってください。「Start verification」ボタンを押すと電話番号入力の画面がポップアップされますので電話番号を入力して送られてくる認証コード6桁を入力するだけです。電話番号認証が終われば以下の画面が表示されます。APIキーを簡単に作成したい場合は、何も入力せずに「Create secret key」ボタンを押してください。
![secretkey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/aaae0897-ef3a-cff8-0963-00f315d1b171.png)

作成されたAPIキーが表示されます。ここで注意なのですが、この画面を閉じてしまうと、せっかく作成したAPIキーをこれ以降、確認する事ができなくなってしまいます。必ず「Copy」ボタンを押してメモ帳などに保存するようにしてください。
![saveyourkey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/6f526a71-db70-d012-4161-7baaff7b03f7.png)

これでAPIキーの作成は終了です。この作成したAPIキーを利用できるようにクレジット購入まで進めていきます。
![keylist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/42b54be5-a275-4525-2194-27fad9ebaec1.png)



##### 3\. 支払い情報を登録する
作成したAPIキーですが、クレジット購入を行わないと使えません。よく間違われるのですが、ChatGPTの有料版をご契約されているのでAPIも利用できると思われる方が多いのですが、ChatGPTとOpenAI APIの契約は別契約となっておりますので、APIを利用の際には別途、クレジット購入が必要になります。

上部メニューから「歯車（設定）」を選択し、左メニューの「Billing」を選択します。右側のメインビューにクレジット残高が表示されます。最初は「Free trial - $0.00」と表示されていると思います。「Add payment details」ボタンを押して支払い情報の登録後、クレジットを購入します。
![payment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/d0172000-c593-1d2e-b258-ae5f50a76ab1.png)

支払い情報の登録の前に「個人」か「会社」の選択画面が表示されます。
![select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/206a4eb0-8973-d283-4a8c-28770e1ca5a9.png)

今回は「個人」を選択して進めます。「個人」を選択すると以下の画面が表示されます。
![addpaymentdetails.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/4f0317fb-bfa4-1988-f947-87cfb21e92c6.png)

クレジットカード支払いに必要な情報を入力して「Continue」ボタンを押してください。クレジット購入画面に移ります。

##### 4\. クレジットを購入する
必要な分だけクレジットを購入してください。上限は$100です。オートチャージ機能も利用できます。オートチャージを利用する場合は「Would you like to set up automatic recharge?」のスイッチをOnにして「When credit balance goes below(クレジット残高が下回った場合)」と「Bring credit balance back up to(クレジット残高を元に戻します)」の値を設定してください。

![configpayment.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/8a09ad54-53b2-1904-995e-e1ea5c1437c1.png)

これでやっとOpenAI APIを利用できるところ迄来ました。
いよいよ次からは「CodeAGI」をインストールして生成AIの利用設定まで進めたいと思います。

---
### 「CodeAGI」のインストール方法
それでは「CodeAGI」アプリケーションのインストールの手順を説明していきます。

#### インストール手順概要
　1\. インストーラーのダウンロードとインストール
　2\. アカウントの登録
　3\. 生成AIの設定

##### 1\. インストーラーのダウンロードとインストール

###### インストーラーのダウンロード 
まず[「CodeAGI」のサービスサイト](https://codeagi.ai)にアクセスします。
画面右上の「ダウンロード」ボタンから「CodeAGI」のアプリケーションのインストーラーのダウンロードが可能です。
![codeagitop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/632b76e9-e848-9a60-3013-5cbbba2dc04c.png)

<br><br>
「CodeAGI（体験版）」のインストーラーのダウンロード画面が表示されます。
ご使用パソコンのOSに合ったインストーラを選択しダウンロードします。
今回はWindows版を使用します。

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/a1540304-d28a-2a99-ea17-f7b9935a65c6.png)

※体験版では全ての機能がお試し頂けます。但し生成されたプログラムコードのファイル出力は制限されていますので、解除希望の場合は「Enterprise版」の契約が必要となります。
画面下部の「お問い合わせ」より運営事務局にお問い合わせください。

<br><br>
ユーザー情報を入力し、インストーラーのダウンロードを完了します。
![downloadform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/cb88e433-333c-9a7d-d874-8b98b94d612e.png)

![downloadfinish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/30f076b5-84dc-3f61-ff95-0578eb378ffb.png)

---
###### インストールの実施
ダウンロードしたインストーラー(CodeAGI.msix)を起動しインストールを実施します。
以下の画面にて「インストール」ボタンを押してください。
![image_2024_12_12T02_32_22_239Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/65833e54-8fb0-acf4-b27c-225779f7121e.png)

インストールが正常終了しましたら「CodeAGI」のロード画面を経て、ログイン画面が表示されます。
![image_2024_12_12T02_33_24_341Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/dfcb1a9a-c86b-7f3e-d072-a2b97b00e403.png)

##### 2\. アカウントの登録
それでは「CodeAGI」を利用する為にアカウント登録を行います。画面上部の「アカウント登録」ボタンを押してください。利用規約が表示されますので規約に同意できる方は同意するにチェックを付けて「次へ」ボタンを押してください。
![image_2024_12_12T02_34_02_297Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/31b48438-046a-f44b-49f3-48481f0100c2.png)
<br><br>
※企業等でご利用される場合、ご利用環境によってはプロキシ設定等によりアカウント管理サーバーにアクセスできない場合がございます。その際は自社のシステム管理部門にお問い合わせの上「`https://account.codeagi.ai`」へのアクセス許可設定を依頼してください。
アクセスできない場合は、以下の様なエラー画面が表示されます。
![image_2024_12_12T04_18_17_080Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/98ec1f55-f558-b1f0-8221-ac324d86ece1.png)

###### アカウント情報の入力
アカウント情報を入力していきます。必要な情報はメールアドレス・パスワード・会社名・部署名・お名前（姓・名）・電話番号（任意）となっております。
これらの情報を入力して「次へ」ボタンを押してください。
![accountreg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/0b8206f3-a669-bd0b-8f0b-c05016a83237.png)

メールアドレス認証が行われます。入力されたメールアドレスに認証コード（５桁）が届きますので認証コードを入力して「次へ」ボタンを押してください。
![image_2024_12_12T02_36_43_119Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/91070137-d28a-68b1-8243-a16f3822025a.png)

認証キーの確認が正常に終わりましたらアカウント登録完了です。次回から自動ログイン（メールアドレスとパスワードの入力の省略）を行いたい際には「次回から自動でログインする」のチェックをONにして「次へ」ボタンを押してください。
![image_2024_12_12T02_37_38_672Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/11d620c6-3245-ca02-851a-3eba924e8f5e.png)

これでアカウント登録まで終了しました。


##### 3\. 生成AIの設定
アカウント登録まで終了すると生成AI設定画面が自動的に表示されます。この画面で前述の「OpenAIのAPIキー取得方法」で取得したAPIキーを設定し、生成AI設定を完了させます。

![image_2024_12_12T02_40_01_560Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/e9638955-b8f0-73cd-2890-1b13023fb611.png)

- 生成AIの選択で「OpenAI - ChatGPT」を選択します
- 取得したOpenAIのAPIキーを入力し「モデル取得」ボタンを押下します
- モデルの選択でご利用したいモデルを選択します
- 画面機能のプログラムコード生成したい場合、画像認識モデルも選択します

※今回はモデルの選択はどちらもgpt-4oモデルを選択しています。

「決定」ボタンを押して生成AIの設定を終了します。
以下の「CodeAGI」のホーム画面が表示されましたら「CodeAGI」アプリケーションの利用準備は完了です。
![image_2024_12_12T02_40_41_073Z.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956872/325f7990-d545-758d-8232-79da620b3315.png)

---
これでやっと「CodeAGI」が利用できるところ迄の設定が完了しました。
今回は「OpenAI API」の生成AIを利用し、Windows版でのインストール手順を説明してきましたが、また別の機会に他の生成AIの利用方法の設定やMac版でのイントール方法などもご紹介できればと思います。


## 次回予告

次回からは、いよいよ「設計書の準備とCodeAGIへの取り込み方法」に入っていきます。
引き続きよろしくお願い致します。

### 連載一覧　CodeAGIを使って開発を行っていきます。
1. ##### [【連載第1回】CodeAGIで設計書からプログラムまでを自動化する流れを解説します](https://qiita.com/sono1/items/76588de183aaa2a09e3b)
2. ##### 【連載第2回】「CodeAGI」の概要
3. ##### [【連載第3回】設計書の準備とCodeAGIへの取り込み方法](https://qiita.com/bellpepper/items/c0f71e8c2274ae290041)
4. ##### [【連載第4回】CodeAGIを活用したプログラムの自動生成](https://qiita.com/k_nomo/items/468198abdd4abdf05230)
5. ##### [【連載第5回】生成されたプログラムの修正・改良方法](https://qiita.com/sono1/items/cc977ae9b71d645ecd59)
6. ##### [【連載第6回】最終動作確認と実行](https://qiita.com/sprdx_c_en/items/b03ed16b237cb35708b5)