プロポーザル.key

(1)

SuperSQLにおける

CSSフレームワークの提案

遠山研究室

M1 越島亮介

(2)

SuperSQLとは

• SQLの拡張言語

• データベース検索、構造化、

 

メディア変換を統合する検索言語

• 関係データベースの出力結果を構造化

• 多彩なレイアウト表現を実現

• 結合子（

, ! %）

• 反復子（

[], []!）

• 装飾子（

@）

RDB

SQL

HTML

_Java

LDAP

XML

Super SQL

(3)

SQL

SuperSQL

SELECT name, dept, grade, tel

FROM student

WHERE ….

GENERATE HTML

[dept! [name! {grade,tel} ]! ],

FROM employee

WHERE ….

name

dept

grade

tel

小室

理工

4

255 伊藤

理工

3

583 田中

経済

3

728 理工

経済

小室

伊藤

田中

4

255

3

583

3

728 フラットな表

構造を自由に表現

様々な出力媒体

(4)

SuperSQLの現状

• 従来の

Generate HTML

• table タグを用いたHTML を生成

• 一般的な

Webページレイアウトを表現することが困難

• Generate HTMLの改良

• divタグを用いてHTMLを生成

• より幅広い

CSSの適応が可能に

• SSQLのみでWebページ全体を生成

header

navigation

content

side

footer

(5)

Generate HTMLの課題

• CSSの適用 - 装飾子（@）

• シンプルな例

GENERATE HTML

[name ! {grade,tel}

@{color=red}

],

FROM employee

WHERE ….

小室

伊藤

田中

(6)

Generate HTMLの課題

• CSSの適用 -クエリが複雑な場合

GENERATE HTML { [{m.title, m.english_title}! image(m.poster, "./poster")! {"公開年", m.release_year}!

{{"制作会社", link(cp.company_name, "Company.ssql", cp.id)}, {"配給会社", link(cd.company_name, "Company.ssql", cd.id)}}! {"作画枚数", m.number_of_drawing,

{"制作費(億円)", m.cost},

{"興行収入(億円)", m.box_office_taking}}!

"主題歌"!{[link(ts.music_title, "Music.ssql", ts.id)],}! "製作"![link(c.company_name, "Company.ssql", c.id)],! "制作メンバー"![rm.role, [link(a.name, "Artist.ssql", a.id)]!]!!

]! } FROM …

(7)

Generate HTMLの課題

@装飾子を使って

 

CSSスタイリング

(8)

GENERATE HTML {

[{m.title, m.english_title}! image(m.poster, "./poster")! {"公開年", m.release_year}!

"主題歌"!{[link(ts.music_title, "Music.ssql", ts.id)],}! "製作"![link(c.company_name, "Company.ssql", c.id)],!

"制作メンバー"![rm.role, [link(a.name, "Artist.ssql", a.id)]!]! ]!

} FROM …

(9)

GENERATE HTML {

} FROM …

Generate HTMLの課題

GENERATE HTML{

[{m.title@{width=300, font-weight=bold}, m.english_title@{width=300}}! image(m.poster, "./poster")@{height=350, align=center}!

{"公開年"@{width=100, border = 0, color=#556b2f}, m.release_year@{width=60, border = 0}}!

{{"制作会社"@{width=150, border = 0, color=#556b2f}, link(cp.company_name@{width=150, border = 0}, "Company.ssql", cp.id)},

{"配給会社"@{width=150, border = 0, color=#556b2f}, link(cd.company_name@{width=150, border = 0}, "Company.ssql", cd.id)}}!

{"作画枚数"@{width=100, border = 0, color=#556b2f}, m.number_of_drawing@{width=100,border = 0}, {"制作費(億円)"@{width=120, border = 0, color=#556b2f}, m.cost@{width=80,border = 0}},

{"興行収入(億円)"@{width=120, border = 0, color=#556b2f}, m.box_office_taking@{width=80,border = 0}}}! "主題歌"@{width=610, border = 0, color=#556b2f}!{[link(ts.music_title, "Music.ssql", ts.id)],}!

"製作"@{width=610, border = 0, color=#556b2f}![link(c.company_name, "Company.ssql", c.id)],! "制作メンバー"@{width=610, border = 0, color=#556b2f}!

[rm.role@{width=200, border = 0}, [link(a.name@{width=300}, "Artist.ssql", a.id)]!]! ]!

(10)