にゃみかんてっくろぐ

猫になりたい

Raspberry Piでダッシュボードを作る(3) -デザイン-

f:id:no_clock:20171016214958j:plain

Raspberry Piとミニディスプレイ,各種センサを使ってダッシュボードを作ります.


今回のゴール

  • デザインを決める.

デザイン

雰囲気や「それっぽさ」は大事です.真っ白では味気ないので,見栄えをよくしましょう.

ここでもフレームワークが登場します.Bootstrapです.CDNで提供されており,カスタマイズせず使う場合はインストール不要です.

まずは,app.rbに手を入れます.

#!/usr/bin/env ruby

require 'sinatra'
get '/' do
  erb :index  # この行を書き換え
end

前回'こんにちは'とした箇所をerb :indexに変更しました.簡単に言えば『views/index.erbというファイルをERBテンプレートエンジンで表示して』という記述です.もっと詳しく知りたい方は,GitHub: sinatra/sinatra"Views / Templates"セクション,あるいはその日本語訳をご覧ください.

というわけで,viewsディレクトリを作ってviews/index.erbファイルを作成します.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <meta http-equiv="refresh" content="600">
  </head>
  
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- 左列 -->
        <div class="col">
          <div class="card">
            <h4 class="card-header">タイトル1</h4>
            <div class="card-body">
              <p class="card-text">本文1</p>
            </div>
          </div>
          
          <div class="card">
            <h4 class="card-header text-white bg-success">タイトル2</h4>
            <div class="card-body">
              <p class="card-text">本文2</p>
            </div>
          </div>
        </div>
        
        <!-- 右列 -->
        <div class="col">
          <div class="card">
            <h4 class="card-header text-white bg-danger">タイトル3</h4>
            <div class="card-body">
              <p class="card-text">本文3</p>
            </div>
          </div>
          
          <div class="card text-white bg-dark">
            <h4 class="card-header">タイトル4</h4>
            <div class="card-body">
              <p class="card-text">本文4</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

長くなりました.まずは,この状態で表示させてみましょう.

表示してみる

(既にapp.rbを起動済みの場合は,一度Ctrl+Cキーで停止させておく.)
$ ./app.rb

前回と同じく http://localhost:4567/にアクセスします.表示されましたか?

f:id:no_clock:20171021211100p:plain

(黒っぽいデザインにしたいときは…)

  1. Bootswatchから,Darklyテーマのbootstrap.min.cssをダウンロードする.
  2. publicディレクトリを作り,public/bootstrap.min.cssに配置する.
  3. views/index.erbの記述を一部変更して,リフレッシュする.
    <link rel="stylesheet" href="bootstrap.min.css">

f:id:no_clock:20171021211917p:plain

ちょっと説明

さて,index.erbの説明を少しします.コードを見れば分かる,という方は今回はここまでです.

Bootstrapのデザイン

グリッドシステム … Bootstrapでは,横を12等分したGrid systemでデザインします.横2列作ると,12等分されたグリッドが6個ずつ自動で割り当てられます.手動で個数を指定したり,スマートフォンやPCなど画面の大きさによって異なる個数を指定する,といったことも可能です.

カード … Bootstrapにはデザインのための様々なコンポーネントがありますが,ここではCardを使いました.スクリーンショットで色の異なるカードが登場しているように,class属性の指定を変えることで背景・文字色をカスタマイズすることも可能です(Card: Card styles

その他の表示スタイル

更新頻度 … 古典的なmetaタグを使い,ページは600秒(10分)ごとに更新されるようにしています.

全画面表示,キオスクモード … F11キーを押して全画面表示にしましょう.ダッシュボードっぽさが増します.なお,Chromium(Chrome)には「キオスクモード」が用意されており,起動時点から全画面で表示させることも出来ます.気になる方は調べてみてください.


今回はここまで.