CoffeeScript x Sass x SublimeText2 x LiveReload2 → Happy Coding!

coffees

最近はイベントやらインスタレーションやらと、
oFやらflashやらAIRやらずーっとさわれていたのでとても楽しかったのですが、
もちろんweb屋でもあるので、お仕事で久しぶりにまるっと簡単なコーディングしました。

にしても、html,css,js。。めんどい。。
なんだろう、あのクラス開発からこちらに移った時に感じるダダ書き感。。
テンション上がらない。。

ということで、いい機会なのでようやく重い腰を上げて CoffeeScript やら Sass やってみるかーと思い立ったので、
CoffeeScript と Sass で SublimeText2 と LiveReload2 使って自分用テンプレート作ってみるところまでめも。

F-siteでkatapadさんのお話聞いおいてよかった。あざます！:)

はいまずCoffeeScriptとSassインスコね。

sudo npm install -g coffee-script
sudo gem install sass

おわり。

とりあえずディレクトリ切ってやってみる。
/src/sass/style.scss
/common/css/

style.scssの中が以下。scssで書く。へー。sassはもうoldバージョンなのかー。
scssの方がなじみやすいしいいね。

$color:blue;
$background:#FFF;

#main {
  background:$background;
  color: $color;
  font-size: 1em;
 
  a {
    $link-color:mix($color, blue);
    font: {
      weight: bold;
      family: Arial, sans-serif;
    }
    color: $link-color;
    &:hover {
      color: lighten($link-color, 20%);
    }
  }
}

で早速sassこんぱいる。
ターミナルとかでプロジェクトディレクトリまで行って、

$ sass ./src/sass/style.scss ./common/css/style.css

で ./common/css/以下に、style.css できた。

#main {
  background: #999999;
  color: blue;
  font-size: 1em; }
  #main a {
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: blue; }
    #main a:hover {
      color: #6666ff; }

おお、なんか書き方がネストされてて見やすい。

$ sass -t compressed sass/style.scss css/style-min.css

圧縮率はコマンドで変更できるみたい。

#main{background:#fff;color:blue;font-size:1em}#main a{font-weight:bold;font-family:Arial,sans-serif;color:#7f60e5}#main a:hover{color:#c6b8f3}

1行！(｀・ω・´)ｷﾘｯ

ちなみに後で入れるLiveReload2のsass書き出しoptionで
この辺りは4段階くらい圧縮率調整できるのでコマンドでやることはもうないでしょね。

さてsassの書き方はこことかで覚えるとして、
一通りcoffeeとsassでフレーム作ってそれを自動コンパイルくらいまでは行ってみよう。

ちなみに紹介されてる通り基本の書き方を書いてみたのが以下。

// $ 変数
$color:blue;
$background:#999;

// セレクタはネスト　&で親要素参照
#main {
  background:$background;
  color: $color;
  font-size: 1em;

  a {
    $link-color:mix($color, blue);
    font: {
      weight: bold;
      family: Arial, sans-serif;
    }
    color: $link-color;
    &:hover {
      color: lighten($link-color, 20%);
    }
  }
}

// Interpolation #{} 関数名とかに変数使いたい時
$side: top;
.rounded-#{$side} {
  border-#{$side}-radius: 10px;
  -moz-border-radius-#{$side}: 10px;
  -webkit-border-#{$side}-radius: 10px;
}

//　Mixins function関数みたいなもん
@mixin clearfix{
  content:"";
  display:block;
  clear:both;
}
#main:after{
  @include clearfix;
}
#comment:after{
  @include clearfix;
}

//　引数も使える
@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

はい、かんたーん！＼(^o^)／

んで、つぎ。

SublimeText入れてみる。

http://www.sublimetext.com/

とりあえずPackage Control入れて色々と補完効くようにする。

