カードUIのColumn（カラム；列）数を表示領域の広さに応じて自動で調整するためのスクリプトを書きました。ウェブページやウェブアプリで使用できます。
実際、CSSでもwidthやheightの値として"50%"のようにパーセントで与えることで、画面の大きさに合わせてカードの大きさを自動伸縮させることができます。
しかし、デバイスの表示領域の大きさによっては、カードの横幅が極端に小さくなってしまったり逆に大きすぎるといったことがしばしば発生します。これらの事態は次のような問題を引き起こします。
- カードが小さくなりすぎたために、コンテンツが収まりきらない。
- 写真タイルが大きくなり過ぎてしまい、画質的に拡大に耐え切れない。
かといって、フレキシブルなサイズ指定にせずに固定値にしてしまうと、PCやスマートフォン向けのデザインを個別に用意しなくてはならずにスケールしづらくなってしまいます。
そこで、これらの問題を解決すべく、表示領域の横幅に応じてカラム一つあたりの最適な横幅を計算する関数getFlexibleWidthを作成しました。この関数は以下のように呼び出して使います。
var result = getFlexibleWidth(
希望するカラム数,
[左マージンpx値, 右マージンpx値],
表示領域の横幅のpx値,
カラム一つあたりの許容最小横幅px値,
カラム一つあたりの許容最大横幅px値
);
返り値resultは、「カラム横幅px値」、「左マージンpx値」、 「右マージンpx値」、「カラム数」を要素に持つ配列です。
関数getFlexibleWidth内部は、
第一引数である「希望するカラム数」で表示した場合にカラム幅が「許容最小値」と「許容最大値」に違反していないかを確かめ、もし違反しているようであればカラム数を増減して調整します。カラム数のみで調整できなくなった場合は、マージンを調整します。
のような仕様になっています。この関数は以下のリンク先で公開しています。どうぞご自由にご利用ください！*1。
get-flexible-width.js
おまけ
この関数の挙動を試してみたい場合は下記のデモをどうぞ！
デモページにアクセスしたら、適当な値を入力するかデフォルトの値のままで「Render」ボタンを押してください。ウィンドウのサイズに応じて最適なカラム幅で表示されます。http://daiz-projects.appspot.com/getFlexibleWidth/index.html
miilClient（Chromeアプリ版、Androidアプリ版）では、実際にこの関数がアプリで表示する写真の大きさを決定指定しています。是非こちらもお試しください。
*1:License: MIT
