Middlemanの諸々設定済み空プロジェクト。
以下の手順を上から順に実行すればOK。
- Ruby
- ダウンロードページからインストーラをダウンロードして起動
- Ruby DevKit
- ダウンロードページからインストーラをダウンロードして起動
- インストーラを起動して適当なフォルダを指定してファイル展開
- ファイル展開したフォルダにターミナルで移動(
cd dirpath
) - ターミナルで
ruby dk.rb init
- テキストエディタで
config.yml
を開き、Rubyディレクトリのパス指定が正しいか確認(違っていれば修正) - ターミナルで
ruby dk.rb install
- Bundler(gem)
- ターミナルで
gem install bundler
- ターミナルで
- Node.js
- ダウンロードページからインストーラをダウンロードして起動
- Bower(npm)
- ターミナルで
npm install -g bower
- ターミナルで
- Grunt(npm)
- ターミナルで
npm install -g grunt-cli
- ターミナルで
- CasperJS(npm)
- ターミナルで
npm install -g casperjs
- ターミナルで
- PhantomJS(npm)
- ターミナルで
npm install -g phantomjs
- ターミナルで
init.bat
をダブルクリックなどして実行する。- BowerやBundler、NPMのコンポーネントがプロジェクトフォルダ以下にまとめてインストールされる。
- 手動で依存アセットをインストールする
init.bat
の中に書いているコマンドを上から順に手動で実行
ワークフロー
wercker.yml
にWercker 用のビルドタスクを予め記述しているので、すぐに登録できる。
Capistrano のビルドタスクも用意しているので、環境に合わせて修正すれば、フックでテストとデプロイを自動実行させられるようになる。
KSSを使ってスタイルガイドを作れる。
CasperJSを使ってビューのE2Eテストが出来る。
Mocha + Chai + Sinon + Istanbul で、JSの単体テストが出来る。
カバレッジはsource/tests/coverage/mocha
に出力される。
システム
ソーシャルのシェア数をRubyスクリプト内で取得するやつ。
layout.slimにて、未設定の時と、末尾に共通して加える文言を設定できるようにしている。
layout.slimには他にも、スタイルシートやスクリプト、パーシャルなどほぼ毎回使うアセットの呼び出しを宣言してある。
フロントアセット
Foundationが使える。fastclickやコンポーネントなどの読み込みを既にまとめて記述しているので、すぐに使い始めることができる。
スタイルシートのファイル構成はSMACSSを意識した形を取っている。見れば大体わかる。
###Backbone.js
JSでモデルが使えるようになる。クラスの代わりに使える。
###lodash
Underscoreをクールにしたやつ。
ページ内リンクをスムーススクロールさせるやつ。
アイコンフォント。
デフォルトでも日本語の約者をカーニングしてくれるやつ。
がっつり各文字の組み合わせごとに字間を調整することも出来る。
デフォルトでは、layout.slimにて、p要素のみカーニングするように設定している。
スクロールしてもサイドバーを画面に固定して表示し続けるやつ。
いわゆるLightbox的なダイアログ。
動画もスライダーもiframeもなんでも表示できる。レスポンシブ対応可。
慣性スクロール + スクロールバーのデザイン変更。
おしゃれなアラート。
JSレスで使えるCSSアニメーション。