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

1-502-12
2017/3/2

お手軽 Web アプリ開発環境 Sweetie Framework三浦 元喜1,a)

概要：通常，Web アプリケーションを構築するためには，動的なページ生成のためのプログラミング言語の理解に加えて，データベースや SQL，HTTP に関する理解が不可欠である．そのため，初心者にとっては Web アプリケーションの敷居は，Web ページに比べて高い．そこで我々は，Web ブラウザ上で動作する，お手軽 Web サイト開発環境 Sweetie の機能を活用した，簡易な Web アプリケーションを簡単に構築できるフレームワーク Sweetie Framework を提案する．データベースにテキストや画像データを簡単に保存したり，保存したデータを取り出して表形式で表示する機能に加え，ユーザ認証やユーザ登録機能を提供しているため，開発者はアクセス制限を調整した Web アプリケーションを簡単に作成したり，修正したりすることができる．Web アプリケーションへの理解を深める講義に対して，Sweetie および SweetieFramework を使用した例について報告する．

Easy Web Application Development Environment“Sweetie Framework”
Motoki Miura1,a)Abstract: Usually, in order to build a Web application, understanding of the programming language,
database, SQL, and HTTP is indispensable. Therefore, for beginners, the required skills of the Web application are higher than that of the Web page. We propose Sweetie Framework which can easily constructsimple web applications. Sweetie Framework is designed to work with Sweetie, a lightweight web development editor that runs on a web browser. By utilizing the Sweetie Framework, developers can easily handle,
retrieve, and display data in the database. Also the Sweetie Framework provides user authentication and user
registration function. We have conducted a web application development lecture using Sweetie and Sweetie
Framework.

1. はじめに2. Sweetie

通常，Web アプリケーションを構築するためには，動的Sweetie (Simple Web Editor Utilities) [1], [2] は，サーなページ生成のためのプログラミング言語の理解に加えて，バ上の特定のフォルダ以下のファイルを，Web ブラウザ

データベースや SQL，HTTP に関する理解が不可欠であから直接編集することができるエディタ兼ファイルマネーる．そのため，初心者にとっては Web アプリケーションのジャである．エディタ部分は，Javascript で実装された敷居は，Web ページに比べて高い．そこで我々は，Web ブ

CodeMirror[3] を利用しており，サーバ側は PHP スクリ

ラウザ上で動作する，お手軽 Web サイト開発環境 Sweetie

プトで記述されている．このエディタは Web ブラウザ上の機能を活用した，簡易な Web アプリケーションを簡単で動作し，シンタックスハイライト機能やインデント機に構築できるフレームワーク Sweetie Framework を提案

能，CTRL+S による保存や，CTRL+Z による Undo 等のする．

ショートカットキーが利用できるため，通常のエディタとほぼ同様の操作感で編集・保存できる．また画像ファイル

1a)

九州工業大学 基礎科学研究系
Faculty of Basic Sciences, Kyushu Institute of Technology
miuramo@mns.kyutech.ac.jp© 2017 Information Processing Society of Japanをエディタ内にドラッグ&ドロップしたり，クリップボード画像を CTRL+V でペーストすると，画像データをファ149

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

イルとしてサーバにアップロードしたうえで，インライン

1-502-12
2017/3/2

3.1 サンプルアプリケーション（ツイート）

表示するための HTML/Markdown 記述をエディタ内に挿図 1 は，シンプルなツイートアプリである．図 2 に，入する機能を備えている．編集したファイルは Web サー

Tweet Index のソースコードと Sweetie エディタ画面を示

バ上に直接保存されるため，Web ブラウザさえあれば，どす．開発者はこのエディタ画面で編集を行っていく．基こからでも作業を継続することができる．

本的な関数は lib.php で定義されている．dbopen() は，

3. Sweetie Framework

SQLite のデータベースファイル名を指定すると，PDO のインスタンスを返却する関数である．showtable() は，Sweetie では MDWiki[4] を利用した Markdown 記述がPDO インスタンスとテーブル名，データベースファイ行えるほか，SQLite データベースを利用した Web アプ

ル名を指定するとテーブルデータを表形式で表示する．

リケーションを PHP で記述することができる．しかし，

form XXX() はフォームヘルパであり，show link() はリ

SQLite データベースを利用するためには，SQL の知識がンク，show linkb() はリンクボタンを表示する HTML ヘ必要となるため，Web 開発の経験が浅い初学者にとって，ルパである．

敷居が高い．
我々は初学者が短期間で Web アプリケーションに必要な技術の概要を理解できるようにするため，Sweetie

Framework を構築した．
特徴として，以下の点が挙げられる．

• SQLite データベースに対する挿入や，更新を行う関数 insert, update を提供している．画像 (BLOB) にも対応しており，通常のフォームから，テキストと同様に簡単にアップロードできるよう工夫をしている．

• ユーザ認証機能や，ユーザ登録機能を簡単に利用できる．また，Sweetie 自身の認証機能を，自身の Web アプリケーションに利用できる．

