TutoriaLLM - LLMチュートリアルを使ったプログラミング学習ソフトウェア

© CC BY 4+ visibility499
© CC BY 4+
visibility499

Scratchのようなブロックプログラミングのチュートリアルを簡単に作成し、AIを利用して提供することができる、教育者と学習者をつなぐ、セルフホスト型のソフトウェアです。

link https://tutoriallm.com
  • CIVICTECH賞 by 一般社団法人シビックテック・ジャパンヒーローズ・リーグ 2024
動画
開発素材
システム構成
system image

アプリに関する詳細・API仕様・ドキュメントなどはtutoriallm.comを、 アプリのデモ(一部機能)はdemo.tutoriallm.comからお試しください。

2024年12月現在、デモサイトはコスト削減のため非常に低速なサーバーを利用しています。アクセスできない場合は時間を空けてから再度お試しください。

システム全体の構成

システム構成は全て語ると非常に複雑になってしまいますが、主に3つ部分に分かれています。

  • プログラミングを学ぶ人の UI
    • 学習者はAIが提供するチュートリアルを通して、プログラムの制作を行い、製作したコードをサーバーサイドで実行することができます。サーバーサイドで実行するメリットを活かして、Scratchのようなキャンバスの中の世界だけでなく、Minecraft / Web / Micro:bitなどの外の世界で実行したり、接続したりすることができます。また、AIから提供されるチュートリアルはアプリ内に完全に統合されており、UIの生成やユーザーに合わせたガイドなどを提供します。
  • プログラミングを教える人のUI
    • 教育者は、専用のエディターを利用して、AIに対して「何をユーザーに提供するか」を決めるだけでチュートリアルを作成できます。
    • そして、ユーザーの利用状況を遠隔で一括管理することができます。これにより、今までのような対面での授業で発生していた、初歩的なミスの対応などの、無駄な時間を軽減し、より効果的な教育の提供に繋げます。
  • API
    • APIでは、セッションの管理、チュートリアルの管理、コード実行などの機能を提供します。
    • 内部APIにとどまらず、将来的には外部との接続も想定して設計しているため、外部サービスとの連携などの実装も可能です。

利用している技術

ユーザー側のアプリケーションは、React+Viteを利用して作成しています。また、PWAに対応しているため、対応ブラウザを使えば非常に高速にロードを行うことができます。 ブロックエディタにはGoogle社が開発したBlocklyというフレームワークを利用しています。 AIとの対話機能には、OpenAI社のGPT APIを利用しています。 UIにはTailwind CSSとRadix UIを主に利用しています。

開発者側のアプリケーションも、ユーザー側のアプリと統合されているため、基本的な構成は同じです。

構成は、2024年11月4日時点のものです。現在、大規模なリファクタリングを行なっています。

API(サーバー)にはExpress.jsを利用しており、セッション参加時の、クライアントとの常時接続にはSocket.ioを利用しています。セッションの一時的なデータ保存にはRedis、チュートリアルやユーザーなどの情報はPostgreSQLに保存しています。 サーバーと常時接続を行うため、インターネット接続が必要になりますが、複数ユーザーでの同一セッション参加や、AIによるリアルタイムな応答が行えるようになりました。

また、ユーザーのコード実行には、サーバー内のワーカースレッド上に作成し、割り当てられたVMスペースを利用します。どちらもnode.jsの標準機能です。VMは隔離されており、限定したモジュールしか利用できません。現状では、honoという、Express.jsに類似した軽量なフレームワークをVMの実行コンテキストとして利用でき、これを通して外部の世界と通信することができます。Honoを使っているため、デフォルトでHTTP通信に対応しており、また、オプションでWebsocket通信に対応しています。

ScratchやMakecodeなどの類似のブロックプログラミングシステムでは、基本的にローカル環境での実行に限定されていたため、外部の世界と通信するにはコネクターアプリなどのダウンロードをする必要があり、さらにそれらをすべて同一のコンピューター上に限定されていました。また、チュートリアル機能などもありましたが、作成するのが非常に大変なため、あまり使われることがありませんでした。 TutoriaLLMではサーバーサイドでのコード実行を用いて出力を行うことでコードの実行をより簡単にし、チュートリアルをAIが提供するようにしたことで、これらの問題を解決し、ユーザーはブラウザを開くだけで、開発、学習、実行のすべてのプロセスを行えるようになりました。

現在は、Minecraftと接続してコードを実行する機能を提供しています。これは、MinecraftとWebsocket通信を用いて接続することで、ワールド内でコマンドを実行したり、「エージェント」と呼ばれる小さなロボットをゲーム内に登場させて動かしたりすることができる機能です。

