ブログ

Web制作が3倍速くなるツール「Hammer」

Hammerというアプリを使いだして半年がたちます。

いくつかの案件で使ってみて、本当は教えたくないのですが(笑)、Hammerを使いこなすための基本ポイントをまとめてみました。

Hammerとは

Hammerは「Build out static HTML sites」という形で最初に出ました。
Andrew Clarke氏のブログで取り上げられていたのを見て、10分ほどテストした後にさっさと買いました。

現在(2013/5/1)のバージョンは1.5です。さらに機能が進化してキャッチコピーも「Build out static HTML sites & templates quickly and easily. No fuss, no mess, no PHP.」と変わっています。

Hammerで何ができるの?

HammerはWebサイト制作をより時間を短縮できるツールです。
通常のHTMLコーディングはお気に入りのエディターで制作します。では、Hammerは何ができるでしょうか?

どこかのブログでHTMLをパブリッシュするツールと紹介されていたような気がしますが、実はそれだけではありません。
うまく使いこなせば、DreamWeaverなどいらなくなるくらい仕事の効率化ができるツールです。

  • HTML Includes機能と Variables機能・Public Build機能でより効率のいい制作をすることができる
  • ファイルパスに関する便利機能をつかいこなすことでリンク切れなどのミスを減らすことができる
  • MarkdownやHAMLにも対応しているので、うまく利用すればコーディング時間を大幅に短縮することができる
  • CSS/JSファイルを統合できる機能があるので、制作するときには複数ファイル、公開するときには1枚のファイルという使い方ができる
  • Export機能で納品作業も短縮できる

Hammerの機能をフルに利用するとHTMLコーディングを効率的にすることができます。もちろん、Hammerの機能をフルに使わなくても十分にHTMLコーディングを効率的にすることが可能です。

いままでのインクルードの問題点

あるWebサイトでヘッダー・フッダーなどが共通の場合、ページ数が多ければ多いほど修正するのが大変です。 従来はHTMLやPHPのインクルード(サーバー設定が必要)や、Dreamweaverのテンプレート機能を使うケースがほとんどでした。しかし、Dreamweaverのテンプレート機能を使いこなす人はあまりいません。それはなぜでしょう?

たとえば、Dreamweaverのテンプレートの問題点は機能が豊富だけど使いこなせない、テンプレートの記述ミスをするとHTMLが大変なことになる、コメントをやたらと書き込むという問題点があります。

また、HTMLやPHPのインクルード機能はサーバーで上でしか基本的に確認できないのが難点でした。

Hammerを使えばHTMLやPHPのインクルードのように気軽に共通部分をインクルードする形の制作ができます。

HTML Includes機能でHTMLやCSS・JavaScriptをインクルードさせる

HTML Includes機能を利用することでページのヘッダーやフッダーなど共通部分をインクルードすることができます。

例えば、以下の様にコードを記載します。

もしくは以下の様に拡張子を追加しても動作します。

パブリッシュすると、「_header.html」の内容が該当部分にインクルードされます。

Variables機能で変数を活用

Variables機能を利用することで変数を利用することができます。

例えば、以下の様にコードを記載します。

$title部分が変数になるので、HTMLのどこかに変数の値を入れておきます。

ビルドするときに変数が変換されます。
変数の中にHTMLのタグを使うとエラーになるので注意する必要があります。

Clever Paths機能でファイルパス指定を簡単に

Hammerには「Clever Paths」機能という機能があります。
CSS/JS/画像のパスを勝手に指定してくれる機能です。

例えば、以下の様にコードを記載します。

パブリッシュすると、プロジェクト内にある「hoge.png」を探し出して勝手にリンクを指定してくれます。

当然、CSSの背景画像にも使用できます。

ただし、同じ名前のファイルを複数用意すると悲惨なことになります。たとえディレクトリが違ってもです(やったことがある人です)。
Hammerを使うときは画像ファイル名はすべて違う名前を付けましょう(笑)。

MarkdownやHAMLにも対応

Markdown記法は慣れてしまうと便利です。 HammerはMarkDown記法やHAML 記法に対応しています。

ヘルプページなど、一定の記載ルールがあるページがよくありますが、こういう記載ルールが決まっているページにMarkDown記法で記載したファイルを用意し、パブリッシュする制作方法は制作にも更新にも便利です。

MarkDown記法で記載した原稿を用意してもらい、それを読み込ませることで、更新が早くなるメリットがあります。

CSS/JavaScriptを統合できる

CSSやJavaScriptは制作時には複数あった方が効率的です。
しかし、サイト公開時には1枚にまとめたほうがパフォーマンスはアップします。

LESS/SASSなどには、複数のCSSを統合する機能がありますが、これと同じようにHammerにも複数のCSSを統合する機能があります。ただし、「Optimized Mode」で動作しているときのみです。

LESS/SASSは便利ですが、LESS/SASSを覚えていない人もいるでしょうし、 複数の人とコラボレーションをするときの管理などが過大になるときもあります。

HammerはLESS/SASSを使わなくても複数のCSSを統合する機能がありますので、CSSのみで戦うデザイナー・コーダーにも優しい設計です。

Automatic Reload機能

HammerはLiveReloadみたいにAutomatic Reload機能にも対応しています。記述方法は以下の様になります。

パブリッシュするごとにページが自動リロードされます。
MAMPなどで使うローカルサーバーとの組み合わせにも対応しています。ただし、「Optimized mode」では動作しないので注意が必要です。

Optimized mode。Automatic Reload機能が動きません。
Optimized mode。Automatic Reload機能が動きません。
Optimize mode。Automatic Reload機能が動きます。
Optimize mode。Automatic Reload機能が動きます。

当然ですが、クライアントへ納品するときやサイト公開時には、Automatic Reload機能は削除する必要があります。

Export機能

Hammer 1.3でExport機能という機能が搭載されました。この機能は、パブリッシュしたあとで生成される「Build」フォルダをZIP圧縮して出力することができます。差分納品がなければ納品作業が楽になります。

HammerのExport機能
HammerのExport機能

テンプレート機能

現在のHammerにはテンプレート機能があります。Hammer1.5から追加された機能です。

テンプレートギャラリーがあり、Andrew Clarke氏が制作したRock HammerやHTML5 Boilerplate、Bootstrapなどのテンプレートがあります。

Hammer テンプレートギャラリー
Hammer テンプレートギャラリー

自作することも可能ですので、普段使う案件にあわせたテンプレートを用意することもできます。私の場合はHTMLとよく使うJavaScriptとリセットされた状態のCSSを組み合わせたテンプレートを使っています。

プロジェクトを保存することでテンプレートに変換することができます。

HammerのProjectをテンプレートに変換
HammerのProjectをテンプレートに変換

案件での利用例 - コラボレーションな案件で使うとき

コラボレーションな案件では、別にコーディングする人がいるケースが多いと思います。別にコーディングする人がいる場合、サイト内で共通のモジュールを編集できないように@includeを利用し、別にコーディングする人が必要な部分のみ作業するという手法を使うこともできます。

  • ヘッダーなど、共通部分のみで@includeを利用
  • CSS/JavaScriptは@includeを使わないで個別に指定する

この手法を利用するにはいくつか注意点があります。

  • 別にコーディングする人がHammerを利用していない、もしくはHammerの使い方を理解していないケースだとCSS/JavaScriptを最低限読み込ませる必要があります。
  • 固定ヘッダーなどを利用する場合など、Public Build機能を利用しないことで見え方が違う場合の検証は十分に行う必要があります。

案件での利用例 - 100ページほどの案件でPublic Build機能を使ってみた

某案件で、100ページほどのコンテンツをコーディングする案件でHammerのPublic Buildを使ってみました。さすがに100ページくらいページ数があるサイトをパブリッシュをすると重くなります。

ある程度のページ量になると、パブリッシュ時間が長くなるのでちょっとした修正をするのにもビルド時間が長くなってしまいます。規模が大きいサイトでHammerを活用するときにはちょっと工夫が必要だと思います。

まとめ

Hammerだけでなく、MixtureなどこれからのWebサイト制作を変えていくツールはこれからどんどん出てきます。
そろそろAdobe離れしたい人は、まずはHammer+Sublime Text/Coda/Espressoなどの組み合わせでDreamweaverから離れてみてはいかがでしょうか。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。