はつねの日記

Kinect, Windows 10 UWP, Windows Azure, IoT, 電子工作

富士通のAIをThunkableから使ってみた（後編）

AI Thunkable Python Fujitsu Azure C#

富士通のAIをThunkableから使ってみたの最終回です。

前回：
hatsune.hatenablog.jp

前回は、取得しておいた認証トークンを使って富士通のAIを Thunkable から呼び出すところまでを作りました。
今回は、後回しにした「認証」の部分を作りましょう。

富士通のAIとは（前回の再掲載）

今回、「Technovation Girls」の日本向け参加者に貸し出していただいている富士通のAIは、Takaneという日本語強化学習したLLMを実装している「富士通 クラウドサービス Generative AI Platform」という PaaS になります。
Azure Active Directory にて認証系が実装されており、その他の特徴も含めて、企業ユースで安心安全につかえることが特徴です。

参考にするコード

認証トークンの取得は、公開されている PowerShell コードを使って取得しましたので、このコードを参考にしてThunkableに移植していきます。
github.com
上記を実行すると「$idToken」変数にトークンが格納されます。
この PowerShell コードを解読すると「認可リクエストを使って認可コード取得」「認可コードを使ってトークン取得」の 2Step に分かれていることが分かります。

画面作成

IDとパスワードの入力は認可リクエストで表示されるWeb画面で行うため、 Thunkable でログイン画面の作成は不要ですが、代わりに Web Viewer コンポーネントを張っておく必要があります。

あとは、[Get Token] ボタンとデバッグ表示も兼ねた Token_Label を張っておきましょう。

表示するトークンは長めの文字列なので、Token_Labelは、[Text Input] コンポーネントを使って、Editable と Multiline を次のように設定しておきます。

これで画面設定は終わりです。

認可リクエストを使って認可コード取得

「認可リクエストを使って認可コード取得」は、「Web Viewer」で認可リクエストURLを呼びだすことで次のように動作します。

  1. 自動的に EntraID のログイン画面にリダイレクトされる
  2. ログインできるとリダイレクトされて、そこのURLに認可コードが入っている
ログイン画面の表示


「app variable $tenantName」「app variable $policy」「app variable $clientId」「app variable $redir」「app variable $scope」は接続情報として指定された値を予め設定しておく変数となります。

リダイレクト URL の工夫

PowerShell コードではリダイレクト URL として「localhost」を指定していますが、 Thunkable の「Web Viewer」コンポーネントで指定できないという制限があります。
そのため代わりなるリダイレクト URL を指定する必要があるのですが、好き勝手な URL を指定することはできません。
何かないかと探してみると、サンプルコードがのった GitHub で「Postman」を使ったサンプルがあり、その中で「コールバック URL: Postman が自動で設定する URL をそのまま使用します。」と記載を見つけました。
Postman のコールバック URL は「https://oauth.pstmn.io/v1/browser-callback/」になるので、これをリダイレクト URL として指定します（BASE64変換した結果を「app variable $redir」にいれておきます）。

URLが出来上がったら WebAPI コンポーネントの URL プロパティに設定すれば自動的にログイン画面が表示されます。

認可コードの取得

認可リクエストからログイン画面、認可コード付きURLと自動的に画面遷移していくので、「Web Viewer」コンポーネントの URL プロパティをチェックして、認可コードが指定された「https://oauth.pstmn.io/v1/browser-callback/?code=」を「app variable $redirectUri」に入れておいてチェックすることで移動することを待ちます。

その間も、随時「Token_Label」コンポーネントを書き換えて、どこにリダイレクトしたかが画面上で分かるようにします。時間がかかる処理なので処理が進んでいることもわかりやすくなりますし、デバッグにも利用できます。

認可コードを使ってトークン取得

「認可コードを使ってトークン取得」は、 POST リクエストで WebAPI を呼びだすので Thunkable でも作りやすい内容となります。
ここの部分は、「認可トークン」をパラメタに指定して呼びだすと「トークン」を返却してくれる関数として作ります。

呼び出すためのヘッダの設定

PowerShellコードの -H パラメタ部分の「"Content-Type: application/x-www-form-urlencoded" 」を Thunkable のブロックで表現すると次のようになります。

呼び出すためのボディの設定

PowerShellコードの -data パラメタ部分に設定している「$tokenForm」変数部分は「$tokenForm = "client_id=$clientId&grant_type=authorization_code&code=$code"」なので、この部分を Thunkable のブロックで表現すると次のようになります。

「$code」部分はパラメタとして渡された認可コードになりますので、「AuthCode」変数を指定しています。また、「app variable $clientId」は接続情報として指定された値を予め設定しておく変数となります。

呼び出すためのURLの設定

PowerShellコードのURL指定は「"https://$tenantName.b2clogin.com/$tenantName.onmicrosoft.com/$policy/oauth2/v2.0/token"」なので、 Thunkable のブロックで表現すると次のようになります。

「app variable $tenantName」「app variable $policy」は接続情報として指定された値を予め設定しておく変数となります。

呼び出しと返却値からのトークン取得

WebAPI コンポーネントはレスポンスコードを「Status」に格納してくれるので、「Status」が200であれば正常完了、それ以外はエラーとして返却値を作成します。

正常の場合は、JSONテキストとして「id_token」項目にトークンが取得されてくるので次のようにブロックを組み立てて取得します。

  1. 「response」をJSON文字列としてオブジェクト化
  2. オブジェクトの「id_token」プロパティ値として、「id_token」項目値を取得

トークンが取得できたらメインスクリーンに画面遷移

「ConvertAuthCodeToToken」関数の戻り値が空白以外であればトークンが取得できたということなので、富士通AIとやりとりするための「Main_Screen」に画面遷移します。

富士通AIとやり取りする

