Webでデスクトップアプリっぽい画面構造を構築するベスト(?)プラクティス
最近、仕事でWeb屋さんのまねごとをした(あるツールを作ったが、そのUIをWebアプリにする必要があった)。
デスクトップアプリのような画面を多数作る必要があったので、効率を求めていろいろな方法を試した中で、一番良かったと思う方法をまとめる。
デスクトップアプリっぽい画面構造とは？
以下のようなスタイルを持った画面構造。
- ブラウザの画面全体を使い切る。
- 画面が縦横のペイン分割で構成されている。
- 固定サイズで表示されるペインと、画面サイズに応じて拡縮されるペインがある。
- 画面にコンテンツが収まりきらない場合、画面全体がスクロールするのではなく、ペインごとにスクロールする。
Qiitaの投稿画面もそういう構造ですね。
ねらい
-
少数のCSSクラスを定義するだけで、大半の画面レイアウトに対応できること。
開発効率も保守性も下がるので、できるだけ画面ごとにCSSを書きわけたくない。
-
HTML(DOM)構造が複雑にならないこと。
DOMが複雑になると、やっぱり開発効率も保守性も下がる。
-
ブラウザ個別対策が最小限で済むこと
トリッキーなことをしない。ある程度枯れた技術を使う。
手法
FlexBoxを使う。
最近のブラウザであればほぼ対応。ベンダープレフィックスもつけなくていいくらい。
IEも11は対応。IE 10も(怪しいながら一応)FlexBox対応。
実装
最終的に、こんな感じにした。
See the Pen DesktopAppLike by hogegex (@hogegex) on CodePen.
解説
-
画面全体を覆うため、最上位要素にmatchParentクラスを指定する。
-
画面を縦に分割したい場合はstackVerticalクラス、横に分割したい場合はstackHorizontalクラスを指定し、ペインとなる子要素を追加する。
-
通常のペインは、内容によってサイズが決まる。サイズを固定もしくは制約したい場合は、対象要素に(max- / min-) width / heightを指定する。
-
stretchableクラスを指定すると、そのペインは、余白いっぱいに広がる。複数に指定した場合は、余白を等分に分け合う。
-
ペインの内容をスクロールさせたい場合は、verticalScrollableクラスを指定する。
-
ペインを再分割したい場合は、ペインの要素にstackVertical / stackHorizontalを指定する。
注意事項
ブラウザによっては、ペイン内の一部の要素(textarea, selectなど)が妙に伸び縮みすることがあった。
これは、一部の要素にデフォルトでflex-shrinkが設定されているためだった。
以下のように明示的にキャンセルするか、リセットCSSを適用するとよさそう。
textarea, select {
flex-shrink: 0;
}