はじめに
３回にわたって投稿してきた「富士通のAIをThunkableから使ってみた」ですが、今回は番外編として、「Azure API Management (APIM) 」を併用した使い方についてお伝えします。
なぜ、APIM を併用するのでしょうか
前回の投稿でもお伝えしましたが、CORS制限 の関係で Thunkable の「Web Preview」では実行できず「Thunkable Live」を使った実機確認が必要です。
hatsune.hatenablog.jp
この CORS 制限を回避する方法の１つが APIM を併用する方法となります。
Thunkable の [OpenAI Service] コンポーネントとの使い勝手の差を埋めたい
Thunkable には、[OpenAI Service] コンポーネントがあり、キーを取得すれば、単一ブロックで利用が可能です。
こちらは手軽に使えますし、また、画像や音声などの生成も可能です。
一方で今回のように事務局でキーを発行して、多人数の参加者に一律で使っていただくような使い方の場合は、OpenAI が従量課金なので必要な費用が読めない（予期せぬ高額請求もありえる）というコスト面での使い勝手があります。
もし、APIM を使うことで同じような使い勝手で使えるように出来たらということが今回の投稿の調査主眼となります。
APIM 設定
前回、バイブセッティングを行った APIM の投稿を参考にして /fujitsu/chat というエンドポイントを APIM で定義します。
hatsune.hatenablog.jp
呼びだす富士通 AI 側のエンドポイントとしては、チャットルーム不要の下記のエンドポイントとします。
/api/v1/action/defined/text:simple_chat/call
この API エンドポイントに使い方は、GitHub にサンプルコードがありましたので、次の PowerShell サンプルコードを参照して APIM に定義しました。
github.com
Inbound Processingとして次のような定義でOKでした。
gist.github.com
Thunkable 設定
DESIGN 設定
プロンプト入力の [Text Input] コンポーネント、プロンプト送信用の [Button] コンポーネント、回答表示用の [Label] コンポーネントを配置します。
なお、 [Label] コンポーネントは、長文が返却されたときにスクロールして表示できるように [Layout] コンポーネントの中にいれて、スクロールバーを表示できるようにしておきます。
BLOCKS 設定
定数設定
APIM との接続情報である「$Key」と「$Url」を初期化しておきます。
APIM へのリクエストを組み立てる
APIM へのリクエストは、 [WebAPI] コンポーネントを使って実施します。
- ヘッダ：APIMで定義した「Ocp-Apim-Subscription-Key」と「Content-Type」を指定
- URL：APIMで定義したURLを指定
- ボディ：下記のJSONを指定
{
question = "質問",
model = "cohere.command-r-plus-fujitsu",
max_tokens = 1024,
temperature = 0.5,
top_p = 1,
messages = []
}
実行
おわりに
今回の取り組みは、Technical Mentor としてメンター参加している「 Technovation Girls 2026 の日本リージョン」参加者に提供している取り組みです。
前回の APIM を使っていない Thunkable サンプルに比べるとかなりシンプルなブロックで実現できることが分かりました。
このくらいであれば、 Thunkable に組み込まれている OpenAI ブロックと比較しても極端に面倒ということはなくなりました。
参加者の中高生が、Fujitsu クラウドサービス Generative AI Platform を活用し、様々な社会課題を解決するアプリ作成の一助になったら幸いです。