• 簡易 HTML ヘルパ，Form ヘルパを備えている．

図 1• AJAX を利用した，簡易なテーブル管理機能を簡単にFig. 1 Tweet Index

Tweet Index

導入できる．

• テンプレート方式ではなく，PHP コードとして記述する方式をとっている．

• Google Graph API を用いたグラフや，QR コードの埋込み用の関数を提供している．

HTML を中心としたテンプレート方式ではなく，PHPコードとして記述する理由として，ソースコードのコメント化/コメント解除によって，動作を試したり試行錯誤したりしやすいことが挙げられる．PHP コードのコメント化/コメント解除は，Sweetie の CTRL+/ ショートカット
でカーソル行または選択範囲行に対してトグル操作で行うことができる．
また，Sweetie では開発者がフォルダを新規作成するときに，テンプレートとなるフォルダを指定することで，

phpLiteAdmin[5]，MDWiki[4] といったツール群や，サンプルアプリケーションを含めてコピーすることができる．
以下の説明では，これまでに著者が作成したサンプルアプ

図 2リケーションである (1) ツイート (2) 写真アップロード (3)Fig. 2 Source code of Tweet Index

Tweet Index のソースコード

ネットショップ (4) アンケート集計，のうち，ツイートアプリケーションのソースコードを示しながら紹介していく．

図 3 はツイートの削除・編集ができる管理用のページ(Tweet Admin) である．図 4 に，Tweet Admin のソースコードを示す．require sweetielogin() は，Sweetie の© 2017 Information Processing Society of Japan150

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

1-502-12
2017/3/2

ファイル編集時とおなじ権限を要求する関数である．この関数を呼び出すと，未ログインのユーザによるアクセスを拒否することができる．

showtable withdeledit() は ，showtable() の 各 行に削除と編集操作用のリンクを備えた表を表示する．

jqaddform() は，JQuery を用いた行追加ボタン兼フォームを埋め込む関数である．“Add Tweet” を押すと，図 5に示すフォームが表示される．各行の “Edit” を押すと，
図 6 に示すフォームが表示される．これらのフォームは，テーブルのフィールドとその属性によって動的に生成される．
図 5Tweet Admin (Add)

Fig. 5 Tweet Admin (Add)

図 3Tweet Admin

Fig. 3 Tweet Admin
図 6Tweet Admin (Edit)

Fig. 6 Tweet Admin (Edit)

ユーザ認証機能および，登録機能は，require login("データベースファイル名") を，スクリプトの最初に挿入すると，図 8 のログイン画面が表示される．未登録ユーザは，メールアドレスを入力して登録してもらうこともできる．
ユーザを認証したあとは，図 9 のように，ユーザ名の表示とログアウトボタンが表示され，$ SESSION[’u’][’id’]でユーザ ID，$ SESSION[’u’][’name’] でユーザ名を取得できる．

3.3 データの加工
Sweetie Framework では，データベースのテーブルから
図 4Tweet Admin のソースコード

Fig. 4 Source code of Tweet Admin

取得したデータを表示する前に加工するために，PHP の連想配列（2 次元配列）に対して，列を挿入・削除したり，内容を修正したりする関数を提供している．関数の呼出し例を 図 10 に示す．aryinscol(配列, 挿入文字列, 列名

3.2 サンプルアプリケーション（ネットショップ）[, 列番号]) は，新しい列を指定した列番号の場所に挿入

図 7 に，ネットショップ管理画面の例を示す．ネット

する．このとき，各行のデータ（例では id）を，挿入文字

ショップ管理画面は，おもにリレーショナルデータベースの列に埋め込むことができる．arymapcol(配列, 操作対象導入説明を目的として作成したサンプルである．QR コー

列のキー, 関数) は，指定した列の各行データに対して，ドは，showqrcode() 関数で簡単に挿入することができる．

関数による書替えを行う関数である．これらの関数を用い© 2017 Information Processing Society of Japan151

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

1-502-12
2017/3/2

図 9

Shop Index

Fig. 9 Shop Index

図 10

テーブルデータの加工

Fig. 10 Manipulation of table data

Shop Admin

書編集を対象としている．我々は Sweetie および Sweetie

Fig. 7 Shop Admin

Framework によって，動的な振る舞いをする Web アプリ

図 7

ケーションを，初心者であってもブラウザのみで手軽に構築できることをねらいとしている．

Web アプリケーションの開発負荷を下げるためのフレー ム ワ ー ク と し て ，PHP では CakePHP や Laravel，Codeigniter 等がある．これらは多機能であるため本格的なサイトを構築できるが，その分理解に時間がかかるという問題がある．Sweetie Framework は，フレームワーク単体ではファイル 6 個のみで構成されている．そのため機能は制限されるが，初学者が PHP を用いた Web アプリ
図 8 ログイン画面

ケーション構築の学習をしたり，アイデアからモックアッ

Fig. 8 Login page

プを生成したりするような場面に向いていると考えられる．

