こまるわーとか書いたんだけど、別件でscssのオプション調べてたら--compassっていうcompass用のオプション見つけたので、これを加えればいける。

scss-modeのソース調べたらscss-sass-optionsにオプション渡せばいいっぽいので、setqした。

(add-hook 'scss-mode-hook
          (lambda ()
            (define-key scss-mode-map "\M-{" 'my-css-electric-pair-brace)
            (define-key scss-mode-map ";" 'my-semicolon-ret)
            (setq css-indent-offset 2)
            (setq scss-sass-options '("--compass"))
            (setq scss-compile-at-save nil)
            (flymake-mode t)
            ))

あとはConfigulation Errorでしょっちゅう死ぬので以下の設定は追加しておいたほうがよい。

(defadvice flymake-post-syntax-check (before flymake-force-check-was-interrupted)
  (setq flymake-check-was-interrupted t))
(ad-activate 'flymake-post-syntax-check)

参考

• Emacsの『scss-mode』
• flymakeのsyntax-checkが異常終了しても無視するようにする

compass watchでコンパイルするたびにブラウザリロードするのが面倒になったので、Sass+Compass, Guard, LiveReloadのRubyな組み合わせかなぁと思ったら、PYthon LiveReloadを見つけたので早速使ってみた。

Emacsでscssファイルを編集してセーブすると、更新を完治してcompassでコンパイルした後、ブラウザを自動リロードするので、かなり楽ちん。ブラウザ用にモニターが欲しくなる。

インストールはドキュメントの通りに。chromeの拡張は入れておく。

GruntfileはPythonスクリプトなのでかなり自由度が高く、なんでもできそう(growl通知とか)。

Sphinx と LiveReload を組み合わせるを参考にCompassの設定をしてみた。ソースコード見てたらCommandCompilerを使ったcompassっていう関数でも作っておけばいいんだろうなぁと思いつつあとでやるかも、やらないかも。

#!/usr/bin/env python

from livereload.task import Task
import logging

def compass():
    from subprocess import Popen, PIPE
    argv = ["compass", "compile"]
    p = Popen(argv, stdin=PIPE, stdout=PIPE, stderr=PIPE)
    stdout, stderr = p.communicate()
    if stderr:
        logging.error(stderr)

Task.add('sass/screen.scss', compass)

Sphinxもブラウザが自動更新したら快適だろうなぁと思ったのでこっちも対応しておく。

こういうの↓に騙されないようにしましょうっていう本。

逆にちょいとばっかし印象操作を加えたい場合にもどういったあたりを弄ればいいのか分かるので面白いかもしれない。

• 結果を表示するのに大きさの異なるフォントを使う（最初にしめしたやつとか）
• 時間枠をちょいちょいといじる手口(犯罪率とか)
• 一年はおよそ50万分
• 統計はすべて、だれかが何かを数えた結果

研究であってもこういう事態にはしょっちゅう遭遇する。主張したい結果が決まっているから、みんなそれを補強するようなデータを集めるからね。まぁグラフいじったりするのはないけど敢えて散布図を描かずにクロス集計表を作って相関があるという主張を通そうとするヒトはそこそこ存在する。

あやしい統計フィールドガイド―ニュースのウソの見抜き方
ジョエル ベスト
白揚社 / 2310円 ( 2011-12 )

買った。

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に警告されないようになるのでなかなかいいかもしれない。