要件：ローコードで作る Azure OpenAI API 連携 AI アプリ

Cats With Blessings Joy

概要

学習者が以下の最終目標と学習到達ポイントを達成するため、本教材では AI アプリの実行基盤および設定フレームワークを事前に提供する。

AI 活用は、以下の 3 つのレイヤーに分類される。本教材では「ローコード + Azure OpenAI」を対象とする。

ノーコード + Azure OpenAI
ローコード + Azure OpenAI (本教材の対象)
プログラミング + Azure OpenAI

学習者の最終目標

ローコード手法で Azure OpenAI API を呼び出す AI アプリケーションを作成し、その動作を動画撮影して提出する。

ローコード手法の二つの学習到達ポイント

Azure OpenAI Service の APIキー、エンドポイント、モデルの設定方法を理解する。
なお LLM API は Azure openAI API を指定する。(必須)

ローコードの範囲内で画面カスタマイズを行う。(任意)

実現の手段

学習者が準備するもの

Visul Studio 2026 Community のインストール

Azure OpenAI Service の APIキー、エンドポイント、モデル名、ローカルデバッグ URL
- API キー：Azure OpenAI の認証キー
- エンドポイント：Azure OpenAI リソースの URL
- モデル名：デプロイしたモデル（例：gpt-4o-mini）
- ローカルデバッグ URL：例 https://localhost:XXXX

学習者のアプリの動作確認方法

Visual Studio のデバッグ機能を使用して、アプリケーションが Azure OpenAI API と正しく連携し、応答を返すことを確認する。

実現手段の選択根拠

セキュリティ意識の手本となるアプリ作成

API キーをフロントエンドに埋め込むことはセキュリティ上のリスクがある。
このためサーバーを構成し、サーバー側で API キーを管理する。フロントエンドからはサーバーを経由して Azure OpenAI を呼び出す方式のアプリ構成とする (＝実行基盤) 。
なお、本構成に係るアプリの実行基盤の作成は教材作成者が行うものとし、学習者は関与しない。

学習者の開発環境の選定の根拠

下記の比較表の結果、学習者がローカルデバッグでアプリの動作確認を行う際の開発環境は Visual Studio または Rider が適切である。
教材作成者の得意分野が Microsoft 製品であることも考慮し、Visual Studio を開発環境として選定した。

学習者が作成するアプリの動作確認の手段の検討

手段	費用	サーバー常駐型アプリの利用可否	備考	判定
ローカルデバッグ	0 円	○		○
Web デプロイ	有料	○	別途、Web/App サーバーの構築が必要	×
Azure Static Web Apps	0 円	×		×
GitHub Pages	0 円	×		×

学習者がローカルデバッグでアプリの動作確認を行う際の開発環境の選定
統合開発環境(IDE)、統合開発環境もどき (機能拡張付き軽量エディタ=IDEもどき) で比較
Azure に接続し API を取得するため HTTPS 通信が必須となる。
HTML / CSS / Javascript(TypeScript) or C# を利用できる IDE, IDEもどきを比較検討する。

IDE/IDEもどき	Win/Mac	費用	HTTPS証明書	判定
Visual Studio	Win	0 円 Community版	○ 自動生成、自動信頼性	○
Rider（JetBrains）	Win/Mac	有料	○ 自動処理あり	○
VS Code	Win/Mac	0 円	△ 手動設定	×
WebStorm	Win/Mac	有料	×	×
IntelliJ IDEA	Win/Mac	有料	×	×

⇧