notebook

都内でWEB系エンジニアやってます。

middlemanを使ってみる

middleman

静的サイトジェネレータといわれているものの中の一つです

日本語の公式があるのもありがたいですね

今回はダーツの自宅練習用のスコア管理のページをmiddlemanで作ってみます

下記ダッシュボードテンプレートを使って見た目にあまり時間とらないようにしました

Gentellela

インストール

テンプレートエンジンはslimを使ってみたいのでmiddleman-slimもインストール

gem install middleman
gem install middleman-slim

プロジェクトの初期化

-T でgitリポジトリにあるテンプレートを指定できる

slimのテンプレートがあるようなのでそれを指定する

middleman init . -T yterajima/middleman-slim

サーバの起動

middleman server

http://localhsot:4567/へアクセスするとデフォルトの画面が表示されます

編集

部分テンプレート

rubyのテンプレートではpartialを使って部分テンプレートを読み込むことが出来るので良く使うテンプレートをひとつのファイルでまとめて使いまわす

本日のプレイデータと今日以前のプレイデータとの差分を表示するところが多々あったのでまとめた

  • _diff.html.slim
- diff = new - old
- if diff < 0
  i.red
    = to_f2( diff )
- else
  i.blue
    | +
    = to_f2( diff )
  • 読み込み部分
= partial 'diff', locals: { new: t_stats, old: y_stats }

ディレクトリインデックス

たとえば、http://localhost:4567/countupへアクセスすると

./countup/index.htmlの内容が表示されるようになる、それだけ

  • config.rb
activate :directory_indexes

development,build両方指定した

asset_host

assetの呼び出しパスに指定した文字列を追加してくれる

gh-pagesのプロジェクトページなどで運用する場合や、同じドメインだけどパスで複数プロジェクトをホストする場合などに使える

activate :asset_host, :host => "/darts"

この設定をすることで/javascripts/test.jsで読み込んでいたjsがビルドした静的ファイル上では/darts/javascripts/test.jsと呼ばれるようになる

ここら辺しっかりサポートしてくれるのは大変ありがたいと思います

github-pagesで色々やろうとすると必ずはまるところではあると思うので。。。

データの扱い

dataディレクトリ以下にymlやjsonを置くことでそのデータをbuild時に変換してくれる

{
  "hoge": {
    "name": "hoge",
    "age": 20
  },
  "fuga": {
    "name": "fuga",
    "age": 21
  }
}

data.ファイル名で参照することができる

あとは配列、ハッシュを扱うのと同様に扱うことができる

# 20
= data.user["hoge"]["age"]

とても便利、データや設定などを外だしできるというのはメンテも楽になりそう

ヘルパー関数

テンプレート中でよく使う処理などをまとめる

  • helpers/darts_helpers.rb
require 'bigdecimal/util'
require 'bigdecimal'
module FormatFloat
  def to_f2(n)
    n.to_s.to_d.floor(2).to_f
  end
end
  • config.rb
###
# Helpers
###
require 'helpers/darts_helpers'
helpers FormatFloat

定義した関数が使えるようになる

# 0.33
to_f2(1/3.to_f)

今回は少数第二位までを表示するためのヘルパーメソッドを作った

to_fで桁数が指定できなかったため、一度decimalに変換してから出力するようにした

ちょっと理由はわからないがひとつのモジュールに一つの関数しか定義できないようなので、ヘルパー1つにつき1つモジュールを定義した

ビルド

色々作ったらhtmlページをビルドします、コマンド打つだけですね

middleman build

buildディレクトリに展開されます

buildされたファイルたちをgh-pagesなりS3なりに置けばあっという間にサイトが公開できます

公開

今回はgh-pagesのプロジェクトページに公開しようと思ったため下記二つを試してみました

二つとも試してみたもののmiddleman-deployの方は実行するまでにいけなかったのでgh-pagesの方を使用します

middleman-gh-pages

Rakefileを作ってあげるだけ

各種ENVに関してはgithubに載っている通り

require 'middleman-gh-pages'
ENV["BRANCH_NAME"] = "gh-pages"
ENV["ALLOW_DIRTY"] = "true"
  • config.rb
+ require 'middleman-gh-pages'
rake build
rake publish

github-pagesのプロジェクトページだと/dartsがトップとなるためassetsの読み込みパスが変わる

config.rbでasset_hostを指定してあげれば通常ならOKのはず

  • config.rb
+ activate :asset_host, :host => "/darts"

が、今回はgentellelaで使用しているjs内でのファイル読み込みがうまくいってないようでグラフが表示できない状態が解決できなかった

結局あまり時間とりたくなかったので独自ドメインとってそっちで運用することにしたw

ちなみに独自ドメインの割り当て方法は「自分のGitHub Pagesと独自ドメインの設定方法」を参考にした

独自ドメインAWSのRoute53で取得してさくっと設定(Aレコードの設定)

ドメインの設定をCNAMEに記載してpublishすればOK

echo darts.swfz.io > source/CNAME
rake publish

結果

darts

ゲームロジックとかはrubyの勉強がてらCLIを書きました -> darts(github)

これでダーツの自宅練習でのモチベーションがあがるかな

ちなみに肝心のスコアは気持ち右肩上がりかな?くらいですw