こんにちは。堀内です。
今回はCSSフレームワークについてお話しします。
CSSフレームワークといえば Bootstrap を思い浮かべる方も多いかと思いますが、今回は「Onsen UI」というフレームワークを採用しました。
何故 Onsen UI にしたのか選定理由について語っていきたいと思います。
前回の記事で登場しました『アプリ内 WebView で閲覧する商品ページ』に利用するCSSフレームワークの選定も並行で進めていました。
blog.ecbeing.tech
そもそもOnsen UIって？
Onsen UI は、Webアプリ上で iOS や Android のネイティブUIと同等の UX を実現するための CSSフレームワークです。
ボタンやリストなど様々な UIコンポーネントが用意されています。
また、実行端末に合わせてスタイルを自動で切り替えてくれるため、コードを共通化できます。
「Onsen UI」という名前がとてもユニークですね。 Single Page Application → SPA（スパ）→ 温泉の繋がりらしいです！
実現したい要件
今回開発する機能の要件が、WebViewでネイティブアプリのように見えるページを簡単にデザインできるようにする でした。 Webアプリで実装する機能をネイティブアプリと同様の見た目で表現するために、UI部品のデザインをOSネイティブのデザインに寄せていく必要がありました。
CSSフレームワークの候補と評価観点
私たちが開発したプロダクトは、フィールドのエンジニアがカスタマイズして利用されます。 このため、エンジニアやデザイナーなど様々なメンバーが触れるという観点で以下の評価軸としました。
| 観点 | Bootstrap | Onsen UI |
|---|---|---|
| デザイン容易性 | 〇 | 〇 |
| リファレンス | ◎日本語 | ◎日本語 |
| 学習コスト | 〇 | 〇 |
| ライセンス | MIT | Apache v2 |
| デザイン方針 | 汎用 | スマホUI準拠 |
| Vue.js対応 | 対応版あり | 対応版あり |
Vue.js専用のフレームワークも調査しました。
| 観点 | Vue Material | Vuetify |
|---|---|---|
| デザイン容易性 | 〇 | 〇 |
| リファレンス | ◎英語 | ◎英語 |
| 学習コスト | 〇 | △ |
| ライセンス | MIT | MIT |
| デザイン方針 | マテリアル デザイン |
マテリアル デザイン |
| Vue.js対応 | Vue.js専用 | Vue.js専用 |
その他『UI Kit』『Skeleton』『element』等も調査しましたが、汎用的な CSSフレームワーク枠では Bootstrap の方が優位性があったため候補から外しました。
【不採用】候補 Vue Material、Vuetify
別の機能では Vue.js を採用しましたので今回も候補に挙げました。
ただ Vue.js 専用のフレームワークを採用してしまうと、将来的に Vue.js 以外のフロントエンドフレームワークへ移行する際に、再度代替の選定や置き換えが必要となること。
また、マテリアルデザイン自体に今回は優位性がそこまで無かったことから不採用としました。
（…リファレンスが英語というのも多少なりとも影響しています）
【不採用】候補 Bootstrap
まず真っ先に思いついたのは Bootstrap でした。CSSフレームワークとしてあまりにも有名です。
Bootstrap は汎用的なレイアウトを広く対応していますが、ネイティブアプリのパーツデザインを簡単にという今回の要件とは合わなかったため採用を見送りました。
テンプレートを探せば良いものがあるかもしれませんが、公式のフレームワークのみで可能な範囲に限定したかったため外しています。
【採用】候補 Onsen UI
Onsen UI は、専用タグを使用すると iOS と Android を判別してブラウザに合った UIデザインを適用してくれます。
また、iOS と Android 用の各タグが用意されており、そちらを直接記述すれば iOS と Android 問わずデザインを固定することも可能です。
何も考えずにパーツデザインを適用できることが採用の大きな要因となりました。
注意点として SPA を想定しているためかフレーム部分に多少のスタイル指定が入るため、不要な場合は ResetCSS で消込が必要になります。
同じ HTML ですが、以下のようにアクセスするブラウザに応じて見た目が変わります。
vue-onsenui
Onsen UI は Vue.js のバインディングに対応したパッケージも配布しています。
将来的に別のフロントエンドフレームワークに変更することも加味して、今回は使用せずに標準の Onsen UI を採用することにしました。
ただ、React や Angular への対応パッケージも提供しているため、これらへの切り替えであるならば採用してもそこまで問題にはならないかと思います。
デザインチームの意見
デザインチームの方にも聞いてみたところフレームをデザインするのはそこまで大変ではないとのことでした。
ということで、今回の要件では汎用的なレイアウトに広く対応している Bootstrap よりも、より特化したアプリ部品のパーツデザインが充実している OnsenUI が適していると判断しました。
まとめ
今回は CSSフレームワークに関する記事を書かせてもらいました。
要件次第では Bootstrap 以外の選択肢にも目を向けてみると、よりマッチしたフレームワークと出会える機会が生まれるかもしれません。
各フレームワークそれぞれ良し悪しがあるので、一つに絞り込むのは中々大変ですね・・・（笑）
～ecbeingでは、様々な観点で技術を選定しながらよりよいプロダクトの開発を志すフロントエンドエンジニアを大募集中です！～ careers.ecbeing.tech