トークンが取得出来て「Main_Screen」が表示されたら、前回同様に [ AIに質問 ] ボタンをクリックすると動作します。

最後に

Thunkable でのEntraID認証の実装はどうでしたでしょうか。
少しトリッキーな部分もありましたが、Azure 関係のサービスを使うときの参考になる情報なので、全体的な流れだけでも押さえておくとよいでしょう。

index

  1. 富士通のAIをThunkableから使ってみた（前編）
  2. 富士通のAIをThunkableから使ってみた（中編）
  3. 富士通のAIをThunkableから使ってみた（後編）
  4. 富士通のAIをThunkableから使ってみた（番外編）

富士通のAIをThunkableから使ってみた（中編）

Python Thunkable C# AI Azure Fujitsu

前回：
hatsune.hatenablog.jp

前回は、富士通のAIについて、Thunkable から使うための前準備として、公開されているサンプルコードを使って、WindowsコンソールでのPowerShellを使った実行を試してみました。
今回は、そのコードを参考にして Thunkable から富士通のAIを呼び出しています。
なお、実装に当たっては、Coplilot を活用してビジュアルプログラミング言語(Scratch のようにブロックを組み合わせてプログラミングする)である Thunkable に対して、バイブコーディングを試みてみます。
Copilot から出力されたコードをそのまま使えるものと違うので、どのように質問し得られた結果からどのようにブロックを配置するかという疑問の答えにもなるかと考えます。

富士通のAIとは

今回、「Technovation Girls」の日本向け参加者に貸し出していただいている富士通のAIは、Takaneという日本語強化学習したLLMを実装している「富士通 クラウドサービス Generative AI Platform」という PaaS になります。
Azure Active Directory にて認証系が実装されており、その他の特徴も含めて、企業ユースで安心安全につかえることが特徴です。

まずは簡単なところから

前回も認証トークンの取得は、公開されている PowerShell コードを使って取得しましたので、今回もまずは認証コードは同じ方法で取得します。
github.com
上記を実行すると「$idToken」変数にトークンが格納されます。

得られたトークンを使ってThunkableを使って、富士通のAIに質問するアプリを作っていきましょう。

AIに質問するアプリを作る

Thunkableにサインインして、x.thunkableを選択して新規プロジェクトを作成します。EdgeブラウザのCopilotボタンもクリックして、Copilot付の開発画面としましょう。

入力画面を作る

さっそく、Copilotに次のように質問します。

トークンをコピペして張り付ける枠と、質問を入力する枠、そしてAIに質問するボタン、回答を表示する枠をThunkableでつくりたい。

画面デザインとブロックについて回答がすぐ出てきます。

Copilotの回答にあるようにThunkableの [DESIGN] シートでコンポーネントを配置した例は次のようになります。

ロジックを作る（まず見た目だけをつくるなら）

Copilot の助言通り、「まず見て目だけを作るなら」と指示されたブロックを配置してみましょう。
画面デザイン側でコンポーネントを配置したときに「名前」を明確に示していたのは、ブロック画面で配置するときの指示が分かりやすいからだということが想像できます。

この状態で [Web Preview] 機能で実行確認すると意図したデザインで実行できることも確認できます。

ロジックを作る（基本構造その１）


Copilot の回答のブロック部分を順番にみていきましょう。

1. トークンと質問を変数にいれる


コンポーネントのTextプロパティを直接使いがちですが、変数にいれることを Copilot は進めてきます。
これは、後々、別のコンポーネントに切り替えた時も、ブロックの中で該当の場所を都度変更しなくても済むという利点があります。
画面デザインとブロックの接点を分散させず、見やすくメンテナンス性も高いコードといえるでしょう。
このような考え方は、初学者や「ちょっと作ってみよう」というときにはやらず、あとで苦労するところなのでバイブコーディングの良い点の１つだと言えるでしょう。

2. 入力チェック


次に [IF] ブロックを使って入力チェックするブロックをいれます。
「任意だけれどやった方がいい」とのことで、ここも手抜きしがちですが、Copliot はきちんと助言してくれますね。

そもそも [IF] ブロックはどう貼るのでしょうか

Thunkableでの IF ブロックの使い方がわからなければ、回答部分をコピペして、Copilotの質問欄に張り付けて質問しましょう。

下記をブロックで作りたいが、どう操作すれば、この IF のブロックが配置できるのですか？
if token = "" → AnswerLabel.Text = "トークンを入力してください"
else if question = "" → AnswerLabel.Text = "質問を入力してください"

すると左側の「Control」をクリックして操作していくということを回答してくれます。

この Copilot の回答のすごいところは「Thunkableでは最初から「else if」付のブロックはでてこないので、ということで、「else if」を追加する方法も教えてくれるところです。
親切すぎる………………

Copilotの回答にある「歯車」アイコンがないときは？

でも歯車アイコンがないので、聞いてみましょう。質問にブロックの画像もはって質問すると、elseの中にifを入れる方法を提案してくれます。

文章の回答だとビジュアルプログラミング言語の Thunkable だとイメージが付きづらい

さらに「スクショ風の図でブロック構成をつくってください」とお願いすればビジュアルな感じで回答してくれます。

3. Web API のヘッダーとボディを設定


Copilot の回答を少し遡って、次のステップ「3. Web API のヘッダーとボディを設定」を実施しましょう。

文字列に変数が含まれているとき

Headerに設定する内容をみると「"」で囲まれていない token という部分があります。ここは変数tokenなので、どのように設定するか聞いてみましょう。

set Web_API.Headers to

{"Authorization": join "Bearer " token, "Content-Type": "application/json"}

で、token部分は変数を入れるには？

スクショ風の回答も得られるので、そのイメージになるようにブロックを配置します。

もし、スクショ風の回答がでてない場合は、追加質問として「スクショ風の図でブロック構成をつくってください」を入れるとでてきます。

