Blog

エンジニアが挑戦するデザインのデ

2020.08.07Cat:開発

はじめに

普段コーディングやデザインはクリエイティブ頼り
全て出来てなんぼ、ということでまずは一人でダッシュボードを作るところまでやってみました。
もちろん開発と並行しての実践です。

筆者のスキル的には
・Bootstrapって聞いたことはあるけど説明出来ない
・htmlの基本的なタグは判るけど違いを使い分け出来ない
・jsは依存性とか考えなければ書けるけど大嫌い
・cssはちょこっとなら書けるが汎用的なものは書けない

以下はRailsでマテリアルデザインを導入してみたダッシュボード制作の過程です。

開発の流れ

まず目標と構成決め。
“Material Design Rails テンプレート”
などで検索すると有料なものから無料なものまで幾つかヒットする。

幾つかあるサイトの中で以下に出会う
https://bagelee.com/design/bootstrap/material-dashboard-github-trending/

Railsを考慮はしていないが最低限必要な読み込み設定に従って作れそう。

次に開発の進め方を決める。
・最初に全て把握してバックエンドと一気に実装する
・バックエンドを先に構築してしまい後から全てviewを乗せる
・仕組みを作ったらそれ用のviewを作ったり行ったり来たり。

今回は3つ目が導入だし試行錯誤しやすいだろうということで決め。

フレーム作り

いつもの手順でRailsのプロジェクト作成。
以下のリポジトリを適当なところにcloneする

上述のサイトに従って
material-dashboard の付くファイルを
app/assets/stylesheets に配置する。

次に
app/assets/stylesheets/application.css に以下を追記

同様に
app/assets/javascripts/ に plugins, core ディレクトリと
material-dashboard と付くファイルを配置。

app/assets/javascripts/application.js に以下を追記

これでインポートすべきファイル群の準備完了。
このapplicationを各layoutファイルで更に読み込めばviewの調整だけをすれば良い。(だが足りなかった。後述)

レイアウト作り

今回は
app/views/layouts/admins.html.slim
として管理画面のレイアウトを定義した。

最初は「まんまデモサイトのHTMLをコピー」して動作するかどうかは置いといて
「見た目がそのままになるか」を確認する。自分が意図したものを得られるかの確認大事。

以下のようにレイアウト内でapplication.js, cssを読み込み

いざ表示するとMaterial Iconsが表示されない・・・。
意図したものとそうでないものが混ざって若干の安心感を得つつ調べると、、
“material icons 表示されない”
でgoogleのURLを参照する必要があるのを確認出来る。

が、今回は外部参照したくないというテーマがあったので
“material icons ローカル Rails”
で調べると何やらGemで管理しているものを組み込める様子。
https://qiita.com/takish/items/9b65f1dcf36cc242357f

ここに記載されている通り素直に Gemfile に以下を追記

app/assets/stylesheets/application.css に以下を追記

これでマテリアルなアイコンが表示されました!

ダッシュボード組み込み

表示されるための index.html.twig は実は(最初は)空で良い。

先に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

OBA
ランニング、音楽、ヲタトーク、バレーボール好きプログラマーです。 数学と英語、台湾華語を勉強中です。 DeepLearning始めました!
» 投稿一覧

越境ECの最新情報

人気の記事

越境EC関連の記事

月から探す

ページTOPへ