Development of an App for Intuitive AI Learning...

June 05, 2025

120

Development of an App for Intuitive AI Learning - Blockly Summit 2025

Hello everyone. My name is Masato Akiho. I'm from Japan. This is my first time America, and it's my first Blockly Summit. Thank you for inviting me to this lightning talk! It's nice to meet you all.
This is my first time giving a presentation in English, so please be kind!

皆さんこんにちは、Masato Akihoといいます。日本からきました。初めての海外、そしてBlockly Summitです。よろしくお願いします。

Agenda
Overview
01
Self-Introduction
02
Learning Challenges
03
Projects Created
04
Future of VPL
05
Here's what I'll talk about today. There are three main things:
Problems when studying AI.
An app I made.
The future of VPL (Visual Programming Languages).
In this presentation, I'll talk not just about the app I made, but also share some wider thoughts about what VPLs (Visual Programming Languages) will be like in the future.

今回話す内容です。大きく分けると、AIを勉強する際の課題、私が作ったアプリ、VPLの未来について話します。

この発表は、主にVPL全体の話に重点をおいています。もちろんBlocklyの技術的な話もありますが、思想的なことも話します。

Learning to AI
Gradient Descent
Overview
The app I made helps kids learn about how AI works in a way that's easy to understand. I'll talk more about the details later, but this is what the screen looks like.

今回作ったアプリは、AIの仕組みについて子供でも直感的に学習できるアプリです。詳細は後ほど話しますが、画面のイメージはこんな感じです。

Japan
20 years old
ZEN University (1st Year)

Full Stack Programmer
Using Scratch 3.0 for 8 years
Visual Programming Language(VPL)

Masato Akiho
Let me introduce myself a little. I'm Masato Akiho. I came to Seattle on the same plane as So Tokumaru.
I just turned 20 years old a few weeks ago. I'm a full-stack programmer, and I've loved using Scratch for over 8 years. And it's my hobby to make VPLs (that's Visual Programming Languages, like Scratch) from scratch, without using any libraries. Of course, I like Blockly too, haha

少し自己紹介をさせてください。Masato Akihoといいます。So Tokumaruと一緒の飛行機でシアトルにやってきました。

数週間前に20才になりました。フルスタックプログラマーで、Scratchを8年以上愛用しています。そしてVPLをライブラリを使わずにスクラッチで自作することが趣味です。もちろん、Blocklyは好きですよ笑

Neural Network
Genetic Algorithm
RPG Engine
3D Rendering
4bit CPU DL166
Stochastic Computing

I love Scratch!!
With Scratch, I've made cool things like Neural Networks, Genetic Algorithms, and even an RPG Engine.

Scratchでは、Neural NetworkやGenetic Algorithm, RPG Engineなどを作っていました。

I built a VPL like Blockly
TypeScript, Canvas API, WebGL, Three.js, React
I really love Blockly! I love them so much that I even started making my own VPL (that's a Visual Programming Language, like Scratch).

I'm trying to create a brand new one, but it's tough! Sometimes, the blocks in my VPL get stuck and stretch out forever, which is a bug I'm working on.

What's awesome about Blockly is how easy it is to make a VPL. You can set one up and start building apps super fast, with just a few lines of code. Plus, Blockly has a really cool and easy-to-use design (that's the UI and UX part). This helps lots of people learn and try out different things. That's why I started wondering if I could use Blockly to help me learn about AI (Artificial Intelligence).

ScratchやBlocklyが大好きで、ついにはVPLを自作し始めました。全く新しいVPLを目指して作っているのですが、ブロックが無限に伸びるバグが発生したりして苦労しています。

Blocklyの良さは、たった数行でVPL環境を作成でき、すぐにアプリを開発できることです。また、洗練されたUIとUXにより、多くのユーザーがさまざまなコンテンツを学習、体験することができます。そこで、私はAIを勉強する際にBlocklyを使えないかと考えました。

03:
Learning
Challenges
My topic today is about solving problems when you're learning about AI. I think there are two main challenges for beginners who want to study AI.

