Github Copilotはセキュリティがちょっと不安・・でもVSCodeでChat-GPTを活用したい。。そんな時は、Genie AI + Azure OpenAIでセキュアに使って安心爆速開発！

# はじめに
:::note info
ここではGitHub Copilot、GitHub Copilot Lab、GitHub Copilot ChatをまとめてGitHub Copilotと呼称しています。
:::
AdVenture Lab 藁谷です。
VSCode拡張機能のGitHub Copilot便利ですよね。個人開発では大活躍中でございます。
でも、やはり会社での利用となると、セキュリティやデータの秘匿性がネック。そもそもChat-GPT自体もOpenAI社にプロトコルが保存されるので、使わせてくれるかどうか、といった問題がありますし。。
GitHub Copilot for Businessならそれらの問題も対応できるようですが、GitHub Copilotがどこのモデル・エンジンを使っているかわからなかったりで、導入を躊躇うこともあるのではないでしょうか。
**せめてChatと、コードの解析機能くらいは使いたい。。。**

と思っていたら、Microsoft社提供で比較的決裁の下りやすい（と思っている）Azure OpenAI Serviceを使って同じようなことができるVSCode拡張機能 Genie AIというものがあるとのこと。

https://qiita.com/akiraokusawa/items/260dcdf8caae8380e9d6

これは・・・導入できたらかなり効果ありそうですね。
ということで、今回は**Genie AI**を実際に使って、Azure OpenAI Serviceとの紐付け方法、使える機能、GitHub Copilotとの違いをベースに、どのように利活用していけるのか、記事にしました。


なお、Azure OpenAI Serviceがいかに
<INS>**企業が安全・安心に業務で利用することができるAIサービス**</INS>
であるかは以下の記事でも触れているところ。
導入方法やパラメータの説明なども書いているので、ぜひ読んでください！

