middlemanでリアルタイムにモックを作りながらミーティングするのは意外と良い

小ネタです。

  • htmlではなくhamlを使っている。
  • cssではなくsassを使っている。
  • JavaScriptではなくCoffeeScriptを使っている。

普段Ruby on Railsで開発をしていると、違うツールに手が馴染んでいてしまって、ふつのーのhtmlを書くのはなかなか辛いなと思います。そんな中使っているのがmiddleman。Ruby製の静的サイトジェネレータです。

ホワイトボードでの設計を補完する

先日投稿した「どうやったら真っ白いホワイトボードにいきなり画面設計図を起こすことができるか?」でホワイトボードに絵を描いた後、いきなり実装してしまうよりは、もう少し実際の画面でイメージを見たいときがあります。

例えば業務系の画面で、1つの画面に様々な情報を詰め込むようなケースの場合に多いです。ホワイトボードでは上手くハマっているように見えるけど、実際の画面だと、本当に上手くハマるんだろうか?

そんな検証をしつつ、ミーティングしながらどんどん変えながらデザインを詰めたいときに、僕はmiddlemanを使っています。

ライブプレビュー

ホワイトボードでの設計時に何らかのCSSフレームワークを前提にしていると先日のエントリで書きましたが、このおかげでモックアップも簡単です。

いつも使っているので、コーディングもかなり高速にできます。

コーディングが高速にできるおかげで、話しながらリアルタイムにコーディングしつつ、画面を大きめのディスプレイかテレビに映しながらミーティングができるのです。

こんなときに役に立つのがライブリロード。手元のエディタで変更した内容を、リアルタイムにブラウザに反映することができます。お客さまから見ると、話しながらどんどんテレビに映っているページのデザインが変わっていく訳ですね。

middlemanへのライブリロードの導入方法は、こちらの記事に詳しいです:MiddlemanでLiveReloadを使う方法

コーディングが速いのは正義だ

手を動かすのが速い人ならではの技ではありますが、速さは正義です。皆様も是非実践してみてくださいー!