情報処理学会 インタラクション 2018
IPSJ Interaction 2018

2B20
2018/3/5

Block Sweetie: ブロック型エディタを用いた
Web アプリ開発システム
三浦 元喜1,a)

概要：Web アプリケーションを構築するためには，動的なページ生成のためのプログラミング言語の理解に加えて，データベースや SQL，HTTP に関する理解が不可欠である．我々は，これまで Web ブラウザ上で動作するエディタを用いて，簡易な Web アプリケーションを簡単に構築できるシステムを提案してきた．しかし，テキストでプログラミングを行う必要があるため，入力ミスが発生したり，どのような機能が利用できるか確認しにくいといった問題があった．そこで我々は，ブロック型のプログラミングエディタを用いて，Web アプリケーションの開発が行えるシステム Block Sweetie を開発した．ブロック型言語の特徴である，配置やパラメータの制約によって，入力ミスを防ぐ効果が期待できる．また，チェックボックスやドロップダウンリストの選択によって，入力の調整や変更が容易になるため，プログラミングにおける試行錯誤がしやすくなる．

Block Sweetie: Web Application Development Systemwith Block Editor
Motoki Miura1,a)Abstract: In order to build a Web application, understanding of the programming language, databases,
SQL, and HTTP is indispensable. We have proposed a system and a framework that can easily constructsimple web applications on a Web editor based on PHP language. However, since it is necessary to programby text, there was a problem that input errors occurred and it was diﬃcult to confirm what kind of function can be used for novice learners. We developed a system “Block Sweetie” that can develop simple webapplications using block type programming editor. Thanks to the constraints on placement of blocks andits parameters, novice learners can prevent input errors and mistakes that causes syntax errors. Also theselecting a check box or a drop-down list eases modification of the code. It helps novice learners to perform
trial and error in the Web application programming.

1. はじめにステム Sweetie Editor[1], [2] や，Web アプリケーションを構築するための Web フレームワーク Sweetie Framework

通常，Web アプリケーションを構築するためには，動[3], [4] を提案してきた．これらのシステムやフレームワー的なページ生成のためのプログラミング言語の理解に加えクを用いることで，初学者が Web アプリケーションをて，データベースや SQL，HTTP に関する理解が不可欠で開発するうえでの試行錯誤を伴う作業の敷居を下げるこある．そのため，初心者にとっては Web アプリケーショとができる．しかし，Sweetie Editor を用いて，Sweetieンの敷居は，Web ページに比べて高い．

Framework の機能を利用した Web アプリケーションを開

我々は，これまでに Web ブラウザ上で動作するテキストエディタを用いて，Web サイトを簡単に構築できるシ

発するには，学習者は PHP のソースコードをテキストで入力したり編集したりする必要があった．
我々は，初学者に対する Sweetie Framework に基づいた

1a)

九州工業大学 基礎科学研究系
Faculty of Basic Sciences, Kyushu Institute of Technology
miuramo@mns.kyutech.ac.jp© 2018 Information Processing Society of JapanWeb アプリケーション構築の敷居をさらに下げるため，ブ599

情報処理学会 インタラクション 2018
IPSJ Interaction 2018

2B20
2018/3/5

図 1 Block Sweetie

Fig. 1 Block Sweetieに構築できるシステムである．Block Sweetie は，ブロック型プログラミングエディタの 1 つである Google Blockly[5]を用いて開発した．図 1 に，Block Sweetie の編集画面を示す．左側のブロック編集画面で操作を行うと，右側のソースコード確認画面に対応するコードが即座に反映される．そのため，学習者はブロックとソースコードの対応を確認しやすい．また，画面左端のツールボックスから，利用可能なブロックを表示して確認できるため，テキストベースのプログラミングに比べて，確認や入力の手間が軽減できる．図 2 は，図 1 のブロック記述から生成されたWeb アプリケーションの動作画面である．また，付録 A.1に，今回設計した Block Sweetie のブロック一覧を示す．
図 2

生成された Web アプリケーション

Fig. 2 Exported Web Application

これまでの Sweetie Framework を用いた Web アプリ
ケーション開発では，SQLITE3 データベースのテーブルを事前に準備するため，学習者は SQL 文を直接記述してロック型エディタを用いた Web アプリケーション開発シいた．Block Sweetie では，create table ブロックを配置しステム Block Sweetie を開発した．

たうえで，field ブロックを create table ブロックのステー
トメント部分に追加していくことによって，対応する SQL

2. Block Sweetie

文が自動生成されるように設計した．field ブロックでは，Block Sweetie は，Sweetie Framework が提供している

データ型をドロップダウンリストで選択することができ関数や，頻繁に利用される記述をブロックで表現し，それる．また，primary key, autoincrement, not null のフィーらを配置することによって Web アプリケーションを簡単

ルドの属性を，チェックボックスで簡単に設定できる．そ© 2018 Information Processing Society of Japan600

情報処理学会 インタラクション 2018
IPSJ Interaction 2018のため，SQL 記述におけるエラーを軽減できる．
フォーム部分の記述については，form start ブロックと form end ブロックのあいだに，form input ブロックとform submit ブロックを並べていき，name 属性や type 属性を入力したり，ドロップダウンリストで選択するという

2B20
2018/3/5

Sweetie と同様，テキストベースの Web プログラミングエディタであるため，ブロック型言語のインタフェースは備えていない．

4. おわりに方法を選択した．create table ブロックと同様，Form 要素

