LINE Bot Maker

教育向けビジュアルプログラミングツール

Visual programming tools for education

社会課題：IT人材の不足

Social Issue: The shortage of IT Engineer

2030年時点で、

IT人材が需要に対して30%（45万人）

不足するシナリオ

→ IT人材を増やす必要性に迫られている

​

As of 2030, the IT human resources shortfall of 30% (450,000) of demand

Shortage scenario

→ The need to increase the number of IT personnel is pressing.

社会課題：IT人材の不足

Social Issue: The shortage of IT Engineer

​

​

As of 2030, the IT human resources shortfall of 30% (450,000) of demand

Shortage scenario

→ The need to increase the number of IT personnel is pressing.

​

​

社会課題：IT人材の不足

Social Issue: The shortage of IT Engineer

子供たちにプログラミングで誰かの役に立つ楽しさ

を知ってもらい、成功体験を積んでもらう

​

Let children experience the fun and success of helping others through programming.

​

​

​

我々のアプローチ / Our Approach

独自の価値提案 / Unique value proposition

Even primary school students

Can create a useful LINE Bot

The Visual Programming Tool

ソリューション / Solution

小学生でも

実用的なLINE Bot を作成できる

ビジュアルプログラミングツール

なぜLINE Botか

Why LINE Bot?

LINE: 日常的に利用されるアプリ

LINE : An application for daily use

​

​

① 身近な人に使ってもらいやすい / Easy for people close to you to use.

② 実用的なプロダクトを作りやすい / Easy to create practical products

既存のビジュアルプログラミングツール

ゲームベースのもの

学校の教科で利用されるもの

問題点：誰かの役に立つプロダクト・課題を解決するプロダクトは作りづらい

問題点：センサーなどのハードウェアが必要．あくまで理解を助ける教材としての側面が強い

Scratch, MoonBlockなど

算数)Turtle graphics

理科) センサなどを利用するもの

誰かの役に立つプロダクト・課題を解決するプロダクトは作りづらい

→ ここにモチベーションを見出す子供たちにできていない

The Existing Visual Programming Tools

Based on game

Used in school projects

Problem: It is hard to create a product that is useful to someone or solves a problem.

Problem: Hardware, such as sensors, are needed to aid in understanding.

Scratch, MoonBlock, etc.

Arithmetic: Turtle graphics

Science: Using sensors, etc.

It is hard to create a product that is useful to someone or solves a problem

→ Not done by children who find motivation here

ビジュアルプログラミング

Early adopterのペルソナ / Early Adopter Personas

ユーザーストーリー

User Story

使ってもらう

（親・自分・友達）

Use by Parents, self, friends

より実践的なプログラミングへの

モチベーション

Motivation for more practical programming

ビジュアルプログラミングに

興味を持ってもらう

Have interesting with visual programming.

​

ロードマップ / Road Map

Prototype (2022)

2030

プロダクトを作る → 使ってもらう → 成功体験を得る

のサイクルを実現する。

Realize the cycle: creating a product → getting people to use it → gaining success experience.

よりモチベーションを高める・サイクルの強化 / More motivational/cycle reinforcement

課題：継続利用や次のモチベーションにつながりづらい

ソリューション：

ユーザー同士でプログラムを公開、いいね・コメント機能など、相互交流の促進

​

Issue: Difficult to motivate continued use and next steps

Solution:

Open the program to other users and promote mutual interaction, such as like and comment functions.

​

ロードマップ / Road Map

2040

課題：自分の作ったもので誰かの役に立つ喜びを知らない子が多い

ソリューション：

教育機関の導入

2050

IT教育のスタンダードに

自発的に小学生がプログラミングをやり，IT人材の不足を解決する状況を作り出す

より実践的なプログラミングへの

モチベーション

ビジュアルプログラミングに

興味を持ってもらう

課題：実際のプログラミングへ繋がりづらい

ソリューション：

テキストプログラミング言語への橋渡し

サービスを利用して

成功体験を得る

Prototype (2022)

