前回：
hatsune.hatenablog.jp
前回は、富士通のAIについて、Thunkable から使うための前準備として、公開されているサンプルコードを使って、WindowsコンソールでのPowerShellを使った実行を試してみました。
今回は、そのコードを参考にして Thunkable から富士通のAIを呼び出しています。
なお、実装に当たっては、Coplilot を活用してビジュアルプログラミング言語(Scratch のようにブロックを組み合わせてプログラミングする)である Thunkable に対して、バイブコーディングを試みてみます。
Copilot から出力されたコードをそのまま使えるものと違うので、どのように質問し得られた結果からどのようにブロックを配置するかという疑問の答えにもなるかと考えます。
まずは簡単なところから
前回も認証トークンの取得は、公開されている 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。これがバイブコーディングの極意です。
問題点切り分け
確かに、スマホにThunkableアプリをいれて、実行しトークンも入れて [ AIに質問 ] ボタンをクリックすると動作します。
動作したので Copilot に報告しましょう。
アプリの問題ではないことが判明
ということでアプリの問題じゃないとのこと。ついでに理由も教えてくれて知識が深まりますね。
今後の開発のコツ
Copilot曰く「テストは必ずスマホで行う」ことで進められるようなので、まずは、Thunkable Liveアプリを使ってスマホでテストを進めましょう。
最後に
次回は、難問である「トークンを取得する」ところの実装を試みたいと思っています。
