自分だけのクイズ作成 - Quipha公開中

【Web】デザインは任せろAdminLTE!

プログラミング
スポンサーリンク

はじめに

皆さん、Webアプリケーションの画面を作るとき、イチから作成していますでしょうか。

レスポンシブデザイン対応など、

イチから作ると結構面倒ですよね?

そんな時は、出来合いのテンプレートを使って、サクッとアプリケーションを作成しましょう!
オススメは「AdminLTE」です。

AdminLTE 3 | Dashboard

デモページを見れば分かりますが、デザインがとてもいい感じです。✨
管理画面とかにピッタリですね。
デザインに個性を求めない限り、多くの場合これで事足りると思います。

AdminLTEデモ

Quipha

個人開発ですがQuiphaというサービスを開発しました。
Webアプリケーションであり、Laravelで作成しました。デザインはAdminLTEを使用しました。
簡単に管理画面のようなサイトを作れるのが便利ですね!

良かったら、会員登録して動作を試してみて下さい。

AdminLTEについて

簡単に、AdminLTEの特徴を見てみましょう。

ライセンス

MITライセンスで、オープンソースです。
ですのでソースコードも公開されており、安心して使用できますね。

GitHub - ColorlibHQ/AdminLTE: AdminLTE - Free admin dashboard template based on Bootstrap 4
AdminLTE - Free admin dashboard template based on Bootstrap 4 - GitHub - ColorlibHQ/AdminLTE: AdminLTE - Free admin dashboard template based on Bootstrap 4

レスポンシブデザイン対応

AdminLTEはレスポンシブデザインに対応しており、閲覧する端末によってレイアウトが最適化されます。

例えば、スマホでアクセスした場合はこんな感じです。

タブレットでアクセスした場合はこんな感じです。

高いカスタマイズ性

AdminLTEはカスタマイズ性が高いです。
デモサイトでは、自分の好みの画面を簡単に確認できます。

以下の右上の①ボタンをクリックします。
②のメニューでカスタマイズできます。

設定を選ぶだけで、色合いや挙動などを変更し、その場で確認できます。
おおよそ自分が作成したいイメージを掴めると思います。

デザイン例

豊富な例

デモページには豊富な例があり、また標準でパーツが充実しています。
これらを使用することで、デザインの統一感も出せますし、自分でデザインを作らなくても済むので便利です。

例えば以下のようなボックスの例です。

プラグインの同梱

よく使いそうなプラグインは既に同梱、または使用例が示されています。
例えばチャートです。

カレンダーもあります。(FullCalendarですね)

もちろん、こういった拡張は個別に導入することもできるのですが、相性だったり他のプラグインの影響で動かない・・なんてこともよくありますので、最初からデモとして動作確認されているのはありがたいですね。🙂

スポンサーリンク

Bootstrapについて

AdminLTEのベースはBootstrap 4です。
ですので、もちろんグリッドシステムを使うことができ、レイアウトの調整が非常に楽です。

余談ですが、Bootstrapの最新は2021/02の現時点で5です。(beta2)

はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

Bootstrapの4と5の大きい違いとして、脱jQueryです。
つまり、現状のAdminLTEでは、jQueryに依存しております。
(それが良いか悪いかはさておき)

AdminLTEの方でもissueが作成されており、いずれはBootstrap5へと移行されることでしょう。

upgrade to bootstrap 5 · Issue #2855 · ColorlibHQ/AdminLTE
will be upgraded in AdminLTE v4 after AdminLTE v3.1.0 release

依存・プラグインについて

各プラグインや依存しているものは以下にまとまっています。

Dependencies & Plugins
AdminLTE v3.1 Documentation

ダウンロード

早速ダウンロードしてみましょう。
GitHubのリリースを開きます。

Releases · ColorlibHQ/AdminLTE
AdminLTE - Free admin dashboard template based on Bootstrap 4 - ColorlibHQ/AdminLTE

現時点では、3.1.0でした。

下の方にあるAssetsより、ソースコードをダウンロードします。

zipファイルを解凍しましょう。
index.htmlを開いてみます。

デモ画面が表示されました。
このHTMLファイルを参考に、デザインを組めますね。

他にも、NPMやYarn、Composerでもダウンロードができます。

Introduction
AdminLTE v3.1 Documentation

さいごに

とてもかっこいいテーマなので、ぜひ活用してみましょう。

Laravelプロジェクトで導入する手順も、よかったら参考にしてください。

コメント

タイトルとURLをコピーしました