2018年4月4日

デザイン

良い感じの管理画面を作れるtablerを試してみた

目次

  1. はじめに
  2. 初期設定
  3. 使い方
  4. まとめ

はじめに

今回はGitHub Trendsにあがってきたリポジトリのご紹介です。

Webサービス開発において、管理画面が必要になるケースはよくあります。
ユーザーを追加できたり、また削除できたり、そしてダッシュボードとして必要な情報をグラフで表示したりといった機能は、管理画面でよく見られます。

管理画面のデザインについても、AdminLTEなどのテンプレートや、Rubyを使用している場合にはActive Adminなどを使うケースも多いのではないでしょうか。

今回はTwitter Bootstrap 4を使用した管理画面で使えるUIキットのtablerをご紹介します。

こんな良い感じのダッシュボードを無料で構築することができます。
 2018-04-04 0.54.10.png (123.6 kB)

こんなギャラリーページも用意されています。
 2018-04-04 13.13.55.png (2.0 MB)

 

また、様々なテンプレートファイルが用意されているのも魅力の1つです。
例えばこんな404ページやログインページなども簡単に作れます。
 2018-04-04 13.17.32.png (64.3 kB)

 2018-04-04 13.18.24.png (74.4 kB)

初期設定

まずtablerをローカルPCにcloneします。
git clone https://github.com/tabler/tabler.git

次にnpmパッケージをインストールします。
npm install

そしてRubyによるパッケージ管理の為、Gemfileをインストールします。
gem install bundler
bundle install

POINT!!

Gemfileの中ではjekyll関連のgemが設定されています。jekyllはマークダウン形式などで静的なWebサイトが作れるRubyによるライブラリで、tablerでも使われているのでGemを有効にする必要があります。 詳しくは公式サイトをご覧ください。

今回はRubyの2.3系では動かず、2.4.1までバージョンを上げることで動作しました。
最後に npm run serve でサーバを動かすことができます。

問題なくサーバが立ち上がれば、こちらから確認することができます。
http://localhost:4000

使い方

ディレクトリ構成

ディレクトリ構成としては、このようになっています。

 ├ dist/
 ├ node_modules/
 ├ src/
 ├ Gemfile
 ├ package.json
 etc...

ではいくつかディレクトリ、主なファイルについて解説していきます。

_site

こちらは後ほど解説するsrcディレクトリ配下のファイルがjekyllによる変換が行われ、HTMLファイルになったものが格納されています。
このファイルを上書きすることで、変更が反映されますが、基本は大元であるsrcディレクトリ配下のファイルを変更していくほうが良いでしょう。

node_modules

その名の通り、node moduleたちが入っています。
package.jsonで指定したライブラリがnpm installでインストールされます。

src

jekyll記法で書かれているソースファイルです。
このファイルを元にHTML、CSS、JavaScript変換され、公開用ディレクトリ(_site)に反映されます。

例えばsrc/index.htmlのファイルを見てみるとこのようになっています。

---
layout: default
title: Homepage
menu: index
---

jekyll にはレイアウトファイルを設定することができ、layoutで使用するレイアウトを指定します。
レイアウトファイルを追加するには、_layoutsディレクトリに配置すれば使用することができます。

<div class="container">

    {% include page-title.html title="Dashboard" %}

    <div class="row row-cards">

        <div class="col-6 col-sm-4 col-lg-2">
            {% include cards/stats-1.html number=43 title="New Tickets" percentage=6 %}
        </div>
        <div class="col-6 col-sm-4 col-lg-2">
            {% include cards/stats-1.html number=17 title="Closed Today" percentage=-3 %}
        </div>

{% include ~ %} とすることで部分テンプレートファイルを読み込むことができます。
jekyllでは静的なHTMLを生成することができますが、このようにWebアプリケーションフレームワークのような汎用性の高いコードにすることができます。

その他設定ファイル

Gemfile

RubyのGemfileを指定しています。
ここにかかれたGem(ライブラリ)はbundle installコマンドでインストール可能です。

package.json

node moduleを指定しています。
ここにかかれたライブラリはnpm installコマンドでインストール可能です。

まとめ

tablerはjekyllを使用することで、静的なサイトながらも拡張性の高いコードを書くことが可能です。
またすっきりとしていて見やすいデザインの為、簡単な管理画面を作るには良いかもしれません。
少しjekyll記法には慣れが必要ですが、ぜひ公式リファレンスも日本語化されていますしご覧になってみてください。
公式リファレンス

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP