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

161B31
2016/3/2

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

概要：本稿では，Web ブラウザ上で動作する，お手軽 Web サイト開発環境 Sweetie について述べる．通常 Web ページを作成し，サーバ上に配置して公開するには，エディタによる HTML 記述に加えて，Webサーバの準備や，Web サーバに作成したファイルをアップロードする必要があった．そのため，初心者にとっては Web ページ公開までの敷居が高かった．Sweetie は，サーバ上に配置されたファイルを，Web エ
ディタで直接編集することによって，Web ページ作成と編集，確認の手間を軽減する．Web アプリケーションを構築する講義と，講義資料の作成に Sweetie を使用した例について報告する．

Easy Web Development Environment “Sweetie”
Miura Motoki1,a)Abstract: We describe an easy web development environment called “Sweetie.” Usually, developing a web
page requires editing HTML files, preparing a web server, and uploading the HTML files. These steps are
diﬃcult for novices. Sweetie (Simple Web Editor Utilities) enables to edit files on a server directly via an
web-based editor. The web-based editor provides syntax-highlighting, auto-indentation and image-embeddingfunctions. Sweetie reduces the burdens of editing and checking of web pages. We show several use-cases ofSweetie for web-developing course and managing of lecture materials.

1. はじめに
通常 Web ページを作成し，サーバ上に配置して公開す
るには，HTML の記述に加えて，Web サーバの準備や，Web サーバに作成したファイルをアップロードする必要がある．そのため初心者にとっては Web ページ公開までの敷居が高い．また Web サイトを更新する場合も，ファイルの編集とアップロードが必要である．

部構造を理解する必要があった．
そこで我々は，Web サーバ上の特定のフォルダ以下について，ファイルを自由に追加・編集できる，シンプルなWeb エディタ環境 Sweetie を構築した．

2. Sweetie
Sweetie (Simple Web Editor Utilities) [1] は，サーバ上の特定のフォルダ以下のファイルを，Web ブラウザから直このような手間を軽減するため，Wordpress をはじめと接編集することができるエディタ兼ファイルマネージャでするブログシステムや，Wiki といった Web システムが開ある．エディタ部分は，Javascript で実装された CodeMir-発・利用されてきた．これらの Web システムを用いるこror[2] を利用している．このエディタは Web ブラウザ上とで，ユーザは Web ブラウザのみでページを編集したりで動作し，シンタックスハイライト機能やインデント機管理することが可能となる．

能，CTRL+S による保存や，CTRL+Z による Undo 等のしかし，これらの Web システムでは，コンテンツの種ショートカットキーも有効であるため，通常のエディタと類や形式は各システムによって規定される．そのため，自ほぼ同様の操作感で編集・保存できる．さらに Sweetie で由な開発を行うにはプラグインを導入して拡張したり，内は，画像ファイルをエディタ内にドラッグ&ドロップしたり，クリップボード画像を CTRL+V でペーストすると，

1a)

九州工業大学 基礎科学研究系
Faculty of Basic Sciences, Kyushu Institute of Technology
miuramo@mns.kyutech.ac.jp© 2016 Information Processing Society of Japan

画像データをファイルとしてサーバにアップロードしたう
えで，インライン表示するための HTML/Markdown 記述281

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

161B31
2016/3/2

をエディタ内に挿入する機能を追加した．これにより，画像を含む Web ページを簡単な操作で記述できる．また編集したファイルは Web サーバ上に直接保存されるため，Web ブラウザさえあれば，どこからでも作業を継続することができる．

2.1 基本機能
Sweetie のエディタ画面を図 1 に示す．Sweetie は対象フォルダ以下のファイルやフォルダを画面上部にボタンとして表示する．このボタンを押すと，該当するファイルが編集可能になる．水色のフォルダボタンを押すと，フォルダ内のファイルに対応するボタンが挿入表示される．編図2

MDWiki[3] による Markdown ファイルの表示（図 1 に対応）集した内容を保存するときは CTRL+S を押すか，フロッピーディスクのアイコンが表示された「保存ボタン」をクリックする．保存ボタンの右が，インデントを自動調整するボタンで，その右が編集中のページを新しいタブを開いて表示する確認ボタンである．それぞれ，ショートカット
キー (CTRL+I, CTRL+R) でも機能を呼び出すことができる．

図 3

文法エラーの強調表示

2.2 開発の経緯と改良
当初 Sweetie は，学生用計算機上で動作し，学生用計算機上のローカル HTML/CSS ファイルを編集する目的のための，軽量かつシンプルな Web 開発エディタ環境（Webアプリケーション）として設計・実装した [1]．管理者権限のない学生用計算機において，シンタックスハイライト機能やインデント機能を備えたエディタを導入し，Web 開発
図 1

