PHPサイエンス・ワールド新書のリスト（Kindle Unlimited対象多数）
Amazonプライムデー関連でKindle Unlimitedを99円で3ヶ月間利用できるキャンペーンが先日まで実施されていて、利用を開始。Unlimited対象本を漁ってたらPHPサイエンス・ワールド新書既刊78冊のうち48冊がUnlimitedで利用できることがわかったので、自分用にリスト。
このシリーズは2009年9月に始まり、2014年3月のNo. 078を最後に続刊してないみたい。
Jekyll 2.0 の新機能を触ってみた
Jekyll 2.0 が正式リリースされたので触ってみた。特に気になった機能3つについてざっくりと。以下 2.0.2 で確認。
- Collections
- Sass/SCSS と CoffeeScript サポート
- 追加フィルター
where/group_by
Collections
従来の post や page に加え、文書タイプをユーザが定義できるようになった。例として 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.yml で output: 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 フィルター where と group_by
Liquid 出力タグ（Output tags）のフィルターとして where と group_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 をあまり使いこんでないので、もっといい使いどころがあったら教えてください。
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種類あります。
- レスポンスの HTTP ヘッダで渡す
- ボディ内のコメントで渡す
Webアプリのモックアップ作業土台を作る その2 Sprockets
前回のつづき。
前回作った作業台に Sprockets を導入して assets 提供を分離します。といっても Sprockets 使っていくかどうか自分でも確信持ててないのでリポジトリではブランチにしておきました。
Sprockets を導入するメリットとしては、このままデプロイするケースを視野に入れたときに圧縮機能を追加しやすかったりプリコンパイルできたりするところでしょうか（どちらも今回はやってません）。
というわけで、まずは Gemfile に sprockets 関連の 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 があればブラウザ拡張は必要ありません。
