DEIM Forum 2016 H6-2 SuperSQL Web 223 8522 3 14 1 E-mail: {halken,goto}@db.ics.keio.ac.jp, toyama@ics.keio.ac.jp,, Web, Web HTML CSS, JavaScript,,,, SuperSQL. SuperSQL, SQL,, SuperSQL Web SuperSQL, Web HTML CSS. Web SuperSQL, Web 1. SuperSQL, SQL, HTML, CSS, JavaScript, Web 2.,,, Web, Web HTML,, CSS JavaScript, Web,,, SuperSQL [1] [2]. SuperSQL, SQL,,, HTML,, Web, SuperSQL HTML, SuperSQL HTML, SuperSQL Web Web, SuperSQL, Web HTML, CSS., JavaScript Web SuperSQL, Web Web, HTML CSS, Web HTML CSS,, [3]. openhtml [4], HTML CSS, WEBNAT [5], Web, Web HTML, Web Quilt [6], HTML, Web, Web,, Web, WordPress [9] Joolma [10], Drupal [11] Web (CMS) [7] [8]. CMS HTML, GUI Web.,, Web
, HTML HTML PHP, 3. SuperSQL SuperSQL [1] [2], SQL, SQL SELECT GENERATE <media> <TFE> GENERATE <media>, HTML XML, PDF <TFE> Target Form Expression,, 3. 1 ( ), 3. (,) name, place name place (!) name name! place place (%) 3 HTML. name % place name place 3. 2,, [ ]!, [ ]!, [ ]!,, [! [, ]! ]!,,, ([ ],), [Name], name1 name2 name10 ([ ]!), name1 name2 [Name]! name10 3. 3 [<TFE>]< >< >< >,, 3,. name1 name2 name3 [Name],3! name4 name5 3. 4 SuperSQL,,,,,,, (@) < >@{< >} =,. [name@{width= 100, color= red }]! 3. 5 SuperSQL,,,, 4. 2. 3. 3. 6 HTML SuperSQL, HTML, HTML, table,, Web, SuperSQL Web, Web,, Web
4. Web 4. 1 SuperSQL,,, 1 SuperSQL. SuperSQL,, SQL SQL,,,,, Web 2 SuperSQL 3 1 SuperSQL 4. 2 SuperSQL,, Web,,,,. 4. 2. 1 (3. 1) Web.,, (1280px), (3. 2) (3. 3) Web, table, Web div, 2. 2,,., @{border= on } Web, div,, 3 table, div, @{table= on } table @{list=< on / number >} ul li @{list= on }, @{list= number } 4. 2. 2 (3. 4), 4. 4
5, 5, 5, bgcolor yellow, bgcolor 4. 2. 3 SuperSQL, Web, image image(< >, < >) image,.,,, pict,, 3 [image(pict,./image )],3! anchor anchor(< >, < >) anchor,.,,,, m.name, m.link menu [anchor(m.name, m.link)], header header(< >) header,.,. footer footer(< >) footer,.,. 4. 3 Web, CSS, JavaScript. SuperSQL, 4. 3. 1 @{slide= on } image.,. {[image(pict,./image )]!}@{slide= on } 4. 3. 2 @{accordion= on }. (%),,, menu submenu. {[menu% [submenu]! ]!}@{accordion= on } 4. 3. 3 @{tooltip= on }, content option {[content% option]!}@{tooltip= on } 4. 4,, Web.,, Web SuperSQL, @{responsive= on }, Web,.,, SuperSQL
ける結合子, 反復子のレスポンシブ対応におけるルールに基づ 直結合子に変換する. 変換されたものを図 8 に示す. このよう いてレイアウトを変更する. そのルールの定義について, 以下 にしてウィンドウサイズに合わせて結合子や反復子を適時変更 に示す. することでレスポンシブに対応する. 1 ウィンドウサイズの幅がある水平反復子で形成される 幅よりも小さい場合, その水平反復子を複合反復子に変換する. 5. 評 価 2 ウィンドウサイズの幅がある水平結合子で形成される 図 9 のようなネット通販サイトを想定したサンプル Web ペー 幅よりも小さい場合, その水平反復子内の一番階層の深い水平 ジを, HTML と CSS を用いて生成する方法, PHP を用いて生 結合子を垂直結合子に変換する. 例として, 以下のようなサンプルクエリがある. header! [menu],! {[submenu]!, {title! {[news]!, [content]!}}}! footer 成する方法, そして SuperSQL を用いて生成する方法の 3 種 類で同じ Web ページを生成し, Web ページ生成に必要とする コード量の比較を行った. なお, 動的な表現に関しては jquery を用いている. このクエリからなるレイアウトと階層の木構造は図 6 のよう になる. 次に, ウィンドウサイズが小さくなり, menu における 水平反復子の幅よりも小さくなったとする. その時, 上記の定 義より, 水平反復子を複合反復子に変換する. 折り返す数は, 元 のサイズで横結合していた要素数の半分とする. そのようにし て変換されたものを図 7 に示す. さらにウィンドウサイズが小 さくなり, 今後は submenu などを含む要素を水平結合子で形成 する幅よりも小さくなったとする. その時, 上記の定義より, そ の水平反復子内の一番階層の深い水平結合子を垂直結合子に変 換する. 今回の場合, news と content を結合する水平反復子が 一番階層の深い水平結合子となっているため, この結合子を垂 図9 評価に用いられたサンプル Web ページ 比較を行った結果, 表 1 のようになった. HTML と CSS を 用いた場合と PHP を用いた場合と比べて, 非常に少ない行数 で同じ Web ページを再現できることがわかる. 行数を少なく 抑えられた要因として 3 つ考えられる. 1 つ目は, Web ページ のレイアウト構造を従来ならば DOM 構造で階層的に記述する 図 6 サンプルクエリのレイアウトと木構造 必要があったが, SuperSQL では結合子を用いてレイアウト表 現を行っているため, 階層表現を最小限にしていることである. 2 つ目は, CSS で表現する装飾を SuperSQL ではデータベース に保管し, クエリの属性名を用いて代替的に装飾表現を行って いるため, コードとして書き起こす量を抑えていることである. 3 つ目は, レスポンシブな Web ページを表現するために従来で は多くの記述を要するが, SuperSQL では自動的にレスポンシ ブ表現をするためそれに関する記述を必要としていないことで 図7 水平反復子から複合反復子への変換 ある. これら 3 つの要因によって, コード量を減らすことがで き簡潔になるため, Web ページの変更や修正を容易にできるよ うになることが期待される. 今回は非常に簡単な Web ページ を生成して評価したが, 今後はサイト規模でページ生成する場 合どれくらいのコード量の差が生じるのか, また Web ページ開 発者に SuperSQL を使用してもらい, 作業量における評価も検 討している. 表1 図8 水平結合子から垂直結合子への変換 コード量の比較 HTML + CSS PHP SuperSQL 652 行 421 行 32 行
6. 6. 1, SuperSQL Web, Web. HTML CSS, Web, SuperSQL Web.,,, 6. 2 Web, HTML CSS, JavaScript SuperSQL, PHP, PHP SuperSQL, Web,, SuperSQL, SQL SuperSQL, Web, SuperSQL Web, GUI, SuperSQL Web,. 10th International Conference on Information Integration and Web-based Applications & Services, pp.351-358, 2008. [9] WordPress: https://wordpress.org [10] Joolma: https://www.joomla.org [11] Drupal: https://www.drupal.org [1] SuperSQL: http://ssql.db.ics.keio.ac.jp [2] Motomichi Toyama, SuperSQL: An Extended SQL for Database Publishing and Presentation, Proceedings of ACM SIGMOD 98 International Conference on Management of Data, pp.584-586, 1998. [3] Park, Thomas H., et al, Towards a taxonomy of errors in HTML and CSS, Proceedings of the ninth annual international ACM conference on International computing education research, pp.75-82, 2013. [4] Park, Thomas H., Brian Dorn, and Andrea Forte, An Analysis of HTML and CSS Syntax Errors in a Web Development Course, ACM Transactions on Computing Education (TOCE), 2015. [5] Sinha, Nishant, Rezwana Karim, and Monika Gupta, Simplifying web programming, Proceedings of the 8th India Software Engineering Conference, pp.80-89, 2015. [6] Benson, Edward, Amy X. Zhang, and David R. Karger, Spreadsheet driven web applications, Proceedings of the 27th annual ACM symposium on User interface software and technology, pp.97-106, 2014. [7] Souer, Jurriaan, et al, Situational requirements engineering for the development of content management systembased web applications, International Journal of Web Engineering and Technology, pp.420-440, 2007. [8] Souer, Jurriaan, et al, Engineering a design method for web content management implementations, Proceedings of the