Sweetie のエディタ画面演習を効果的に行うことが主目的であった．
最初に Sweetie を導入した 2015 年度前期の講義では，Sweetie は MDWiki[3] を利用しており，[.md] の拡張子

まず Sweetie とサンプルコードを含む圧縮ファイルを配で保存された Markdown ファイル群を解釈して図 2 に示布して学生用計算機上で展開し，ローカルの Web サーバすような Web ページとして表示できる．これにより，レ（QuickPHP[4]）を各学生用計算機上で起動したうえでロースポンシブデザイン対応の Web サイトを，Wiki と同様のカルファイルを編集してもらった．そして，Web サイト構感覚で簡単に構築・編集・更新することができる．

築がある程度進んだ段階で，教員が設定した公開用の Web

Sweetie は CodeMirror エディタ [2] を利用しているたサーバにアップロードする機能を使って送信してもらった．

め，HTML/CSS/Javascript/Markdown/PHP/JSON 等のWeb サーバの概念や仕組みと，ローカルファイルを公開

文法を解釈してシンタックスハイライト表示することがで

用 Web サーバにアップロードすることではじめて公開さきる．また，図 3 に示すように，文法エラーも強調して表れる，ということを体験的に理解してもらう点では，学生示される．なお Sweetie 独自の拡張として，スライダで簡用計算機上で Web サーバを起動して，編集し，アップロー単に文字サイズを調整する機能も加えている．

ドするという一連の行為に意義はあった．しかし，作業効© 2016 Information Processing Society of Japan282

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

161B31
2016/3/2率の観点では，ローカルファイルを編集して，随時アップ

昨年 (2014 年) 度の授業では，学習者用の WindowsPC かロードして確認するよりも，直接サーバ上のファイルをら，リモートデスクトップ接続 (RDP) で Linux に接続しなSweetie のエディタで編集したほうが効率的である．

がら演習する方法をとった．最初に Unix 系のコマンドやそこで，アカウント名とパスワード（教員が準備して事Emacs エディタを導入し，HTML や PHP によるプログラ前に配布する）を用いて一旦アップロードした後は，ユーミングや SQL によるデータベースとの接続方法の説明をザを認証したうえで，すべて公開 Web サーバ上で直接編した．しかし，結果としてはエディタの操作方法やコマン集・確認作業を行ってもらうようにした．これにより，学

ド，ファイルの扱いに戸惑うケースが多く，簡単なフォー

生はグループでの演習が行いやすくなり，またファイルのムで送信されたデータをファイルに保存したり，ファイル保存場所やバージョンを意識することなく，開発作業に集から読みだしたデータを表示するといったアプリケーショ中できる．また，学生の最新の作業ファイルがすべてサーンにとどまった．今年 (2015 年) 度の授業では，あらかじバ上に置かれていることにより，教員が学生の作業状況をめサーバ上に受講者人数分の Sweetie フォルダを用意し，把握しやすくなった．付加的なメリットとして，サンプル教員が事前に準備しておいたアカウント名とパスワードコードを含むフォルダを，授業の進度にあわせて追加配布を配布し，Web ブラウザ上で編集しながら，演習を進めすることも容易に行うことができた．

た．その結果，Unix 系のコマンドやエディタの説明を省

3. 関連システム略することができ，HTML/CSS/PHP の導入と Javascriptの簡単な演習，SQLite(phpLiteAdmin[8]) を用いたデータ

WebMatrix[5] は，Microsoft が提供する Web 開発環境

ベース設計（図 4 参照）と，PHP から SQL で問い合わである．ローカル環境で構築したサイトの設定を，サーバせをする方法までを効率的に説明し，アプリケーション構上に簡単に反映させることができる．初学者を対象として築演習につなげることができた．特に，CodeMirror が提いる点は類似性があるが，ローカル環境にシステムをイン供するハイライト表示や，文法エラーの強調表示 (図 3)，ストールする必要があることと，主にローカル環境でサイ

phpLiteAdmin(図 4) によって，受講生は HTML や PHPトの編集や構築を行う必要がある点は，Sweetie と異なる．の学習を効率的に行うことができた．また，図 1 のエディ

レンタルサーバ会社が提供している Web ファイルマネー

タ画面において，[view source] リンクを押すと，編集中のジャ *1 には，ファイルを直接編集できる機能が備わってファイルのソースコード表示（例：図 5）ページが別タブいる場合がある．しかし，ファイルの追加や削除，リネーで表示される機能を追加した．この URL*2 を公開するこム機能が中心であり，ファイルの編集機能は標準的な Webとによって，教員がサンプルソースコードを即席で簡単にのフォームで提供されているケースが多い．そのため，シ共有できた点も有効であった．

