数あるCSSフレームワークの中でも特に人気の高いのがBootstrap。最近Bootstrap3にアップデートされ、このサイトでも基本的な使い方やBootstrap3で簡単にWebサイトを作ってみたりしています。
大変使いやすくてBootstrapなしでUIを作るのがめんどくさく感じるくらい重宝しているのですが、Bootstrapをさらに上回るかもしれないフレームワークを発見しました。
それがこのUIkitです。
この記事ではBootstrapからUIkitに乗り換えるべき３つの理由と題してUIkitの素晴らしいと思ったところを紹介していきます。
UIkitに乗り換えるべき３つの理由
最新のUIコンポーネントに対応
コンポーネントはBootstrapでも実装されており、大変便利な機能です。UIkitにはさらに以下のようなコンポーネントが実装されています。
off-canvasはYouTubeやFacebookアプリなどに利用されてるメニュー機能。ボタンを押すと左側にメニューバーが開きます。
Switcherはボタンを押して表示するものを切り替えたいときなどに使用。Webサイトでも文字サイズの変更などに使えそうです。
Scrollspyは画面スクロールでイベントを発生させることができる機能。ランディングページでよく見るオブジェクトのフェードインなどを実装可能。
UIkitのDropdownはなんと３カラムのビッグメニューに対応。
テーマのカスタムが簡単
UIkitには公式サイトでテーマのカスタマイズが可能です。ここではフォントや配色の設定を細かく指定することができます。作成したテーマはダウンロードしてすぐに使えるのでまさにUIkitを作ってるような感じですね。
アドオンでより高度な機能を追加
UIkitにはさらに高機能なコンポーネントが追加されています。Stickyはナビやサイドバーの追尾機能としてよく使います。その他の機能は通常のWebサイトで使用することはあまりないかもしれませんが、アプリ開発時には有用なアドオンが揃っていますね。
- Markdown area：ブラウザ上でマークアップできる機能
- Sortable：ドラッグ＆ドロップでオブジェクトのソートができる機能
- Datepicker：カレンダーから日付を選択
- Timepicker：キーボード操作で簡単に時刻変更
- Sticky：スクロールで追尾する機能
- Notify：警告文や操作の完了を知らせてくれる機能
- Form password：フォームパスワードの見える化
- Form file：アップロードするファイルの選択
このようにBootstrapにはない魅力的な要素がたくさんあります。Bootstrapでも今後のアップデートで実装されるかもしれませんが、現在のところこのフレームワークがオススメ。このサイトでも次回のリニューアル時にはUIkitとLESSを使ってWordpressのテンプレートを作ってみたいと思っています。
モバイルアプリのフレームワークおまけ
ここまでUIkitを紹介してきましたが、CSSフレームワークというよりもモバイルアプリのフレームワークに近い機能が搭載されています。単にWebサイトのUI設計が簡単になるというだけでなく、アプリを作るのにも向いているってわけですね。
そこでおまけとして、HTML5でアプリ開発する際に使ってみたいモバイルアプリのフレームワークを紹介したいと思います。これらを使ってさくっとアプリを作り、PhoneGapBuilderでスマホアプリ化すればiPhoneやAndroid端末にもインストールできるアプリが作れるのです。
ionic
こちらはフロントエンドデベロッパー向けのアプリケーションフレームワーク。BootstrapやUIkitと同じようなコンポーネントも備えながら、AngularJSというフレームワークに対応。見た目と機能を１つにまとめてみた感じ。
total.js
こちらは本格的なサーバーフレームワーク。サイトにあるvideoではたった５分でチャットシステムを作るというやばいデモンストレーションを見ることができます。2014年、間違いなくヒットするフレームワークになるでしょう。
