, HTML HTML PHP, 3. SuperSQL SuperSQL [1] [2], SQL, SQL SELECT GENERATE <media> <TFE> GENERATE <media>, HTML XML, PDF <TFE> Target Form Expression,, 3

Size: px

Start display at page:

Download ", HTML HTML PHP, 3. SuperSQL SuperSQL [1] [2], SQL, SQL SELECT GENERATE <media> <TFE> GENERATE <media>, HTML XML, PDF <TFE> Target Form Expression,, 3"

わんどまるこ
7 years ago
Views:

1 DEIM Forum 2016 H6-2 SuperSQL Web {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

,,, Web, Web HTML,, CSS JavaScript, Web,,, SuperSQL [1] [2]. SuperSQL, SQL,,, HTML,, Web, SuperSQL HTML, SuperSQL HTML, SuperSQL Web Web, SuperSQL, Web HTML, CSS.

2 , 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]! name [<TFE>]< >< >< >,, 3,. name1 name2 name3 [Name],3! name4 name SuperSQL,,,,,,, (@) < >@{< >} =,. [name@{width= 100, color= red }]! 3. 5 SuperSQL,,,, HTML SuperSQL, HTML, HTML, table,, Web, SuperSQL Web, Web,, Web

(,) name, place name place (!) name name! place place (%) 3 HTML. name % place name place 3. 2,, [ ]!, [ ]!, [ ]!,, [! [, ]! ]!,,, ([ ],), [Name], name1 name2 name10 ([ ]!

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 4. Web 4. 1 SuperSQL,,, 1 SuperSQL. SuperSQL,, SQL SQL,,,,, Web 2 SuperSQL 3 1 SuperSQL 4. 2 SuperSQL,, Web,,,, (3. 1) Web.,, (1280px), (3. 2) (3. 3) Web, table, Web div, 2. on } Web, div,, 3 table, on } on / number >} ul on number } (3. 4), 4. 4

1) Web.,, (1280px), (3. 2) (3. 3) Web, table, Web div, 2. 2,,.

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.

4 5, 5, 5, bgcolor yellow, bgcolor 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,., Web, CSS, JavaScript. SuperSQL, on } image.,. {[image(pict,./image )]!}@{slide= on } on }. (%),,, menu submenu. {[menu% [submenu]! ]!}@{accordion= on } on }, content option {[content% option]!}@{tooltip= on } 4. 4,, Web.,, Web on }, Web,.,, SuperSQL

3 Web, CSS, JavaScript. SuperSQL, 4. 3. 1 @{slide= on } image.,. {[image(pict,./image )]!}@{slide= on } 4. 3. 2 @{accordion= on }. (%),,, menu submenu.

ける結合子, 反復子のレスポンシブ対応におけるルールに基づ直結合子に変換する. 変換されたものを図 8 に示す. このよういてレイアウトを変更する. そのルールの定義について, 以下にしてウィンドウサイズに合わせて結合子や反復子を適時変更に示す. することでレスポンシブに対応する.

5 ける結合子, 反復子のレスポンシブ対応におけるルールに基づ直結合子に変換する. 変換されたものを図 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 行

評価 2 ウィンドウサイズの幅がある水平結合子で形成される図 9 のようなネット通販サイトを想定したサンプル Web ペー幅よりも小さい場合, その水平反復子内の一番階層の深い水平ジを, HTML と CSS を用いて生成する方法, PHP を用いて生結合子を垂直結合子に変換する. 例として, 以下のようなサンプルクエリがある. header! [menu],! {[submenu]!

6 , 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 , [9] WordPress: [10] Joolma: [11] Drupal: [1] SuperSQL: [2] Motomichi Toyama, SuperSQL: An Extended SQL for Database Publishing and Presentation, Proceedings of ACM SIGMOD 98 International Conference on Management of Data, pp , [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, [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), [5] Sinha, Nishant, Rezwana Karim, and Monika Gupta, Simplifying web programming, Proceedings of the 8th India Software Engineering Conference, pp.80-89, [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 , [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 , [8] Souer, Jurriaan, et al, Engineering a design method for web content management implementations, Proceedings of the

org [11] Drupal: https://www.drupal.org [1] SuperSQL: http://ssql.db.ics.keio.ac.

([ ]!) name1 name2 : [Name]! name10 2. 3 SuperSQL,,,,,,, (@) < >@{ < > } =,,., 200,., TFE,, 1 2.,, 4, 3.,,,, Web EGG [5] SSVisual [6], Java SSedit( ss

([ ]!) name1 name2 : [Name]! name10 2. 3 SuperSQL,,,,,,, (@) < >@{ < > } =,,., 200,., TFE,, 1 2.,, 4, 3.,,,, Web EGG [5] SSVisual [6], Java SSedit( ss DEIM Forum 2016 H6-3 SuperSQL CSS 223 8522 3-14-1 E-mail: {ryosuke,goto}@db.ics.keio.ac.jp, toyama@ics.keio.ac.jp SuperSQL, SQL. SuperSQL HTML, PHP,,,, SuperSQL Web, CSS 1. SQL, SuperSQL, CSS SuperSQL,