https://qiita.com/AGV_morinaga/items/04c1b3f505efca8b1511

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Genie AI + Azure OpenAI利用についてざっくりまとめると](#genie-ai--azure-openai利用についてざっくりまとめると)
1. [GitHub CopilotとGenie AI共にできること](#github-copilotとgenie-ai共にできること)
1. [Genie AIだけできること](#genie-aiだけできること)
1. [GitHub Copilotだけできること](#github-copilotだけできること)
1. [Genie AI 導入・設定方法](#genie-ai-導入設定方法)
1. [Genie AI 機能紹介](#genie-ai-機能紹介)
1. [まとめ・思ったこと](#まとめ思ったこと)

# Genie AI + Azure OpenAI利用についてざっくりまとめると
#### 機能
・GitHub Copilot(=Inline suggestion)の機能は使えない
・GitHub Copilot Labの大半の機能が使える
・GitHub Copilot Chatと同等の機能が使える
ということで、**Inline suggestionがどうしても使いたい場合でなければ十分に代替可能**といった印象。

#### セキュリティ
Azure OpenAIに対応しているため、**社外にプロンプトやコードが保存されないような運用が可能**。（オプトアウトしない場合はMicrosoftには保存される）

#### 料金
Genie AIはAzure OpenAI Serviceの利用のため組織単位での従量課金制。
GitHub Copilotではユーザ当たり月10ドル（for Businessではユーザあたり月19ドル）の月額利用料金。
利用ユーザごとの課金ではなく、Azureのサービスとして**組織単位での利用量に応じた課金体系**であることから**管理が断然楽**（ソースは弊社のAzure&各ライセンス管理者）

#### 結論
**Azure OpenAI Serviceさえあれば、他に用意するものなく、セキュアに開発補助ツールを導入できる。**
設定の内容については以下の記事でほとんど説明してくれていますが、
セキュアな利用ということだけ考えれば「Azure: Url」の設定と「Telemetry: Disable」をオン（デフォルト）にしておくくらいで十分。
是非使ってみてください。

https://tackysroom.com/chatgpt-ginie/


# GitHub CopilotとGenie AI共にできること
Genie AIはGitHub Copilot LabとGitHub Copilot Chatでできることはほぼできます。
どちらも同じように左ペインでChatが可能です。
また、コードを選択した状態でテストコードの作成・バグ検出・解説・最適化・コメント作成・コードの補完（完成）・任意のプロンプトを実行するショートカットが設置してあります。
こちらについては右クリックからも選択可能です。
↓Genie AIのメニュー画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/1030ff72-bce0-08c1-ecef-ca3bef683b8d.png)
↓GitHub Copilot Labのメニュー画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/b349f64d-2263-0bb6-7780-7c1a1d4e26a1.png)
↓GitHub Copilot Chatのメニュー画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/f24926c9-fa07-92c8-f64d-4973c8798bf1.png)

大体同じですがGitHub Copilot Labの方が行えることは多いですね。
特にLanguage Translationについては最初からExplainの下に表示されていて、肝入りな感じがします。

# Genie AIだけできること
これはとにかくAzure OpenAI Serviceとの連携ですね。
設定方法については後述しますが、**自社で用意したAzure OpanAI Serviceのモデルを指定**して動かすことができます。
Azure OpanAI Serviceの利用ができるのであれば他には何も必要ないところが素晴らしいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/7de8e917-215f-4e17-c55b-bb49773b1a00.png)


# GitHub Copilotだけできること
Inline suggestionの機能はGitHub Copilotだけです。
以下の画像のようにコードを途中まで入れると文脈から推測してコードを提案してくれるというものです。
非常に有用なので、ぜひ欲しい機能ではあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/7cb98aa0-ef37-490e-83f3-378624965835.png)

ちなみにGitHub Copilot関連の情報については以下のページが参考になります。

https://qiita.com/masakinihirota/items/0e58a6b921e4420a2882

<a id="#Chapter4"></a>
# Genie AI 導入・設定方法
:::note warn
Azure OpenAI Serviceは作成済み、モデルデプロイも完了している前提です。
:::

1 . VSCodeの拡張機能で「ChatGPT - Genie AI」をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/5aeef933-b3ea-b010-12cf-f51f2a279b49.png)
2 . ChatGPT Genie AIの設定を開く
  - 画像赤枠のようにGenie AIの拡張機能が選択可能になります
  - 右上青枠から設定画面を開きます
![スクリーンショット 2023-06-19 11.23.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/f7a69a0f-6426-47ca-a858-b5304b47d5b6.png)


3 . 設定内容
 - Azure:Url
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/4edcc788-4eab-8913-aadd-2e156a490613.png)
デプロイしているモデルとバージョンを含むフルのURLです。
AzureのChatGPTプレイグラウンドで好きなモデルを開き、コードの表示→エンドポイントで簡単にURLを取得できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/b01d0f1a-3a99-df06-1ff3-dae95b2bfcf4.png)
![スクリーンショット 2023-06-09 17.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/e432e933-cb2d-953c-fadb-0d88bc8cd03c.png)

4 .日本語で利用するための設定
以下の参考サイトをもとに実施。プロンプトのショートカットみたいなもんですね。

https://namileriblog.com/python/chatgpt-genie-ai/#i-2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/49d5c5bf-20fb-cc64-ca47-d6e5798c9c18.png)

これでとりあえずAzure OpenAI Serviceを使ってGenie AIを日本語で利用する設定はOKです。

ちなみに他にも、ローカルに会話の履歴を保持できるようにするオプションも便利です。
以下にチェックを入れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/27eb6197-de26-84da-6513-e487a3738710.png)


<a id="#Chapter5"></a>
# Genie AI 機能紹介
#### **簡単なアプリケーションを作成しながら、機能を紹介していきます！** 


#### Chat機能
Chat-GPTと同様、会話形式で問題を解決してくれます。なお、System Messageとして**コーディングの専門家としてのロールを割り当てられている**ため、特に設定せずともコーディングに特化した回答を得ることができます。

赤枠箇所に質問を入力すると、回答が返ってきます。
また、コマンドやコードの箇所には青枠のような便利機能がついています。（後ほど説明）

![スクリーンショット 2023-06-20 16.45.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/09f220d4-becb-7ffa-253d-4cd7357fcec4.png)