• 親：プログラミング教育に不安を持つが，子がプログラミングを始めてくれて嬉しい．

Parents: Concern about programming education. But they are glad that children can receive programming education

• 子：プロダクトを作る → 使ってもらう → 成功体験を得るのサイクルを実現する。

Child: Realize the cycle of creating a product → Let friends to use it → Gain success experience.

2030

課題：実際のプログラミングへ繋がりづらい

ソリューション：モードを切り替えることによって，テキストプログラミングもできるようになる

Issue: Difficulty in connecting to actual programming

Solution: By switching modes, text programming can also be done.

ロードマップ / Road Map

2040

課題：プログラミングを通じてなんとなく身近な課題解決を個人でしているだけに過ぎない

ソリューション：

​

チームで課題特定，解決策の立案，プログラミングによるそれらの実行ができるオープンソースとコミュニティ

2050

プログラミングを手段として，チームで課題解決ができる人材を作り出し，IT人材の不足を解決する状況を作り出せている

Using programming as a tool to create human resources capable of solving problems in teams, we are able to create a situation to solve the shortage of IT human resources.

より実践的なプログラミングへの

モチベーション

Motivation for more practical programming.

ビジュアルプログラミングに

興味を持ってもらう

Get children interested in visual programming.

サービスを利用して

成功体験を得る

Gain success experience.

課題：プログラミングができる人材は増えているが，課題の特定や適切な解決策の選定，チーム作りに難を抱える．

ソリューション：チームで課題特定，解決策の立案，プログラミングによるそれらの実行ができるオープンソースとコミュニティ

Issue: Although the number of people who can program is increasing, it is difficult to identify issues, select appropriate solutions, and build teams.

Solution: Open source and communities that enable teams to identify issues, formulate solutions, and execute them through programming.

ロードマップ / Road Map

ロードマップ / Road Map

2040

Issue：Many children don't know the joy of helping someone else with something they've created.

Solution：

Introduction to educational institutions and programming classes

2050

Setting the Standard for IT Education

Create a situation where elementary school students voluntarily learn programming and solve the shortage of IT personnel.

Motivation for more practical programming

Get children interested in visual programming.

​

​

Issue：Difficult to connect to actual programming

Solution：

Bridge to text programming languages

Use the service and gain success stories.

マネタイズ / Monetize

2030

相互交流を可能に

コメント・いいね

Enabling Interaction

Comments & Likes

​

2040

無関心な層の取り込み

教育機関への導入

Capturing the non-audience

Introduce to educational institutions

2050

実践プログラミングへの橋渡し

Bridge to Practical Programming

サービス導入・ワークショップ提供 / Service introduction and workshop provision

企業広告 etc / Corporate advertising, etc.

認知の拡大 / Expanding Recognition

2040

教育機関・プログラミング教室などへの導入

Import to educational institutions, programming classes, etc.

2050

ワークショップ化

授業のパッケージ化

Be workshop

Be package for lessons

2022

プロトタイプ

成功体験の創出

Prototype

Creating Successful Experiences

ToC

ToB

Early adopterのペルソナ

Early Adopter Personas

Early adopterのペルソナ

Early Adopter Personas

Early adopterのペルソナ

Early Adopter Personas

Early adopterのペルソナ

Early Adopter Personas

リーンキャンバス

リーンキャンバス

顧客セグメント：子供、親

課題：

• プログラミングに興味があるけど、よく分からない
• 身近な人の役に立つプロダクトを作りたいが、手段がない
• プログラミングが必修化するので子供にプログラミングに関心を持って欲しいけどゲームはちょっと．．．
• 塾代が高い

リーンキャンバス

独自の価値提案：

• ゲームではない、役立つプロダクトを作れる
• 実用的なものを作れて、子供の興味を引ける

圧倒的な優位性：

• 京大の情報学研究科の学生が作ったプログラミング教育ツール
• 先行優位性

リーンキャンバス

Lean Canvas

既存のビジュアルプログラミングツール

ゲームベースのものが多い

