こんにちは。きんくまです。
アプリのアップデートの申請を先週末に済ませました。なので、今週中には審査の結果が出るかと思いますです。
さて、アプリのサポートページというかランディングページといいますかそれを今作り直してます。
そんで前のバージョンでは、Sass用ライブラリBourbonというのをヒネて使ってみたのですが、Compassの方が人気があるので、今回はおとなしく使ってみることにしました。
で、ソースマップが実用化されてるらしいので、そうかそうか。Sassでやったらどうだろうとググってみました。
ところでソースマップって？
ここでソースマップとは何かを説明します。
まず最近はcssやjsの生産性を上げる動きがあります。それには、言語をそのままを書かずに、scssやCoffeeScript、TypeScriptなど別の言語をいったん書いて、そこからcssやjsにコンパイルします。
この別の言語にはいろいろと工夫がしてあるので、ベタでcss、js書くよりは早くて楽に書けるようになっています。
ただ、ChromeやFirefoxなどブラウザでデバッグをするときに、読み込むのはコンパイル済み（変換済み）の生のcss、jsなので、エラーや注意してみたい箇所があった場合に、オリジナルソースの.scssや.coffeeファイルではどこなのかというのが探しにくくなっていました。
そこで登場したのがソースマップという仕組みです。
コンパイル前のオリジナルソースと、コンパイル後の生のcss,jsをひもづけるようにしたのです。
そうすれば、エラーがあってもオリジナルソースのどこなのかがすぐにわかるので、修正がしやすくなっています。
Sass / CompassのソースマップをChromeで見られるように
このソースマップという仕組みは最近できるようになってきたので、少しブラウザに設定などが必要です。
すごく丁寧に説明してあるサイトがありましたので、紹介です。Thanks.
Bricss – Using Sass source maps in WebKit Inspector
以下の文は上の方が教えてくれたのを写しているだけです。
コンパイルするとき
sassをコンパイルするときは
--debug-info
をつけるそうです。こっちは試してないです、、。
Compassを使っているときは
config.rbで
sass_options = { :debug_info => true }
を追加します。
このとき書き出し形式をcompressedにはしないようにします。expandedとかでよいのかも。
output_style = : expanded
これでファイル側は準備OKです。compass watchしていたら、一度止めてもう一度コマンドを打ち直しましょう。
Chromeブラウザの設定
URLの欄に以下を入力して設定画面を開きます。
chrome://flags/
Enable Developer Tools experimentsをEnableにしましょう。
そうしたらDeveloper Toolsの右下の歯車アイコンを押して、
General > Enable source maps
Experiments > Support for SASS
をそれぞれチェックします。それから一度ブラウザを落として、立ち上げ直します。
それで、さきほど書き出しておいたcssファイルをみると、対象のエレメントがcssではなくscssをさしています。やったー！
注意とか
これすごく便利なんですが、Experiments機能をONにしてるとdangerousらしい（セキュリティ的になのか、、？）ので必要ないときは切っておいた方がよいみたいです。うー、でも実際はメンドイよね、、。
あと、これはあくまで開発用なので、リリースする際は、コンパイルの設定を:debug_info => falseか、この行自体をコメントアウトしておくとよいかと思われます。
コメントアウトはscssは/* */じゃなくて//でもコメントアウトできるってエラい人が言ってた。
■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！
■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ
