Jekyll 2.0 の新機能を触ってみた

Jekyll 2.0 が正式リリースされたので触ってみた。特に気になった機能3つについてざっくりと。以下 2.0.2 で確認。

  1. Collections
  2. Sass/SCSS と CoffeeScript サポート
  3. 追加フィルター where/group_by

Collections

従来の postpage に加え、文書タイプをユーザが定義できるようになった。例として clip という文書を定義してみる。

_config.yml

collections:
  clip:
    output: true
    example: This is an example!!

_config.yml で設定したデータは site.collections.clip から、YAML front-matterの情報は従来通り page から利用できる。

_clip/new-clip.md

---
title: 今日のクリップ
date: 2014-05-07 20:00
---

## {{ page.title }}({{ page.date }})

* [Jekyll turns 2.0.0](http://jekyllrb.com/news/2014/05/06/jekyll-turns-2-0-0/)
* {{ site.collections.clip.example }}

関係するファイルの部分的なツリー。

jekyll_project
├── _clip
│   └── new-clip.md
└── _config.yml

この例では _config.ymloutput: true と設定したので _site/clip/new-clip.html として出力される。

output: false(デフォルト)の場合、ページは生成されない。他のページの部品として使うことを想定しているのだろう。複数の著者がいるサイトで各著者の紹介文を Collection として作っておき、ポストのメタデータで対応させて取り込むようなケースなど。

なお Collections は実験的機能で、今後 API 変更の可能性があるそうなので注意。

参照 http://jekyllrb.com/docs/collections/

Sass/SCSS サポート

Sass/SCSS のビルドがサポートされた。例えば css/main.scss というファイルを作ると jekyll build の際に _site/css/main.css に自動変換される。ただし *.scss には空の YAML front-matter (ハイフン*3を2行)を入れる必要がある。

今のところ通常ディレクトリでは *.sass (インデント記法で書けるもの)が CSSレンダリングされない(そのままコピーされてしまう。後述の _sass/ 配下では使える)。

css/main.scss

---
---

body {
  background: hsla(0, 50%, 50%, 1);
}

これとは別に _sass/part.sass を作成すると、さきほどの main.scss からインポートできるようになる。こちらに ハイフンのヘッダを書くとエラーになる

_sass/part.sass

p
  color: red

css/main.scss

---
---

@import "part"

body {
  background: hsla(0, 50%, 50%, 1);
}

_config.yml で sass オプションを指定できる。 sass_dir でインポート用のファイルを置くディレクトリ名を指定(デフォルトは _sass)、style で出力スタイル指定など。

sass:
  sass_dir: _your_sass_dir
  style: compressed

関係するファイルの部分的なツリー。

jekyll_project
├── _sass
│   └── part.sass
└── css
    └── main.scss

参照 http://jekyllrb.com/docs/assets/

CoffeeScript サポート

CoffeeScript のビルドもサポートされた。こちらもハイフンのヘッダを入れる必要がある。

js/main.coffee

---
---

main = ->
  console.log 'ready.'

main()

Liquid フィルター wheregroup_by

Liquid 出力タグ(Output tags)のフィルターとして wheregroup_by が追加された。site を Root とするツリーオブジェクトのメンバーをフィルタするもの。

まず where から。例えば {{ site.posts | where:"author":"cu39" }} とすると、YAML front-matter に author: cu39 と書いてあるポストだけを抽出できる。

ただしこの例は Jekyll::Post オブジェクトの配列が返ってくることになる。これを自前のフィルタでさらに加工する。

_plugins/my_filter.rb

module Jekyll
  module MyFilter
    def list_titles(posts)
      posts.map do |post|
        %(<li><a href="#{post.url}">#{post.title}</a></li>\n)
      end
    end
  end
end

Liquid::Template.register_filter(Jekyll::MyFilter)

そして、特定の著者の記事だけを並べるページ cu39.html を用意したりして

<h3>cu39 が書いた記事</h3>
<ul>
{{ site.posts | where:"author":"cu39" | list_titles }}
</ul>

みたいな使い方ができそう。

group_by のほうは、{{ site.posts | group_by:"author" }} とすると以下のような構造が返ってくる。

[
  { "author" => "cu39", "items" => [...] },
  { "author" => "someone", "items" => [...] }
]

こちらは1枚のページに著者ごとにポストを並べるような用途に使えそう。

Liquid をあまり使いこんでないので、もっといい使いどころがあったら教えてください。

参照 http://jekyllrb.com/docs/templates/

Webアプリのモックアップ作業土台を作る その3 Sass Source Map

その1その2 Sprockets の続きです。が、今回の作業は その1 の途中からブランチしてます。

Google Chrome の Dev Tools は Sass/SCSS の Source Map に対応しているので利用できるようにしてみます。が、Source Map は仕様も実装も流動的な状態で、環境によって動作しない可能性も大ありなので、あくまで参考まで。

リポジトリ上では Sprockets も Bootstrap も Compass も導入する前の段階からブランチを生やしました。

新仕様と旧仕様

CSS リクエストへのレスポンスでブラウザに Source Map の位置(パス)を知らせる必要があり、その方法は2種類あります。

  1. レスポンスの HTTP ヘッダで渡す
  2. ボディ内のコメントで渡す
続きを読む

Webアプリのモックアップ作業土台を作る その2 Sprockets

前回のつづき。

前回作った作業台に Sprockets を導入して assets 提供を分離します。といっても Sprockets 使っていくかどうか自分でも確信持ててないのでリポジトリではブランチにしておきました。

Sprockets を導入するメリットとしては、このままデプロイするケースを視野に入れたときに圧縮機能を追加しやすかったりプリコンパイルできたりするところでしょうか(どちらも今回はやってません)。

というわけで、まずは Gemfilesprockets 関連の gem を追加して bundle

gem 'sprockets'
gem 'sprockets-helpers'
gem 'sprockets-sass'
続きを読む

Webアプリのモックアップ作業土台を作る その1

Slim, Sass/SCSS, CoffeeScript が使えて Livereload してくれるフロント周辺の作業環境がほしいと思いながらも自分にしっくりくる構成ができなかったんですが、最近 rack-livereload を見つけてピースが埋まった感じがしたのでまとめます。

記事を書くにあたり naoya さんのひな型に大いに影響されてますが、ここでは npm でインストールするのは bower だけにして基本的には Sinatra と Guard に任せています。

Sinatra, Slim, Sass, CoffeeScript

土台の土台としてシンプルな Sinatra アプリから。Gemfile を書いて bundle

Gemfile

source 'https://rubygems.org'

gem 'sinatra'
gem 'sinatra-contrib'
gem 'sass'
gem 'slim'
gem 'coffee-script'

group :develoopment do
  gem 'shotgun'
  gem 'thin'
end

workbench.rb

require 'sinatra/base'
require 'sinatra/reloader'
require 'slim'
require 'sass'
require 'coffee-script'

class Workbench < Sinatra::Base
  configure :development do
    register Sinatra::Reloader
  end

  get '/' do
    @title = 'Index'
    slim :index
  end

  get '/css/application.css' do
    sass :application
  end

  get '/js/application.js' do
    coffee :application
  end
end

views/layout.slim

doctype html
html
  head
    title= @title + ' | Site Workbench'
    link href="/css/application.css" rel="stylesheet"
  body
    == yield
    script src="/js/application.js"

views/index.slim

h1 Workbench
p Workbench for my site.

views/application.sass

body
  background: hsl(0, 0%, 90%)

views/application.coffee

() ->
  'Hoge'

config.ru

require 'bundler'
Bundler.setup
require File.expand_path(File.join('..','workbench'), __FILE__)
run Workbench

これで bundle exec shotgun --server=thin --port=3000 するとサーバーが立って、とりあえずプレビューできます。コマンド名が気持ちいい shotgun

Guard, guard-livereload, rack-livereload

Livereload 環境にするため guard, guard-livereload, rack-livereload を導入。rack-livereload があればブラウザ拡張は必要ありません。

続きを読む

/usr/lib/libmecab.dylib が空シンボリックリンク

libmecab.dylib -> /BinaryCache/MeCab/MeCab-187.81~1/Root/usr/lib/libmecab.1.0.0.dylib

自分もこのせいでトラブらされているようなのでメモ。 Lion 10.7.4。

あと手元で確認すると libCRFSuite0.10.dylib も /BinaryCache 以下へのシンボリックリンクになってた。

libCRFSuite0.10.dylib -> /BinaryCache/CRFSuite/CRFSuite-18~235/Root//usr/lib/libCRFSuite.dylib

TextEdit で日本語を入力すると落ちる、システム環境設定を開いた瞬間に落ちる、など id:kento_1218 さんの書いているような症状が絶賛出現中。リンクしなおして sudo update_dyld_shared_cache -force したりしても改善せず……。

追記(06/09):gdb, vmmap, dtrace で挙動を見てみても結局よくわからず。試しに mecab-0.95 *1 を自前ビルドして /usr/lib/libmecab.1.0.0.dylib に置いてみたら、このファイル内で SIGSEGV で落ちる症状は消えた……けど他のアプリが SIGBUS / KERN_PROTECTION_FAILURE を出して落ちるようになった*2。仮に原因が特定できたとしても再インストールは必要そう。

*1:http://www.apple.com/opensource/ に0.95とあったので。

*2:Sandbox 絡み?とも思うけど未詳。