手順書：ローコードで作る Azure OpenAI API 連携 AI アプリ

1. 事前準備するもの / パソコンで設定しておくもの
2. 手順 1 : Azure Portal で API キー、エンドポイント、モデル名を取得
3. 手順 2 : github からソースコードをダウンロードする
4. 手順 3 : Visual Studio ソースコードに API キー、エンドポイント、モデル名、を設定する
5. 手順 4 : Visual Studio ソースコードにデバッグ URL を設定する
6. 手順 5 : Visual Studio デバッグでアプリを起動する
7. 手順 6 : Visual Studio デバッグを終了する
8. 手順 7: 動画を撮影する
9. 手順 8: 画面レイアウトを変更する (任意)
10. 手順 9: Azure の課金発生を終了させる

エクスプローラー (＝フォルダ) 内のファイルが拡張子表示されるように設定しておくこと

Azure アカウントを取得済みであること

Visual Studio がパソコンにインストールされていること
Blazor Server アプリをデバッグできる機能が Visual Studio にインストールされていること

1. 以下の記事を参考にして、Azure OpenAI Service のリソースを Azure ポータルで作成し、 API キー、エンドポイントを取得してください。
   API キー、エンドポイントは、後で使用するので、メモ帳などにコピーして保存しておいてください。
   ▶ Azure openAI リソースの作り方


2. 以下の記事を参考にして、Azure OpenAI モデルをデプロイしてください。
   モデル名は後で使用するので、メモ帳などにコピーして保存しておいてください。
   ▶ Azure openAI モデルデプロイ

1. AIチャットアプリのソースコードをダウンロードします。
   以下のリンクをクリックして github ページを開いてください。
   ▶ Azure OpenAI Service の api を呼び出して作る AIチャットアプリのソースはこちら


2. [code] をクリックし、続いて [Download ZIP] をクリックして、ソースのダウンロードを開始してください。
   
   


3. ダウンロードフォルダにソースコードのZIPファイルが存在していることが確認できます。
   
   


4. ソースコードをダウンロードフォルダから C ドライブ直下の任意の名前のフォルダに移動させます。 エクスプローラーの検索窓に [c:\] と入力して、Enter キーを押してください。C ドライブに移動します。
   
   


5. C ドライブ直下に任意の名前のフォルダを作成してください。例では [work] という名前のフォルダを作成しました。
   
   


6. C ドライブ直下に任意の名前のフォルダにソースコードのZIPファイルを移動させてください。
   
   


7. ZIP ファイルを右クリックして [すべて展開] を選択してください。
   
   


8. 展開するフォルダ先を設定してください。
   続いて [展開] ボタンをクリックしてください。
   
   


9. ZIP ファイルの展開が完了しました。
   
   

[appsettings.json] の設定を行います。

1. 展開したフォルダの中に入ってください。
   拡張子が [slnx] のファイルを開くと、Visual Studio が起動します。
   
   


2. 初回のみこの画面が出現します。[信頼して続行] をクリックしてください。
   
   


3. ソリューションエクスプローラーを展開して [appsettings.json], [appsettings.Development.json] が見える位置まで展開してください。
   
   


4. [appsettings.json] の設定を行います。
   [appsettings.json] をクリックするとファイルが開きます。
   「手順 1」で取得した API キー、エンドポイント、モデル名を入力します。
   入力を終えたら上書き保存します。
   
   
   
   

[appsettings.Development.json] の設定を行います。

1. ソリューションエクスプローラーの [launchSettings.json] をクリックしてファイルを開いてください。
   [https] の [applicationUrl] の https から始まる URL がデバッグに使用される URL です。
   この URL を コピーしてください。
   
   


2. [appsettings.Development.json] をクリックするとファイルが開きます。
   先ほどコピーしたデバッグ URL を貼り付けます。
   入力を終えたら上書き保存します。
   
   
   
   

1. 図のように [Debug], [Any CPU], [https] となるよう設定します。
   
   


2. [ビルド] タブをクリックし一覧から [ソリューションのリビルド] を選択します。
   
   


3. [すべて再構築 1 正常終了] と表示されていることを確認します。
   
   


4. [デバッグ] タブをクリックし一覧から [デバッグの開始] を選択します。
   
   


5. デバッグモードでアプリが起動したことを確認できました。
   
   


6. デバッグモードでアプリがきちんと動作していることを確認してください。
   
   

図で、[■] のマークをクリックするとデバッグは終了します。

1. デバッグでアプリが起動している状態にしてください。


2. キーボードで [Windowsマーク] と [G] を同時に押してください。


3. 図で赤丸で囲ったマークをクリックすると動画撮影が開始されます。
   
   


4. 図で赤丸で囲ったマークをクリックすると動画撮影が終了します。
   
   



5. 撮影した動画は、エクスプローラーの [ビデオ] の中の [キャプチャ] の中に保存されます。
   
   

1. [Home.razor] ファイルの中の [div class="chat-container"] で囲まれた箇所が、HTML/CSS で書かれている箇所です。 この箇所の内容を変更することで画面レイアウトに修正を加えることができます。
   
   


2. [style.css] ファイルがスタイルシートです。 このスタイルシートの内容を変更することで画面レイアウトに修正を加えることができます。
   
   

Azure Portal でサブスクリプションを取り消すと課金が発生しなくなります。
▶ Azure サブスクリプションを取り消して削除する | Microsoft Learn