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 フレームワーク機構を提案する.
キーワード

SQL, SuperSQL, CSS

1. は じ め にSuperSQL は関係データベースの出力結果を構造化し, 多様なレイアウト表現を可能とする SQL の拡張言語である. 通る. 括弧内はクエリ中の演算子を示している.

•

水平結合子 (,)

データを横に結合して出力.
例 : Name, Tel

name tel

常の SQL では, シンプルでフラットな表しか再現できないが,SuperSQL を用いることで様々な表を作成することができる.
また, SuperSQL の主要な機能である HTML 文書の出力は,HTML と PHP などを用いた場合と比べて, 少ないコード量で•垂直結合子 (!)

データを縦に結合して出力.
例 : Name! Tel

nametel

データベース内のデータを整形して出力を可能とする.
しかしながら, 現在の SuperSQL の HTML 出力は, 昨今,Web ページを作る上で不可欠であるとされるマルチデバイスへの対応が不十分である. また, 出力結果の詳細なレイアウト構造をクエリに記述する場合, クエリが肥大化し, 可読性が大•深度結合子 (%)

データを 3 次元方法へ結合. 出力が HTML ならばリンクとなる.
例 : Name % Tel

name→tel幅に低下してしまう. そこで, この論文では, SuperSQL を用いた Web ページ生成において, サイトデザインの構築を容易にする CSS フレームワーク機構を提案する. サイトの骨組みを効率的に作るための CSS のパッケージを CSS のメタ言語である

Sass [9] で用意し, SuperSQL のクエリで指定したパラメータに応じて, CSS をコンパイルして生成する機構を提案する.

2. 2 反 復 子
反復子は指定する方向に, データベースの値があるだけ繰り返して表示する. また, 反復子はただ構造を指定するだけではな
く, そのネストの関係によって属性間の関連を指定できる. 例
えば,

2. SuperSQL[部署名]! , [雇用者名]! , [給料]!
この章では, SuperSQL について簡単に述べる. SuperSQLは SQL を拡張したワンソースマルチユースを実現するクエリ言とした場合には各属性間に関係はなく, 単に各々の一覧が表示されるだけである. 一方, ネストを利用して語であり, 慶應義塾大学遠山研究室で開発されている [1] [2]. そのクエリは SQL の SELECT 句 を GENERATE< media ><TFE > の 構文を持つ GENERATE 句で置き換えたものである. ここで < media > は出力媒体を示し, HTML, XML [3],Mobile HTML5 [4] などの指定ができる. また < TFE > はターゲットリストの拡張である Target Form Expression を表し, SQL では SELECT 句に記述する属性名を, レイアウト演算子である結合子, 反復子と組み合わせることで出力結果の構[部署名! [雇用者名, 給料]! ]!とした場合には, その部署毎に雇用者名と給料の一覧が表示されるといったように, 属性間の関連が指定される. 以下, 反復子の種類について述べる.

•水平反復子 ([ ],)データインスタンスがある限り, その属性のデータを横に繰り返し表示する.

造を指定する式である.

2. 1 結 合 子
結合子はデータベースから得られたデータをどの方向 (次元)に結合するかを指定する二項演算子であり, 以下の 3 種類があ例 : [Name],

name1 name2 ・・・ name10•

垂直反復子 ([ ]!)すると, TFE 内のそれぞれの要素に対し多くの装飾指定が必要

データインスタンスがある限り, その属性のデータを縦に繰りとなり, クエリ自体が長く複雑なものになってしまう. 例えば,返し表示する.

図 1 に示すようなクエリを実行すると、図 2 のような結果が得

例 : [Name]!

name1られる. このクエリには装飾子が全くついていないので、非常

name2にシンプルな表が表示されるが, このクエリに対し, 装飾子をつ・・・けて図 4 のようなページを作る場合, クエリは図 3 のようになname10る. このクエリの装飾演算子の部分を赤字で表示している. このように、詳細なレイアウト表現を記述すると, クエリは複雑

2. 3 装 飾 子
SuperSQL では関係データベースより抽出された情報に, 文字サイズ, 文字スタイル, 横幅, 文字色, 背景, 高さ, 位置などの情報を付加できる. これらは装飾演算子 (@) によって指定する.

< 属性名 >@{ < 装飾指定 > }装飾指定は装飾子の名称 = その内容 として指定する. 複数指定するときは, 各々を, で区切る. 例えば, セルの横幅を 200 ピクセルにし, 文字の色を赤にしたい場合は以下のよう化してしまい, 可読性が低下してしまう.
このような問題を解決するために, 従来の研究ではクエリ作成支援システムとして, Web アプリケーションである EGG [5]や SSVisual [6] , Java アプリである SSedit(旧 ssqltool) [7] が開発されてきた. これらのシステムは, クエリ作成を支援するための入力補完機能や, 視覚的にレイアウト構造を確認できる機能を備えることで, ユーザのクエリ生成の負担を軽減しているが, クエリ自体の複雑化といった問題の解決には至っていない.に記述する.