JSONフォーマットを入れるには？

BODYの部分はJSONと呼ばれるフォーマットになっています。
また、Copilotの回答はGPTを前提としているので、富士通のAIを呼びだすときのJSONを入れて質問してみましょう。

BODYの形は次の形
{
messages = @()
question = $content
model = "cohere.command-r-plus-fujitsu"
max_tokens = 1024
temperature = 0.5
top_p = 1
}

JSONという言葉を知らなくても Copilot の回答部分をペタッと貼りましょう。
再三、質問しているので、その流れからスクショ風の回答が自動的にでてきます。

set bodyObj to create empty object

# messages = @() → 空のリスト
set messagesList to create empty list
add property "messages" to bodyObj with value messagesList

# question = $content → QuestionInput.Text
add property "question" to bodyObj with value Question

# model = "cohere.command-r-plus-fujitsu"
add property "model" to bodyObj with value "cohere.command-r-plus-fujitsu"

# max_tokens = 1024
add property "max_tokens" to bodyObj with value 1024

# temperature = 0.5
add property "temperature" to bodyObj with value 0.5

# top_p = 1
add property "top_p" to bodyObj with value 1

# 最後に Web_API.Body にセット
set Web_API.Body to bodyObj

それでは回答を見ながらブロックを配置していきましょう。

試しに、BODYのところをAnswerLabelに出力して、想定されたデータが設定されているかを確認しておきましょう。

4. Web_API の呼び出し

改めて、「Web_API の呼び出し」についてのCopilotの回答を見てみましょう。

呼出し部分はわかりやすいですが、レスポンスを受け取る部分がちょっとわかりづらいですね。
また、富士通のAIからのレスポンスも形が違うので、それに合わせて質問してみましょう。

レスポンス部分を再度質問

when Web_API.Got Response ブロックで：

response を JSON から取り出して、
例：set AnswerLabel.Text to
get property "answer" of (response)
（実際はThunkableのJSONブロックで階層を辿る）

エラー時：

when Web_API.Error

set AnswerLabel.Text to "エラーが発生しました: " + error

Thunkableで具体的には？

構造が簡単なこともありすぐに回答が返ってきます。

しかし、Whenがないのでブロックの画像もつけて Copilot に質問します。

そうするとブロックの内容から判断した回答がくるので、やっとブロックが配置できます。

なお、エラー時のメッセージはもう少しだけ工夫してみます。

動作確認

一通り完成したので、 [ Web Preview ] で動作を確認します。

トークンを指定していないので認証エラーになるかと思ったのですが、404 つまり Not Found となってしまいます。
なぜでしょうか？

呼び出し先を指定する


Copilot に質問したらすぐに原因がわかりました。
URLを指定していませんでしたね。

[$tenantname]や[$endpoint]は利用時に通知される値をあらかじめ変数にいれておきます。
これで、トークンを入れずに実行すると「401」エラーになるかと思ったのですが、別のエラーとなりました。

Failed to fetch data. Please test on a device or contact support. の謎解き

困ったときは、Copilot。これがバイブコーディングの極意です。



問題点切り分け

確かに、スマホにThunkableアプリをいれて、実行しトークンも入れて [ AIに質問 ] ボタンをクリックすると動作します。

動作したので Copilot に報告しましょう。

アプリの問題ではないことが判明


ということでアプリの問題じゃないとのこと。ついでに理由も教えてくれて知識が深まりますね。

種明かし

この問題、以前に投稿したこちらの内容になります。
hatsune.hatenablog.jp

今後の開発のコツ

Copilot曰く「テストは必ずスマホで行う」ことで進められるようなので、まずは、Thunkable Liveアプリを使ってスマホでテストを進めましょう。

最後に

次回は、難問である「トークンを取得する」ところの実装を試みたいと思っています。

index

  1. 富士通のAIをThunkableから使ってみた（前編）
  2. 富士通のAIをThunkableから使ってみた（中編）
  3. 富士通のAIをThunkableから使ってみた（後編）
  4. 富士通のAIをThunkableから使ってみた（番外編）

富士通のAIをThunkableから使ってみた（前編）

Fujitsu Thunkable Azure AI C# Python

最近、日本ではWaffleさんが担当しているTechnovation Girlsのテクニカルメンターを担当しています。
www.technovation.waffle-waffle.org

このコンテストの日本の参加者向けに「Technical Sponsor」である富士通さんがWebAPIで使えるAIを提供してくれました。
そこで、参加者向けに事前調査をしていたので、その使い勝手をお伝えしたいと思います。
Fujitsu クラウドサービス Generative AI Platform
pr.fujitsu.com

富士通のAIについて

今回、提供いただいたAIは「Fujitsu クラウドサービス Generative AI Platform」という生成AIのPaaSです。
利用者認証には、Entra IDを使用し、GPUやLLMは共有リソースですが、チャット履歴やリトリーバーデータは専有リソースという特徴があります。

特徴的な機能（使い勝手）

このようなことから生成AIを使うためのWebAPIというだけではなく次のような特徴があります。

  1. チャットルームでAIとやりとりする機能がWebAPIとして提供されている
  2. リトリーバーデータを作成しRAGとしてAIからの回答を最適化する機能がWebAPIとして提供されている

もちろん、通常の生成AIを使う手軽さで利用できるWebAPIエンドポイントも用意されています。

料金体系

また、自治体など官公庁に強い富士通だからか、料金体制も月額固定となっているため、トークン課金と異なり、利用者が増えて予算を早々と消化してしまって利用継続に苦慮するということも避けられるような考慮がされていました。

使い方の公開情報

