LESS.jsをchromeのローカルでも使用する方法。と、その為のアプリ作った!
CSSのコーディングをスピードアップする方法で、LESSやSassのようなCSS拡張メタ言語があります。
最近になって使い始めたのですが超便利ですね。
僕はLESSの方を使っています。ローカル環境でコーディングするにはless.jsがあるので便利なのです。
しかし、このless.jsですがローカル環境のChromeでは動きません。
Firefoxでは普通に動くのに。
調べてみるとChromeのjavascriptのセキュリティが問題のようです。
僕はChromeを基本的に使うので、今更FireFoxを使えといわれても困ります。
デベロッパーツールもChromeの方がなれているし。
ということで、どうにかこの問題を解決できないかと調べた所、Chromeを起動させる際に下記の起動オプションを付ければOKになるらしい。
--allow-file-access-from-files
つまり、ターミナルを起動して↓のように打てば良いということですね。
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --allow-file-access-from-files
このコマンドで起動したらless.jsが効いています。
※さっきまでcssが効かずに崩れていた。
このコマンド用のアプリを作成した
しかし、毎回これをターミナルから打つのも面倒くさいのです。
そこでMacならAutomatorの登場です。あのロボットです。
こいつを使って先程のコマンドを実行するアプリを作ればよいのです。
作り方は↓この通り。簡単です。
んで、これをアプリとして保存。
調子にのってロゴも作ってしまいました!
↓この通りドッグにも格納。それっぽい!
ということで、このアプリは下記からダウンロードできます。
良かったらどうぞ。less.jsライフを!
※アプリを起動する時はchromeを完全に落としてください。