FrontEnd

ウチのMaterialize事情

投稿日:2017年12月25日 更新日:

はじめに

うちのチームでは現在、CSSフレームワークをBootstrapからMaterializeに移行しております。
Materializeは現在1.0のアルファ版であり、1.0リリースまでもう少しです。
Materialize

今回は使っているうちに気づいたこと、ルールとしてまとめたことを記載したいと思います。
なお、RubyのGemで入れて使用しています。

ボタン

Buttons

ボタンは下記のように、指定しますが色を変えようと思うと少しクラス名が長くなりますね。
Materializeに慣れていないと、クラスをつけるだけで時間がかかりそうです。

そのため、チーム内でボタン名のルールを決め、そちらを使うようにしました。
(例えば、新規作成画面へのボタンであれば、 btn btn-new など。)

そしてCSSの方で extend してボタンを作成します。

こうすれば、あとで新規作成画面へのリンクボタンを変えたい、となっても一括で変えられます。

ただ、ここで問題が発生しました。
extendwaves-effect のようなエフェクト用のクラスまで含めてしまうと、JavaScriptの方でセレクタが見つからない状態になります。

悩んだのですが、ページロード時に、JQueryでクラスを当てるようにしました。

フォーム

Forms

ラベルについて

ドキュメント通りにラベルを置くと、クリック時にラベルが動きます。
この仕様ですが、テキストボックスの値を動的に変えていたりすると、実際の入力値と被ってしまい、非常に動作が不安でした。

ラベルを動かす時には、 active というクラスをつけていることが分かったので、常に active をつけておくようにしました。
こうすることで、動いた後の状態で固定できます。

セレクトボックスについて

セレクトボックスですが、サンプルを見るとカッコ良い感じです。
ただ、なかなかサンプル通りになりませんでした。

どうも挙動を見ていると、 select タグ自体は非表示にし、JSで別のDOMとして表示させているようです。
こちらの調査がなかなか進まなかったため、暫定ですが、Materializeが用意している browser-default というクラスを使用することにしました。
これは従来のセレクトボックスに近い感じのセレクトボックスにしてくれます。

ラジオボタンについて

Radio Buttons

ラジオボタンは、 input タグの idlabel タグの for が一致していなければ動かないようです。
Radio buttons not working…clicking on them does not do anything

特にRailsのヘルパーなんかでラジオボタンを生成する場合、上記2つの値があっているか確認の必要があります。

アラート

Bootstrapにお世話になっていると、アラートが当たり前になります。
(うちのチームもそうです。)
ただ、マテリアルデザインにアラートは存在しません。
トーストがそれにあたるのでしょう。

とはいえ、トーストに合わせてデザインし直すのは時間的に難しかったので、アラートクラスを作成し、Bootstrapと同じように使ってもらうようにしました。

フォント

MaterializeのデフォルトフォントはRobotoというものですが、日本語があまりよくないです。
そのため、Googleが用意しているWebフォントを import しています。
Google が提供する日本語 Web フォント

さいごに

私たちもまだまだ使いこなせているわけではありませんが、現状のルールをまとめてみました。
Bootstrapに比べて、JS(JQuery)に依存する部分が多いところが大変です。
またTurbolinksやAjaxのような非同期処理が絡む場合は注意が必要そうです。

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

フォロー

blog-page_side_responsive

2017年12月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。