App InventorからPythonへどうやって移行するのか?:2025年7月29日現在

考えたことメモ > App InventorからPythonへどうやって移行するのか?

Google Gemini 2.5 Pro Deep Researchによれば、「一度App Inventorで作ったアプリをPythonで再現してみるというアプローチは、目的が明確なため非常に効果的な学習方法です」とのことでした。これは、AI時代における実践的なプログラミング学習の一例といえます。

Pythonは文法が比較的シンプルで、初心者にも扱いやすい言語です。AI開発、データ分析、Webサイト制作、作業の自動化など、幅広い分野に応用できる点が特徴です。

今回は、出発点として「オンデマンドアカデミー」で紹介されている カラフルお絵かきアプリを題材に選びました。このアプリは、基本的なUIの構成やイベント処理の理解に適しており、Pythonでの再構築を目標に据えるにはちょうどよい教材です。

どこまでAIが支援できるかを検討するため、Claude Sonnet 4, Gemini 2.5 Pro, ChatGPT-4oを比較対象に選びました。これらのAIを活用しながら、App InventorアプリをPythonでどう再現していけるのか、段階的に分析していきます。

aiaファイルの読み込みと解析

要件定義書作成とPythonプログラミング

動作確認

サマリー

ChatGPT-4oはApp Inventorのaiaファイルを直接読み込み、アプリの要件定義書を書いてそのまま動作するPythonコードを書けました。

aiaファイルの読み込みと解析

aiaファイルをアップロードして正しく認識できるかをClaude Sonnet 4, Gemini 2.5 Pro, ChatGPT-4oで試してみました。ChatGPT-4oだけが、正しくaiaファイルを解析できました。

Claude Sonnet 4

Gemini 2.5 Pro

ChatGPT-4o

Claude Sonnet 4

aiaファイルのアップロード不可。


Gemini 2.5 Pro

プロンプト

あなたはApp Inventor 2の内部構造に精通したプロのソフトウェアエンジニアです。このaiaファイルを完全に解析してください。

返答

はい、承知いたしました。提供された `DoodlePlus.aia` ファイルを専門的な観点から解析します。

このファイルは、MIT App Inventor 2で作成されたプロジェクトのアーカイブファイルです。`.aia` ファイルは実質的にZIP形式のアーカイブであり、プロジェクトを構成するすべてのファイル(画面デザイン、プログラミングロジック、アセットなど)を含んでいます。

提供された情報から、このプロジェクトの構造と内容を以下のように解析します。

### プロジェクトの概要

* [cite_start]**プロジェクト名**: `DoodlePlus` [cite: 1]
* [cite_start]**作成者アカウント**: `ai_XXXXXXX` [cite: 1]
* [cite_start]**プラットフォーム**: MIT App Inventor 2 [cite: 1]
* **内容の推測**: プロジェクト名に「Doodle」(いたずら書き)とあることから、これは指で画面に絵を描くことができる**お絵かきアプリケーション**であると強く推測されます。「Plus」という接尾辞は、基本的なお絵かき機能に加えて、何らかの追加機能(色の変更、線の太さの調整、保存機能など)が実装されている可能性を示唆しています。

---

### ファイル構造の解析

AIAファイルは、主に以下の3種類のコアファイルで構成されています。このプロジェクトには `Screen1` という名前の画面が少なくとも1つ存在します。

#### 1. `youngandroidproject/project.properties`
[cite_start]このファイルは、プロジェクト全体の設定を定義するプロパティファイルです。 [cite: 1] テキスト形式で、以下のようなキーと値のペアが含まれています。

* `name`: プロジェクト名(この場合は `DoodlePlus`)。
* `versioncode` & `versionname`: アプリのバージョン情報。
* `theme`: アプリケーションの全体的なデザインテーマ(例: "Classic" または "DeviceDefault")。
* `user`: プロジェクトの作成者アカウント(この場合は `ai_tam0130`)。

#### 2. `src/appinventor/ai_tam0130/DoodlePlus/Screen1.scm`
[cite_start]これは、`Screen1` の**UIデザイン**を定義するファイルです。 [cite: 1] SCMは "Scheme" の略ですが、実際にはJSONに似た形式で画面上のコンポーネントの階層と各プロパティを記述しています。

* **役割**: どのコンポーネント(ボタン、ラベル、キャンバスなど)が画面に配置されているか、またそのプロパティ(サイズ、色、テキストなど)がどう設定されているかを定義します。
* **推測されるコンポーネント**: お絵かきアプリであるため、このファイルにはおそらく以下のようなコンポーネントの定義が含まれています。
    * `Canvas`: ユーザーが絵を描くための主要な描画領域。
    * `Button`: 「色変更」「消去」「保存」などの機能を実行するためのボタン。
    * `HorizontalArrangement` / `VerticalArrangement`: ボタンなどのUI要素を整理・配置するためのレイアウトコンポーネント。
    * `Slider`: 線の太さなどを直感的に変更するために使われる可能性があります。

#### 3. `src/appinventor/ai_tam0130/DoodlePlus/Screen1.bky`
[cite_start]これは、`Screen1` の**プログラミングロジック**を定義する最も重要なファイルです。 [cite: 1] GoogleのBlocklyライブラリをベースにしており、ブロックで組まれたプログラムがXML形式で保存されています。

* **役割**: アプリケーションの動作(「いつ」「何が」「どうなるか」)を定義します。例えば、「ボタンがクリックされたら、キャンバスの色を赤に変える」といったロジックが記述されます。
* **推測されるロジック**: このXMLファイルには、以下のようなイベントハンドラやプロシージャが含まれていると考えられます。
    * `when Canvas.Dragged do ...`: キャンバス上で指がドラッグされたときのイベント。この中で `Canvas.DrawLine` ブロックを使い、指の動きに合わせて線を描画する処理が記述されているはずです。
    * `when ColorButton.Click do ...`: 特定の色のボタンがクリックされたときに、`Canvas.PaintColor` プロパティを対応する色に変更する処理。
    * `when ClearButton.Click do ...`: 消去ボタンがクリックされたときに、`Canvas.Clear` メソッドを呼び出してキャンバスを白紙に戻す処理。

---

### 結論

提供された `DoodlePlus.aia` は、`ai_XXXXXX` というユーザーによって作成された、`Screen1` という単一の画面を持つ**インタラクティブなお絵かきアプリケーション**のプロジェクトファイルです。

このプロジェクトは、App Inventor 2の標準的なアーキテクチャに従っており、UIデザイン (`.scm`) とイベント駆動型のロジック (`.bky`) が明確に分離されています。提供されたデータはファイル内容の断片であるため、具体的なコンポーネントのプロパティ値やブロックの組み合わせを完全に復元することはできません。しかし、そのファイル構造と命名規則から、アプリケーションの全体像と主要な機能を専門的に特定することが可能です。

プロンプト

中身を全部詳細に解析して

返答

はい、承知いたしました。
前回の解析に基づき、各ファイルに**通常どのようなコードが記述されているか**を、具体的なサンプルを交えてさらに詳細に解析します。

提供されたファイルの中身はデータが破損しているため直接読み解くことはできませんが、App Inventorのエンジニアとして、その構造から**中身を具体的に復元・推測**することは可能です。

### 🎨 DoodlePlus アプリの全体像

このアプリは、指で絵が描けるキャンバスと、色や線の太さを変更したり、絵を消したりするためのボタン群で構成されていると推測されます。

-----

### \#\# 1. UIデザイン (`Screen1.scm` の詳細解析)

このファイルは、画面の見た目を定義します。JSON形式で、どのコンポーネントが、どのようなプロパティ(設定値)で配置されているかが記述されています。

`DoodlePlus` の場合、`Screen1.scm` の中身は以下のようになっていると考えられます。

```json
{
  "$Name": "Screen1",
  "$Type": "Form",
  "$Version": "...",
  "Title": "DoodlePlus",
  "components": [
    {
      "$Name": "DrawingCanvas",
      "$Type": "Canvas",
      "Width": -2, // -2は「親に合わせる(Fill Parent)」
      "Height": -2,
      "PaintColor": "#FF000000" // 初期色は黒
    },
    {
      "$Name": "ControlPanel",
      "$Type": "HorizontalArrangement", // ボタンを水平に並べるレイアウト
      "Width": -2,
      "components": [
        {
          "$Name": "RedButton",
          "$Type": "Button",
          "Text": "Red",
          "BackgroundColor": "#FFFF0000"
        },
        {
          "$Name": "BlueButton",
          "$Type": "Button",
          "Text": "Blue",
          "BackgroundColor": "#FF0000FF"
        },
        {
          "$Name": "ClearButton",
          "$Type": "Button",
          "Text": "Clear"
        }
      ]
    },
    {
      "$Name": "LineWidthSlider", // 「Plus」機能の可能性
      "$Type": "Slider",
      "Width": -2,
      "MaxValue": "30.0",
      "MinValue": "2.0",
      "ThumbPosition": "5.0" // 初期値の線の太さ
    }
  ]
}
```