ンタックスハイライト機能やインデント機能を含む，高度な編集支援機能は提供されていない．
実験的な Web 開発を試したり，公開したりする場として，JSFiddle[6] や jsdo.it[7] がある．オンラインエディタ
でファイルを直接編集できる点は，Sweetie と同様である．
ただし，それぞれのサイト（サービス）の枠組みで URL が付されるため，永続的なサイトを管理するのには向いていない．またデータベースを利用したり，複数のファイルを自由なパスで配置するといったことも現状ではされていな
い．Sweetie を利用すれば，自分で管理している Web サー
バについて，簡単に JSFiddle や jsdo.it に類似した編集機能を追加することができる．

4. 利用事例

図 4 phpLiteAdmin[8] によるデータベース管理

4.1 Web アプリケーション構築授業への適用
我々は，2015 年の 9 月より，Web アプリケーションを開発を通じて情報活用能力を高める授業（図書館情報技術

4.2 講義資料の作成論）において，Sweetie を利用する試みを始めた．受講生は

我々は，講義資料を Sweetie を用いて作成・編集してい司書の資格を目指す文系の学生（2 年生〜4 年生）である．

る．主に MDWiki の機能を使用して，マークダウン記法*1

例：さくらのサーバコントロールパネル：https://help.sakura.
ad.jp/app/answers/detail/a_id/2302© 2016 Information Processing Society of Japanで記述を行うことで，Bootstrap デザインを適用した統一*2

表示に必要なパスキーが含まれる．

283

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

161B31
2016/3/2

図 7
図 5

MDWiki を使用した講義資料

ソースコード表示ページ機能性のある資料を，短時間で作成することができた（図 6 参照）．画像の挿入はクリップボードから直接 CTRL+V で貼り付ける機能を使用した．Sweetie を使用すると，Webブラウザがあればどこからでも簡単に講義資料を修正できるため，編集環境を選ばない．そのため，図 7 に示すような，動作例や画面キャプチャを含む Web ページを簡単に作成することができる．また，d3.js を使用した手書き筆記を記録するアプリケーションや，筆記をアニメーション再生する機能を Sweetie のみで簡単に追加し，図 8 に示すように講義資料内に埋め込むことができた．
図 8

d3.js を使用した手書き筆記再生/保存機能の埋込み表示

謝辞 本研究の一部は公益財団法人電気通信普及財団の支援によるものです．
参考文献
[1]

[2]

図 6 MDWiki を使用した講義資料の記述画面

5. おわりに[3][4]

お手軽 Web 開発環境 Sweetie を，利用事例とともに紹介した．現在では，Javascript で記述された様々なライブラ[5]リが提供されている．また Web 上で利用可能な API も充実している．しかし，それらを利用してアプリケーション[6]を簡単に構築する環境はそれほど充実しているとは言い難
い．Sweetie のような，手軽な Web 開発環境により，便利なライブラリやサービスを利用した Web システムが，さらに増えることが期待できる．

Sweetie は以下の URL でダウンロードできる． http:

[7]
[8]

三浦元喜. Sweetie: 学生計算機上で動作する協働作業に適した軽量 Web エディタ環境. 情報処理学会情報教育シンポジウム (SSS2015), pp. 117–123, August 2015.
http://id.nii.ac.jp/1001/00144690/.
Marijn Haverbeke. CodeMirror – versatile text editor
implemented in JavaScript for the browser. https://codemirror.net/. (2015 年 12 月 17 日確認).
Timo Drr. MDWiki – Markdown based wiki done 100%on the client via javascript. http://mdwiki.info/. (2015年 12 月 17 日確認).
Zach Saw. QuickPHP – Lightweight Standalone Bloat-freePortable PHP Web Server. http://www.zachsaw.com/?pg=quickphp_php_tester_debugger. (2015 年 12 月 17日確認).
Microsoft Corporation. Microsoft WebMatrix 3. https://www.microsoft.com/web/webmatrix/. (2015 年 12 月17 日確認).
JSFiddle: Online code editor and playground. Front End
developers hub. https://jsfiddle.net/. (2015 年 12 月17 日確認).
KAYAC Inc. jsdo.it — Share JavaScript, HTML5 andCSS. http://jsdo.it/. (2015 年 12 月 17 日確認).
phpLiteAdmin: The Web-based Database Management
Tool for SQLite. http://www.phpliteadmin.org/. (2015年 12 月 17 日確認).

//ist.mns.kyutech.ac.jp/miura/sweetie/© 2016 Information Processing Society of Japan284