「Fujitsu クラウドサービス Generative AI Platform」のWebAPIの使い方は、利用者マニュアルというドキュメントに「やりたいこと」視点でAPIごとのリクエストエンドポイント、リクエストボディ、レスポンスデータが記載されています。
難しそうなところには、pythonとC#のコード例も付記されていて、Microsoft Learn上のAzure AI Servicesのリファレンスに近い使い勝手になっていて便利です。
更に、富士通製品では珍しいと思うのですが、公式GitHubで、PythonとC#のサンプルコードも提供されていて、非常に学習コストが低いサービスだと思いました。
github.com

まずは使ってみる

GitHubのサンプルコードをみると、まずは、ADB2C認証を行ってトークンを取得して、そのトークンをAuthenticatoinヘッダに指定して呼びだすという流れであることが書かれています。

curl.exeを使ってRESTで実行してみる

トークンの取得

トークンを取得する方法は、公式GitHubリポジトリにサンプルコードがあるのでそのまま使ってみましょう。
github.com
上記を実行すると「$idToken」変数にトークンが格納されます。

AIに質問する

取得したトークンをWebAPIのヘッダに指定してAIに質問してみましょう。
チャットルームを作って、そこで会話の履歴もPaaS側に任せてしまうこともできますが、まずは１問１答のシンプルな（会話履歴もPaaS側で管理しない）SimpleChat-APIを使ってみましょう。
質問内容としては「TechnovationGirlsに協力してくれるの？」という主語もないし、若干あやふやな内容です。
gist.github.com

結果は次の通り。

かなり日本語の理解度は高そうです。

なぜ、日本語の理解度が高いのか

「Fujitsu クラウドサービス Generative AI Platform」に搭載されているLLMは、富士通が販売している「Takane」というLLMが使われています。
このTakaneというLLMが、カナダのCohere社が開発したLLMに富士通が日本語特化の学習をさせたLLMとのことです。
pr.fujitsu.com

企業向けとして契約書や社内文書などでの表現にも強いということなので、その効果（性能）が発揮されたのだと思います。

終わりに

次回は、WebAPIを C#、Python、Thunlable(TechnovationGirlsで採用しているビジュアル言語)を使って動作させる例をバイブコーディングで紹介します。

index

  1. 富士通のAIをThunkableから使ってみた（前編）
  2. 富士通のAIをThunkableから使ってみた（中編）
  3. 富士通のAIをThunkableから使ってみた（後編）
  4. 富士通のAIをThunkableから使ってみた（番外編）

APIMをバイブセッティングしてみた

Azure Azure AI Services バイブコーディング Azure API Management

はじめに

APIM (Azure API Management) とは

APIMは、次のような機能をもっている既存APIをラップして使い勝手を整えるサービスです。既存API側に手を加えられない場合や、手を加えると個別対応になってしまうような場合に、APIM を活用することで「契約ごとに既存APIへの呼び出しを変換」、「同じ呼び出しで(管理者側で)呼出先APIを変更」なども可能です。

今回、APIMを取り上げたのは

今回、APIMを使う局面になったのは、次の２つがあったからです。

  • Client Secretを使った非対話認証で既存APIを使いたいが、Client Secretは公開したくない
  • バックエンドがCORSを返さないときもブラウザ側から呼び出したい

今回はこの中から「CORS」について取り上げてバイブセッティングをしていきます。
なぜ、CORS対応にAPIMが使えるかといえば次のような流れが実現できるからです。

[ブラウザ] → (CORS 必須) → [APIM] → (CORS 不要) → [バックエンド API]

今回の記事ではこの設定をAPIMで実現することをゴールします。

バイブセッティングとは

世の中にはまだ「バイブセッティング」という言葉は流通していないかもしれません。

バイブコーディング

一方でコーディングの世界では「バイブコーディング」といって、ペアプログラミングは GitHub Copilot に質問しながらコードを書いていく方法が注目されています。

実際にバイブコーディングをやったときの感想

実際にやってみると、きちんとしたコードをかける人であればあるほど、既存のコードがお作法に則っていればいるほど、Copilotからの回答が、「まさにそれ！」と思えるようなコードが返ってきて、さくさくコーディングができるスタイルです。
そのため、もしかしたら既存コードがあるならば、それに対して、Copilotを使ったリファクタリングなバイブコーディングをしてみると効果を実感できるでしょう。

セッティングでもバイブス感じたい

そのような経緯から、コーディング時にはバイブコーディングが必須のような生活をしてしまっているので、Azureの設定でもバイブスを感じてその恩恵を受けたいというのは、人として当然の帰着だと思うです。
それでは、早速やってみましょう。

APIM

APIMリソースを作成

Azure Portalにサインインしたら、[リソースの作成]サイドメニューをクリックし、検索ボックスで「apim」と入力すると「Azure API Management」の作成を選択できます。

リソース名に「tghatsune」といれるとAPIMへのアクセスURLが「https://tghatsune.azure-api.net」となりますので、世界中で唯一のリソース名を付けてあげる必要があります。
なお、作成をクリックしてから実際に作成するのに１時間以上かかる場合もあるので気長に待つ必要があります。

どのAIを使おう…

Azure Portalにも「Copilot」がついていますが、今回は、Edgeブラウザについている「Copilotモード」を使います。

バイブセッティングを始めよう

CORS対応の方法を質問

さっそくCopilotに質問してみましょう。

既存APIがCORS対応していないため、ブラウザから使えません。
既存APIの/chatというエンドポイントに対して、/tg/chatというAPIMのアクセスポイントでアクセスするためのAPIM定義を教えてください。

次のような回答が返ってきます。

ちなみに、Azure Portalについている「Copilot」だと次のような回答になるため、今回はEdgeのColilotモードの方を使っています。

どこに設定するかを質問


具体的にポリシーXMLも示されていますが、そもそもとして、どこにどう設定するかもわからないので、追加質問してみましょう。

