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

（黒っぽいデザインにしたいときは…）

Bootswatchから，Darklyテーマのbootstrap.min.cssをダウンロードする．
publicディレクトリを作り，public/bootstrap.min.cssに配置する．
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)には「キオスクモード」が用意されており，起動時点から全画面で表示させることも出来ます．気になる方は調べてみてください．

今回はここまで．

にゃみかんてっくろぐ

猫か百合を見守る壁になりたい