[name@{width=200, color=red}]!
2. 4 関数SuperSQL における関数は，データベース検索結果の文字列に対し，特定の処理を行うための機能である. 以下にいくつかの関数を示す.

2. 4. 1 image 関数
image 関数を用いると画像を表示することが可能となる. 引
図 1 装飾子指定なしのクエリ数には属性名, 画像ファイルの存在するディレクトリにパスを指定する. 以下に例を示す.

image(id, path= ./pic )2. 4. 2 link 関数 (出力メディアが HTML の場合のみ)link 関数は, FOREACH 句と同時に用いることで深度結合子と同様にリンクを生成することができる. リンク元を生成する質問文で link 関数を、リンク先を生成 する質問文で FOREACH
句を記述する. 以下に例を示す.

link(cou.name, file= ./menu.sql , att=co.country)
2. 4. 3 anchor 関数 (出力メディアが HTML の場合のみ)
anchor 関数は、任意の URL へのハイパーリンクを作成することができる. 以下に例を示す.

anchor(”SuperSQL”,”http://ssql.db.ics.keio.ac.jp/”)3. SuperSQL クエリ作成における問題点
SuperSQL は装飾演算子を用いることによって, 各要素の文字サイズや色, 幅, 高さ, 位置などのような, 一般的に CSS で指図2

装飾子指定なしのクエリの実行結果定するデザイン面におけるスタイルを指定することができる.
しかし, 従来の SuperSQL の装飾演算子で指定することができるスタイルの大部分は CSS の記述方法に沿っており, 詳細なデザイン指定が可能な反面, 複雑なレイアウトの表現をしようとまた, 近年, Web 閲覧に用いられる端末の多様化が進んでおり, Web ページを作る上でマルチデバイスへの対応は不可欠

じてレイアウトが切り替わるブレイクポイントを設定することで, 画面の幅に合わせた要素の配置の切り替えを実現する. ブレ
イクポイントは, タブレットなどのサイズに合わせた 768px とPC 画面のサイズに合わせた 1024px に設定している. 767px 以
下の画面サイズ (スマートフォンなど) を small, 768px 以上の中間のサイズを medium, 1024px 以上のサイズを large としている. レイアウト構造を指定する際は, 横並びの要素の横幅指図 3 装飾子指定を追加したクエリ定と共に, その横並びのレイアウトをどの画面サイズで縦並びに切り替えるかを指定する. 画面幅に応じて要素の並びを変えるレスポンシブレイアウトの例を図 5 に示す. この例では, レ
フトカラムの横幅を 4/12, ブレイクポイントを medium に, ライトカラムでは横幅を 8/12, ブレイクポイントを medium と指定している. そうすることで, 画面幅が 768px を下回った際に,横並びに配置されていた 2 つの要素が縦並びに再配置される.

図4

装飾子指定を追加したクエリの実行結果
図 5 グリッドレイアウトの一例とされている. SuperSQL の HTML 生成におけるマルチデバイスへの対応策として, 過去にモバイル用とデスクトップ用の

4. 2 CSS フレームワークの概要

Web ページを 1 つのクエリから生成する方法が提案された [8].

提案手法では, レスポンシブなレイアウトを実現するための

しかし, 現在はデスクトップとモバイルだけでなく, 中間デバイグリッドレイアウトのスタイル指定の他に, ナビゲーションバースであるタブレット端末や, 大型テレビなどもインターネットやボタンなど, ウェブページのあらゆる構成要素のデザインテにつながるようになっており, マルチデバイスに包括的に対応ンプレートを Sass で記述したものを用意しておく. また, デした Web ページが求められるようになっている. 画面サイズ

フォルトのスタイル指定（例：ボタンの色）を柔軟に SuperSQLに合わせて表示を対応させるレスポンシブデザインを実現するのクエリから変更できるように, Sass ファイル側ではパラメー

ためには, 閲覧環境の細かな条件に応じて, 適用するスタイルをタを全て変数で宣言し, 初期値を設定しておく.

振り分けることができる CSS3 のメディアクエリ機能が必要で

4. 3 SuperSQL クエリとの連携ある. しかし, 現在の装飾演算子の仕様では, SuperSQL のクエ

SuperSQL のクエリでは, 装飾演算子を用いて, グリッドレ

リ内で CSS のメディアクエリの指定をすることができない.

イアウト上の各要素の大きさや, ナビゲーションやボタンの装4. CSS フレームワーク
4. 1 レスポンシブデザインの実現
本研究では, レスポンシブデザインを SuperSQL で実現する飾などを指定する. クエリが実行されると, クエリ内での指定に応じて, HTML 生成と共に CSS フレームワークの Sass ファ
イルをコンパイルし, CSS の生成を行う.

4. 3. 1 レイアウト構造の記述

ため, 画面を格子状に分割し, 各要素の大きさや配置などの画提案手法では, 装飾演算子を用いて要素の横幅を指定する際,面構成を配置していくデザイン手法であるグリッドレイアウト

従来のピクセル単位での指定ではなく, グリッドのブロック単を導入する. そして, 関係データベースにより抽出された情報位 (画面の割合) で指定する. また, レスポンシブデザインに対をグリッド上のブロックの組み合わせに当てはめていくことで,応させるためのブレイクポイントを記述することで, 画面幅にページ全体のレイアウトを構成していく. これに合わせ, 装飾合わせて要素の配置が置き換わる. 図 6, 図 7, 図 8 に CSS フ演算子を用いて要素の横幅を指定する際は, 従来のピクセル単レームワークを導入したクエリと, その出力結果の例を示す. 画

位での指定ではなく, グリッドのブロック単位 (画面の割合) で面幅が 768px 以上の場合は要素が横並びに 5 対 7 の比率で表指定する. 提案システムでは, デフォルトの設定として, 12 カ示されており, 画面幅が狭くなると, 横並びであった 2 つの要ラムのグリッドシステムを形成している.

素の配置が縦並びに変わりスマートフォンなどのモバイル端末

そして, 前述したメディアクエリを用いて, 画面サイズに応に適した表示に切り替わる.

図6

レイアウト構造を記述したクエリの一例
図 9 CSS フレームワークを導入したクエリの一例

図 7 レイアウト構造を記述したクエリの実行結果 (横並び)

図 10 CSS フレームワークを導入したクエリの実行結果

5. 評

価

Web ページ生成におけるコード量の比較を行う. 復数の Webページを, HTML と CSS を用いる方法, 従来の SuperSQL を用いる方法, そして提案手法の CSS フレームワークを導入した

SuperSQL を用いる方法の 3 種類で制作し, それぞれのコード量の定量的な比較などを行う. 評価に関しては, 現在実験と測定を行っている.

6. お わ り にSuperSQL を用いた HTML 生成における, レイアウトやデ
図 8 レイアウト構造を記述したクエリの実行結果 (縦並び)

ザインの構築を容易にする CSS フレームワーク機構を提案する. これにより, リッチなデザインのナビゲーションやボタン

4. 3. 2 構成要素のデザインテンプレートの利用を含んだ Web ページの生成や, 短いコード量でマルチデバイスCSS フレームワークでは, レスポンシブデザインを実現する対応の Web ページ生成を実現する.

レイアウト表現の他に, ナビゲーションバーやフォームなど,Web ページを構成する上では欠かせない要素をモジュール化しており, 装飾演算子で指定することが可能となっている. 図 9と図 10 に, CSS フレームワークを導入したクエリと, その出力結果の例を示す. ここでは, 結合子で結ばれた 3 つの anchor 関数に対し, 装飾子 navbar をつけることで anchor 関数によって生成される 3 つのハイパーリンクを含んだナビゲーションバーが生成される. また, レイアウトが切り替わるブレイクポイン
トを装飾子 responsive で medium と指定しているので, 画面幅が 768px より小さくなるとレイアウトが切り替わり, ナビゲー
ションバー項目が横並びから縦並びに変更され, 右上のボタンでナビゲーションの開閉をできるようになる.

文献[1] SuperSQL: http://SuperSQL.db.ics.keio.ac.jp[2] M. Toyama: SuperSQL: An Extended SQL for Database
Publishing and Presentation , Proceedings of ACM SIGMOD
98 International Conference on Management ofData, pp. 584-586, 1998.
[3] 青木隆龍, 遠山元道: SuperSQL に基づく標準規格 XML デー
タの生成支援システム , 慶應義塾大学 修士論文, 2011.
[4] 五嶋研人, 遠山元道: SuperSQL によるモバイル Web アプリ
ケーション生成機構の実装 , 慶應義塾大学 修士論文, 2013.
[5] 近藤 寛一, 遠山 元道: SuperSQL クエリ作成支援ツール , 第14 回データ工学ワークショップ (DEWS), 2003.
[6] 春野 健吾, 五嶋 研人, 遠山 元道: 直接操作による SuperSQL
クエリ作成支援 , 第 7 回データ工学と情報マネジメントに関す

るフォーラム (DEIM),2015.
[7] 木谷 将人, 五嶋 研人, 遠山 元道: SuperSQL クエリ作成支援システムの開発 , 第 6 回データ工学と情報マネジメントに関するフォーラム (DEIM),2014.
[8] Kento Goto, Ryosuke Koshijima, and Motomichi Toyama,“Generating Desktop and Mobile Web Pages from a Single
SuperSQL Query”, In Proceedings of the 19th International
Database Engineering & Applications Symposium (IDEAS’15). 222-223. 2015.
[9] Sass: Syntactically Awesome Style Sheets: http://sasslang.com/