今回のテーマは、AIを勉強する際に発生する課題の対策です。初心者がAIを勉強するには主に二つの課題があると考えています。

Programming used in AI. Python, environment setup, and typing can be difficult for beginners.
The first problem is math, and the second is programming. When people start learning about AI, 70% give up because of the math. The other 30% quit because of the programming.

最初の問題は数学で、2つ目はプログラミングだ。AIについて学び始めると、70％の人は数学のせいで諦めてしまう。残りの30％はプログラミングのせいでやめてしまう。

Now, I'll talk about the math used in AI. As you can see on the slide, you need college-level math. When I first got interested in AI, I was in high school, so I remember it felt really hard! There are many ideas like matrices and partial derivatives（パーシャル・ディリバティブ） And sometimes, you even have to do these calculations by hand!
AIに使われる数学について紹介します。スライドにあるように、大学レベルの数学が必要になります。私がAIに興味を持った時は高校生だったので、とても難しく感じたのを覚えています。行列や偏微分などの概念が沢山出てきます。しかもそれらを手計算する場合も出てきます。

The second problem is programming. For those of you who are programmers here, this might seem easy, haha!
But for kids and people new to programming, it's often hard. First, typing can be difficult. Also, using special tools like PyTorch (which is a programming framework) can be tough（タフ） to learn at first.
二つ目の課題であるプログラミングです。ここにいるプログラマーの皆さんにとっては簡単かもしれません笑。
しかし、子供やプログラミング初心者にとっては、まずタイピングが難しかったり、PyTorchなどのフレームワークを使いこなすことが難しい場合が多いです。

04:
Projects Created
So, I started thinking: "Can I make an app that helps people learn how AI works using a visual programming language?" For example, there are many kids who can't write code in Python or JavaScript, but they make amazing games and projects with Scratch – even better than some adults!
Getting a hint from that, I used Blockly to create a visual programming language to help people learn about how AI works.
そこで私は、ビジュアルプログラミング言語を使ってAIの仕組みを学ぶことができるアプリを作れないかと考えました。例えば、PythonやJavaScriptが書けない子供でも、Scratchを使って大人より凄いゲームや作品を作っている子供はたくさんいますそこからヒントを得て、AIの仕組みを学ぶためのビジュアルプログラミング言語をBlocklyを使って作りました。

How the idea came to me
VPL
3D Animation
There are already visual programming languages for making AI, so I thought of something new: combining（コマイニング） Blockly with a 3D animation library like Manim. I decided to try making something that mixes a 3D animation library that I built myself with about ten thousand lines of code, with something like Scratch.
AIを作るビジュアルプログラミング言語はすでにあるので、Manimのような3DアニメーションライブラリとBlocklyを統合することを思いつきました。自分1人で作った3Dアニメーションライブラリと、Scratchをミックスしたようなものを作ろうと考えました。ちなみに、アニメーションエンジンは1万行ほどコードを書いています

Useful things to have when studying AI
Here's what the actual app looks like.
On the left side, you can see Blockly, and on the right, my own animation engine is displayed.
You can freely move and interact with the 3D graph. In this example, it shows how an AI learns and lowers its error rate over time.
When you click the "Run" button, a ball moves. At first, it doesn't go down correctly.But if you make a parameter called the "learning rate" a smaller number, it starts to move correctly.
This is the app I built. This video is very simple, but it's a basic demo that shows how effective this app can be for learning how AI works.

これが実際のアプリの画面です。

左側にはBlocklyが埋め込まれており、右側には自作のアニメーションエンジンが表示されています。

3Dのグラフは自由に操作することができます。この例では、AIが学習をしてエラー率を下げていく過程を可視化したものです。

Runボタンをクリックするとボールが移動するのですが、最初は上手く下に動きません。

そこで、学習率と呼ばれるパラメーターを小さい数字にすることによって正しく動くようになります。

これが私が作ったアプリです。この動画はとてもシンプルなものですが、AIの仕組みを学ぶ上でとても効果的であることを示す最小限のデモになります。

