買った。

HUNTER×HUNTER モノクロ版 31 (ジャンプコミックスDIGITAL)
冨樫義博
集英社 / ?円 ( 2013-03-04 )

Emacsでscss-modeを使う

解決した 13.03.12

インストールは普通にlist-packageで。

設定はscss-mode設定 / 牌語備忘録を参考にして、rbenvで入れたscssにパスを通しておいた。

scssを普通に使っているぶんにはなかなか快適だけど、Compassと一緒に使うと困る。

何が困るのか？

例えばcompassのblueprintを使いたい場合、importのところでコケる。

自分でscss叩いてみると

$ scss --check sass/screen.scss
Syntax error: File to import not found or unreadable: blueprint/reset.

importできてないっていうエラー。まぁcompassで挿入されるから実体がないのはしょうがないけど、scss --checkでエラーが発生したところで終了するのも困る。全てのエラーを補足するようになっていればいいのにと思ったりもするが。flymakeの意味無いじゃん。

compassコマンドのほうに構文チェック用のオプションないかなぁと見てみても、作成されたcssのバリデーターくらいしか用意されていないみたいだ。createした時にファイルを用意してくれるオプションでもいいんだけど。

というわけで、他のCompass使いの人達はどうやって構文チェックしているんだろうか？

検索かけてもほとんどヒットしないんだよなぁ

IEでtwitter-bootstrapを使うとラベルの角が丸くなくって残念な感じになるのだけど、CSS3Pieを使うことで

• border-radius
• box-shadow

が解決する。

bootstrap-sassと一緒に使う

インストール

$ compass create bstrap -r bootstrap-sass --using bootstrap
$ cd bstrap
$ compass install compass/pie

これで stylesheets/PIE.htc, sass/pie.scss, stylesheets/pie.css の3つのファイルが導入される。

PIE.htcのコンテントタイプをtext/x-componentにしなければならないという問題が残っている。apacheを使っている場合は.htaccessにでも書いておけばいいらしいが、Flaskの場合はデフォルトでapplication/octet-streamで送ってしまうのでどうにかしないといけない。

FlaskでPIE.htcのContent-Typeをtext/x-componentにする。

Reponseオブジェクトのmimetypeを指定して返すようにする。

@app.route("/PIE.htc")
def pie_htc():
  handle = open("static/bstrap/stylesheets/PIE.htc", 'r+')
  return Response(handle, mimetype='text/x-component')

使う

pieをincludeする

.test-box {
  @include pie;
  @include border-radius(3px);
}

全部で2時間超えだが、今日は早起きして暇だったので一気に全部見た。

• SASS and Compass for Web Designers

twitter-bootstrapが要素にクラスを追加してデザインを組んでいくので、HTMLをガシガシいじっていくのに、LESSにほとんど手を加えないのに対して、

Compass+SassはHTMLはほとんどいじらず、それぞれの要素にCSSを適用してデザインしていくっていう感じだった。まぁこっちのやりかたが王道なんだろうけど。

• LiveReload便利。Yeomanとcompassは良い感じに使えるんだろうか？それともappstoreで購入したほうが幸せになれるんだろうか？
• normalize.cssとcompassのresetの違いを理解しておく。ちなみにbootstrap-sassでresetすると悲しいことになるのでやめておこう。
• このチュートリアルではBlankworkというグリッドシステムを使っていた。ちなみにレスポンシブ・ウェブデザインには対応していない。対応しているのだとZen-GridsとかSusyがある。sofによるとSusyは歴史があるらしい。

Compassで便利だなと思ったもの

• hide-textはtext-indentでとばしていた

例えば　SQLAlchemyである週（今週とか先週）で検索をかけたいとか結構ある(calendar daysじゃなくてworking daysとか)。

そういう時に今日が何曜日か調べて月曜日から金曜日までのたし引きをするのがすぐに思いつくんだけどスマートじゃないのでちょっと調べたらdatetime.isocalendarっていうメソッドで今日が今年の第何週かが返ってくる。

