自分だけのクイズ作成 - Quipha公開中
スポンサーリンク
スポンサーリンク

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

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

はじめに

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

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

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

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

AdminLTE 3 | Dashboard

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

AdminLTEデモ

LaravelでCRUDアプリを作成する際に、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 で始めましょう。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プロジェクトで導入する手順も、よかったら参考にしてください。

他にも私のブログで、プログラミングについて解説している記事がありますのでご覧ください。

\オススメ/

コメント