How do we pass values?
Now, I want to talk about something a little technical. In this demo, when you change a number, that new value updates in the animation engine right away. I'm going to show you how I made that happen.
ここで、少しだけ技術的な話をしたいと思います。今回のデモでは、数字を変えると動的にその値がアニメーションエンジンに適用されるようになっています。それをどのように実現したか紹介していきます。

Separate components
First, the front end is made with Next.js, which means it uses React. My own animation engine and Blockly are separate parts (we call these "components"). So, I had to figure out how to share information between them.
In React, there are many good ways to manage this "state" or information, and lots of different tools like Recoil or Jotai. They're good choices!
But for this project, I decided to use JavaScript's global window object to send and receive values.
The reason is that my animation engine doesn't use React; it's built with pure TypeScript and Three.js. This makes it hard for it to work directly with React's state system.
まず、フロントエンドはNext.jsで、つまりReactを使って作られています。自作したアニメーションエンジンとBlocklyは別々のコンポーネントなので、Stateをどのように渡すかを考えなければなりません。

Reactにおける状態管理方法についてはベストプラクティスやさまざまなアーキテクチャ、ライブラリが存在します。Recoil, Jotaiなどの状態管理ライブラリを使うのも良い選択です。

しかし、今回はJavaScriptのglobalなwindowオブジェクトを使って値を送受信するようにしました。

理由は、アニメーションエンジンにはReactを使っておらず、純粋なTypeScriptとThreejsを使っているため、Stateとの相性が悪いことが挙げられます。

Next, I want to talk about how I get values from the arguments of Blockly blocks. Usually, people just run the JavaScript code that Blockly creates directly.
But for this project, I wanted to connect my own animation engine and a special program called a VM (Virtual Machine) in a flexible way. So, I used an API called getFieldValue.
As you can see in the picture, I can use an ID given to an argument to grab its value from TypeScript. This helps me keep the design clean and easy to manage.

次に、Blocklyのブロックの引数からどうやって値を参照するかについてお話しします。通常、Blocklyから生成されたJavaScriptコードを使って直接実行したりすると思います。
しかし、今回は自作のアニメーションエンジンやVMと疎結合に繋ぐために、getFieldValueというAPIを利用しました。
画像にもある通り、引数につけられたIDを参照してTypeScriptから値を取得することができます。これにより、クリーンな設計を実現しています。

05:
Future of VPL
That's all for the technical stuff! To finish, I want to share my thoughts on what the future of VPLs (Visual Programming Languages) might look like, coming from someone like me who builds them from scratch.

これで技術的な話は終わりです。最後に、VPLを自作するような私が、将来VPLがどのようになっていくのかという思想を共有して終わろうと思います

“The world is
shifting to VPL.”
— Masato Akiho
I believe that all apps and coding experiences in the world will slowly move towards VPLs (Visual Programming Languages). I want to show you some specific apps and services that prove this.この世界のあらゆるアプリやコーディング体験というものは、だんだんとVPLに移行していくと考えています。具体的なアプリやサービスを紹介したいと思います。

Dify is an open source LLM app development platform
Visual Blocks
Google visual programming framework that lets you create ML pipelines in a no-code graph editor
AI Platform
For example, in Japan, there's a popular app called Dify. It lets you easily create apps using LLMs just by using flowcharts. There's also an app called Visual Blocks where you can do experiments with machine learning.

例えば、日本だとDifyというアプリが人気です。LLMを使ったアプリをフローチャートで簡単に作ることができます。Visual Blocksという機械学習の実験ができるアプリもあります。

In game programming, Unreal Engine's Blueprint and Microsoft's MakeCode are really famous. If you ever try making a game with Unreal Engine, you'll see how easy it is because you can see how everything works together.

ゲームプログラミングでは、Unreal EngineのBlue Print, MicrosoftのMakeCodeが有名でしょう。Unreal Engineでゲームを作ってみるとわかるのですが、処理の流れが可視化されるため非常に作りやすいです。