というわけなので、週の1日目（月曜）と5日目(金曜)を探せばいい。

>>> from datetime import datetime
>>> today = datetime.now()
>>> today
datetime.datetime(2013, 3, 8, 18, 48, 12, 860947)>>> today.isocalendar()
(2013, 10, 5)
>>> ti = today.isocalendar()
>>> datetime.strptime("{} {} {}".format(ti[0], ti[1], 1), "%Y %W %w")
datetime.datetime(2013, 3, 11, 0, 0)

ん、次の週の月曜日を指している？

というところがハマったポイントでisocalendarは1からはじまるけど%Wは0からはじまるみたい。

なので第何週目かから1を引いておく

>>> datetime.strptime("{} {} {}".format(ti[0], ti[1]-1, 1), "%Y %W %w")
datetime.datetime(2013, 3, 4, 0, 0)
>>> datetime.strptime("{} {} {}".format(ti[0], ti[1]-1, 5), "%Y %W %w")
datetime.datetime(2013, 3, 8, 0, 0)

あとはデータベースに問い合わせをすればよい。

つい先日にリリースされたcoffeescript-1.6.1からSourceMapがサポートされたので早速使っているけど、デベロッパーツールでcoffeescriptのソース上にエラーが表示されるのでかなり便利。

Chromeの設定

デベロッパーツールのギアアイコンをクリックすると設定画面が出るので「Enable souce maps」にチェックを入れる。

coffeescriptでmapファイルを出力する

コンパイルするときに-mオプションを渡すと、.jsファイルの他に.mapが作成されるのでsoucemap対応のブラウザで読めばいい。

coffee -c -m sample.coffee

まとめ

これからraphael使う予定なのでcoffeescriptの開発環境が改善されるのは素敵だ。

CoffeeScriptファーストガイド モダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚 直
翔泳社 / 2940円 ( 2012-05-26 )

perlでいうところのPerl::Tidyみたいなものかな。

• autopep8

自分の開発環境ではflymakeはしらせているので、autopep8は必要ないけど、他のヒトのpythonスクリプトを取り込む時には一回かけておくとflymakeに警告されないようになるのでなかなかいいかもしれない。

Sass関連のチュートリアルで、ここ一年の間に更新されたものを探してみた。

• 35 Great Resources for Compass and Sass

にはお目当てのものはほとんどなかったなぁ。

Sass Tutorial: Building An Online VCard With Sass & Compass

タイトルの通り、VCard を作りながらSassとCompassの作業を学ぶという内容。ワイヤーフレームを使ってデザインしているので、こっち方面が素人すぎる僕には楽しめる内容だった。

socialsectionのところの

text-indent: 100%;  
whitewhite-space: nowrap;  
overflow: hidden;

