静的サイトを制作できる Mac アプリ「Hammer」
Published by Hideyuki,
サイドバーやフッターを複数ページで使いまわしたい場合、今までは静的サイトではできなかったので WordPress のような PHP に頼るしかありませんでした。
Hammer を使えば、サイドバーやフッターをパーツとして共通化できます。
また、サイト名を一カ所変更するだけで、サイト全体のヘッダーやフッターをすべて変更することもできます。
Hammer は Mac App Store で購入できる 2,900円のシェアウェアです。
７日間のトライアル期間があります。
Mac App Store 版しかないように見えますが、右上の購入ボタンから買うと直販版を買えます。
クレジットカード決済と PayPal が使えます。
$19.99 で、その時のレートによって料金は多少変動しますが、Mac App Store で買うよりも安く買えます。
自動読み込み（Automatic Reload）
HTML を編集すると、変更をブラウザ上でリアルタイムに更新してくれます。
html の最初の方に と入れます。
（Optimized mode にすると Automatic Reload は機能しません。）
（サイト公開時には を削除してから公開します。）
HTML の組み込み（HTML Includes）
PHP などを使わなくても、サイドバーのナビゲーション、ヘッダーやフッターなどをパーツにして共通化ができます。Hammer の最大の特長だと思います。
【 _header.html 】というファイルを作成して、埋め込みたい場所に と入れると【 _header.html 】の内容が組み込まれます。
最適化モード（Optimize mode）
ウィンドウ右上の Optimize をオンにしてビルドすると、コードを圧縮して吐き出すので、容量の削減になります。
CSS が複数ある場合、１枚の CSS にしてくれます。
ただし、Optimize をオンにするとビルドが遅くなるし、自動読み込みの機能も使えなくなるので、サイト公開をする段階の完成品のみを最適化すれば良いと思います。
変数（Variables）
変数を使うことで、サイト名などのよく使うテキストを一度だけ定義すれば、サイト上で何箇所にも表示することができます。
やることリスト（Todos）
何行目と指定してのタスク管理ができるので、すべきことが一目瞭然。
HTML では
CSS では /* @todo やること */
Javascript では // @todo やること
と入力することで、Hammer 上にやることリストが一覧で見ることができます。
残念ながら、HTML Include や Markdown には Todos の機能は使えません。
ナビゲーションヘルパー（Navigation Helpers）
Navigation Helpers は、ナビゲーションに現在地を表す【 class:current 】を追加してくれます。
【 class:current 】を CSS で装飾することで、現在地が分かりやすくなります。
このようにメニューを作成します。
HTML Include として保存すると良いでしょう。
Hammer で出来ること（編集待ち）
- Image Placeholders で、アテの画像を生成
- 複数のサイトプロジェクトを管理できて散らからない
- Errors チェックでリンク切れが起こらない
- テキストエディタは好きなモノを使える！ SublimeText・Coda・Espresso・TextMate・BBEdit に対応してるようだ
- 作成したモノをテンプレートとして保存できる！
- Clever Paths を使えば、後からフォルダ変更が可能
- HTML 手打ちなので、Blocs 等のような不自由さは無い
- 画像ファイルを HTML ファイルにドラッグすると、img タグが自動で生成される
- Publish to Hammr.co を使うと、クロールされない３週間限定の確認用 URL が使える。
Hammer 将来の構想
Hammer の細かい Tips
- HTML Include に ToDo を書いても、ToDo として認識されず Hammer で表示されないので注意。
- よく落ちる。保存はテキストエディタが担うのでデータを失うことはない。
HTML Include を使ったページタイトルの入れ方
HTML Includes でヘッダをまるごと共通化して、Head の Title タグ内に、変数 title を作ります。
そして、個別の HTML ファイルでは、ヘッダーの HTML Include の上に、変数 tite の宣言を入れてあげると良いようです。
Hammer の残念な点
アプリケーションが、ものすごくよく落ちます。
常に監視しているタイプのソフトなので、色々と難しいのかもしれませんね。
自動更新が悪いのかと思って外しても、やはり落ちます。
テキストエディタを変えてみても落ちます。
どうやっても落ちるようです。
ファイル保存はエディタで行うので、Hammer が落ちてもデータを失うことはなく、ブラウザでプレビューができなくなる程度なのでダメージはないのですが、何度も落ちるとかなりわずらわしい。
今後の改善に期待しています。
Hammer のオンラインセミナー。有料だけど。 http://webdesign.tutsplus.com/courses/building-static-websites-with-hammer-for-os-x?ref=r3trosteve
あえて Marddown は使わない！？
Hammer は HTML を意識せずテキスト入力ができる Markdown に対応しています。
Markdown 形式である .MD 拡張子のファイルを HTML Include で HTML に埋め込むことで使えます。
Markdown 記法を活用できたら、HTML タグを気にせずに文章を書けるので便利ですよね。
見出し・段落・改行などのタグを意識してテキストを書くのは結構わずらわしい。
せっかく Hammer には Markdown を使えるようになっているので、ぜひ使いたい所ですが色々とハードルがあって、現時点ではまだ Markdown を使いこなせる環境にはないようです。
Markdown が使えるけど、実際には使わずに HTML で書く理由
- Markdown ファイルは HTML インクルードで埋め込む必要があるので、.HTML と .MD の２種類のファイルを管理しなければいけないので面倒
- 便利なメモ機能「ToDo」が Markdown 形式では使えず、具体的な行が指定できないから
- Image Placeholders を使えない
- Markdown ファイル（拡張子 .md）の場合、 Hammer から EDIT ボタンが消えるので、Hammer から開けない
- Markdown のファイル名を間違うと、Hammer がエラーを起こしてフォルダ全体を認識しなくなる
- ただでさえ落ちやすい Hammer が、Markdown を使うことで、さらに不安定になるような気がする。（本当にそうなのかは不明です。）
ウィンドウが表示されない不具合が出た場合の対処法
Hammer をアップデートしたら、ウィンドウが表示されず何もできなくなりました。明らかに不具合です。
Bugs & Issues のページに問題について記載されている。
ターミナルを使ってページに掲載されているコマンドを入力すると問題は解決しました。
どうやら、元となるフォルダの名称を変更してしまうとウィンドウが表示されない不具合が発動してしまうみたいです。
スポンサーリンク