プロジェクトベース学習(PBL)モデル: ハーバード大学の「CS50’s Introduction to Artificial Intelligence with Python」やフロリダ大学の「AI Across the Curriculum」構想のように、AI時代における効果的な教育手法として、プロジェクトベース学習(PBL)が再評価されている 30。PBLでは、学生は現実世界の問題を解決するためのプロジェクトにチームで取り組み、その過程で必要な知識やスキルを能動的に学んでいく。AIツールは、このPBLにおいて、アイデアのブレインストーミングや情報収集、プロトタイピングを加速させる強力な触媒として機能する 33。
人間の貢献(The Human Contribution): AIの出力をどのように評価し、改良したのか。AIの提案のどこに問題があり、それをどう修正したのか。「AIによる初期出力(Before)」と「人間による改善後のコード(After)」を並べて示すことで、自身の付加価値を明確にアピールできる 92。
App inventorのキャンバスに描いた絵に説明をつけて改良点を提案させたい。Google apps script とGoogle ai studio を使う。キャンバスに描いた絵はエクステンションでbase64エンコードしてJSONでアップロードする。結果はJSONで戻す。APIキーはスクリプトプロパティから読む。App inventor部分は自分でやるから、それ以外の部分を教えて。
返答
Google Apps Scriptだけではなく、Gemini APIの設定からウェブアプリとしてのデプロイ方法、使い方まで詳しく教えてくれます。
はい、承知いたしました。
App Inventorで描いた絵をGoogle AI(Gemini)で分析し、説明と改善点を返すGoogle Apps Scriptのウェブアプリケーションを作成します。
App Inventor側の実装はご自身でされるとのことですので、Google Apps Script側の設定方法とコードを提供します。
全体の流れ
App Inventor:
Canvasに絵を描く。
描いた絵をBase64形式でエンコードする。
Base64文字列をJSONに含めて、Google Apps Scriptで作成したウェブアプリのURLにPOSTリクエストを送信する。
Google Apps Script (今回作成するもの):
App InventorからのPOSTリクエストを受け取る。
JSONからBase64形式の画像データを取り出す。
スクリプトプロパティに保存したAPIキーを読み込む。
Google AI (Gemini Pro Vision) APIに画像データとプロンプトを送信する。
Geminiから返ってきた「説明」と「改善点の提案」をJSON形式で整形する。
整形したJSONをApp Inventorに返す。
App Inventor:
Google Apps Scriptから返ってきたJSONを解析し、結果をアプリに表示する。
それでは、Google Apps Scriptの設定とコードを以下に示します。
Google Apps Script (GAS) の設定手順
Google AI (Gemini) APIを利用するためのGoogle Apps Scriptプロジェクトの設定手順です。
エクステンションを使わずにMIT App Inventorで関数電卓アプリを作成する方法もありますが、その場合、以下の方法で数式処理を手動で実装する必要があります。
---
### アプローチ
エクステンションなしで実現するには、以下のように進めます:
1. **式を解析して処理するロジックを作成**
- 入力された数式を解析するために、`split`や`select list item`などのブロックを使います。
- 各演算子(`+`, `-`, `*`, `/`, `sqrt`, `sin`, `cos`, `log` など)を検出し、それに応じた計算を行います。
2. **順序に基づく演算(優先順位処理)**
- 計算の優先順位(例: 括弧→指数→乗算/除算→加算/減算)を再現するために、数式を分割して段階的に処理します。
---
### ステップごとの実装
#### **1. UIデザイン**
- **TextBox**: 数式を入力するエリア。
- 名前: `InputExpression`
- **Label**: 結果を表示するため。
- 名前: `ResultLabel`
- **Button**: 計算実行ボタン。
- 名前: `CalculateButton`、テキストは「計算」に設定。
---
#### **2. 数式解析と計算ロジックの実装**
以下のようにブロックを作成します。
##### **a. 四則演算の処理**
数式を解析して、簡単な演算を実行するロジックを作成します。
```plaintext
When CalculateButton.Click
Set input to InputExpression.Text
If contains(input, "+") Then
Split input into two parts by "+"
Set ResultLabel.Text to number 1 + number 2
Else If contains(input, "-") Then
Split input into two parts by "-"
Set ResultLabel.Text to number 1 - number 2
Else If contains(input, "*") Then
Split input into two parts by "*"
Set ResultLabel.Text to number 1 * number 2
Else If contains(input, "/") Then
Split input into two parts by "/"
Set ResultLabel.Text to number 1 / number 2
```
---
##### **b. 特殊関数(平方根、三角関数など)の処理**
以下は特殊関数の例です。
- **平方根の計算**:
```plaintext
If contains(input, "sqrt") Then
Remove "sqrt(" and ")" from input
Set ResultLabel.Text to sqrt(number)
```
- **三角関数の計算(sin, cos, tan)**:
```plaintext
If contains(input, "sin") Then
Remove "sin(" and ")" from input
Convert input to radians (if required)
Set ResultLabel.Text to sin(number)
```
- **対数の計算**:
```plaintext
If contains(input, "log") Then
Remove "log(" and ")" from input
Split input by ","
Set ResultLabel.Text to log(number1) base number2
```
---
##### **c. 括弧付きの式の処理**
括弧をサポートするには、再帰的な処理を使います。
1. **括弧を検出**:
- `contains(input, "(")`を使用して括弧を検出。
- 内部の最も内側の括弧を抽出(`split`と`substring`を使用)。
2. **括弧内の式を計算**:
- 抽出した式を再帰的に計算。
- 計算結果で括弧部分を置換。
3. **全体の式を再計算**。
```plaintext
If contains(input, "(") Then
Find innermost parentheses
Calculate result of parentheses
Replace parentheses with result
Recalculate input
```
---
### 実装上の注意
1. **エラーハンドリング**:
- 入力が不正な場合、エラーメッセージを表示(例: "式が正しくありません")。
2. **計算順序のサポート**:
- 計算の優先順位(乗算・除算が加算・減算よりも先に計算される)を再現するため、条件を分岐させます。
---
### シンプルな例
例えば、「2 + 3 * 4」を処理する場合:
1. `*`を先に計算 → `3 * 4 = 12`
2. 次に加算 → `2 + 12 = 14`
これをブロックで再現します。
```plaintext
When CalculateButton.Click
Set input to InputExpression.Text
If contains(input, "*") Then
Split input into parts by "*"
Calculate multiplication first
Replace input with result
Else If contains(input, "+") Then
Split input into parts by "+"
Calculate addition
Replace input with result
```
---
### 制限と拡張
エクステンションなしの場合、複雑な数式(多段の括弧や複雑な関数)は実装が大変です。シンプルな式から始めて、段階的に拡張してください。
もしより高度な数式処理が必要なら、エクステンションを導入するのが効率的です。