ってなんじゃろかと思ったら[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニックなのね。

Improve your responsive design workflow with Sass

レスポンシブ・ウェブデザインのためのグリッドシステムを作ってみようっていう内容。可変グリッドとVertical Rhythmを実装していく。

グリッドシステムは出来合いのを使うことが多いけど、どういう感じで実装されているのかを知っておけば弄りたいときに都合がいいかなと思う。

それからVertical Rhythmはこのサイトがわかりやすかった

SASS and Compass for Web Designers

スクリーンキャストだけど、時間がかかりそうなので見てない。週末用にストックしておく。

Compassのリファレンスにひと通り目を通して、Blueprintのグリッドサンプルを試したので、他のフレームワークというか最近のSass界隈の情報も仕入れたくなったのでググった。

• 30 Amazing Resources for Sass Lovers

日本語の情報はあまりないね。

Bourbon

酒にちなんだ名前は素敵。

A simple and lightweight mixin library for Sass.と銘打っているようにmixin詰め合わせた感じで、フレームワーク的にCompassに近い。

Bourbon上に構築されたBourbon Neatっていうグリッドフレームワークもあるが、これも働きたくないものは酒を飲めと暗示されているようで素敵感が漂っている。

Compass と Bourbonどっちがいいの？

sofに投稿されそうな質問（で、建設的じゃないという理由で速攻クローズされる）だが。

bourbon派の意見としては、bourbonは分かりやすいらしい。

• 実態ファイルが見える。ただのscssファイル。なので階層構造もおそらく自由にできるはず。
• ドキュメントが読みやすい。サンプルも付いている。
• コンパイルが軽い。
• 小さいライブラリなので習得にほとんど時間がかからない。

確かにドキュメントはbourbonのほうが読みやすかった。

Rubyの知識がないとコンパイル時になにやっているのかわからんという指摘もされてた。

一方でCompass派の意見として

CompassはBourbonのスーパーセットみたいなもんだからサブセットなんて必要ないじゃん、存在域がわからん(意訳)

みたいなのもあった。

結論は好きな方使え

Centurion

Centurionはresponsive web frameworkだ。Docsをみると、んーbootstrapみたいにでかいフレームワーク目指してんのかなぁと思ったが、Hacker newsでも似たような事言われてた(bootstrappyってw)

僕だったらbootstrap-sassを使うな。

Foundation

bootstrapの対抗だったらFoundationのほうが有名な気がするが、最近バージョンが上がってモバイルファーストになったらしいがよくわからん。

そもそも、フレームワーク臭がいやだなーってことでbootstapの代わりになるようなものを探し始めたのに、フレームワークの比較に収斂しつつあるなんてダメダメだ。

• Responsive CSS Framework Comparison

とはいえFoundation4は面白そうなのでそのうち触ってみようっと。

おまけ

検索してたら見つけた

• Designing Custom Github Demo Pages

デザイン力とかCSS力が足りないので今年はそこら辺を強化しようとおもっているんだが、CSS拡張メタ言語のいいところは、先人の知恵をライブラリとして取り込んでコモディティ化できることかなと思っている。

既にhail2u.netでも書かれていた

様々なところで公開されているCSSのエッセンスを取り込んだ自分なりのCSS製作環境を構築するというような利用の仕方もできる。つまりはこれこそが必要とされていたスタイルシート言語ということなのではないか。Sass、そしてSassy CSS (SCSS)

Stylus(そしてnib)は構文が好みなんだけど、ユーザーの層が薄いのでとりあえずはSassに入門してみることにした。

インストール

Rubyはrbenvで入れてあるので

$ gem update --system
$ gem install sass
$ gem install compass

でok

Sassを学ぶ

ちょっと前にズルいStylus書いててStylusの構文というかそういったあたりのmix-inとかは理解しているので、構文はチュートリアルをざっと読めば理解できた。大体似たような構文だけどsigilがperl風味。

StylusがpythonっぽいとするならLESSとかSass(Scss)はperlとかrubyっぽい。そう考えるとsassはインデントでネストを表現するperlみたいな印象を受けるのでちょっと気持ち悪いし、Stylusのほうがスッキリしていて綺麗に見えるのは納得できる。だったらsassじゃなくてscssで書いたほうがいいかなぁとも思う。

次に、CSS Preprocessor Advent Calendar 2012を読めばよい。これでかなり理解が深まるが、特にOOCSSとSassは構造化の観点からCSSを考える上で非常に参考になる。

cssはクラスベースというよりはプロトタイプベースの継承って考えたほうがしっくりくるかもしれんなぁと思った。spineのextendとincludeと似たような感じだしねー。

あとは次のスライドを読めばいいですね。

• Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ

Emacsの設定

M-x list-packagesからscss-modeをインストールする。

これはデフォルトで保存時にコンパイルが走ってうざいのと、インデントが4文字スペースなのでscss-mode.elを使うの通りに設定を変更しておく。

ちなみにファイルを開くとflymake関連エラーが出るけどそれは直してない。

Sass and Compass in Action
Wynn Netherland
Manning Pubns Co / 4356円 ( 2013-02-28 )