Web Sweetie Framework 1,a) Web SQL HTTP Web Web Web Web Sweetie Web Sweetie Framework Web Web Sweetie Sweetie Framework Easy Web Application Developme

Size: px

Start display at page:

Download "Web Sweetie Framework 1,a) Web SQL HTTP Web Web Web Web Sweetie Web Sweetie Framework Web Web Sweetie Sweetie Framework Easy Web Application Developme"

あまめさわい
4 years ago
Views:

1 Web Sweetie Framework 1,a) Web SQL HTTP Web Web Web Web Sweetie Web Sweetie Framework Web Web Sweetie Sweetie Framework Easy Web Application Development Environment Sweetie Framework Miura Motoki 1,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 is higher than that of the Web page. We propose Sweetie Framework which can easily construct simple 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. Web SQL HTTP Web Web Web Web Sweetie Web Sweetie Framework 1 Faculty of Basic Sciences, Kyushu Institute of Technology a) miuramo@mns.kyutech.ac.jp 2. Sweetie Sweetie (Simple Web Editor Utilities) [1], [2] Web Javascript CodeMirror[3] PHP Web CTRL+S CTRL+Z Undo & CTRL+V

Web HTML Form AJAX PHP Google Graph API QR HTML PHP / PHP / Sweetie CTRL+/ Sweetie phpliteadmin[5] MDWiki[4] (1) (2) (3) (4) 3.

2 HTML/Markdown Web Web 3. Sweetie Framework Sweetie MDWiki[4] Markdown SQLite Web PHP SQLite SQL Web Web Sweetie Framework SQLite insert, update (BLOB) Sweetie Web HTML Form AJAX PHP Google Graph API QR HTML PHP / PHP / Sweetie CTRL+/ Sweetie phpliteadmin[5] MDWiki[4] (1) (2) (3) (4) Tweet Index Sweetie lib.php dbopen() SQLite PDO showtable() PDO form XXX() show link() show linkb() HTML 1 Tweet Index Fig. 1 Tweet Index 2 Tweet Index Fig. 2 Source code of Tweet Index 3 (Tweet Admin) 4 Tweet Admin require sweetielogin() Sweetie

showtable withdeledit() showtable() jqaddform() JQuery Add Tweet 5

6 Tweet Admin (Edit) require login(" ") 8 9 $ SESSION[ u ][ id ] ID

3 showtable withdeledit() showtable() jqaddform() JQuery Add Tweet 5 Edit 6 5 Tweet Admin (Add) Fig. 5 Tweet Admin (Add) 3 Tweet Admin Fig. 3 Tweet Admin 6 Tweet Admin (Edit) Fig. 6 Tweet Admin (Edit) require login(" ") 8 9 $ SESSION[ u ][ id ] ID $ SESSION[ u ][ name ] 4 Tweet Admin Fig. 4 Source code of Tweet Admin QR showqrcode() 3.3 Sweetie Framework PHP 2 10 aryinscol(,, [, ]) id arymapcol(,, )

XML, MathML, SVG Sweetie Sweetie Framework Web Web

4 9 Shop Index Fig. 9 Shop Index 10 Fig. 10 Manipulation of table data 7 Shop Admin Fig. 7 Shop Admin 8 Fig. 8 Login page 4. Amaya[6] Web Web Amaya Web Sweetie Amaya HTML, CSS, XML, MathML, SVG Sweetie Sweetie Framework Web Web PHP CakePHP Laravel Codeigniter Sweetie Framework 6 PHP Web Sweetie Sweetie Framework Web 11 * *1 entry-4088.html#prettyphoto

アプリケーション構築はデー生成として echo や date の説明や変数配列の説明をおタベースや SQL HTTP やフォームなど多岐にわたる知こなった 2 時間目の最初に簡単な Web アプリケーショ識を必要とするが Sweetie Framework を用いると PHP ン例としてツイートアプリ写真アップロードアプリおよび SQLite データベースを利用した Web

5 みの名称をつけたフォルダを作成サンプル Web アプリや講義資料を含むテンプレート一式をコピーし自己紹介 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 ウンロードできる miura/sweetie/ 謝辞本研究の一部は公益財団法人電気通信普及財団および JSPS 科研費課題番号 15K00485 の支援によるものです参考文献 [1] [2] [3] [4] [5] 図 12 改良写真アップロードアプリの利用 Fig. 12 Modified photo upload webapp by a student [6] Motoki Miura. Lightweight Web Authoring Environment. In 20th International Conference on KnowledgeBased and Intelligent Information & Engineering Systems (KES2016), Vol. 96, pp , September 三浦元喜. お手軽 Web 開発環境 Sweetie. 情報処理学会インタラクション 2016, pp , March Marijn Haverbeke. CodeMirror versatile text editor implemented in JavaScript for the browser. codemirror.net/. (2016 年 12 月 25 日確認). Timo Drr. MDWiki Markdown based wiki done 100% on the client via javascript. (2016 年 12 月 25 日確認). phpliteadmin: The Web-based Database Management Tool for SQLite. (2016 年 12 月 25 日確認). Vincent Quint and Ire ne Vatton. An Introduction to Amaya. W3C NOTE 20-February-1997, w3.org/tr/note-amaya , February 1997.

2 (OurLMS) for Fig. 2 Exercise of for loop and array in OurLMS 1 Fig. 1 (OurLMS) List of exercises in OurLMS Processing Web Web 2. 1 Processing.js Web

2 (OurLMS) for Fig. 2 Exercise of for loop and array in OurLMS 1 Fig. 1 (OurLMS) List of exercises in OurLMS Processing Web Web 2. 1 Processing.js Web THE INSTITUTE OF ELECTRONICS, INFORMATION AND COMMUNICATION ENGINEERS TECHNICAL REPORT OF IEICE. Web 804 8550 1 1 E-mail: miuramo@mns.kyutech.ac.jp Web Web PC Web Processing Web Web (LMS), (CMS), Processing,