どうも、デザインちーむのさむです。
最近、効率化の大きな波が隣の席から押し寄せてきていて、逃れることができなさそうです。
そこでようやく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
正しくインストールされるとバージョンが表示されます。
インストールが正常にできたら環境は整いました。
今後の作業の流れを記載します。
- コマンドプロンプトにて作業する場所に移動
- .hamlファイルを作成しHamlを記述
- コマンドプロンプトにてhamlコマンドを実行
- 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の世界は効率がすべてといっても過言ではないと思います。
やはり覚えていかないとダメですね、、、。
みなさんも時間があればお試しを。
![NUC[ナック]次世代小型PCを組んでみた](https://www.go-next.co.jp/blog/wp-content/uploads/2016/01/NUC_eyeCatch-240x135.png)