How to Innovate at VPL
Based on these services and my own experiences, I've been thinking about how VPLs will grow in the future. If you map out text-based coding and VPLs, you can see an interesting relationship.
The vertical line (Y-axis) shows UX (User Experience), which means how easy something is to read or write. The horizontal line (X-axis) shows UI (User Interface), which means whether it's a text language or a VPL.
これらのサービスや、自分の経験から、VPLがどのように発展していくか考えてみました。テキストコーディングとVPLをマッピングしてみると、面白い関係が見えてきます。
縦軸がUXで、読み書きのどちらかを表します。横軸がUIで、テキスト言語とVPLのどちらかを表します。

How to Innovate at VPL
Now, I've been thinking about how VPLs can become even more useful in the future, or in other words, how they can create innovation.
There's a certain way people think about how text-based languages and VPLs relate right now. Do you see it?
Text programming languages are good for both reading and writing code. They're actually great for things like Git, which helps you see changes in code. On the other hand, VPLs tend to focus more on writing programs, and they get a lot of criticism for it.
In Japan, it comes up on Twitter a few times a year: people mostly say negative things about VPLs. They complain that VPLs don't have features like auto-completion compared to something like TypeScript, or that they're bad for tracking changes, or that they lack type systems.
But that's a thinking bias. As this graph shows, we're trying to make VPLs only good for writing. We can break this bias and create innovation by changing that idea.

ここで、どうやったらVPLがより将来的に使われるようになるか、つまりイノベーションを起こせるか考えてみました。
現在のテキスト言語とVPLの関係はこのような思考バイアスがあります。わかりますか？
テキストプログラミング言語は読み書きどちらも適しています。実際、gitなどの差分管理に向いています。それに対してVPLは、どちらかというとプログラムを書くことに注力し、それに対して批判が多いです。
日本のTwitterでも年に数回話題になるのですが、ビジュアルプログラミング言語はTypeScirptに比べて補完が効かない、差分管理ができない、型システムがないというネガティブな批判ばかりです。
それは思考バイアスです。このグラフに示すように、VPLを書くことに特化させようとしています。つまり、このバイアスを壊すことでイノベーションを起こせます。

How to Innovate at VPL
VPL offers excellent readability
However, many programmers use it more for writing than reading
It excels in areas where text-based languages fall short
Visualization of AI
We can break this thinking bias, just like the graph shows. This means that creating a VPL that's great for reading code could lead to innovation.
Lately, AI has been writing a lot of code, which makes it harder to read and understand. VPLs might be able to help solve this problem. For kids, VPLs are better than text-based programming for understanding how programs are built and how algorithms work.
In fact, at this Blockly Summit, I felt like many products were focused on being good for reading.
The important thing is not to fight against text languages. Instead, we should use the good parts of both and help each other with their weak points.

画像のグラフのように、思考バイアスを壊します。つまり、読むことに特化したVPLを作ってみることがイノベーションにつながります。
最近、AIが大量にコードを書くようになり、コードリーディングの負荷も上がっています。それをVPLで解決することができるかも知れません。子供達にとって、テキストプログラミングよりもVPLの方が構造やアルゴリズムを理解するのが向いています。
実際、今回のBlockly Summitでは読むことに適したプロダクトが多いように感じました。
大事なことは、テキスト言語と戦うわけではなく、お互いのメリットを活かし、デメリットを補うことです。

Executive
summary

Finally, I want to wrap things up with a summary.
I have three main points:
I made an app that helps you learn about how AI works in a way that's easy to understand.
The world is slowly moving towards VPLs (Visual Programming Languages).
We should try using VPLs for reading code
That's the end of my presentation. Thank you very much!

最後に、まとめをして終わろうと思います。

三つのポイントがあります。一つ目は、AIの仕組みを直感的に学べるアプリを作りました。二つ目は、世界はVPLにシフトしていくということ、三つ目はVPLを読むことにも使ってみようというアイデアです。

これで発表は終わりです。ありがとうございました！

Thank you!