**【ポイント】**

  * **`DrawingCanvas`**: 絵を描くための主要な領域です。幅と高さを「親に合わせる」に設定し、画面いっぱいに広げている可能性が高いです。
  * **`ControlPanel`**: 色変更ボタンや消去ボタンを横一列に並べるための入れ物です。
  * **`RedButton`, `BlueButton` など**: クリックすると線の色が変わるボタンです。
  * **`LineWidthSlider`**: 「Plus」機能の核心部分で、スライダーを動かすことで線の太さを直感的に変更できるようにしていると推測されます。

-----

### \#\# 2. プログラムロジック (`Screen1.bky` の詳細解析)

このファイルは、アプリの実際の動作を定義するブロックプログラム(XML形式)です。上記のUIコンポーネントが、ユーザーの操作によってどのように動くかが記述されています。

#### **中核機能:線を描くロジック**

これが最も基本的な機能です。キャンバス上で指をドラッグした時に、その軌跡に線を引きます。

  * **イベント**: `when DrawingCanvas.Dragged` (DrawingCanvasがドラッグされた時)
  * **アクション**: `call DrawingCanvas.DrawLine` (線を引く)
      * `x1`, `y1`: 前の座標 (prevX, prevY)
      * `x2`, `y2`: 現在の座標 (currentX, currentY)

#### **色を変更するロジック**

各色のボタンが押された時に、キャンバスの `PaintColor` (描画色) プロパティを変更します。

  * **イベント**: `when RedButton.Click` (RedButtonがクリックされた時)

  * **アクション**: `set DrawingCanvas.PaintColor to` (描画色をセットする)

      * **値**: 赤色のカラーブロック

  * **イベント**: `when BlueButton.Click` (BlueButtonがクリックされた時)

  * **アクション**: `set DrawingCanvas.PaintColor to`

      * **値**: 青色のカラーブロック

#### **全消去するロジック**

消去ボタンが押された時に、キャンバスの内容をすべてクリアします。

  * **イベント**: `when ClearButton.Click` (ClearButtonがクリックされた時)
  * **アクション**: `call DrawingCanvas.Clear` (キャンバスをクリアする)

#### **「Plus」機能:線の太さを変更するロジック**

スライダーの位置が変わった時に、キャンバスの `LineWidth` (線の太さ) プロパティを変更します。

  * **イベント**: `when LineWidthSlider.PositionChanged` (LineWidthSliderの位置が変わった時)
  * **アクション**: `set DrawingCanvas.LineWidth to` (線の太さをセットする)
      * **値**: `get thumbPosition` (スライダーの現在の値)

### **結論**

この `DoodlePlus.aia` は、単に線が描けるだけでなく、**「複数の色への変更機能」「全消去機能」「スライダーによる線の太さの動的な変更機能」** を備えた、多機能お絵かきアプリであると結論付けられます。UI定義ファイル (`.scm`) とロジック定義ファイル (`.bky`) が連携し、これらの機能を実現しています。

ハルシネーションがひどい。できないならできないとはっきり言って欲しい。

  • 提供されたファイルの中身はデータが破損しているため直接読み解くことはできませんが、App Inventorのエンジニアとして、その構造から中身を具体的に復元・推測することは可能です。
  • Screen1.scm の中身は以下のようになっていると考えられます。

ChatGPT-4o

プロンプト

あなたはApp Inventor 2の内部構造に精通したプロのソフトウェアエンジニアです。このaiaファイルを完全に解析してください。

返答

`.aia`ファイルはApp InventorプロジェクトのZIP形式のアーカイブです。`DoodlePlus.aia`を展開したところ、次の主要ファイルが含まれていました:

* `src/appinventor/ai_tam0130/DoodlePlus/Screen1.bky`: ブロックエディタの情報(Blockly形式のデータ)
* `src/appinventor/ai_tam0130/DoodlePlus/Screen1.scm`: 画面のUI構造とプロパティ設定(YAILコード)
* `youngandroidproject/project.properties`: プロジェクト全体の設定情報

次に、各ファイルの内容を解析して、どのようなアプリなのか、どんな機能があるのかを詳細に説明します。まずは `.scm` ファイルから見て、ユーザーインターフェースの構成と設定を確認します。


このアプリ「DoodlePlus」のUI構成(`Screen1.scm`)から、以下のような構成であることがわかります:

### アプリ情報

