静的サイトジェネレータといわれているものの中の一つです
日本語の公式があるのもありがたいですね
今回はダーツの自宅練習用のスコア管理のページをmiddlemanで作ってみます
下記ダッシュボードテンプレートを使って見た目にあまり時間とらないようにしました
インストール
テンプレートエンジンは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時に変換してくれる
- user.json
{ "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
結果
ゲームロジックとかはrubyの勉強がてらCLIを書きました -> darts(github)
これでダーツの自宅練習でのモチベーションがあがるかな
ちなみに肝心のスコアは気持ち右肩上がりかな?くらいですw