カテゴリ: 初心者

「未知の技術探訪」シリーズ第2回目は「YAML」です。第1回目は「HAML」でした。どうみても兄弟です(実際使ってみると全然兄弟じゃなかったですが)。

読み方は?


「YAML」は「ヤムル」と読み、「YAML Ain't a Markup Language」の略です。日本語にしてみると「ヤムルはマークアップ言語じゃないよ!」ですね。

何に使われる技術か



  • 構造化されたデータを表現するためのフォーマット。

  • 構造化データやオブジェクトを文字列にシリアライズ(直列化)するためのデータ形式の一種。

  • 人間にとって読みやすいデータ直列化フォーマットである。



などと書いてあります。自分なりに解釈した言葉で表すと

ある約束に従ってデータを用意し、それをプログラムで取り込んで配列やハッシュなどの形式から始まり、様々なデータ形式に変換してくれるという感じでしょうか。

まぁ、これは一つの使用例として表現したに過ぎません。応用になると、ライブラリを使ってYAMLデータからSQL文を作ったり、Javaのクラスを作ったりと色々できるようです。

日本語でGoogle検索すると、Ruby関係の解説ページが多く出てきますので、日本ではRubyで使われてることが多いのかもしれません。ですが、Rubyに限らずCやPython、PHP、Java等様々な言語で使用できるようです。

HAML同様、インデントを使って記述されます。ただし、インデントにはタブは使えないので半角スペース(通常は2つ)を使ってインデントします。

こちらはYAMLの公式サイトです。面白いのはこのページ自体がYAMLの構文を使って書かれていることです。初めて見ると一瞬戸惑ってしまいますね(笑)今の自分にはあまり必要ないかなーと思いました。



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

「未知の技術探訪」シリーズと題しまして、自分が扱ったことがない技術を調べて、いじって色々な技術に詳しいエンジニアを目指しましょうという崇高な(笑)目的で定期的に記事を書いていきたいと思います。決して記事にするネタが無くなったからではありません。

記念すべき第一回目は「HAML」について書いてみようと思います。

読み方とか


HAMLと書いて「ハムル」と読みます。「XHTML Abstraction Markup Language」の略になります。

何に使われる技術か


Ruby on Railsのテンプレート言語として使用されることが多いようです。RoRでは通常ERbを使ってViewを書きますが、プラグインを追加することでHAMLに変更することができるようです。

よーするに、HTMLを少ない労力で生成してくれるマークアップ言語です。「<」や「>」のタグを必要とせず、インデントを使って記述します。

ERbで書くとこうなるコードが
[html]


Welcome to our site!


<%= print_information %>




<%= render :partial => "sidebar" %>


[/html]HAMLで書くとこのようにコードの量が減り、見やすく簡潔なコードで書けます。

[html]
#content
.left.column
%h2 Welcome to our site!
%p= print_information
.right.column
= render :partial => "sidebar"
[/html]
インストール


早速導入してみます。インストールはgemを使って行います。簡単です。


sudo gem install haml
Password:
Fetching: haml-3.0.25.gem (100%)
Successfully installed haml-3.0.25
1 gem installed
Installing ri documentation for haml-3.0.25...
Installing RDoc documentation for haml-3.0.25...


これをRailsで使用する場合にはRailsアプリケーションにプラグインとして導入する必要があります。予め、Railsアプリケーションを作っておく必要があります。ここではtestappというアプリケーションを作っておきます。


$ rails new testapp
$ cd testapp
$ haml --rails .
haml --rails isn't needed for Rails 3 or greater.
Add 'gem "haml"' to your Gemfile instead.

haml --rails will no longer work in the next version of Haml.

Haml plugin added to .


一応インストールできたようですが、haml --railsというコマンドはRails3以降では使えないよと言われてしまいました。Railsアプリケーションの中のGemfileというファイルに「gem "haml"」と追記する必要があるようです。


$ vi Gemfile
source 'http://rubygems.org'

gem 'rails', '3.0.3'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3-ruby', :require => 'sqlite3'

# Use unicorn as the web server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano'

# To use debugger (ruby-debug for Ruby 1.8.7+, ruby-debug19 for Ruby 1.9.2+)
# gem 'ruby-debug'
# gem 'ruby-debug19'

# Bundle the extra gems:
# gem 'bj'
# gem 'nokogiri'
# gem 'sqlite3-ruby', :require => 'sqlite3'
# gem 'aws-s3', :require => 'aws/s3'

# Bundle gems for the local environment. Make sure to
# put test-only gems in this group so their generators
# and rake tasks are available in development mode:
# group :development, :test do
# gem 'webrat'
# end

gem "haml" #この行を追加


ここまで終わるとHAMLをロードするコードが生成されます。


$ ls vendor/plugins/haml
init.rb


とりあえずHAMLを試してみるためにコントローラーを作ります。

$ rails g controller hello index


testapp/app/hello/index.html.hamlを作ってHAMLのコードを書きます。

[html]
!!! XML
!!!
%html{html_attrs}
%head
%title Hello, Haml!
%body
%h1 Hello, Haml!
[/html]ここでサーバーを起動してブラウザからhttp://localhost/hello/にアクセスしてみます。

シット!Routing Errorが出てしまいました。


Rails3のルーティングについては全然わからないので、とりあえず調べまくったら解決方法がみつかりました。routes.rbに以下のコードを追加します。

[ruby]
HelloHaml::Application.routes.draw do
root :to => "hello#index" #ここを追加
resources :hello #ここを追加
end
[/ruby]もしくは一番最後の行のコメントアウトを外してもOKでした。

[ruby]
HelloHaml::Application.routes.draw do
match ':controller(/:action(/:id(.:format)))' #コメントアウト外した
end
[/ruby]これでようやくブラウザに「Hello, Haml!」の文字が表示されました。タグを使わず割と簡潔な表記方法で書けるのは魅力的ですし、HTMLさえ知っていればHAMLの構文を知らなくてもなんとなくどんなHTMLが生成されるのか想像できます。

使いこなせるように鳴ったら大分効率は上がりそうです。


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

※このポストはIEで見るとレイアウトが崩れますので、IE以外での閲覧を推奨します。

誰でも知ってるような内容ですが、CSSをやり始めた自分としては良い勉強になったのでメモしておきます。リンクなんかでマウスオーバーさせると背景色が変わるあれです。擬似クラスである:hoverを使って実現させています。完成品を先に出してしまうとこんな感じです。


  • Head First ネットワーク

  • 現場のプロから学ぶXHTML+CSS

  • jQueryで作るAjaxアプリケーション




  • リスト(li)要素にfloatプロパティを適用して横並びにしています。
    [css light="true"]
    li {
    list-style: none;
    float: left;
    background-color: #68FEFF;
    width: 200px;
    }
    [/css]また、:hoverを使ってマウスオーバーした時は背景色を変えます。
    [css light="true"]
    li a:hover {
    background-color: #2AFF0C;
    }
    [/css]最後にリンク(a)要素についての指定です。
    [css light="true"]
    a {
    color: #FFF;
    font-weight: bold;
    display: block;
    text-decoration: none;
    text-align: center;
    border: 1px solid #FFF;
    padding: 2px;
    height: 40px;
    }
    [/css]display: blockにすることで、ボックス全体をリンク領域にしています。この指定をしないと以下のようにかなりダサイ感じに仕上がってしまい、レイアウトもかなり崩れるので要注意。要するに文字の部分しか色が変わらなくなってしまいます。

  • Head First ネットワーク

  • 現場のプロから学ぶXHTML+CSS

  • jQueryで作るAjaxアプリケーション






  • 最後に、HTML部分に今作ったクラスを指定すれば完成です。
    [html light="true"]
  • Head First ネットワーク

  • 現場のプロから学ぶXHTML+CSS

  • jQueryで作るAjaxアプリケーション

  • [/html]

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

    Pure CSSな吹き出しを見て、画像を使わないCSSのみによる吹き出しを作ってみていたんですが、吹き出し部分を実現している三角形の部分がどうなってるのかさっぱりわからなかったんです。色々試してたらようやく謎が解けました。ちなみにCSS初心者向けとなっていますのであしからず。CSSをちょっとやったことある人なら「そんなの知ってるよ」という内容だと思います。


    まず問題となる吹き出しの三角形を作るCSSは
    [css light="true"]
    .triangle {
    border-top:18px solid #4DAC26;
    border-right:24px solid transparent;
    position: absolute;
    bottom: -18px;
    left: 36px;
    width: 0;
    height: 0;
    }
    [/css]
    となっています。これによって下の画像の赤く囲った部分を作っているのですが、この斜めの部分をどうやって作ってるのかさっぱりわかりませんでした。



    なのでとりあえず、関係しそうなコードだけ(border-topとborder-right)を抜き出してみたところ、なんと三角形がでてきました(分りやすいように色を分けています)!
    [css light="true"]
    .triangle {
    border-top:18px solid #000000;
    border-right:24px solid #AAAAAA;
    }
    [/css]

    普段、borderの太さをこんなに太くするようなことが(自分的には)ほとんどないため、まさかborderの縦と横のつなぎ目が斜めになってるなんて想像もしませんでした(汗)この灰色の部分を透明(transparent)にすれば、なるほど三角形ができますね。

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

    Rubyではアクセサメソッドをしこしこ作らなくてもメソッド一つでその機能を実現できるらしい。通常ゲッターやセッターを実装する時は


    [ruby]
    class Book
    def initialize (name, price, date)
    @name = name
    @price = price
    @date = date
    end
    def name
    @name
    end
    def price
    @price
    end
    def date
    @date
    end
    end

    book = Book.new("聖書", 980, 1980)
    puts book.name #聖書と表示される
    puts book.price #980と表示される
    puts book.date #1980と表示される
    [/ruby]これを以下のようにattr_readerメソッドを使えば7~15行目のゲッターメソッドの部分を実装してくれる。
    [ruby]
    class Book
    def initialize (name, price, date)
    @name = name
    @price = price
    @date = date
    end
    attr_reader :name, :price, :date
    end

    book = Book.new("聖書", 980, 1980)
    puts book.name #聖書と表示される
    puts book.price #980と表示される
    puts book.date #1980と表示される
    [/ruby]また、セッターメソッドについても同様のメソッドattr_writerというのが用意されていて、通常は以下のように等号(=)で終わるメソッド名を定義する。
    [ruby]
    class Book
    def initialize (name, price, date)
    @name = name
    @price = price
    @date = date
    end
    def name= (new_name)
    @name = new_name
    end
    def price= (new_price)
    @price = new_price
    end
    def date= (new_date)
    @date = new_date
    end
    end

    book = Book.new("聖書", 980, 1980)
    #値をセット
    book.name = "新約聖書"
    book.price = 2980
    book.date = 2000

    #更新された値を表示
    puts book.name #新約聖書と表示される
    puts book.price #2980と表示される
    puts book.date #2000と表示される
    [/ruby]これをattr_writerメソッドを使って書くと
    [ruby]
    class Book
    def initialize (name, price, date)
    @name = name
    @price = price
    @date = date
    end
    attr_writer :name, :price, :date
    end

    book = Book.new("聖書", 980, 1980)
    #値をセット
    book.name = "新約聖書"
    book.price = 2980
    book.date = 2000

    #更新された値を表示
    puts book.name #新約聖書と表示される
    puts book.price #2980と表示される
    puts book.date #2000と表示される
    [/ruby]
    となる。また、attr_readerattr_writerメソッドはattr_accessorメソッドを使えば一つで書くことができる。
    このエントリーをはてなブックマークに追加

    ↑このページのトップヘ