* **アプリ名**:DoodlePlus(表示タイトルは「お絵かきアプリ+」)
* **スクリーン名**:Screen1
* **バージョン**:31

---

### 主なUIコンポーネント

#### 1. `Canvas1`(キャンバス)

* 描画用のキャンバス。ユーザーが絵を描くエリア。

#### 2. `HorizontalArrangement1`(水平配置1)色選択ボタン群

* 黒(背景色:`#000000`)
* 青(`#0000FF`)
* 緑(`#00FF00`)
* 赤(`#FF0000`)

#### 3. `HorizontalArrangement2`(水平配置2)線の太さ選択

* 「細」(テキスト:細)
* 「中」(テキスト:中)

#### 4. `HorizontalArrangement3`(水平配置3)描画操作

* 「画面消去」:キャンバスをクリアする
* 「消しゴム」:消去モードへの切り替えと推測

---

次に、ブロックエディタ側の `.bky` ファイル(`Screen1.bky`)を解析して、このUIにどのようなロジックや動作が関連付けられているのかを調べます。


`.bky`ファイルの冒頭を解析した結果、このアプリは明確なロジック構造を持ち、描画操作を柔軟に制御できるようになっています。

---

### **ブロックエディタの主要ロジック(抜粋)**

#### 🔷 グローバル変数の定義

* `選択マーク`: `"✔︎"` — ボタン選択時に表示するチェックマーク。
* `選択色ボタン`: 初期状態は「黒」ボタン。
* `色ボタンリスト`: 「黒」「青」「グリーン」「赤」の4色ボタン。
* `ペン太さ`: 初期状態は「細」ボタン。
* `太さボタンリスト`: 「細」「中」の太さ選択ボタン。

---

### 🎨 推定される機能と動作

1. **色の選択**

   * 色ボタン(黒・青・緑・赤)を押すと、選択された色で線が描かれる。
   * 押されたボタンに「✔︎」が表示され、他のボタンのマークは消える。

2. **線の太さ選択**

   * 「細」「中」ボタンを押して描画する線の太さを切り替え。
   * 同様に選択されたボタンに「✔︎」を付加。

3. **消去機能**

   * 「画面消去」ボタン:Canvas全体をクリア。
   * 「消しゴム」ボタン:描画色を背景色と同じにして消すように描画。

---

### ✅ 結論:このアプリの概要

* **アプリ名**:「DoodlePlus(お絵かきアプリ+)」
* **主な機能**:

  * 指やタッチで絵を描く
  * 色・太さの選択
  * キャンバスの消去
  * 消しゴムモードの実装
* **技術的特徴**:

  * App InventorのCanvasコンポーネントを中心に、色ボタンと状態管理変数で操作性を実現
  * ユーザーフレンドリーなインターフェース設計(✔︎マーク付きの選択表現)

---

さらに詳しく(例:ブロック全体図や各イベント処理の詳細)をご希望の場合は、そのようにお知らせください。ご要望に応じて完全なフローチャートや動作の可視化も可能です。

要件定義書作成とPythonプログラミング

これ以降はChatGPT-4oだけで実施します。

プロンプト

このアプリの要件定義書をMarkdownで書いて

返答

以下は、`DoodlePlus` アプリの\*\*要件定義書(Markdown形式)\*\*です。App Inventorで開発されたお絵かきアプリの機能と仕様を整理しています。

---

# 📋 要件定義書:DoodlePlus(お絵かきアプリ+)

## 1. 概要

**DoodlePlus** は、タッチデバイス上で簡単に絵を描いたり消したりできるシンプルなお絵かきアプリです。ユーザーは色や線の太さを選択してキャンバス上に自由に描画でき、消しゴムや画面消去などの基本機能も備えています。

---

## 2. 目的

* 指やスタイラスで自由に絵を描ける環境を提供する。
* 子どもや初心者にも使いやすい直感的なUIを実現する。
* 色・太さ・消去といった基本的な描画操作をスムーズに行えるようにする。

---

## 3. ユースケース

| ユーザーアクション     | システムの反応                    |
| ------------- | -------------------------- |
| 色ボタンをタップ      | 線の描画色を変更、「✔︎」で選択中を表示       |
| 太さボタンをタップ     | 線の太さを変更、「✔︎」で選択中を表示        |
| キャンバス上をドラッグ   | 指の動きに応じて線を描画               |
| 「消しゴム」ボタンをタップ | ペンの色が背景色に変更され、描いた線を消すように動作 |
| 「画面消去」ボタンをタップ | キャンバス上のすべての描画をクリア          |

---

## 4. 画面仕様(UI構成)

### Screen1

| コンポーネント名   | 種類        | 説明                    |
| ---------- | --------- | --------------------- |
| Canvas1    | キャンバス     | 描画エリア。指やタッチで線を描ける。    |
| 黒、青、グリーン、赤 | ボタン(色選択)  | 線の色を変更。選択中は✔︎マークを表示。  |
| 細、中        | ボタン(太さ選択) | 線の太さを変更。選択中は✔︎マークを表示。 |
| 画面消去       | ボタン       | Canvasを全消去            |
| 消しゴム       | ボタン       | 線を背景色で描いて消す機能         |

---

## 5. 機能仕様

### 色の変更

* 対応色:黒、青、緑、赤
* 色ボタン押下時に線の描画色を即時変更
* 現在選択中のボタンには✔︎マークを追加

### 線の太さ変更

* 太さ:細、中(今後拡張可能)
* 現在選択中の太さボタンにも✔︎を追加

### 消しゴム

* 「消しゴム」押下時、ペン色をCanvasの背景色(白)に変更
* 色ボタンと✔︎の状態は保持

### 画面消去

* 「画面消去」ボタンを押すとCanvasの全描画を初期化

---

## 6. データ定義

### グローバル変数

| 変数名      | 用途               |
| -------- | ---------------- |
| 選択マーク    | ボタンに表示する選択記号(✔︎) |
| 選択色ボタン   | 現在選択中の色ボタンを保持    |
| 色ボタンリスト  | 色変更可能なボタン群(4色)   |
| ペン太さ     | 現在選択中の太さボタン      |
| 太さボタンリスト | 太さ変更可能なボタン群(細・中) |

---

## 7. 非機能要件

* **対応プラットフォーム**:Android(App Inventorによりビルド)
* **使用言語**:日本語(UIラベルおよびブロック)
* **パフォーマンス**:スムーズな描画処理(タッチに遅延なく追従)
* **操作性**:視認性の高いボタン、明確なフィードバック(✔︎)

---

## 8. 今後の拡張案

* 線の太さを3段階以上に
* カラーピッカー機能の追加
* 描画の保存・読み込み機能
* 子ども向けUIモードの強化(アイコン表示など)

---

必要に応じて、**画面遷移図**や**ブロック構成の図解**も作成できます。ご希望があればお知らせください。

プロンプト

この要件定義書に基づいてPythonのコードを書いて。初心者にも何をしているかわかるように、また、App Inventorアプリとの対応関係がわかるように、詳しいコメントをつけて。

返答

以下に、要件定義書に基づいた DoodlePlus アプリのPythonコード(tkinter を使用)を提示します。App Inventor のUI構成やブロックに相当する機能を意識して、初心者向けに丁寧なコメントを添えています。
✅ Python版「DoodlePlus」:App Inventor対応付き
📌 対応ライブラリ:tkinter(Python標準GUIライブラリ)
import tkinter as tk
from tkinter import ttk

# -------------------------
# アプリ設定と初期値の定義
# -------------------------

# キャンバス背景色(消しゴム用にも使用)
BACKGROUND_COLOR = "white"

# 初期ペン設定(黒・細)
current_color = "black"
current_width = 2  # 細い線
eraser_mode = False  # 消しゴムモード:初期はOFF

# 色選択用のボタン一覧(App Inventorの「色ボタンリスト」に相当)
color_buttons = {}

# 太さ選択用のボタン一覧(App Inventorの「太さボタンリスト」に相当)
width_buttons = {}

# 現在選択中のボタン(✔︎マーク用)を保持
selected_color_btn = None
selected_width_btn = None

# ✔︎マーク(選択中表示)
CHECK_MARK = "✔︎"

# -------------------------
# 線を描くときの関数定義
# -------------------------

def start_draw(event):
    """描画のスタート位置を記録"""
    canvas.old_x, canvas.old_y = event.x, event.y

def draw(event):
    """マウスドラッグに合わせて線を描画"""
    if not hasattr(canvas, "old_x") or not hasattr(canvas, "old_y"):
        return

    # 線の色と太さを使用して描画
    canvas.create_line(canvas.old_x, canvas.old_y, event.x, event.y,
                       width=current_width,
                       fill=current_color,
                       capstyle=tk.ROUND,
                       smooth=True)

    # 次回の起点を更新
    canvas.old_x, canvas.old_y = event.x, event.y