Web アプリケーション開発にまつわる知識や技術の学に対応する大きなブロックの内側に，ステートメントと習において，従来テキストベースで行っていたプログラミして input 要素を並べていく方法も検討したが，Sweetie

ングをブロックの配置によって行えるようにするためのシFramework における関数との対応関係を重視し，個々のブステム Block Sweetie を開発した．ブロックの配置やパラロックを単純配置する設計とした．

メータの制約，チェックボックスやドロップダウンリスト

Web アプリケーション記述におけるブロックの設計方針によって，従来のテキストベースのプログラミングに比べについては，HTML 記述における構造や階層との親和性をて，機能の確認や入力の手間が減らせたり，入力ミスを防重視することも重要であると考えている．たとえば，図 1いだりできるため，試行錯誤がしやすくなる．そのため，

では，div/span ブロックの内側に，ステートメントとして従来の Sweetie Framework を単体で利用する場合に比べform 関連のブロックを並べている．このように HTML にて，より開発・学習の敷居を下げることが期待できる．

おける構造と，ブロックの構造を一致させることで，HTML

Block Sweetie の開発にあたり，Web 開発に関連する処による箇条書きや表の記述に対する理解は促進できると考理や宣言をブロック表現に落とし込むための設計についてえられる．

考察した．今後，実際に初学者に利用してもらい，ブロッSweetie Framework で は ，デ ー タ ベ ー ス の テ ー ブ ル

ク表現の設計やインタフェースについて有用性を検証してデータを，HTML の表形式で簡単に表示するための関いく．

数 showtable() を提供している．利便性の面では有用であ

謝辞

本研究の一部は公益財団法人電気通信普及財団，るが，内部の処理の仕組みが見えにくくなってしまっていおよび JSPS 科研費（課題番号 15K00485）の支援によるる．そのため，関数の定義についてもブロックで表現し，ものです．

記述を変更できるようにすると，Web アプリケーションプログラミング学習における理解が深まると考えられる．

参考文献

3. 関連研究・システム[1]

グラフィカルな操作のみで Web アプリケーションを簡易に構築できる Web サービスとして，Bubble [6] がある．

[2]

ユーザはインタフェースビルダを用いて，画面上に入力フォームやボタンを配置したり，それらを関連付けることによって開発する．簡単な操作で Web アプリケーション[3]を作成する点は類似しているが，Bubble はソースコードを隠蔽し，プログラミングを意識させない点が本研究とは[4]異なる．

GUI 画面による設定から Web アプリケーションを自動生成するツールとして，Web Performer[7] がある．Eclipse[5]

IDE のプラグインとして構築されており，本格的な Web ア
プリケーションを開発する際の省力化をはかることができ[6]

る．本研究では初学者を対象にした Web アプリケーショ
ンの基礎や，データベースの知識を学習することに主眼を[7]置いている．
長瀧らは，リレーショナルデータベースの演習を Web[8]

ブラウザから対話的に行うことを目的とした sAccess[8] というオンライン学習教材を開発している．また小林らは，

sAccess をベースに，SQL エディタや PHP による Web ア
プリケーション開発エディタ（PHP エディタ）を構築し，[9]

三浦元喜. Sweetie: 学生計算機上で動作する協働作業に適した軽量 Web エディタ環境. 情報処理学会情報教育シンポジウム (SSS2015), pp. 117–123, August 2015.
http://id.nii.ac.jp/1001/00144690/.
Motoki Miura. Lightweight Web Authoring Environment. In 20th International Conference on KnowledgeBased and Intelligent Information & Engineering Systems (KES2016), Vol. 96, pp. 887–895, September 2016.
三浦元喜. お手軽 Web アプリ開発環境 Sweetie Framework.
情報処理学会インタラクション 2017, pp. 149–153, March2017.
Motoki Miura. Sweetie Framework: Simple but Practical
Web Application Development Environment. In 12th International Conference on Knowledge, Information andCreativity Support System, pp. 149–154, November 2017.
Neil Fraser. Ten Things We’ve Learned from Blockly. In
2015 IEEE Blocks and Beyond Workshop (Blocks andBeyond), pp. 49–50, Oct 2015.
Bubble Group Inc. Bubble: Visual Programming. https://bubble.is/. (Visited: Dec 24, 2017.).
キヤノン IT ソリューションズ. 超高速開発ツール Web Performer. https://www.canon-its.co.jp/products/web\_performer/. (Visited: Dec 24, 2017.).
長瀧寛之, 中野由章, 野部緑, 兼宗進. データベース操作の学習が可能なオンライン学習教材の提案. 情報処理学会論文誌, Vol. 55, pp. 2–15, 2014.
小林史弥, 西川弘恭, 林康平, 島袋舞子, 長瀧寛之, 兼宗進.
情報システム学習を指向した Web ベースのツール開発と授業利用の報告. 情報処理学会研究報告. コンピュータと教育研究会報告 2016-CE-134(3), 1-8, 2016-03-05.

高等学校での授業利用を行っている [9]．PHP エディタは，© 2018 Information Processing Society of Japan601

情報処理学会 インタラクション 2018
IPSJ Interaction 2018付

2B20
2018/3/5録

A.1 Block Sweetie ブロック一覧

図 A·1 DB 操作

Fig. A·1 DB Operations

図 A·4 HTML 要素

Fig. A·4 HTML elements

図 A·2変数

Fig. A·2 Variables

図 A·3 表の出力

Fig. A·3 Table output
図 A·5 Form 要素

Fig. A·5 Form elements© 2018 Information Processing Society of Japan602