2018年4月15日日曜日

Sinatra + bulma で簡単ダッシュボード作成

概要
環境
テンプレートファイルの作成
- 変数埋め込み
- bulma に必要なファイルの設定
コントローラ側の実装
動作確認
ツリー
最後に
参考サイト

概要

bulma はモダンな WebUI がデザインできる CSS フレームワークです
今回は Sinatra と組み合わせて動的なダッシュボード UI を作成してみます

環境

macOS 10.13.2
Ruby 2.4.1p111
sinatra 2.0.1
bulma 0.6.2

テンプレートファイルの作成

bulma には様々なテンプレートが準備されておりその中にダッシュボード用のテンプレートがあります
これを Sinatra で動くように移植していきます

mkdir views
cd views
wget 'https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/admin.html'
mv admin.html admin.erb

テンプレート用のディレクトリを作成しここに用意されているテンプレートファイルを配置します
更に Ruby から参照できるように拡張子を .erb に変更します

変数埋め込み

とりあえず今回はタイトルの部分を変数にしてみたいと思います

vim admin.erb

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Admin - Free Bulma template</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
  <!-- Bulma Version 0.6.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" integrity="sha256-HEtF7HLJZSC3Le1HcsWbz1hDYFPZCqDhZa9QsCgVUdw=" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="../css/admin.css">
</head>
<body>

  <!-- START NAV -->
  <nav class="navbar is-white">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item brand-text" href="../">
          <%= @title %> 
        </a>

長いので先頭から対象部分まで表示しています
下の方でタイトル部分を <%= @title %> に変更しています
この変数を Sinatra アプリでいろいろと変更してみたいと思います

bulma に必要なファイルの設定

css と js が必要なものがあるので配置します

mkdir -p public/css
mkdir -p public/js
cd public/css
wget 'https://github.com/dansup/bulma-templates/raw/master/css/admin.css'
cd public/js
wget 'https://github.com/dansup/bulma-templates/raw/master/js/bulma.js'

これらもすでに用意されているテンプレートから取得します

コントローラ側の実装

先ほど作成した .erb のテンプレートファイルに埋め込んだ変数の値をコントローラ側で設定します

vim app.rb

require 'sinatra'

get '/' do
  @title = ['bulma admin', 'ぶるまあどみん', '管理画面'].sample
  erb :admin
end

ランダムでタイトル用の値を設定しているだけです
あとは erb メソッドを使って先ほどの admin.html をシンボルで参照します

動作確認

これで localhost:4567 にアクセスすると以下のように表示されると思います

アクセスするごとに左上のタイトル部分が変化するのがわかると思います

今回はタイトル部分しか弄りませんでしたが例えば数字の部分などは MySQL から取得したものを表示するなどの処理を app.rb に書き足してあげれば更に動的な値を表示してあげることもできます

ツリー

今回の成果物のツリー構造です

$ tree -I "vendor" .
.
├── Gemfile
├── Gemfile.lock
├── app.rb
├── public
│   ├── css
│   │   └── admin.css
│   └── js
│       └── bulma.js
└── views
    └── admin.erb

4 directories, 6 files

最後に

Sinatra + bulma で超簡単にダッシュボードを実装してみました

nodejs のように npm でインストールしてやる感じではなく静的ファイルをダウンロードしてやるので直感的に開発はできるかなと思います
あとは CSS や JS をカスタマイズすれば更に動的なページが作れると思います

自分はこのやり方であとは jQuery を使って開発しています
Ruby でというか Sinatra で WebUI を作る場合はどんな感じで進めるのが良いのかベストプラクティスを知りたいです、、、

hawksnowlog