def reset_draw(event):
    """描画の終了:座標初期化"""
    canvas.old_x, canvas.old_y = None, None

# -------------------------
# 色・太さの変更機能
# -------------------------

def change_color(new_color, btn):
    """ペンの色を変更し、選択マークを更新"""
    global current_color, eraser_mode, selected_color_btn

    current_color = new_color
    eraser_mode = False

    # ✔︎の更新処理
    if selected_color_btn:
        selected_color_btn.config(text=selected_color_btn["text"].replace(CHECK_MARK, ""))
    btn.config(text=btn["text"] + CHECK_MARK)
    selected_color_btn = btn

def change_width(new_width, btn):
    """線の太さを変更し、選択マークを更新"""
    global current_width, selected_width_btn

    current_width = new_width

    # ✔︎の更新処理
    if selected_width_btn:
        selected_width_btn.config(text=selected_width_btn["text"].replace(CHECK_MARK, ""))
    btn.config(text=btn["text"] + CHECK_MARK)
    selected_width_btn = btn

# -------------------------
# 消しゴム・画面消去
# -------------------------

def use_eraser():
    """消しゴムモードに切り替え"""
    global current_color, eraser_mode
    current_color = BACKGROUND_COLOR
    eraser_mode = True

def clear_canvas():
    """Canvasを全消去"""
    canvas.delete("all")

# -------------------------
# UI作成(App Inventor対応UI)
# -------------------------

root = tk.Tk()
root.title("DoodlePlus(Python版)")

# Canvas:描画エリア(App InventorのCanvas1)
canvas = tk.Canvas(root, width=600, height=400, bg=BACKGROUND_COLOR)
canvas.grid(row=0, column=0, columnspan=6, pady=10)

# マウス操作のバインド
canvas.bind("<Button-1>", start_draw)
canvas.bind("<B1-Motion>", draw)
canvas.bind("<ButtonRelease-1>", reset_draw)

# -------------------------
# 色選択ボタン(App Inventor:黒・青・緑・赤)
# -------------------------

colors = [("黒", "black"), ("青", "blue"), ("グリーン", "green"), ("赤", "red")]
for i, (label, color) in enumerate(colors):
    btn = tk.Button(root, text=label, width=8, command=lambda c=color, b=label: change_color(c, color_buttons[b]))
    btn.grid(row=1, column=i)
    color_buttons[label] = btn

# 初期選択:黒に✔︎
color_buttons["黒"].config(text="黒" + CHECK_MARK)
selected_color_btn = color_buttons["黒"]

# -------------------------
# 太さ選択ボタン(App Inventor:細・中)
# -------------------------

widths = [("細", 2), ("中", 5)]
for i, (label, width) in enumerate(widths):
    btn = tk.Button(root, text=label, width=8, command=lambda w=width, b=label: change_width(w, width_buttons[b]))
    btn.grid(row=2, column=i)
    width_buttons[label] = btn

# 初期選択:細に✔︎
width_buttons["細"].config(text="細" + CHECK_MARK)
selected_width_btn = width_buttons["細"]

# -------------------------
# 消しゴム/画面消去ボタン
# -------------------------

eraser_btn = tk.Button(root, text="消しゴム", width=10, command=use_eraser)
eraser_btn.grid(row=2, column=2, padx=5)

clear_btn = tk.Button(root, text="画面消去", width=10, command=clear_canvas)
clear_btn.grid(row=2, column=3, padx=5)

# アプリ起動
root.mainloop()
📱 App InventorとPythonコードの対応表
App Inventorの要素	Pythonコードでの対応
Canvas1(描画)	tk.Canvas
色ボタン(黒〜赤)	change_color() 関数+ボタン配置
太さボタン(細・中)	change_width() 関数+ボタン配置
✔︎マークの表示	selected_color_btn / selected_width_btn の管理
消しゴム	use_eraser()(色を白に)
画面消去	clear_canvas()

💡補足
本コードはマウス操作向け(タッチでも動作するタブレットPC可)
App Inventorで言えば、すべてのボタンやキャンバスの「ブロック(処理)」に相当するものをPython関数で表現しています。

ご希望があれば:
画像の保存機能
カラーピッカー追加
タッチ対応強化(Kivyなど)
も実装できます!必要であればお知らせください。

動作確認

Windows 11でAnaconda のJupyter Notebookで実行してみました。一切変更なしで、以下のように問題なく動きました。

公開済みAI関連アプリチュートリアル:シルバー会員特典

ゴールド会員特典はAIが中心

初心者にはこちらも