ENTEREAL

uikitとは

uikitとは、MITライセンスで公開されているWEB制作の為のUIライブラリの名称です。簡単に言うと、Twitter社が公開しているBootstrapと同種のライブラリです。

最近のWEBページで多用されているグリッドやレスポンシブレイアウトに対応し、簡単にページやフォーム等のコンテンツを作成する為のCSS/JavaScriptg郡です。

これ系ですと、jQuery UIやBootstrap、Kendo UIなどが有名どころですが、今回はuikitについて、ご紹介します。

大まかに言うとBootstrapと同じ

cssクラス名等の違いはあるものの、基本的にはBootstrapとコンセプトも使い方も同じです。全く同じであれば、実績や追加アドオンの多いBootstrapをお勧めする所ですが、ここではその若干の違いについて分かりやすく例を挙げて解説してきます。

この違いの部分が、お勧めするポイントでもあります。

※具体的な使い方は、別途記事を掲載予定です。

1. 480px以下のブレイクポイントがある

最近は、PC用、Tablet用、Mobile用を兼ねた統合ページをレスポンシブレイアウトで構成し、制作/メンテナンスコストを抑える方向が多いです。

その時、モバイルに着眼するとiOSを搭載したiPhoneと、Androidを搭載した各種スマートフォンに大別されます。iPhoneを含む最近のスマートフォンは、ディスプレイ技術の進化とともに、画面解像度がグングン上がっており、FHD(1920*1080)やWQHD(2560*1440)などPC並みの端末が多く発売されるようになりました。

ただ、WEB制作の場合では、端末毎のdevice-pixcel-ratioを考慮した、実質解像度で画面を計画します。変則的な端末をのぞくとiPhoneでは幅320px、Androidでは、360pxが一般的になります。

前置きが長くなりましたが、スマートフォンを考慮したレスポンシブレイアウトの場合、おおよそ幅480px以下でひとつブレイクポイントがあるとデザイン的に非常に便利です。

Bootstrapのデフォルトでは、768px以下がひとつの括りなので、幅が2倍以上違う320px幅の端末と767px端末が同じレイアウトになってしまうという事なのです。

もちろんBootstrapでも、専用ページでカスタマイズし、コンパイル→ダウンロードすれば、ブレイクポイントを増やす事は出来るのですが、初心者には少し複雑なので、最初から使えるuikitがお勧めなのです。

2. 柔軟なグリッドレイアウト

Bootstrapは基本12カラム、uikitは10カラムです。これだけ聞くとBootstrapの方が細かくカラムレイアウトが出来そうですが、実はそうではありません。

Bootstrapの場合まず画面サイズを12等分し、それを各カラムに配分します。例えば、代表的な左メニューの2カラム構成の場合、左カラムに2つ分、右のコンテンツ部分に10つ分というように合計で12になるようにします。そして、右のコンテンツ部分を中で更に12等分してレイアウトを構成していきます。

uikitは10カラムで同様の事を行いますが、配分の方法が少し違います。10カラムを2カラムと８カラムに分配するのはもちろんですが、10カラムを6つに等分して1対5に分けるなどが出来るのが大きな違いです。

これにより、Bootstrapのデフォルトでは実現が難しかった1対4配分(5等分して1つと4つ分)など、がクラス付与だけで簡単に実現が出来るのです。

3. Off-canvas(スライドインメニュー)が使える

特に画面エリアの小さいモバイル向けのページで多様されるメニューの機能で、普段は画面外に隠れていて、ボタンやスワイプアクション等の呼び出しで左や右からページのリンクや各種メニューがスライドして表示されるあれです。最近はモバイルアプリでも広く一般的に使用されている機能です。

Bootstrapで実現するには、サードパーティ製のアドオンを追加し若干のカスタマイズを要します(当社でも過去に記事を掲載しました。ここやここ)が、uikitではデフォルトの機能として実装されているので、苦労はありません。

4. 高機能なScrollspy

Scrollspyはユーザがどのくらいページをスクロールしたかを監視し、それに応じた各種アニメーションやアクションを設定する機能になります。Bootstrapにも機能があるのですが、uikitの方がより高機能です。

5. iconも多い

uikitはFontAwesomeがデフォルトで使用できるため、Bootstrapよりも多い400以上のアイコンが使えます。

6. その他Bootstrapにない機能が多数

Bootstrapにない機能として、Overlay, Animation, Dotnav, Form File, Autocomplete, Datepicker, Timepicker, Sortable, Stickyなどなど多数あります。

何はともあれ

上記で紹介した機能以外にも使えそうな機能がたくさん含まれています。逆にBootstrapにあって、uikitにないものが見つからないくらいです。後発であるが故に、細かい部分にも気配りされています。

Bootstrapからの乗り換えの手間や、新たにクラス等を覚える手間はありますが、それを補っても余りある機能があると感じます。

機会があれば、ぜひ使ってみて下さい。