2020/08/08
エンジニアが挑戦するデザインのデ
はじめに
全て出来てなんぼ、ということでまずは一人でダッシュボードを作るところまでやってみました。
もちろん開発と並行しての実践です。
筆者のスキル的には
・Bootstrapって聞いたことはあるけど説明出来ない
・htmlの基本的なタグは判るけど違いを使い分け出来ない
・jsは依存性とか考えなければ書けるけど大嫌い
・cssはちょこっとなら書けるが汎用的なものは書けない
以下はRailsでマテリアルデザインを導入してみたダッシュボード制作の過程です。
開発の流れ
“Material Design Rails テンプレート”
などで検索すると有料なものから無料なものまで幾つかヒットする。
幾つかあるサイトの中で以下に出会う
https://bagelee.com/design/bootstrap/material-dashboard-github-trending/
Railsを考慮はしていないが最低限必要な読み込み設定に従って作れそう。
次に開発の進め方を決める。
・最初に全て把握してバックエンドと一気に実装する
・バックエンドを先に構築してしまい後から全てviewを乗せる
・仕組みを作ったらそれ用のviewを作ったり行ったり来たり。
今回は3つ目が導入だし試行錯誤しやすいだろうということで決め。
フレーム作り
以下のリポジトリを適当なところにcloneする
1 | git clone git@github.com:creativetimofficial/material-dashboard.git |
上述のサイトに従って
material-dashboard の付くファイルを
app/assets/stylesheets に配置する。
次に
app/assets/stylesheets/application.css に以下を追記
1 2 | *= require_self + *= require material-dashboard |
同様に
app/assets/javascripts/ に plugins, core ディレクトリと
material-dashboard と付くファイルを配置。
app/assets/javascripts/application.js に以下を追記
1 2 3 4 5 | //= require rails-ujs //= require activestorage + //= require core/jquery.min + //= require core/popper.min + //= require core/bootstrap-material-design.min |
これでインポートすべきファイル群の準備完了。
このapplicationを各layoutファイルで更に読み込めばviewの調整だけをすれば良い。(だが足りなかった。後述)
レイアウト作り
app/views/layouts/admins.html.slim
として管理画面のレイアウトを定義した。
最初は「まんまデモサイトのHTMLをコピー」して動作するかどうかは置いといて
「見た目がそのままになるか」を確認する。自分が意図したものを得られるかの確認大事。
以下のようにレイアウト内でapplication.js, cssを読み込み
1 2 3 4 5 6 7 8 9 10 11 | doctype html html head title | Admin meta[name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"] = csrf_meta_tags = csp_meta_tag + = stylesheet_link_tag 'application', media: 'all' = stylesheet_link_tag 'admins', media: 'all' + = javascript_include_tag 'application', media: 'all' |
いざ表示するとMaterial Iconsが表示されない・・・。
意図したものとそうでないものが混ざって若干の安心感を得つつ調べると、、
“material icons 表示されない”
でgoogleのURLを参照する必要があるのを確認出来る。
が、今回は外部参照したくないというテーマがあったので
“material icons ローカル Rails”
で調べると何やらGemで管理しているものを組み込める様子。
https://qiita.com/takish/items/9b65f1dcf36cc242357f
ここに記載されている通り素直に Gemfile に以下を追記
1 | gem 'material_icons' |
app/assets/stylesheets/application.css に以下を追記
1 2 3 | *= require_self *= require material-dashboard + *= require material_icons |
これでマテリアルなアイコンが表示されました!
ダッシュボード組み込み
先にnavigation barなどは
https://demos.creative-tim.com/material-dashboard/examples/dashboard.html?_ga=2.212746653.808293296.1596786303-1264879219.1596786302
こちらのHTMLを抜き取って
http://erb2slim.com/
でslimに置き換えて、内容に応じて修正してダッシュボードの表示は完了。なんてことはなかった。
コンテンツviewの組み込み進め方
・一番近い全体のデザインをデモで探す
・フォームやカード、アイコンなどはオフィシャルを参考にして適当に貼ってみる
・細かい調整はBootstrapのクラス一覧を見てviewを修正しながらブラウザで確認
という手順。
Bootstrap4をベースにしているという理解が後から出来たのと
Bootstrapという汎用css/jsテンプレート(?)の逆引きが必要であるということに落ち着いた。
Author Profile
スターフィールド編集部
SHARE