自分用のmiddleman-boxをgithubで公開してみた
前の記事に続いて、Middlemanを自分用にカスタマイズして、
githubのpublic repositoryに置きました。
https://github.com/thamamur/middleman-box
今までCompassを多用していたこともあって、
自分のCompassの使い方に最適化されていますが、
今後jsなどいろんなものを使うようになったら、
どんどんアップデートしていこうと思います。
こういうスタンダードを築いていくことで、
どんどんコストダウンしていきたい。
slimをmiddlemanで自動リロード
もっとHTMLを簡略化＆高速で書きたい、と思っているときに
slimという中間メタ言語があることを知りました。
簡単に例を示すと、
このようにslimで書いたものが
| --- title: Welcome to Middleman ---
.welcome
h1 Middleman is Watching
= link_to "Read Online Documentation", "http://middlemanapp.com/"
h2 test
h3 aiueo
コンパイルされて、
--- title: Welcome to Middleman ---
<div class="welcome">
<h1>Middleman is Watching</h1>
<a href="http://middlemanapp.com/">Read Online Documentation</a> <h2> test</h2>
<h3>aiueo</h3>
</div>
こんな感じで出力されます。
ただ、いちいちコンパイルするのは面倒くさいので、
middlemanという静的サイトジェネレータのlivereloadを使えるよう
セットアップしてみました。
というわけで、参考にした記事はこちらです。
■ middlemanをセットアップ
■ middlemanにslimを導入
Middleman + Slim + Herokuでブログをつくりました - ROCHAS
今は実際に運用でも使えるように、
カスタムテンプレートを作っています。
■ カスタムテンプレート
Middleman の自分用テンプレートを簡単に作る方法 | e2esound.com業務日誌
慣れるまでが大変そうですが、慣れればより高速に
コーディングできるような気がしています。
追記（2014/2/19）
カスタムテンプレートを作るときに、注意として書かれていることは
忘れそうなので、ここにメモ。
- ~/.middleman/sample ディレクトリの中身を ごっそり 取ってくるので, dotfiles も対象になる
- config.rb も忘れずに作る
- Gemfile は勝手に作られる (その他にも場合によって勝手に作られるものがある ex. config.ru)
- $ middleman init PROJECT --images-dir のようなオプションは効かない
- 中身が空のディレクトリはコピーされない模様
ピクセルパーフェクトで合わせるために、putondesign.
ピクセルパーフェクトで合わせたいときに、
このchromeエクステンションは使えるかもしれません。
https://chrome.google.com/webstore/detail/putondesign/bcbahomilgebmfonlfoaefigkpgcbepn
chrome canaryでしか動作しませんでしたが、
・どのclassをどれほど動かしたかわかる http://cl.ly/image/1x3Q2X1Z1x09
・retina modeもある http://cl.ly/image/1d47312R3C0S
のはいいかなーと思いました。
開発者のブログはこちら。
http://rrlrlrll.org/update_putondesign/
しかし、makiappが一番使いやすそうなのですが、
なぜか画像をアップロードしたまま使えないという。。涙
http://www.makiapp.com/
Google Mapをカスタマイズ
google mapをカスタマイズするときに、
いつもjsから書いたり、Styled Maps Wizardというツールを使っていたので、
すごく苦手だったんですが、ついにそれを解消するツールを発見。
http://googlemapbuilder.mynameisdonald.com/
これ素晴らしいっす。
ぜひ積極的に使っていきたい。
その他で紹介されてるツールも"さいきょう"です。
ぼくのさいきょうツール
アメブロからWordPressへのインポート
アメブロの記事をWordPressへインポートする案件があったのですが、
アメブロにエクスポート機能がついてないらしいので、
FC2を経由してWordPressにインポートしました。
アメブロからWordPressへの引越し・移行方法（FC2ブログ経由）
http://salarymanplus.com/website/ameblo-to-wordpress.html
こういうのはサービスとして優しくないね・・ > アメブロ
vagrantでWordPress環境構築
Vagrantの仕組みがだいたいわかってきたので、
続いてWordPressの仮想環境構築。
こちらがわかりやすかったです。
Varying Vagrant Vagrants で WP 開発環境を手に入れる
http://dogmap.jp/2013/09/13/varying-vagrant-vagrants/
時間があれば、1からやるのもおもしろそうだなーと。
Vagrantで構築した仮想マシンにWordPress環境を構築する手順まとめ
http://ottan.me/2013/03/24/steps-to-build-wordpress-to-virtual-machine-built-with-vagrant/
もうちょっと実務で使えるレベルまで、いろいろ調べてみます。
vagrantを学ぶ
vagrant入門してみた。
安定のドットインストール。
http://dotinstall.com/lessons/basic_vagrant
目標はとりあえず、WordPress環境を立ち上げて、
他PCでも仮想環境を確認すること。
敬遠してたけどできそうな印象。
