[論文レビュー] Modular Responsive Web Design using Element Queries

Lucas Wiener, Tomas Ekholm+1 more|arXiv (Cornell University)|Nov 4, 2015

Web Data Mining and Analysis参考文献 3被引用数 5

ひとこと要約

この論文では、要素クエリを実装するオープンソースのJavaScriptライブラリであるELQを提案する。これにより、グローバルなビューポートに依存するのではなく、コンポーネントのローカルコンテナサイズに応じて適応可能なモジュラーなレスポンシブウェブデザインが可能になる。効率的な要素リサイズ検出を活用することで、従来の手法に比べて最大37倍のパフォーマンス向上を達成しながら、標準のHTML、CSS、JavaScriptと完全に互換性を持つため、真正の再利用性が実現できる。

ABSTRACT

Responsive Web Design (RWD) enables web applications to adapt to the characteristics of different devices such as screen size which is important for mobile browsing. Today, the only W3C standard to support this adaptability is CSS media queries. However, using media queries it is impossible to create applications in a modular way, because responsive elements then always depend on the global context. Hence, responsive elements can only be reused if the global context is exactly the same, severely limiting their reusability. This makes it extremely challenging to develop large responsive applications, because the lack of true modularity makes certain requirement changes either impossible or expensive to realize. In this paper we extend RWD to also include responsive modules, i.e., modules that adapt their design based on their local context independently of the global context. We present the ELQ project which implements our approach. ELQ is a novel implementation of so-called element queries which generalize media queries. Importantly, our design conforms to existing web specifications, enabling adoption on a large scale. ELQ is designed to be heavily extensible using plugins. Experimental results show speed-ups of the core algorithms of up to 37x compared to previous approaches.

研究の動機と目的

• 現在のレスポンシブウェブデザインにおけるモularityの欠如に起因する、グローバルビューポートに依存するCSSメディアクエリに依存する唯一の手法の問題を解決すること。
• レスポンシブコンポーネントがローカルコンテナのコンテキストに基づいて適応可能になるようにし、さまざまなレイアウト間での再利用性を向上させること。
• 既存のウェブ標準（HTML、CSS、JavaScript）に準拠したソリューションを開発することで、広範な互換性とツールチェーンのサポートを実現すること。
• 要素サイズの変更を検出する際に高いパフォーマンスを達成し、レスポンシブルールの効率的な実行時評価を可能にすること。
• 実際の現場で利用可能な、拡張可能で生産環境対応の実装を提供すること。

提案手法

• CSSメディアクエリを要素クエリに拡張し、スタイルルールが対象要素のコンテナサイズに応じて条件付きで適用可能になるようにすること。
• 効率的でブラウザ最適化された検出メカニズムを用いて、要素リサイズイベントを観測する軽量なJavaScriptライブラリ（ELQ）を実装すること。
• プラグインアーキテクチャを採用することで、拡張性と既存のフレームワーク・ツールとの統合を可能にすること。
• バッチ処理と最適化されたイベントハンドリングを活用し、リサイズ検出時の計算オーバーヘッドを低減すること。
• 旧バージョンのブラウザ（例：IE8）との後方互換性と、標準のCSS構文をサポートすることで、スムーズな導入を実現すること。
• 要素のサイズ変更を検出するメカニズムを導入し、関連する要素クエリの再評価をトリガーすること。

実験結果

リサーチクエスチョン

• RQ1 グローバルビューポートに依存しないまま、異なるレイアウト間で真正に再利用可能なレスポンシブコンポーネントを実現できるか？
• RQ2 既存のウェブ標準およびツールチェーンと完全に互換性を持つ方法で要素クエリを実装することは可能か？
• RQ3 ポーリングベースやイベントベースのアプローチよりも著しく高いパフォーマンスを達成できるように、要素リサイズ検出を最適化できるか？
• RQ4 既存のメディアクエリベースのコードベースを、最小限の変更で要素クエリに移行できる範囲はどの程度か？
• RQ5 要素クエリは、リサイズや再配置などの動的レイアウト変更に対応しながら、レスポンシブ性を損なわずに可能にするか？

主な発見

• ELQは、従来の手法に比べてコアのリサイズ検出アルゴリズムで最大37倍の高速化を達成し、大規模アプリケーションにおけるパフォーマンス向上が顕著に顕在された。
• Bootstrapフレームワークを要素クエリに移行するにあたり、スタイル関連コードの約0.6%の変更で済んだことから、移行のオーバーヘッドが非常に低いことが示された。
• ELQはIE8を含む主要ブラウザをすべてサポートしており、広範な互換性と生産環境での使用可能性を確保している。
• このライブラリにより、レスポンシブモジュールがローカルコンテナサイズに応じて適応可能になり、グローバルビューポートから分離され、モularityが回復された。
• ELQの要素クエリにより、リサイズや再配置などの動的レイアウト変更に対しても、コンポーネントが応答可能でありながらレスポンシブ性を損なわない。
• このソリューションは、標準のHTML、CSS、JavaScriptと完全に後方互換性があるため、コンパイルや独自構文の必要なしに統合可能である。