ることで，テーブル表示内容をカスタマイズしたり，機能を追加したりすることができる．

5. 利用事例
5.1 3 時間の体験型講義への適用
2016 年 12 月 1 日に，マレーシアプトラ大学の学部短期

4. 関連研究・システム
Amaya[6] は，Web 上でのコラボレーションを促進するための，Web エディタ兼ブラウザである．Amaya を用いると，ユーザは簡単に Web ページを作成し，サーバにアップロードできる．ブラウザで編集を行うという基本的なコンセプトは Sweetie と類似している．しかし，Amaya では

HTML, CSS, XML, MathML, SVG といった，静的な文© 2017 Information Processing Society of Japan

訪問学生 19 名に対して，短期モビリティプログラムの一環として，Sweetie および Sweetie Framework を利用した

Web アプリケーション構築演習講義を行った（図 11*1 ）．
講義時間は 1 コマ 90 分 × 連続する 2 コマで，休憩をふくめ合計 3 時間 10 分であった．最初に，ブラウザで各自好*1

http://www.kyutech.ac.jp/whats-new/topics/
entry-4088.html#prettyPhoto

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

みの名称をつけたフォルダを作成（サンプル Web アプリや講義資料を含むテンプレート一式をコピー）し，自己紹介

1-502-12
2017/3/2

6. おわりにページを Markdown で記述して Web に反映されることをお手軽 Web 開発環境 Sweetie 上で動作する，Web アプ確認することで Sweetie エディタの操作やショートカット

リケーションフレームワーク Sweetie Framework を，利用キーに慣れてもらった．つぎに，PHP による動的なページ事例とともに紹介した．Web アプリケーション構築はデー生成として，echo や date の説明や変数，配列の説明をおタベースや SQL，HTTP やフォームなど，多岐にわたる知こなった．2 時間目の最初に，簡単な Web アプリケーショ

識を必要とするが，Sweetie Framework を用いると，PHP

ン例として，ツイートアプリ，写真アップロードアプリ，および SQLite データベースを利用した Web アプリケー

ネットショップアプリを紹介し，ソースコードを修正する

ションを，簡単に構築し，ユーザ認証によるアクセス制限とテーブル表示が変更されることや，SQLite データベーをかけることができるため，初学者の学習に向いているとスのテーブルにフィールドを追加することで，既存のアプ考えている．また，サンプルアプリケーションを簡単に配リケーションの機能を変更できること，ユーザ認証機能を布し，Web ブラウザのみで編集できるため，講義の運用上導入する方法などを示した．また日本で受けた研修や体験の手間も軽減できる．学生にとっても，作業の続きを家での記録を残す方法や，QR コードを用いたスマートフォン行うことができ，演習環境の自由度が高まる．

からの利用方法について説明した．

今回は Web アプリケーション開発の概要を把握すること

講義において，学生が改良した写真アップロードアプリに主眼を置き，PHP の関数呼び出しを中心として設計した．の利用例を図 12 に示す．写真アップロードアプリのテー

PHP の関数呼び出しによって HTML や CSS, Javascript

ブルに，コメントフィールドを追加し，実際に自分が撮影をアドホックに記述するデメリットとして，Valid な HTMLした写真をコメント付きでアップロードして利用していた．

が保証されないことが挙げられる．現時点では，簡潔な記述で動作するページを作成することを重視しているが，将来的には出力内容を Valid な HTML に自動修正する仕組
みの導入を検討している．また，Valid な HTML を生成する努力を怠りがちになってしまうことによるモラルや意識の低下についても議論がわかれることが予想される．我々は初歩的な開発をすこし経験したあとの学習や訓練によって，補完することができると考えている．

Sweetie および Sweetie Framework は以下の URL でダ
図 11

3 時間の体験型講義

Fig. 11 Three-hours experimental lecture

ウンロードできる． http://ist.mns.kyutech.ac.jp/

miura/sweetie/
謝辞 本研究の一部は公益財団法人電気通信普及財団，
および JSPS 科研費（課題番号 15K00485）の支援によるものです．
参考文献
[1]

[2]
[3]

[4]

[5]
図 12

改良写真アップロードアプリの利用

Fig. 12 Modified photo upload webapp by a student© 2017 Information Processing Society of Japan[6]

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. 情報処理学会インタラクション 2016, pp. 281–284, March 2016.
Marijn Haverbeke. CodeMirror – versatile text editor
implemented in JavaScript for the browser. https://codemirror.net/. (2016 年 12 月 25 日確認).
Timo Drr. MDWiki – Markdown based wiki done 100%on the client via javascript. http://mdwiki.info/. (2016年 12 月 25 日確認).
phpLiteAdmin: The Web-based Database Management
Tool for SQLite. http://www.phpliteadmin.org/. (2016年 12 月 25 日確認).
Vincent Quint and Irène Vatton. An Introduction toAmaya. W3C NOTE 20-February-1997, https://www.
w3.org/TR/NOTE-amaya-970220, February 1997.

153