サービスのフロー

The Flow of Application

System Architecture

HTTP

Messaging API

LIFF (LINE Front-end Framework)

Front-end

Back-end

Flowchart Execution Module

HTTP

import

Front-end

Reactでエディタ画面 / ダッシュボードを作成

認証にはLINE Loginを利用

​

Create editor screen / dashboard by React

Using LINE Login for authentication

ビジュアルエディタをほぼライブラリを入れずに実装。

Visual editor is implemented with almost no libraries.

Front-end 技術的工夫点

• シームレスに共有できるUIUX UIUX for seamless sharing

Front-end 技術的工夫点

BOT

利用開始

作成者

利用者

Messaging API

Flowchart Execution Module

HTTP

import

技術的工夫点

Front-end

プログラム（フローチャート）の実行プログラムを、フロント・サーバーで共通化

Execution program for programs (flowcharts) is shared between front-end and server-side.

Back-end

Back-end

フロントと連携のAPI / Create API to connect with front-end.

ユーザーID情報、生成されたLINE bot情報、そしてLINE botの変更情報は、フロントエンドからバックエンドにリクエストで送信される。

​

User login information, LINE bot information and information about the changes made to the LINE bot will be sent to backend by API.

• USER_TABLE

attributes: user_id(LINE USER_ID), name, picture, createdAt

​

• BOT_TABLE

attributes: bot_id, developerId flowChart, name, createdAt, updateAt

​

• ACTIVATION_TABLE

attributes: bot_id, user_id(uniqle)

1. Get the user id.

POST /login idToken/picture

2. The list of line_bots which

is created by the user.

GET /bot

3. The details of bot.

GET /bot/:bot_id

4. Create a new bot.

POST /bot

5. Renew the detail of bot.

PUT /bot/:bot_id

6. Delete the bot.

DELETE /bot/:bot_id

7. Activate a user.

POST /user/:user_id

API Scheme

DB Scheme

バックエンド / Back-end

フロントと連携のAPI / Create API to connect with front-end.

ユーザーID情報、生成されたLINE bot情報、そしてLINE botの変更情報は、フロントエンドからバックエンドにリクエストで送信される。

​

User login information, LINE bot information and information about the changes made to the LINE bot will be sent to backend by API.

バックエンド / Back-end

フロントと連携のAPI / Create API to connect with front-end.

• Get the user id.

POST /login idToken/picture

​

2. The list of line_bots which is created by the user.

GET /bot

​

3. The details of bot.

GET /bot/:bot_id

​

4. Create a new bot.

POST /bot

5. Renew the detail of bot.

PUT /bot/:bot_id

​

6. Delete the bot.

DELETE /bot/:bot_id

​

7. Activate a user.

POST /user/:user_id

バックエンド / Back-end

LINEプラットフォームとの連携 / Connect to the LINE platform.

ユーザーがメッセージを送ったり、公式アカウントをフォローしたりすると、LINEプラットフォームはサーバーにPOSTリクエストを送信する。

​

When user send some message or follow your official account, The line platform will send a POST request to your server.

​

https://kulinebotmaker.herokuapp.com/callback

POST

バックエンド / Back-end

LINEプラットフォームとの連携 / Connect to the LINE platform.

LINEプラットフォームから送られてくるリクエストを受信できるようにするためには、サーバーをngrokへデプロイする必要がある。

​

In order to receive the requests sent by the LINE platform, we need to deploy the server to the ngrok platform.

バックエンド / Back-end

データベースの構築(PostgreSQL) / Construct the database.

LINE bot情報、ユーザー情報はサーバーのデータベース（バックエンド）に保存される。

​

LINE bot information and user information will be stored in the server database (back-end)

• USER_TABLE

attributes: user_id(LINE USER_ID), name, picture, createdAt

​

• BOT_TABLE

attributes: bot_id, developerId flowChart, name, createdAt, updateAt

​

• ACTIVATION_TABLE

attributes: bot_id, user_id(uniqle)

役割分担

Roles