New Entry

Windows PC に Ruby と Sass を導入する方法

Category
Bookmark

Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語(って言い方でいいのかな)であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。

Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC(XPとVistaで試しました)にSassを導入する手順を紹介します。

Rubyのインストール

SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。

インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。

ruby -v

ruby 1.9 1p430(2010-08-16 revision 28998)

みたいのが出たらgemのアップデートに進んでください。

そうではなく、

「'ruby'は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。」

と表示されたら、このまま進めて環境変数を設定してください。

環境変数を設定する


マイコンピュータを右クリックしてシステムのプロパティから環境変数を開いて、「Path」の末尾にインストールしたRubyのbinフォルダのパスを加えます。 RubyInstallerでそのままインストールしていれば、;C:\Ruby191\bin とかそんな感じになると思います。

再び ruby -v をしたら、ruby 1.9 1p430(2010-08-16 revision 28998)みたいのが出てきたと思います。 出てこなかったら、恐らく環境変数のPath指定が間違っています。

gemのアップデート

念のため、

gem update --system

と打ってエンターを押して、gemをアップデートしておきます。 よく分からなくてもとりあえずやっておけば良さそう。

Sassのインストール

そのまま続けて、次のコマンドを叩きます。

gem install haml
gem install sass

これでSassはインストール完了です。
Rubyのインストールさえ済めば、Sass自体はあっと言う間にインストールできます。

2011-06-08 追記:Sass が Haml から分離したので、コマンドが変わったぽいです
参考:Sass(CSS拡張メタ言語)に関す資料 - NAVER まとめ

Sassを試す

ところで、コマンドプロンプトの行頭の表示は恐らく、

C:\Document and Settings\Owner

とかそんな感じになってるんじゃないでしょうか。 その場所をエクスプローラで開きます。

そこに、いつも使っているエディタでtest.scss というファイルを作成し、次の内容を記述します。

$red: #f00;
$blue: blue;

html {
  background: $red;
  body {
    background: $blue;
  }
}

保存をしたら、コマンドプロンプトで次のコマンドを叩きます。

sass test.scss test.css

C:\Document and Settings\Owner のフォルダを見てみてください。 test.css というファイルができているはずです。 それをいつものエディタで開くと、

html {
  background: red;
}
html body {
  background: blue;
}

となっていると思います(閉じカッコの位置とか微妙に違うかも)。
これで、Sassを使う事ができました。

Sassを、もう少し詳しく

cssファイルの生成形式

Sassは、ファイルを監視する機能が付いています。 この機能を使うと、.scssファイルを上書き保存した瞬間に.cssファイルを生成してくれるので、とても便利です。

やり方は簡単で、コマンドプロンプトから、

sass --watch test.scss:test.css

とするだけです。 終了したい時は Ctrl+c です。

また、.cssファイルを生成する時のフォーマットを選択する事ができます。

sass --style expanded --watch test.scss:test.css

にすると普通のCSSっぽくなって、

sass --style compressed --watch test.scss:test.css

だといわゆるminify化した物になります。

scssファイルを置く場所

今回は分かりやすくするために C:\Document and Settings\Owner に.scssファイルを置きましたが、もちろん自由な場所で作業する事ができます。 それには、sass **** というコマンドを叩く場所を変えるだけです。

CUIの知識がちょっとだけ要ります。 よくわからない場合は、コマンドプロンプトで下記のコマンドを試してみると良いかもしれません。

今いるディレクトリのファイルなど一覧(UNIX系で言う ls)
dir
ディレクトリ移動(ここでは My Documents に移動)
cd My Documents
ドライブ変更(ここではCドライブからNドライブに変更)
cd /d n:\

注意点

ファイルの文字コードはUTF8、改行コードはLFにしておいた方が無難らしいです。

あとは、Sassで.scssライフを満喫するだけです。

コーダー飲み vol.4秋のLTで、新人教育について話した

Category
Bookmark

先日、Tweetvite :: コーダー飲み vol.4秋 という会があったんですが、LT枠で新人教育について話しました。

これまでのWeb業界って、趣味が高じて仕事になった的な人が多いような気がしているんですが、今後はそこまで知識のない新人とか、もっと言えば入社してから勉強する新卒なんかも現れてくるんじゃないかなとか。

スライドはこちらです。
新人教育について

