読者です 読者をやめる 読者になる 読者になる

あおみかんのブログ

フリーランスのIT系エンジニア。ゲーム制作スタジオ4th cluster代表。

4th cluster サイトリニューアルを支える技術

最近、ぼくが代表をやっている、筑波大学発同人サークル 4th cluster のサイトをリニューアルしました。
結構、近代的な方法でWebサイト構築が出来たなーって思ってるので、その辺の事を簡単にメモ。

やりたかったこと

  • レスポンシブレイアウト
  • スクラップ&ビルド
    • ぜんぜん仕様が明確じゃない中で試行錯誤しながら作っていくのに適した作業フローの確立
  • 更新しやすくする
    • 以前はWordPressの管理画面が使いにくいしCSSが変になったりして段々と面倒になってた
    • HTMLをベタ打ちするのも面倒。画像をアップロードするのも面倒だった。

やったこと

Middlemanの導入

まぁ、この記事自体、Middleman便利だよって宣伝したいという意図なぐらいで。

Railsライクにスタティックなサイトが構築出来る、Middlemanというアプリケーションを導入しました。 これによって、SassやCoffeeScriptも導入しましたし、ローカルで確認しながらコーディングを進める、といった事がやりやすくなりました。

Twitter Bootstrap

レスポンシブレイアウトにするために、Twitter Bootstrapを採用しました。
細かい所をカスタマイズしやすくするため、sassバージョンにしました。

Middlemanで楽に使うために bootstrap-sass Gemを利用しています。

sass の活用

Bootstrapを使っていてもある程度CSSを書く部分は出てくるので、sassを使いました。

最初のうちは、id振ってsassのクラスとexpandしてたんですが、段々sassのコンパイルにかかる時間がどんどん延びていくので、途中で方針転換しました。 (実は、名残がちょっと残ってます;)

slim記法

HTMLをいちいち書くのだるかったので、slim記法を使いました。 hamlでも良いと思います。

当然のようにGit

Gitを使ってるので全リソースのバージョン管理が出来ます。すばらし〜

Apacheでいいや

特に何もチューニングせずに、今までのApacheそのままでコンテンツを公開することにしました。
元々、僕のVPS上のApacheWordpressを動かしていたので、rsyncで一発でしたが、ここは後述します。

上記の構成にしてよかったこと

簡単にレスポンシブレイアウトになる

本当、ものすごく簡単にレスポンシブレイアウトが出来ます。
昔リキッドレイアウトという言葉が流行っていたときにネガティブマージンなどを使いまくっていた記憶がおぼろげにありますが、随分と便利になったのだなぁと感じます。

ただし、良くも悪くも「それっぽい」デザインになるのは避けられないというか、避けていくと恩恵が減って行くとは思うので、作りたいサイトデザインに応じて、importする範囲を変えたり、別なcss/sassフレームワークを選定するのも必要かもしれません。

HTMLファイルの分離がしやすい

これは生HTMLじゃなきゃ出来ない事ですよね。 レイアウトファイルやpartialファイルに分離しておくことで、ソースの見通しがとても良かったです。
yamlのデータを元にして動的に要素を生成みたいなことも出来るので、作品の一覧みたいな部分には、採用してます。

ローカルでの確認が楽

ローカルで確認するとき、 localhost:4567 にアクセスすると現在つくっているソースをコンパイルしたものが使えて良いです。

"middleman-livereload" Gem を使うと、ソースの変更があった時に勝手にリロードまでしてくれるのでさらに良かったです。

サーバーへの反映(デプロイ)が楽

"middleman-deploy" Gemを使うと、サーバーにコンテンツを反映するのがめちゃめちゃ楽です。
内部的にはrsyncするだけなのですが、コマンド一発でビルドからデプロイまで一括でやってくれるのは中々いいですね。

画像のサイズ指定が楽

image_tag を使うと勝手に画像のサイズをheight/widthに入れてくれるので、良い感じです。

ブログっぽいコンテンツも楽

middleman-blog という公式Gemを入れると、ブログっぽい記述もしやすくて良いです。

RubyMineちゃんかわいい

ぼくはRubyMineを使っています。 特に設定しなくてもエディタとして機能してくれるので満足です。

おわりに

なんかまとまりがなかったですが、MiddlemanでBootstrapでSassでSlimで静的コンテンツなWebサイト構築するのとても快適で良いですよというお話しでした。