提示された通りに進めていくと以下のようなWebページができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/1be45ead-822e-d1df-fbdd-e94b023e152c.png)
#### バグ検査機能(Find Bugs)
早速バグを探してもらいます。
対象のコードを選択して右クリック→Find bugsを実施し、左ペインで表示されているような回答が得られました。
API Key未設定ですよって言われてますね。しかしベタガキするのも怖いのだけれども。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/83c8c960-f355-64c2-1cd9-06c210ce0b1b.png)

#### コード最適化機能(Optimize)
次はコードの最適化を試してみます。
対象のコードを選択して右クリック→Optimizeを実施。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/f8f48b2f-d89a-cb40-8a5b-a9241f4e1e27.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/8f33ed8f-2c66-dee8-5b10-36c7aa87f86d.png)
おおっ！気になっていたAPI Keyを別ファイルにしてくれましたね！
#### コード挿入機能(insert)
ファイルを置き換える場合には、対象のコードを選択したまま``` >> insert ```で置き換えられます（挿入も可）
#### ファイル作成機能(New)
新規でファイル作成する場合には``` + New ```を押せば新規ファイルを作成してくれるので、名前をつけて保存してあげるだけで作業は完了です。
楽ですね！

あっという間に天気予報APIを利用できるアプリが作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/2e2f6193-0d2b-25bc-4e8b-f5b2a95814a5.png)

#### コメント付与機能(Add Comments)
せっかくなのでコメントもつけて、Diffで差分を見てみましょう。
同様にコード選択し、右クリック→Add comments
コメントを付与したコードが生成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/8ed1927c-a87e-7e62-a0c6-a3c963959ebb.png)
#### 差分表示機能(Diff)
``` ⇄ Diff ``` 押下で提案したコードと元のコードの差分が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/2c43cc52-bbb0-d031-c077-705367f912a9.png)

#### コード補完・コメントからコードの作成機能(Complete code)
利用できる都市名は自動で取得してプルダウンリストにしたいですね。
今回はコメントだけ修正して、コードを完成させてもらいましょう。5行目のコメントを修正して、Complete codeを実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/9451c3c9-28b0-055d-9377-993c43e145ab.png)
得られたコードでファイルを上書きしてみると。。。
都市名取得できませんね。。どうやら都市名を取得するAPIではないようですね。
普通に```openweathermapで利用可能な都市名を取得するAPIはあるか```を質問してみると、そんなものはないと回答してくれました。代わりに都市一覧情報をJsonで持っていることは教えてくれましたが、都市数が多すぎるので別の実装方針にした方がいいみたいですね。
このように通常の質問でもウィンドウを移動せずに質問できるのは便利ですね。
その後主要都市をプルダウンで表示する方針でコメントを書き換え、コードを置き換えたところ
ほぼコードをいじらず、質問とコメントだけで作れました。
特に同じウィンドウで表示されているので、ファイルの作成やコードの置き換え・挿入などがとても簡単でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/596bf3f7-70a1-d862-21c5-9d1ac917b6b9.png)

#### カスタムプロンプト機能(Complete code)
さらに自分専用のプロンプトのショートカットも作成可能です。
例えばCustom Prompt1に「このコードをPythonに書き換えてください。」と入力し、Enable the ~にチェックを入れておくと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/b84c7c31-b1d7-d415-995c-91e7d0fbeec4.png)
右クリックからCustom prompt1が選択可能になります。
ちゃんと動くコードかは分かりませんが、Flaskでコードを作ってくれていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953477/6d126fb5-ffcb-db70-e77c-86489fa1588a.png)


ここでは紹介しませんでしたが、他にも
 - コードの説明機能(Explain)
 - テストコード作成(Add Tests)

といった機能があります。

# まとめ・思ったこと
Azure OpenAI Serviceがあれば、セキュアに導入が簡単にできるというところは素晴らしいですね。
いやぁ、しかし**Inline suggestionまで実装されたら完璧ですね！**(願望)
その前にGitHub CopilotでAzure OpenAI利用可能になりそうな気はしますが。。

とはいえ、コメントなしでコード書いてから「全体のコメント書いて」とか、コメントで処理内容羅列して「コード完成させて」でほとんどやってくれるので個人的にはGenie AIで十分満足できます。

組織に導入するなら、Azure OpenAI Serviceだけあれば良いGenie AIは優秀な相棒になってくれますよ！