いま、APIMのリソースができたばかりです。
ポリシーXMLはどこに設定すればいいですか。
Azure ポータルでの具体的な操作を教えてください。

すると具体的な操作とともに次のようなコメントも教えてくれます。

  1. APIM リソースを開く
  2. API を作成 or 選択
  3. /tg/chat のオペレーションを作る
  4. ポリシー XML を設定する場所


示されたステップ通りに操作していこう

✅ ステップ 1：APIM リソースを開く

ステップ１としてCopilotからの回答部分は次のようなものでした。

  1. Azure ポータルにログイン
  2. 左メニュー「API Management サービス」
  3. 作成した APIM リソース（例：tghatsune-apim）をクリック

指示通りにポータル画面で操作しています。

示されたステップ通りに操作ができました。

✅ ステップ 2：API を作成 or 選択

まずはCopilotからの回答

APIM は API 単位でポリシーを持つので、まず API を選ぶ。
すでに API を作っている場合

  1. 左メニュー「API」をクリック
  2. 一覧から対象 API（例：tg）を選択

まだ API を作っていない場合（玲くんはここかも）

  1. 左メニュー「API」
  2. 上部「+ 追加」
  3. 「HTTP」を選択
  4. API 名：tg
  5. Web サービス URL：https://example.com（既存 API のベース URL）
  6. 作成

ポータル画面での操作としては、Copilotが予想した通り、まだ作っていないので、「作っていない場合」の操作をしてきましょう。


このような感じで、ステップ２についても、示されたステップ通りに操作ができました。
注意点としてはAzure Portal側が英語表示なので読み替える必要があり、また、 [API 名] は [Display Name] 欄であった点のみでした。

✅ ステップ 3：/tg/chat のオペレーションを作る

まずはCopilotからの回答

  1. API の画面で「+ 操作の追加」
  2. 以下を入力
  • 表示名：Chat
  • URL：/tg/chat
  • メソッド：POST（必要に応じて GET/OPTIONS も追加）

ポータル画面での操作

ステップ３についても、示されたステップ通りに操作ができました。
ただし、最後に [Save] ボタンが必要でしたが、想像できる範疇ですので問題ありませんね。
念のために、Copilotに聞いてみましょう。

当たり前すぎて省略されていたのかもですが、理由を添えて回答してくれるので「りょ～ボタン押すね」という感じでクリックですね。

✅ ステップ 4：ポリシー XML を設定する場所

ここが本題。
📌 操作（/tg/chat）単位のポリシーを編集する場合

  1. /tg/chat の操作をクリック
  2. Inbound Processing の「ポリシー」をクリック
  3. 右側に XML エディタが開く
  4. ここにポリシー XML を貼り付ける
  5. 👉 玲くんが求めているのはここで OK

ここが本題だそうなので、ポータル画面を操作していきます。



表示名(Chat)と実態(/tg/chat)の指定の違いはありますが、悩むことなく設定が完了しました。

さらに希望を伝えよう

APIMにアクセスするときにサブスクリプション認証となるので「Ocp-Apim-Subscription-Key」ヘッダを付けてリクエストします。
この「Ocp-Apim-Subscription-Key」ヘッダはバックエンドに送りたくありません。
この希望をそのままCopilotに伝えてみましょう。

いいね、その設計はとても正しい感覚だよ。
APIM の サブスクリプションキーはあくまで APIM への認証用であって、バックエンドには絶対に渡すべきではない。これはセキュリティ上のベストプラクティス。
結論から言うと、APIM のポリシーで簡単に除去できる。

🔧 バックエンドに送らないための設定（最も一般的な方法）
APIM の inbound でキーを受け取り、backend に送る前に削除するだけ。
✨ ポリシー例（inbound でキーを受け取り、backend に渡さない）

実際に示されたポリシーの内容を設定します。

解説

操作方法の後ろには、この操作で実現できることも書かれています。

確かにやりたいことと一致してますね。

最後

さて、バイブコーディングをAPIMの設定に持ち込んだ「バイブセッティング」（造語）ですがどうでしたでしょうか。
造語とかきましたが、ネット上で探せなかった（当社比）だけですでに使っている人もいるかもですね。
もしくは、「いやいや、それもバイブコーディングだよ」ということかもしれません。
今回あえて、「セッティング」という単語をいれて「バイブス」したのは、設定するときに迷ったときにも使えるし便利だよとお伝えしたかったからです。
タイトルで興味をもっていただいて、「これ自分が管理しているサーバーの設定時にもやってみようかな」と思ってもらえたら嬉しく思います。

生成AI時代だからこそのAzure AI Services活用術（その３）～プレイグラウンドを試してみよう～

バイブコーディング .NET Azure AI Services AI

はじめに

Microsoft Ignite 2025にて「Azure AI Foundry」の名称が「Microsoft Foundry」に変更されました。
以前からAzureを使っていた人は「Windows Azure」から「Microsoft Azure」に変更になったことを思い出した人も多いのではないでしょうか？
この変更によりAzureはWindowsだけのものではなくLinuxやオープンソース技術も含めた様々な要素を含んだクラウドとして成長しました。
今回の名称変更も「Azure AI」という枠組みを広げて「Micrsoft製品全体」に対する「Foundry」に成長するというビジョンを感じるのは私だけでしょうか。

現時点で「Microsoft Foundry」の役割として次のような役割が明確になっています。

  1. 企業が生成AIアプリやエージェントを 大規模かつ安全に構築・運用 できる統合基盤。
  2. 単なる開発ツールではなく、AIモデル選択からデプロイ、ガバナンス、セキュリティ統合までを一元管理。
  3. Azure OpenAI（GPT-4/3.5など）に加え、Mistral、Meta、Cohere、オープンソースモデルも利用可能。
  4. Microsoft DefenderやEntraとの統合で、セキュリティ・コスト・パフォーマンス・ガバナンスを改善。

