エンジニアの卵の成長日記

https://blog.toru-takagi.dev/profile/

AdminLTEってのを触ってみたよ

はじめに

今日はネイティブアプリを管理するためのWeb管理画面の機能追加がお仕事

まずは前回構築したLaradockを起動しよう!

$ docker-compose up -d apache2 postgres

エラーが出た

ERROR: Couldn't connect to Docker daemon. You might need to start Docker for Mac.


Docker for Macってインストールしたらパソコン起動時に勝手に起動するのかと思ってた
自動起動の設定があると思うけど、家に帰ってから調べることにしよう


Laradockの起動もできたし、URLにアクセスしたらちゃんと表示される
これで準備完了!
けど、今回のシステムの情報を全く知らないからドキュメントを読んでいこう


社員さん曰く、できるだけパーツ化してやって欲しいとのこと
見た目はAdminLTEを使っているらしい(初めて聞いた)
表が多いためうまくパーツ化できていないらしい
(現在はテーブルで実装)
テーブルはあまり好きじゃないからFlexかGrid Layoutを使いたいところ
(前勉強したけど、その後使ってないから使ってみたい笑)

kurowasi2525.hatenablog.com





ドキュメント見たり、ソースコード見たりしたけど、正直どこまでやればいいのかわからない。。。
画面レイアウトもふわっとしてるし、ソースコードはAdminLTEのパーツをコピペして表の中身が直書き
(完成品はPostgresからデータを取ってくるもの)


ようわからんから、まずはAdminLTEについて勉強しよう


AdminLTE

  • Bootstrap3をベースにした、管理画面等のテンプレートテーマ
  • MITライセンス

簡単に調べて使って見た結果、誰でもコピペでかっこいいデザインのサイト作れますよっていう
いつものやつですね


www.casleyconsulting.co.jp




自分でやったやり方は
ドキュメントを読んで、大まかな形を作る
(header, footer, sidebar)←ここら辺は基本のページみたいのがあるから、それをコピペで十分

AdminLTE - Installation

contentのところに以下のページの使いたいものの構造を見ながらコピペ
後はClassを書き換えたり、たまに自分で作ったClassを適応させる感じでした

AdminLTE 2 | Dashboard



使い方や導入方法は調べたらたくさん出てくるので、調べてください!笑

ほんの少しだけど、今日数ページ作成してみて思ったのは、
表とかフォームとかを作るだけなら、他のでよさそう
わざわざ勉強して導入するほど素晴らしいものだとは思えなった

CSSをある程度勉強している人なら、わざわざこれを使うほどでもないってのが僕の感想
CSSの勉強が面倒で、このサイトのパーツを丸々でいいから使いたいっていうならいいと思う

今回のバイトでは使わなかったが、ウィジェットやタイムラインなどを使うなら、勉強以上の効果を得られるんじゃないかな
headerやsidebarもデフォルトがあるから便利かな