みんなも Google Libraries API を使う時は、会場の回線状況を確認してからにしようね!!(なぞ

HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために という本の執筆に参加しました。

Category
Bookmark

随分遅くなってしまいました。すみませんすみません。

こもりさん西畑さんのお二方と一緒に書いた本、HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くためにが発売されています。
「とりあえずHTML+CSSコーディングはできるよ!」という人が読むと凄くいいと思います。

「とりあえずHTML+CSSコーディングができるようになりたいな!」という人は、一週間でマスターするXHTML & CSS for Windowsという本を読むと良いんじゃないでしょうか!

一週間でマスターするXHTML & CSS for Windows一週間でマスターするXHTML & CSS for Windows
著者:浜 俊太朗
毎日コミュニケーションズ(2008-07-24)
おすすめ度:3.5
販売元:Amazon.co.jp
クチコミを見る

私的Vimメモ

Category
Bookmark

「Vim使ってます」って言ったら「えっすげぇ俺なんてViとしてしか使ってないよ」とか言われて (´・ω・`)? ってなった程度の人が書くメモです。

はじめてVimを使う人にコピペで渡す用

※大文字(例えばG)は Shift + g と打つこと
※連続している文字は、ゆっくり打っても大丈夫(ddなど)

━━━━━━━━━━━━━━━━━━━━
 ■ノーマルモード
━━━━━━━━━━━━━━━━━━━━
矢印キー
 hjkl

アンドゥ
 u

リドゥ
 Ctrl+r

一行まるごとをカット
 dd

一行まるごとをコピー
 yy

ペースト
 P

最上段へ移動
 gg

最下部へ移動
 G

任意の行へ移動
 123G とか

文字列検索
 /hogehoge
	次の候補
	 n
	前の候補
	 N

保存
 :w

保存せずに閉じる
 :q


━━━━━━━━━━━━━━━━━━━━
 □ノーマルモード以外
━━━━━━━━━━━━━━━━━━━━
ノーマルモードに戻る(困ったらESCしてuを押す)
 ESC


━━━━━━━━━━━━━━━━━━━━
 ■挿入モード(テキスト打つ時はこれ)
━━━━━━━━━━━━━━━━━━━━
挿入モードに移る
 i


━━━━━━━━━━━━━━━━━━━━
 ■ビジュアルモード
━━━━━━━━━━━━━━━━━━━━
ビジュアルモードに移る
 v

選択幅を広げる
 j か k

カット
 d

コピー
 y

いつも参考にしているすごいページ

Vim 基本操作まとめ - Archiva

個人的な設定メモ

ルーラー
nu
ペースト
paste
タブのスペース数
ts=2
まとめてインデントのスペース数
sw=2
ハイライトがうまくいってない時
filetype=html
文字列検索でハイライトされない時
hlsearch
BSで行を削除できない時
backspace=2

ほぼ日手帳をやめてモレスキンにしました

Category
Bookmark

今年からモレスキンにしました。 ほぼ日手帳をやめた理由は、自分にとってはオーバースペックすぎたからです。 1日1ページはいらないなあと。

代わりに使っているのが、モレスキンのウィークリーホリゾンタル。 これのポケットサイズです。 薄くてシャレオツで気に入っています。

P9121106_s
ゴムバンドをナナメかけにして、無印良品のシャープペンを挟んでいます。 本体が歪むのがちょっと不満なので、ペンホルダーで何か良いものがないか探し中。

ウィークリーホリゾンタルには、3つのカレンダー表示があって、それぞれを使い分けています。

P9121110_s
まず、これがいわゆるカレンダー的な表示。 ここには、特別な予定(飲み会とか、勉強会とか)がある日に○を付けています。

P9121112_s
で、日ごとのページには、詳細な予定を書いています。

P9121114_s
月ごとに日付が縦に並んでいるページには、主に仕事のスケジュールを記入しています。 日数を見える化しやすいです。

カスタマイズ

モレスキンはカスタマイズも楽しみの一つらしいのですが、僕もいくつかやっています。

ちょっとしたメモ

P9121108_s
ウィークリーホリゾンタルには、自由に書けるスペースが少ないので、同じくモレスキンのヴォラン(XS)を切り離して、クリップで止めています。 ちょっとしたメモを渡したい時なんかにも便利です。

不要なページが開かないように

P9121117_s
ウィークリーホリゾンタルには(他のシリーズにも)、世界地図とか様々な単位とか、資料的なページが含まれているのですが、個人的には不要であり、もっと言えば余計なだけなので、まとめてクリップで止めて、誤って開かないようにしています。

しおりを増やす

P9121119_s
ほぼ日手帳で便利だったのが、しおりが複数ある事でした。 そこで無印良品のしおりシールを使って、前述の3種のカレンダーそれぞれにしおりを挟んでいます。 これは各ページへのアクセス性が凄く良くなって、とても便利です。

拡張ポケット

P9121122_s
拡張ポケットには付箋を忍ばせていますが、あまり使ってないです。 拡張ポケットの上手い使い方は今後の課題だなあ。

そろそろ来年の手帳を選ぶシーズンになってきましたが、引き続きウィークリーホリゾンタルで、もうちょっと工夫を増やしてやっていく予定です。