RedisとPostgreSQLを除き、アプリ全体は1つのDockerイメージとして作成されています。そのため、composeコマンドを1度利用するだけで、アプリ全体のデプロイが可能です。

効果

このアプリは実際にテストを行いながら開発しており、すでにプログラミング教室や、フリースクールなどの小〜中規模な団体で実際に使ってもらっています。

私は過去に小中学生程度の生徒に対して授業が行ったことがあったため、私自身がこのアプリを利用し、比較することにしました。 実際にAIを利用して対話を行い、プログラムを作成、実行するという一連のフローをこのアプリ上で完了することができ、さらにこのアプリを使うことで今までは同時に2、3人程度にしか対応できなかったオンライン上でのレッスンなども、大半の質問などをAIが汲み取ることにより、7、8人程度の大人数に対して比較的高いレベルで教育を提供することができると感じました。 また、現状はMinecraftとの接続でプログラムを実行する機能のみの提供となっていますが、実行環境(VM)上ではHonoなどの高レベルなフレームワークが利用可能なため、これを活かしてWebアプリの制作や、他のプログラミング教育ソフト、ツールなどの接続ができると考えています。

そして、非常に役に立った機能として、複数ユーザーによる同一セッションの参加が挙げられます。 これは、AIに対応できないトラブルなどが発生した時に先生などがユーザーのセッションに直接参加し、手助けなどを行うことができたり、複数生徒が協力してプログラムの制作などを行うことができるようになるため、個人的にとても作って良かった機能だなと思いました。

ストーリー

アプリ開発のきっかけ

私がこのアプリを作ろうと思ったのは、誰かにプログラミングを教える難しさを感じていたからです。プログラミングスクールで先生をしていた頃、生徒一人ひとりのレベルやニーズに合わせた指導をすることの難しさや、時間的制約から、すべての生徒に対して十分なサポートを提供できないジレンマを抱えていました。

また、私自身が小学生だった頃を振り返ってみると、ScratchやMinecraftといったプログラミング学習ツールに興味を持ちながらも、教えてくれる人が周りにいなかったために、その興味を深めることができずに終わってしまったという経験がありました。

当時の私は、ただ一方的に書かれた本や動画よりも、自分の行動に対して反応してくれるような、インタラクティブな学習体験を求めていたように思います。しかし、当時はそのような学習環境は身近にありませんでした。

これらの経験から、子供たちが場所や時間に縛られることなく、誰でもパーソナライズされたサポートを受けながらプログラミングを学べる環境を提供したいと考えるようになりました。そして、その解決策として、AIを活用したインタラクティブなプログラミング学習アプリを開発することを決意しました。

特に、AIを活用することで、従来のプログラミング学習における、以下のような課題を解決したいと考えています。

  • 教師不足: 教師不足は深刻化しており、プログラミング教育の現場においても、十分な数の教師を確保することが難しいのが現状です。
  • 個別指導の不足: 生徒のレベルや学習進度は異なるため、個別指導が理想ではありますが、大人数の生徒に対して、個別にきめ細やかな指導を行うことは困難です。
  • 学習意欲の維持: 一方的な学習は、子供たちの学習意欲を維持することが難しい場合があります。子供たちの行動や反応に応じて、適切なフィードバックや励ましを与えることが重要です。

このアプリを通して、子供たちがプログラミングの楽しさを実感し、自発的に学習を進めていけるような環境を提供することができればと考えています。

メンバー
  • user
    So Tokumaru (Soumame1090) @soumame

関連イベント
  • event ヒーローズ・リーグ 20242024-09-02 開催
  • event アバナードHuman Impactリーグ2024-09-02 開催
関連リンク
user
CIVICTECH賞 by 一般社団法人シビックテック・ジャパン @ヒーローズ・リーグ 2024

実体験を元に課題を整理し解決策を自作されている点や、今後の教員の人材不足などに対する一つの解になっていく可能性があること、完成度が高くUI/UXの設計も非常に高いレベルで実現している点などを評価し選出


同じニオイがする作品
  • event ーーーー勇者、今、目覚める刻ーーーー   「勇者目覚まし時計」
  • event 楽曲データ + AIを用いた好み検索アプリ
  • event 30分制限レシートアプリで都市をハック
  • event RunTicket

Proto lovers ♥
user
user
user
user
user
user
user
user

作品を登録しよう

モノづくりしている人に、つくった作品を見てもらえ、リアクションがもらえるかも?

close

目次


Proto lovers ♥
user
user
user
user
user
user
user
user