管理画面ダッシュボードを作成したいなら！「Tabler」

概要

Web アプリを開発したり何かのサービスを開発した際に、サービスを管理するためのダッシュボードなどを利用して視覚的にすぐに情報を把握したいことはないでしょうか？

ただ、管理画面はエンドユーザーに直接触ってもらうものではないですし、関係者のみが最低限の情報だけを把握できれば良いと考え、UI/UX がおろそかにしてしまうことも多々あると思います。

自分はそのような考えの持ち主なので、開発したはいいものの管理に苦労してしまうということが多々あります。。

そこで管理画面ダッシュボードを素早く簡単に作成することができる OSS はないかなと GitHub を探していたところ、見事この悩みを解決してくれる OSS を見つけたのでご紹介します。

今回ご紹介する OSS は、きれいでレスポンシブな管理画面ダッシュボードを簡単に作成することができる「Tabler」になります。

「Tabler」はすべてのブラウザーと互換性があり、かつ完全レスポンシブということなので、モダンでユーザーが気に入りそうなインターフェースを提供してくれていますし、作成することができます。

デモ画面が以下で紹介されていますので、参考までにどうぞ。

preview.tabler.io

また、コンポーネントは一貫性が保たれているため、デザインも崩れることはないと謳われています。

それでは簡単に「Tabler」についての特徴についてみていきましょう。

特徴

• レスポンシブ UI
  • モバイル画面、タブレット画面、デスクトップディスプレイ画面すべてに対してレスポンシブ UI が適用
• クロスブラウザー
  • 最新の Chrome、FireFox+、Safari、Opera、Edge、およびモバイルブラザー上で完全に動作
• HTML5 & CSS3
  • HTML5 や CSS3 などの最新の Web 技術が利用されており、人目を集める CSS3 アニメションも利用可能
• 美しいコード
  • Bootstrap ガイドラインに則った開発方針
• デモページ
  • 様々なコンポーネントを使用した 20 以上の個別ページがあり、自由にカスタマイズすることが可能

利用手順

「Tabler」を利用するには OS ごとに対応が必要となりますので、必要に応じて対応してください。

事前準備

1. [Node.js[(https://nodejs.org/download/) をインストール

2. GitHub リポジトリから本ソースをクローン

   git clone https://github.com/tabler/tabler.git
   

3. クローンしたディレクトリへ移動し、Node モジュール群をインストール

   cd tabler
   npm install
   

4. Ruby をインストール、推奨バージョンは 2.7.6

5. 以下のコマンドより Bundler インストールし、その後必要な Bundle モジュールをインストール

   gem install bundler
   bundle install
   

OSX の場合

1. 以下のコマンドより、必要な Node.js モジュールをインストール

   npm install
   

2. 以下のコマンドより、Ruby をインストール

   ‘‘‘bash brew install ruby @2.7 ```

3. 以下のコマンドより、Bundler をインストール

   gem install bundler
   

4. 以下のコマンドより、必要な Bundler モジュールをインストール

   bundle install
   

   • もし bundle install でエラーが起きた場合は、以下のコマンドを試してみること

        sudo rm -rf /Library/Developer/CommandLineTools
        sudo xcode-select --install
     

5. 上記完了後、以下のコマンドで動作確認

   npm run start
   

Windows の場合

1. Git を C:\Program Files\git\bin ディレクトリにインストールし、以下のコマンドを実行

   npm config set script-shell  "C:\\Program Files\\git\\bin\\bash.exe"
   

2. Ruby＋DevKit をインストール

3. Jekyll on Windows ドキュメントを参考に Jekyll を実行

4. 「#-事前準備」の 1 ～ 5 の手順を実行し、動作確認

ローカル環境でビルドする場合

1. Github からソースコードをクローン後、プロジェクトルートへ移動

   cd tabler
   

2. 以下のコマンドより、必要なモジュール群をインストール

   npm install
   bundle install
   

3. 以下のコマンドより、アプリケーションを起動

   npm run start-plugins
   

4. 起動後、ブラウザから http://localhost:3000 へアクセス

正常に動作すれば、以下のような画面が表示されます

使用感

私も実際に Github からソースをクローンし、動かしてみました。

画面サイズを小さくしたり、モバイル端末表示など試してみましたが、レスポンシブ対応ということで自動的に UI が調整され、崩れなく綺麗に表示されていました。

また、ダッシュボードの出来も素晴らしく、マウスオーバーなどで項目情報がポップアップされたりするので、非常に使いやすく視覚的にもわかりやすいダッシュボードだなと思いました。

このような UI を開発者個人で自由にカスタマイズしながら作成することができるというのはとても素晴らしいですね！！

まとめ

今回は、きれいでレスポンシブな管理画面ダッシュボードを簡単に作成することができる「Tabler」をご紹介しました。

ソースコードも公開されていますので、ぜひそちらを参考に独自の管理画面ダッシュボードを作成されてみてはいかがでしょうか。

また、「Tabler」は npm でも配布されています。

npm install --save @tabler/core

「Tabler」を利用して一から管理画面などを作成する際には便利ですね。

綺麗でレスポンシブな UI、かつ管理画面ダッシュボードを作成したいと考えている開発者の方は、ぜひ一度こちらの「Tabler」を検討されてみてはいかがでしょうか？

ライセンス

MIT License

リンク

preview.tabler.io

github.com