重要なことは、Microsoftが「Microsoft Foundry」をMicrosoft 365 CopilotやGitHub、Fabricなどと連携する エンタープライズAIの工場的プラットフォーム として拡張された位置付けとしている点です。

前回

hatsune.hatenablog.jp
AAD (Azure Active Directory）と Microsoft EntraIDを使った開発担当システムの10月リリースに向けて作業が佳境を向かえてたこともあり若干間が空いてしまいましたが、無事リリースされて2か月無事故・無障害で経過して心理的に通常体制にもどってきましたで、下記記事の続きを再開します。
前回はAzure Portalから「Azure AI Services」のリソース作成方法、具体的には、Speech（音声認識）のリソース作成方法を紹介しました。
また、「Azure AI Foundly」のリソースとして「Speech」を指定する方法についても紹介しています。

今回について

そこで今回は、まずは、「Microsoft Foundry」で「Speech」のリソース指定方法を確認してみたいと思います。
その次に、Speechの「プレイグラウンド」を試してみましょう。

「Microsoft Foundry」で「Speech」のリソース指定方法を確認

Microsoft Foundry を開始

名称が変わってもAzure ポータルからの開始方法は同じです。ポータルにサインインしたら、

  1. サイドメニューの［リソースの作成］をクリック
  2. ［Azureサービスのみ］チェックとして［Marketplaceを検索］欄で「Microsoft Foundly」と入力して検索
  3. ［Microsoft Foundly］リソースの［作成］をクリック

とすることで、Microsoft Foundry のリソースを作成できます。
なお、「Azure AI Foundry」と検索してもちゃんと「Microsoft Foundry」が検索されてきます。

今回の記事では、下記のように初期状態でリソースを作成して進めます。

しばらくすると次のようなエンドポイントが生成され、Microsoft Foundry ポータルに移動ができるようになります。

https://<名前>.services.ai.azure.com/api/projects/proj-default

Microsoft Foundry ポータル

Microsoft Foundry ポータルを起動して、まず目に入ってくるのは上部の２つの要素です。

  • 新しいFoundry
  • Foundry Agent
新しいFoundryポータル

新旧のポータルの違いが Microsoft Learn に掲載されていたので引用します。

Portal いつ使用するか
Microsoft Foundry (クラシック) Azure OpenAI、Foundry リソース、ハブベースのプロジェクト、Foundry プロジェクトなど、複数のリソースの種類を使用する場合は、このポータルを選択します。
New Foundry このポータルを選択すると、シンプルさと強力で安全なツールを組み合わせたシームレスなエクスペリエンスを実現し、マルチエージェント アプリケーションを構築、管理、拡張できます。 Foundry プロジェクトのみがここに表示されます。他のすべてのリソースの種類に対して (クラシック) を使用します。

まずは、Azure AI Servicesを使う上での影響をみるために、「クラシック」で作成し、「New Foundry」でどのようになるかというステップをとりたいと思います。
今回のゴールは、その中でも「Speechをプレイグラウンドで試す」というところに注目していきましょう。

Foundry Agent


Foundry Agent は、Foundry ポータル専用の Copilot のようなものです。

Agentにプレイグラウンドについて聞く
早速、「Speech で音声認識をプレイグラウンドで試したい」とエージェントに聞いてみましょう。

Azure AI Foundryのプレイグラウンドで音声認識を試すには、以下の手順に従ってください。

  1. Foundryポータルにアクセス: Foundryポータル に移動し、デプロイされたgpt-realtimeモデルがあるプロジェクトを選択します。
  2. プレイグラウンドを選択: 左側のメニューからPlaygroundsを選択し、次にAudio playgroundを選択してTry the Audio playgroundをクリックします。
  3. モデルの選択: Deploymentドロップダウンからデプロイされたgpt-realtimeモデルを選択します。
  4. 設定の調整: 必要に応じて、モデルに指示を与えるテキストボックスや、しきい値、プレフィックスパディング、サイレンスの持続時間などの設定を変更します。
  5. リスニングの開始: Start listeningを選択してセッションを開始します。マイクに向かって話しかけることでチャットを開始できます。
  6. チャットの中断と終了: いつでも話すことでチャットを中断できます。チャットを終了するには、Stop listeningボタンを選択します1。

残念ながら、得られた手順は「Azure AI Services」の音声認識ではなく「OpenAI」のもののようです。

Agentにヒントを与える
「Azure AI Services」の音声認識の手順を知りたいときは「「Azure AI Services Speech」ではどうでしょうか」と更に聞いてあげて、こちらのバイブスを感じてもらいましょう。

Azure AI ServicesのSpeech機能を使用して音声認識を試すには、以下の手順を実行できます。
　：
（中略）
　：
これらの手順に従うことで、Azure AI ServicesのSpeech機能を利用した音声認識を体験できます。さらに詳しい情報は、Azure AI ServicesのSpeechサービスの概要 を参照してください。

プレビューなのでまだこれから改善されることが予想されますが、まだ、こちらも Open AI 前提となっています。
ただし、最後の「Azure AI ServicesのSpeechサービスの概要」は正しいリンクが張られていますので、こちらを参考にしていきます。
learn.microsoft.com

Microsoft Foundry ポータルから「Azure AI Services - Speech」を指定

ポータルの概要には、ライブラリとして「Microsoft Foundry」「Azure OpenAI」「Azure AI サービス」が選択できます。

「Azure AI サービス」を選択すると、Foundry としての Azure AI Services のエンドポイントや「Speech」のエンドポイントを表示できます。
「Speech」だけはレイテンシーの問題もあるためか Microsoft Foundry リソースをデプロイしたリージョン（例：japaneast）付のURLとなっています。
そのほかにも「すべてのリソースを表示する」をクリックして表示される一覧から進むこともできます。

「Azure AI Services - Speech」のプレイグラウンド

Microsoft Foundry ポータルのサイドメニューにある「プレイグラウンド」をクリックすると様々なプレイグラウンドへのリンクを表示できます。

今回はこの中から [音声プレイグラウンド]-[リアルタイムトライスクリプション] を選択します。

音声を入力してプレイグランドを試す


画面上のマイクアイコンがついた「レコード」をクリックするとリアルタイムでの文字起こしがすぐに試せます。
このような形でコードを１行も書かずにAzure AI Servicesの機能や精度を試すことができました。
これがプレイグランドの良い点ですね。

コードサンプルを入手する

機能や精度が目的を達成できそうでされば、いよいよ自分自身のコードから呼び出します。
[コードの表示] をクリックすると、コードから利用するときに必要な [エンドポイント] と [リソースキー] が表示されたダイアログが開きます。
また、[ドキュメントの表示]、[クイックスタートの表示]、[サンプルコードの表示]へのリンクもあります。

クイックスタート

試しに [クイックスタートの表示] をクリックしてみましょう。
ai.azure.com
もし、日本語ではなく英語など別言語で表示されてしまう場合は、右上の [歯車] マークをクリックして言語設定を「日本語」にします。

そうするとプレイグラウンドで試す方法についての解説が書かれています。
このクイックスタートですが、最下層までスクロールするとプログラミング言語が選択できます。

「C#」に変更すれば、C#での「Speech SDK」を使ったサンプルコードが表示できます。

ドキュメントの表示

[ドキュメントの表示] で表示される英語ドキュメントを日本語ドキュメントに変更するのは少しだけ手間ですが、こちらも簡単に日本語ドキュメントに変更できます。
クリックして表示されるドキュメントのURLは次のようになっています。

https://learn.microsoft.com/en-us/azure/ai-services/speech-service/speech-to-text

このURLの中の「en-us」を「ja-jp」に変更します。
learn.microsoft.com
これでドキュメントも日本語で読みことができます。

バイブコーディングを試そう。

GitHub Copilot Chatに対して次のような質問をしてみます。

C#とSpeech SDKを使ってリアルタイムに音声認識するコートを教えて。
音声の入力元は選択できるようにしたいです。

すると約180行くらいの「Program.cs」のコードを生成してくれます。
このコードでは下記のようにちゃんと要望をかなえてくれる内容になっていました。

Console.WriteLine("\n入力ソースを選んでください:");
Console.WriteLine("1) デフォルトマイク");
Console.WriteLine("2) マイク一覧から選択");
Console.WriteLine("3) WAV ファイルを認識");
Console.WriteLine("4) 終了");
Console.Write("選択(1-4): ");

特にマイク一覧などはなかなかコードが見つからない時もあるのですが、NAudioというOSSを使ったコードを生成してくれていました。

for (int i = 0; i < deviceCount; i++)
{
var caps = WaveIn.GetCapabilities(i);
Console.WriteLine($"{i}) {caps.ProductName}");
}

この生成されたコードですごいと思うのは、音声認識系をコードを書くときに必要なサンプリングレートを合わせるリサンプリングなどのノウハウも入っている点です。
初めて取り組む場合には、実際にやって、きれいな音声がとれずに悩んで、理由を探し回ってやっとたどり着く内容です。
そして、たどり着いてから次に解決方法を探し始めないといけないのですが、そのあたりが丸っとGitHub Copilotから提示されているのです。
まさに「なるほどね」と一気に知識が高まる感じを実感できるのではないでしょうか。まさに心優しき有識者が伴走してくれているようですね。

おわりに

今回のFoundryポータル変更で一番気になったのは、まだプレビューですが Foundry Agent です。
ポータルから離れることなく AI と会話しながら設定を行っていける可能性があり、まさに、バイブセッティングの幕開けを予感するものでした。
更にエージェントの機能が拡充され、GitHub Copilot Chatで生成したコードを自動的にコードに入れてくれるように、Foundry Agent が設定値まで提案＆影響を見せてくれて、承諾するだけで設定が進むような未来も近いのかなという予感を感じさせるものでした。
来年の Build や Ignite がますます楽しみになりますね。

index

生成AI時代だからこそのAzure AI Services活用術（その２）～リソースの指定方法～

AI Azure Azure AI Services

はじめに

hatsune.hatenablog.jp

Azure AI Serviecsのエンドポイントについて

Azure AI Servicesは、登場当初は様々なURL（エンドポイント）で提供されていました。現在は、Azure AI Servicesの統一したURLで提供されています。

エンドポイントの例外

ただし、Speech ServiceとTranslatorの２つについては、統一したURLではなく登場したときのURLでのアクセスとなります。
ただし、その場合でも、キーについては統一したキーで利用可能です。
１例としてSpeech Serviceについて、実際にAzure ポータルでリソースを作成して比較してみましょう。

Speechリソースとして作成した場合

Speechリソースを指定


Azure ポータルにサインインしたら、

  1. サイドメニューの［リソースの作成］をクリック
  2. ［Azureサービスのみ］チェックとして［Marketplaceを検索］欄で「音声」と入力して検索
  3. ［音声］リソースの［作成］をクリック

するとSpeechリソースとして音声認識/音声合成などが可能なSpeech ServiceというAIが使えるようになります。

Speech Serviceリソースを設定


Speech Serviceリソースを作成するために必要な設定を行うときに重要なのは次の点です。

  • リージョン：利用する地域を選択（レイテンシーが早く、域内にすることでデータ保護関連に抵触しないため）
  • 名前：自リソース内での識別子となるのでわかりやすい名前を指定
  • 価格レベル：Freeであれば時間制限ありだが無料利用も可能
Speech Serviceリソースのエンドポイント

作成したSpeech Serviceリソースへアクセスするためのエンドポイントは次のようになります。

https://japanwest.api.cognitive.microsoft.com/

リソース作成時に指定した名前などは含まれず、リージョンとキー値で利用するリソースが特定されます。
Speech ServiceとTranslator以外のAIサービスのエンドポイントは、リソースエンドポイントと同一となります。

Speech Serviceのサービスエンドポイント

Speechリソースのリージョンとして「japanwest」を指定した場合、
音声からテキストにする（いわゆる文字起こし）するSpeech to Text APIのエンドポイントは次のようになります。

https://japanwest.stt.speech.microsoft.com

同様にテキストから音声にする（いわゆる音声合成）するText to Speechのエンドポイントは次のようになります。

https://japanwest.tts.speech.microsoft.com

なお、このエンドポイントにアクセスするときのキー値は、Azure AI Servicesのキー値となります。

Azure AI Serivicesリソースとして作成した場合


Azure ポータルにサインインしたら、

  1. サイドメニューの［リソースの作成］をクリック
  2. ［Azureサービスのみ］チェックとして［Marketplaceを検索］欄で「Azure AI サービス」と入力して検索
  3. ［Azure AI サービス］リソースの［作成］をクリック

するとAzure AI Serivcesリソースとして、そこに含まれるAIに対して単一エンドポイントでアクセス可能なリソースが作成できます。

Azure AI Serivicesリソースを指定


Azure AI Serivcesリソースを作成するために必要な設定を行うときに重要なのは次の点です。特に名前が重要です。

  • リージョン：利用する地域を選択（レイテンシーが早く、域内にすることでデータ保護関連に抵触しないため）
  • 名前：グローバルで唯一の名前の指定が必要なので製品名など入れるとよい
  • 価格レベル：Standardプランのみ指定可能（Freeがない）
Azure AI Serivicesリソースのエンドポイント

作成した Azure AI Serivicesリソースへアクセスするためのエンドポイントは次のようになります。

https://[名前].cognitiveservices.azure.com/

作成時に指定した名前を含んだ専用のエンドポイントとなります。
ただし、Speech ServiceとTranslatorについては、個々のエンドポイントとなります。

Speech Serviceのサービスエンドポイント

Azure AI Serivicesリソースのリージョンとして「japaneast」を指定した場合、
音声からテキストにする（いわゆる文字起こし）するSpeech to Text APIのエンドポイントは次のようになります（）。

https://japaneast.stt.speech.microsoft.com

同様にテキストから音声にする（いわゆる音声合成）するText to Speechのエンドポイントは次のようになります。

https://japaneast.tts.speech.microsoft.com

なお、このエンドポイントにアクセスするときのキー値は、Azure AI Servicesのキー値となります。

Azure AI Foundlyとの関係

AzureのAI関連としては、「Azure AI Services」以外に「Azure AI Foundly」もあります。
この両者の関係は次のような関係です。
「Azure AI Foundly」＝「Azure AI Services」+「生成AIモデル」
つまり、Azure AI Foundlyリソースとして、Azure AI Serviceに含まれているAIサービスを使うこともできます。

Azure AI Foundlyリソースとして作成した場合


Azure ポータルにサインインしたら、

  1. サイドメニューの［リソースの作成］をクリック
  2. ［Azureサービスのみ］チェックとして［Marketplaceを検索］欄で「Azure AI Foundly」と入力して検索
  3. ［Azure AI Foundly］リソースの［作成］をクリック

するとAzure AI Foundlyリソースとして、そこに含まれるAIに対して単一エンドポイントでアクセス可能なリソースが作成できます。

Azure AI Foundlyリソースを指定


Azure AI Foundlyリソースを作成するために必要な設定を行うときに重要なのは次の点です。特に名前が重要です。

  • リージョン：利用する地域を選択（レイテンシーが早く、域内にすることでデータ保護関連に抵触しないため）
  • 名前：グローバルで唯一の名前の指定が必要なので製品名など入れるとよい
  • 価格レベル：Standardプランのみ指定可能（Freeがない）
Azure AI Foundlyリソースのエンドポイント

作成した Azure AI Serivicesリソースへアクセスするためのエンドポイントは次のようになります。

https://[名前].services.ai.azure.com/

作成時に指定した名前を含んだ専用のエンドポイントとなります。
ただし、Speech ServiceとTranslatorについては同様に個々のエンドポイントとなります。

Azure AI Foundlyポータル


Azure AI Foundlyリソースにアクセスすると「Azure AI Foundlyポータル」への移動リンクがあります。

すべてのエンドポイントを表示


リンクをクリックしてポータルに移動したら、［すべてのエンドポイントを表示する］リンクをクリックしてみてください。

Speech Serviceのエンドポイントを表示


［サービスエンドポイント］をクリックすると、Azure AI Servicesに含まれるAIサービスが一覧表示されるので「Azure AI 音声」=Speech Serviceをクリックします。
表示された内容から、Speech Serviceのサービスエンドポイントは、他の方法で作成したときと同じことがわかります。

最後に

今回は、Azure AI Servicesに含まれている各AIサービスを使うためのリソース作成方法を３種類紹介しました。
どの方法で作成しても、サービスエンドポイントはほぼ同じであり、そこから先の利用方法は同一となります。
３種類の中でお勧めの方法としては、「Azure AI Foundly」で作る方法となります。この方法の利点は、「プレイグラウンド」がある点です。
このプレイグラウンドを使うことで、ノーコードでAIサービスを試すことが可能です。どのようなAIかを確認できます。

次回以降は、この「プレイグラウンド」も活用し、１つ１つAIサービスを見ていきましょう。生成AIのみで完結するのも１つの方法ですが、Auzre AI Servicesも併用し、より効果的な問題解決ができるかを検討してみる一助になれば幸いです。

index