control+` でコンソール開く。（View – Show Console）

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

で再起動。

control + shift + p（Tools – Command Palette）で
Package Control:Install Package が選択できるようになってるのでここから色々インスコ。

インストールしたパッケージの確認は
Package Control: List Packages

パッケージの削除は
Package Control: Remove Package

んでとりあえず入れたパッケージ。

HTML5,CSS,jQuery,Sass,SCSS,Bracket Highlighter,SublimeLinter,
ActionScript3,CoffeeScript,AutoFileName,Tag,Git etc…

※SublimeLinter入れたらなんかjsに謎の白枠出て邪魔だったので後に消した。

SublimeText2のPackage SublimeLinter消したらjsに出てた謎の白枠消せた。:-phttp://t.co/ITYZ3uu6

— you tanaka (@rettuce) January 22, 2013

再起動。

ちなみにパッケージの内容はここに入るみたい。
/Users/***/Library/Application Support/Sublime Text 2/Packages

コード補完とか自分で微修正したい時は、
例えばHTMLタグとかだったら
/Users/***/Library/Application Support/Sublime Text 2/Packages/HTML/HTML.sublime-completions
の中身をいじればおk。
scriptトリガーにsrc=\”$2\”とか追加しておけば、
script -> tabで

<script type="text/javascript" src=""></script>

と、src追加できる。

あと、htmlのsnippetは別になってて、それを以下みたいにしておいた。
これ。
/Users/***/Library/Application Support/Sublime Text 2/Packages/HTML/html.sublime-snippet

<snippet>
	<content><![CDATA[<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

	<title>$1</title>

<meta property="fb:admins" content="" />
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:description" content="" />

<meta name="author" content="" />
<meta name="copyright" content="Copyright © All Rights Reserved." />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript" src="./common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./common/js/common.js"></script>
<script type="text/javascript" src="./common/js/main.js"></script>

<link rel="stylesheet" type="text/css" href="./common/css/style.css">
</head>

<body id="" class="">
<div id="wrapper">

$0

</div>
</body>
</html>]]></content>
	<tabTrigger>html</tabTrigger>
	<scope>text.html</scope>
</snippet>

あと、自分設定として
⌘+,で個人設定できるからそこを適当に好きなようにいじる。
自分はこんな感じ。

"auto_indent": true,
"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
"draw_white_space": "false",
"fold_buttons": true,
"font_size": 11,
"highlight_line": true,
"ignored_packages":
[
	"Vintage"
],
"line_padding_top": 0,
"match_selection": true,
"smart_indent": true,
"tab_size": 4,
"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": false

後はキーバインドを自分用にカスタマイズしとく。
自分はFlashBuilderとかに合わせておく。

Preferences -> Key Bindings -> User

[
	{ "keys": ["ctrl+shift+n"], "command": "new_window" },
	{ "keys": ["alt+up"], "command": "swap_line_up" },
	{ "keys": ["alt+down"], "command": "swap_line_down" },
	{ "keys": ["alt+command+down"], "command": "duplicate_line" },
	{ "keys": ["command+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} }
]

こんな感じかな。この辺りは自分のお好みで。
クラスメソッドさんのとこが詳しかった。あざす。:)

ほいつぎー。

LiveReload2

こうた。800円くらい。
http://livereload.com/

と言ってもブラウザのエクステンション入れて、
app起動させて監視するフォルダ指定して、
ブラウザのエクステンションONしておけば後は勝手にブラウザリフレッシュしてくれる。
後は Compile SASS, LESS, Stylus, CoffeeScript and others にチェック入れて、
Optionsから読み先と書き出し先書いておけばおk。
とりあえずSublimeTextで編集したhtmlとsassは動的に変わった。
これでFireFoxのfirebugでリアルタイムコーディング→ソースにコピペって修正の
最後の手順やらんくてよくなった。わーい

ほいつぎ。

CoffeeScript

ようやくさわるわー。orz

と言ってもこちらも既にLivereloadが動いているので、
alert “Hello”とか打ってtest.coffeeってファイル作って保存した瞬間にtest.jsできるw

/coffee/test.coffee
/coffee/test.js

この書き出し先もOptionsから読み先と書き出し先変更しておけばおk。

CoffeeScriptもこの辺りを見ながらざーっと基本やった。
http://d.hatena.ne.jp/nodamushi/20110108/1294518316
http://tmlife.net/programming/javascript/coffeescript-guide-dotou-100-sample.html
http://www.webopixel.net/javascript/529.html
http://www.webopixel.net/javascript/660.html

##### jsメソッド ();省略で書く。
document.write "Hello, world!"
console.log "Hello log."


# 1行コメントアウト

###
複数行コメントアウト
alert "Hello"
###


##### インデントでブロック作成
if true
	document.write "trueのとき！"
else
	document.write "falseのとき！"


##### 変数はそのまま
hoge = 100

# Global変数は明示的にグローバルオブジェクトを指定 -> window
window.hoge = 200
document.write '<br />'

 # 100+100 = 200
document.write hoge+100
document.write '<br />'

 # 100%13 = 9
document.write hoge%13
document.write '<br />'

# 複数行は改行無視
document.write "hoge1
hoge2
hoge3"

# ヒアドキュメント
document.write '''<pre>ABCDEFG</pre>'''


##### Interpolation #{}
# ダブルクォーテーション -> OK
document.write "ダブルクォーテーション #{128*128} -> OK."
document.write '<br />'
# シングルクォーテーション -> NG
document.write 'シングルクォーテーション #{128*128} -> NG.'
document.write '<br />'


##### Object
obj = {
  hoge : 100,
  fuga : "AAA"
  bool : true
}
#  ↓↓↓
obj =
  hoge : 100
  fuga : "BBB"
  bool : true

if obj.bool
	document.write obj.hoge
else
	document.write obj.fuga
document.write '<br />'


##### Array
arr = [1, 2, 3]
arr = [
  1
  2
  3
]

# [1, 2, 3, 4, 5]が生成
arr = [1..5]
# [1, 2, 3, 4]が生成
arr = [1...5]

document.write arr
document.write arr[1]
document.write '<br />'


##### Operator
hoge = 100

# is は === と同じ意味
document.write hoge is 100	# true
document.write '<br />'
document.write hoge is 200	# false

# isnt は !== と同じ意味
document.write hoge isnt 100	# false
document.write '<br />'
document.write hoge isnt 200	# true
document.write '<br />'


##### for in
arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
hash =
  day1 :
    title : '今日のタイトル'
    body : '今日は晴れです。'
  day2 :
    title : '明日のタイトル'
    body : '明日は雨かもしれない。'

#配列
for value in arr by 3 #byでステップ数
  console.log value
#ハッシュ
for key, value of obj
  console.log "#{key} : #{value}"
for key, value of hash
  console.log "#{key} : #{value.title}"


##### function = (引数)->
print = (str)->
  document.write str

print "Hello, world!"


#### Class
class Car
  constructor: (@name, @meters) ->

  move: (meter) ->
    @meters += 100

  show: ->
    console.log @meters

car1 = new Car("car01", 100)
car1.move()
car1.move()
car1.move()
car1.show()

tips系

coffeeでの三項演算子はif then else ！

— you tanaka (@rettuce) January 21, 2013

wordpressでようやくtwitter表示できるようになったから嬉しくなっただけw

CoffeeScriptで即時関数

do ->
  console.log 1
  return

引数わたす。

do (d = document) ->
  divs = d.querySelectorAll 'div'
  return

=> @ で自分渡せる！

$('#btn').click =>
	console.log @

というわけで、自分用のテンプレ js+css をまるっと coffee+sass に移植。

使ってみて思ったのは、
sass、ネストでcss書いていけるのすげー便利！タイプ数めちゃ減る！
引数が四則演算できるのくそ便利！
coffee、まだまだ時間かかるけどこっちも慣れたらめっちゃタイプ数減る！
簡易クラス開発できる！グローバル変数のこととか一切無視できる！
（自分ライブラリは g.とかでグローバル登録してるんだけど:-p）
セミコロンまだ書いてまう！

てことで、
僕もう生のjsもcssも書かない！うそ！

you