• WEB

Hamlを使う方法、入門編。 今さらですが… やってみると意外と良い。

  • さむ
    さむ デザインちーむ
  • このエントリーをはてなブックマークに追加
Hamlを使う方法、入門編。 今さらですが… やってみると意外と良い。

どうも、デザインちーむのさむです。

最近、効率化の大きな波が隣の席から押し寄せてきていて、逃れることができなさそうです。
そこでようやくSassやLess、Hamlなんてものを調べてみました。
今さらですが、、、。

今回は簡略した記述でHTMLを書くことができるHamlとやらをちょびっと紹介してみます。
あくまでも覚書き程度のものなのであしからず。

HamlとはXHTML Abstraction Markup Languageの略称。
なんじゃそれ、、、?

要はHTML/XHTMLを生成するためのマークアップ言語で、インデントや簡略構文によって簡潔な記述で書くことができる。
HTML(マークアップ言語)を生成するマークアップ言語、、、。
ちょっと回りくどそう、、、。

とりあえず、やってみよう!

開発環境

  • Windows7
  • Ruby(2.0.0)
  • Gem(2.2.2)
  • Haml(4.0.5)

自身の環境は以上です。
Hamlを利用するには事前に上記環境が必要となります。(バージョンは各自で異なります。)
今回は長くなるのでHamlをスントールするところからの説明とします。
インストールは以下の記事を参考にしてみてください。
「なにかと使える「Ruby」、インストール方法。 Windows7編」

では、Hamlのインストールです。
以下のコマンドをコマンドプロンプトから実行。


gem install haml

念のため確認。


haml -v

正しくインストールされるとバージョンが表示されます。
インストールが正常にできたら環境は整いました。
今後の作業の流れを記載します。

  1. コマンドプロンプトにて作業する場所に移動
  2. .hamlファイルを作成しHamlを記述
  3. コマンドプロンプトにてhamlコマンドを実行
  4. HTMLファイルが生成される

1. コマンドプロンプトにて作業する場所に移動

今回はデスクトップにtestフォルダを作成しそこで作業することにします。
コマンドプロンプトにて移動してください。(環境により異なるので注意!)


C:\Users\???>pushd D:\Users\???\Desktop\test

2. .hamlファイルを作成しHamlを記述

簡単なファイルを作成します。(内容は後程説明します。)
ファイル名はtest.hamlとします。


!!!
%haml
    %head
    %body

3. コマンドプロンプトにてhamlコマンドを実行

出力するhtmlファイルのファイル名はtest.htmlとします。


haml test.haml test.html

4. test.htmlが生成されるので中身を確認


<!DOCTYPE html>
<haml>
  <head></head>
  <body></body>
</haml>

ちゃんといつものおなじみな感じになりましたね。
このような流れで生成していきます!

基本的なルール

タグの前に%を記述しその後に半角スペース2個のインデントを記述する


%p  p

生成されるHTML


<p>p</p>

ネスト(入れ子)での記述も可能


%div
  AAA
  %p
    %span
      BBB

生成されるHTML


<div>
  AAA
  <p>
    <span>
      BBB
    </span>
  </p>
</div>

ダブルクオートで出力する

-q オプションを指定することで区切り文字にダブルクォーテーションを使う(今後はこのオプションをつけて実行します。)


haml -q test.haml test.html

<div class='aaa'> ⇒ <div class="aaa">

となります。

idとclassのつけ方


%div#AAA abc
%p.BBB abc
%p(class="CCC") abc

生成されるHTML


<div id="AAA">abc</div>
<p class="BBB">abc</p>
<p class="CCC">abc</p>

コメントアウト


/
  複数行の
  コメント
 
/ 一行のコメント
 
-#
  Hamlファイルのみの

出力されるHTML


<!--
  複数行の
  コメント
-->
<!-- 一行のコメント -->

属性を付ける

src,href,name,titleといった属性を表示する方法です。
“<“を末尾につけると一行で出力されます。


%a(href="google.com" title="google")<
  google!!

生成されるHTML


<a href="google.com" title="google">google!!</a>

このあたりが基本となりますので覚えていきましょう!
本日はここまで。
まだまだ機能はたくさんあります。
変数が使えたり、Rubyが使えるので複雑な処理も書けたり、Sassが使えたり、、、。
興味のあるかたは調べてみてください。

このように記述することでちょっぴり効率的になりました。
Webの世界は効率がすべてといっても過言ではないと思います。
やはり覚えていかないとダメですね、、、。

みなさんも時間があればお試しを。

このエントリーをはてなブックマークに追加

さむが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