Hamlで開発効率アップ|Sublime text 2でビルドしてみました。

Hamlで開発効率アップ|Sublime text 2でビルドしてみました。

Clock Icon2013.02.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Haml - with Sublime Text 2

先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。
人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。

さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。

アジェンダ

  • Hamlとは?
  • Hamlの書き方
  • Sublime text 2でビルド(ファイル出力)
  • おまけ

Hamlとは?

XHTML Abstraction Markup Languageの略称です。
と言われましてもなんのことだ??ってなるかと思います。

日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。

HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述が行えます。

またHaml内では、変数を宣言、条件分岐繰り返し処置が出来るので魅力です!

Haml

    %div.container
      %h1 Title
      %h2 Subtitle
      .content
        Sample Text

Html

    <div class='container'>
      <h1>Title</h1>
      <h2 id="toc-subtitle">Subtitle</h2>
      <div class='content'>
        Sample Text
      </div>
    </div>

Hamlの書き方

基本的な書き方

Hamlの基本的な書き方として、タグの前に%の記述、インデント(半角スペース2つ)で記述します。
また、インデント記述に準拠すれば、htmlでも記述も可能です。

Haml

%div
  <h1>Sample Headline</h1>
  %p Sample Text

出力Html

    <div>
      <h1>Sample Headline</h1>
      <p>Sample Text</p>
    </div>

属性

Haml

    %p
      %a(href="#" title="Sample Text" target="_blank")
        Sample Text

出力Html

    <p>
      <a href='#' target='_blank' title='Sample Text' rel="noopener noreferrer">
        Sample Text
      </a>
    </p>

idとclass

Haml

    %div#sampleID
    %div.sampleClass

出力Html

    <div id='sampleID'></div>
    <div class='sampleClass'></div>

コメントアウト

Haml

/
  複数行の
  コメント

/ 一行のコメント

-#
  Hamlファイルのみの
  コメントです

出力Html

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

-#記述のコメントはHamlのみのコメントなので、出力されたHtmlには記述されていません。

変数

先頭に"-"をつけて、変数の宣言をすることができます。

Haml

    - title = "サンプルタイトル"
    - text  = "サンプルテキスト"
    - var  = "変数"
    %div
      %h1= title
      %p= text
    %div
      %p
        文章の中にも#{var}が出力できます。

出力Html

    <div>
      <h1>サンプルタイトル</h1>
      <p>サンプルテキスト</p>
    </div>
    <div>
      <p>
        文章の中にも変数が出力できます。
      </p>
    </div>

条件分岐

Haml

    - age = 19
    - if age >= 20
      %p 一緒にお酒飲みに行こう!
    - else
      %p お酒は大人になってから!

出力Html

    <p>お酒は大人になってから!</p>

繰り返し処理

Haml

    %ul
      - (1..5).each do |i|
        %li Sample No.#{i}

    -# 配列も宣言できます。
    - arry = ['red', 'blue', 'yellow', 'green']
    %ul
      - arry.each do |i|
        %li color #{i}

出力Html

    <ul>
      <li>Sample No.1</li>
      <li>Sample No.2</li>
      <li>Sample No.3</li>
      <li>Sample No.4</li>
      <li>Sample No.5</li>
    </ul>
    <ul>
      <li>color red</li>
      <li>color blue</li>
      <li>color yellow</li>
      <li>color green</li>
    </ul>

Html5のテンプレート

Haml

!!!
%html{:lang => "ja"}
  %head
    %meta{:charset => "utf-8"}/
    %title Sample Haml
    %meta{:content => "", :name => "keywords"}
    %meta{:content => "", :name => "description"}
    %link{:href => "css/sample.css", :media => "all", :rel => "stylesheet"}
  %body
    #header
      %h1 Sample Haml
    #content
    #footer
    %script{:src => "js/sample.js"}

Html

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset='utf-8'>
    <title>Sample Haml</title>
    <meta content='' name='keywords'>
    <meta content='' name='description'>
    <link href='css/sample.css' media='all' rel='stylesheet'>
  </head>
  <body>
    <div id='header'>
      <h1>Sample Haml</h1>
    </div>
    <div id='content'></div>
    <div id='footer'></div>
    <script src='js/sample.js'></script>
  </body>
</html>

以下サイトを参考にさせていただきました。

Sublime text 2でビルド(ファイル出力)

最近、なにかとSublime text 2(以下:ST2)関連の記事を書かせていただいて、
今回もエディタはST2で進めさせていただきます。

Hamlビルド(Hamlファイル出力)の流れ

  1. rubyをインストール
  2. hamlをインストール
  3. ST2のビルドシステム指定ファイルをを新規で作成
  4. hamlをビルドしてみる。

1. rubyをインストール

hamlを動かすためにはrubyが必要なのでインストールしてください。

インストール方法

弊社、野中(ブログの中の人)、山形(イケテルRubyマン)の記事をご参考いただければと思います。

※環境変数PATHを通しておくのも忘れずにお願いします。

2. hamlをインストール

rubyがインストール完了したら、続いてhamlのインストールを行います。Win:コマンドプロンプト、Mac:ターミナルを開いて
以下コマンドを実行します。

gem install haml

ST2のビルドシステム指定ファイルをを新規で作成

ST2はビルド(ファイルを出力)してくれるツールが入っているので、そちらを使用してビルドしたいと思います。

まず、ST2のメニューから
Tools > Build System > New Build Systemを選択

新規でのビルドシステム指定ファイルを作成されます。

{
    "cmd": "haml",
    "selector": "source.haml",
    "working_dir": "${file_path}",

    "windows":
    {  
        "cmd": ["haml.bat", "$file", "$file_path/$file_base_name.html"]
    },
    
    "osx":
    {
        "cmd": ["haml", "$file", "$file_path/$file_base_name.html"]
    }
}

上記設定を記載して保存します。すると設定ファイルの名前をきかれるので、
haml.sublime-buildとして保存しておきます。

以下サイトを参考にさせていただきました。

3. Hamlをビルドしてみる。

それでは、早速Hamlをビルド(ファイル出力)してみたいと思います。

その前に、ビルドする種類を指定しておきます。
Tools > Build System > haml

それでは、どこかに作業ファイルをつくりし、拡張子をtest.hamlファイルを作成し
以下の記述をします

test.haml

!!!

記述後、ビルドコマンドのショートカット[Ctrl + B]でビルドします。

test.html

<!DOCTYPE html>

すると同じ階層に上記の記述された、test.htmlが出力されていれば成功です。

おまけ

保存時に自動でビルド。

常に[Ctrl + B]でビルドしてもいいのですが、 保存時に自動でビルドしてくれる設定をしたいと思います。

その方法は、SublimeOnSaveBuildというパッケージをインストールします。

お約束の[Ctrl + Shift + P]Package Controll : Instal Packageを選択

SublimeOnSaveBuildがリストの中にあるので、選択してインストール。

SublimeOnSaveBuildの設定

ST2のメニューからPrerences > Package Setting > SublimeOnSaveBuild > settings - Userを選択

以下、デフォルト設定の記述にhamlを追記して保存。

{
    "filename_filter": "\\.(css|js|sass|less|scss|haml)$",
    "build_on_save": 1
}

これで、hamlファイルを保存時自動でhtmlファイルを出力してくれるようになりました。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.