黒い画面

この記事はCSS Preprocessor Advent Calendar 2012の2012年12月16日分の記事なります。

CSS Preprocessor Advent Calendar 2012 2012年12月16日

Sassを使ってグリッドシステムのテンプレート作成に挑戦したいと思います。ちょっとしたパズルを解くような感じで実装できるのでSassの面白さを味わうのにぴったりでおすすめ。ちょっとSassを触ってみた人、これからやってみようかと思っている方に向けて書きました。ではでは、本題へ。

グリッドシステムって？

↑こういうやつ。

カラムをレイアウトするときに、「グリッド○個分の幅のカラム」として配置をすることで、グリッドを簡単に揃えることができるものです。

お馴染みのTwitterBootstrapにもグリッドシステムが入ってますね。これを自作しようってのが今回のテーマ。

作るものを日本語にして頭を整理

いきなりSassを書くのではなく、まずは今回実装するものを一旦日本語にして頭を整理。まずは登場するものと登場する数字を挙げてみます。

登場するもの

• グリッドを囲うもの
• グリッド
• グリッドとグリッドの隙間
• グリッド○個分の幅のカラム

登場する数字

• 全体の最大幅
• グリッドの数
• グリッドの幅
• グリッドとグリッドの隙間の幅
• カラムの幅グリッド○個分の「○」

図では例として、12個のグリッドで出来ているグリッドシステムに、グリッド7個分のカラムとグリッド5個分のカラムを配置してみました。

はい、これでだいぶ作るものが整理されてきました。上記した登場するものをSassで書くことができれば今回の挑戦は成功です。

登場するものと登場する数字に名前を付ける

では、登場するものと登場する数字が揃ったところで、それぞれに名前を付けていきます。

登場するもの

• グリッドを囲うもの → grids
• グリッド → grid
• グリッドとグリッドの隙間 → grid-margin
• グリッド○個分の幅のカラム → column(○)

登場する数字

• 全体の最大幅 → grids-max-width
• グリッドの数 → grids-count
• グリッドの幅 → grid-width
• グリッドとグリッドの隙間の幅 → grid-margin
• column(○)の「○」 → number

すっきりしますね。

どう実装するか、まずは要望を挙げて整理

• HTMLは綺麗なままがいいのでmixinで。あとで別のグリッドシステムに移行するときにHTMLを書き換えるの面倒だから。
• grids-countの数は自分で決めたい。大体汎用性があるのは12だけど、場合によっては増減があるかもしれないので、そこは変数にしておく。どんなグリッドの数でも対応できるようにしたい。
• grid-marginの幅は自分で指定したい。既存のgridシステムって英語のサイトで使うときは綺麗なんだけど、日本語のサイトで使うと窮屈になってしまうだよね。
• grid-widthを計算して求めるのが面倒。ここはSassを使って自動で算出できるようにしたい。

要望をまとめると、

• classにスタイルをはめるのではなくmixinにする。
• grids-count、grid-marginは変数にデフォルト値を設定しておき、自分で上書きできるようにする。
• grid-widthは自分で指定するのではなく、「gridsの幅」から「grid-margin × grid-marginの数」引いた数残りの数字からgrids-countで割る、という数字を用いて算出する。

…どう実装するかが見えてきました。

では、いよいよSassで実装

こんな感じになりました。

解説

では、解説をしてみます。

2つ目のgist「grid.sass」

1つ目のgistはHTMLなので、パーっと見ていただいて解説は飛ばし、2つ目のgistから。

「HTMLは綺麗なままがいいのでmixinで」という要望を叶えるために、全部mixinをはめ込んでるだけです。あ、そういえばSASS記法で書いてます。SASS記法だとSCSS記法と同じように「@include」とも書けますが、「+」だけでもいいので楽ちんです。

+column(7)、+column(5)と、()カッコの中に数字が入ってますが、これは変数に数字を代入しています。詳しくは3つ目のgistの解説で。

3つ目のgist「mixin.sass」

まずは「grid-width」と「number」以外の登場する数字を全て変数にしたものが1行目から4行目まで並んでます。要望にある通り、「grid-width」以外の数字は自分で設定できるようにデフォルト値を設定しておき、自分で上書きできるようにしてあります。さすがに横幅100%だと実用的じゃないので、「grids-max-width」と「grids-min-width」という名前で、「grids」の横幅の最大値と最小値を用意しておきました。

6行目から15行目の「=clearfix」cleafixをmixinにしたものです。SASS記法だとSCSS記法と同じように「@mixin」とも書けますが、「=」だけでもいいので楽ちんです。

では、17行目のmixin「grids」の解説です。さっきの解説通り、「grids」の横幅の最大値と最小値に変数を入れてます。真ん中寄せになるように左右のmarginにautoを入れてあります。あと、「grids」の中に入る「column($number)」は「float: left」で実装するので、mixin「clearfix」をはめ込んであります。

いよいよ今回の一番面倒なところ、mixin「column($number)」の解説に入ります。

まずは16行目、float: leftで横並びを実装してます。

margin: leftに「grid-margin」を指定して、columnとcolumnの間の隙間を実装してます。ただ、「margin-left」を全てのcolumnに設定してしまうと、「grids」からはみだしてしまいます。一番左のcolumnには「margin-left」は適用されないようにする必要があります。その実装をしているのが32行目の「&:first-child」から下の部分。一番目のcolumnは一番左のcolumnなので、そのcolumnには「margin-left: 0」が適用されるようにしてあります。Sassは「&:」を使うことで、親の要素がなんであれ場合によって擬似セレクタが使えるから便利！

「$grid-margin * 1%」の「* 1%」は、「この数字の単位をpxではなく%にする」という場合にこれを付け加えることでそうなります。これを付けないと単位がpxになってしまうので注意。

要望にあった「grid-widthを計算して求めるのが面倒。ここはSassを使って自動で算出できるようにしたい。」を実装しているのが30行目、変数「grid-width」の部分。 パッと見何をやってるのかわかりづらいので、ここでやっていることを図にしました。

小学生の算数のような感じですね。ではでは、gird一つの横幅はいくつでしょう？を解いていている「(100 - ($grid-margin * ($grids-count - 1))) / $grids-count」を左から順番に解説していきます。

まずは一番左の「100」という数字、これは「gridsの横幅」です。「gridsの横幅」を100%としています。

この次のカッコの中のカッコ、「$grids-count - 1」は「grids」の中にある「grid-marginの合計数」を計算しています。「$grids-count」から1を引いたものが「gridsの中にあるgrid-marginの合計数」になります。

カッコの外のカッコ、「$grid-margin * ($grids-count - 1)」は「grid-marginの合計数」に「$grid-marginの横幅」を掛けて、「gridsの中にあるgrid-marginの横幅の合計」を計算しています。

「gridsの横幅」から「gridsの中にあるgrid-marginの横幅の合計」を引く、ということを「(100 - ($grid-margin * ($grids-count - 1)))」でやっています。ここで出た数字が「gridsの中のgridの横幅の合計」になります。

この行の最後の「/ $grids-count」は「gridsの中のgridの横幅の合計」を「grids-count」で割り算しています。こうしてやっと、「grid一つの横幅」が求められました。簡単な算数なのに、普段全く計算なんてしていないから、カッコの場所を間違えたりなど、思ったよりはまってしまいました。

さて、最後に22行目「width: ($grid-width * $number) + ($grid-margin * ($number - 1)) * 1%」。「$grid-width * $number」は、columnの中の「gridの横幅の合計」、「$grid-margin * ($number - 1)」はcolumnの中の「grid-marginの横幅の合計」を出してます。それらを足した数字を最後に「* 1%」で%にすることで、columnの横幅が動的に出せました。

以前、KUROIGAMENでも紹介したサービス「Happy1000DDays」の作者の@func09さんとまたコンビを組んで新しいサービスをリリース今日（2012年2月10日）にリリースしました。

ATND Groupingはこちら。

リポジトリはこちら

ATND Grouping

エンジニア X デザイナー ハッカソン

このサービスは、こちらもKUROIGAMENで紹介させていただいたイベント「エンジニア X デザイナー ハッカソン」で作ったものです。

イベント開催一週間前にエンジニアの応募者とデザイナーの応募者がくじ引きでペアを作って、あとはそれぞれTwitterやSkypeやLingrなどを使って何を作るかを決めて、軽く準備をしたら、あとはイベント当日のぶっつけ本番。一日でサービスを動くところまで作ってみんなの前で発表をする、というかなり参加者は大変な目に合うハードなイベント。で、このくじ引きで運命のいたずらか、またもや@func09さんとコンビになってしまいました。とりあえず@func09さんとは二回目だし、とにかく以前の話も当日の進め方もスムーズでした。その分、他のチームに比べて圧倒的に新鮮さがありませんでしたが…。

ハッカソン自体とてもいいイベントになったのですが、そのレポートは次回ゆっくりさせていただきます。今回は今日リリースした「ATND Grouping」作成の裏側を紹介。

事前の打ち合わせ

ペアが発表されて、まずはSkypeで打ち合わせ。一日で作れるものということでとりあえず作るものはシンプルで機能の少ないものである必要があります。シンプルな分、目的は明確でピンポイントな問題を解決するものになっていくのですが、こういうコンパクトなツール系のサービスが好きなのでテンションが上がります。

今回解決する問題は「イベントに参加をしてもいつも同じメンバーが固まってしまって、なかなか新しい出会いがない」、「素敵な出会いを社交性の無さで逃すのはもったいない」、「せっかくイベントに参加してもぼっちだった」という問題を解決するツールを作ることにしました。立食の懇親会などならまだいいのですが、席が決まってるところ、特に会場が座席だったりするとなかなか席を立って離れた席の人と話すのは難しいですよね。

せっかくたくさんの人がいるのに、限られた人としか話せない、という問題を解決するために、参加者をランダムでグルーピングする、というツールを作ることにしました。

ここで一つ考えたのは、さらにイベントを合コンに絞ったツール。スマホでサービスのページにアクセスする。ここに、「男」と「女」の名前入力欄がある。自分が男だったら、男の欄に名前を入れて、隣の人にスマホを渡す。隣の人が女だったら、女の欄に名前を入れてスマホを隣の人へ … 、と参加者全員の入力が終わったら「シャッフル」というボタンを押すと、男女が均等に混ざった状態でグルーピングされる、というツールでした。

MTGを進めていく中で、これよりATNDのAPIを使ってイベント参加者を自動で取ってきて、任意のグループ数を入力してシャッフルボタンをクリックするだけでグルーピングできるツールを作りたい感じになって、結局それを作ることになりました（なんでそうなったんだっけなー？忘れてしまいました）。MTGの時間は一時間くらい。昼食の時間に僕はオフィスでサンドウィッチをもしゃもしゃ食べながらSkypeをやってました。

事前の準備

デザイナー側の僕は、実装はPC、スマホを一種類のviewでCSSの「@media screen and (max-device-width: 480px)」で分岐をさせるだけで実装しようというのは決めてました。一日でスマホ、PCのデザインをやるということに挑戦するの心配でしたが、せっかくなので何かチャレンジの要素も含めておこうと。当日この辺の実装でハマって無駄な時間を取られないようにスマホ用のHTMLやCSSのおさらいはやっておきました。そうそう、「@media screen and (max-device-width: 480px)」があまりに長いので、辞書登録をしてすぐに出せるようにしておきました（これでかなり作業効率が上がったのでオススメ）。

今回はATNDのAPIを使ったサービスということで、もしATNDのロゴの画像データが配られてたら使うかもしれないので事前に探しておきました。結局ありませんでした。

あとは、Githubにリポジトリを用意して、当日やることをGithubのIssuesに登録。このIssue達をひたすら消していけば最終的に使えるものが出来る、というところまでやることを洗いだしました。

事前の準備はまぁこんなところ。

当日

当日は大枠ができるまで、僕の方は素のHTMLでデザイン作業。一旦大枠が出来たらGithubからリポジトリをクローンしてそこにデザインをあてていく、という進め方でした。

今回使ったものは、「Rails」、「MongoDB」、「Haml」、「Sass」、「Heroku」…といった感じ。@func09さんが僕のMacにMongoDBのダウンロードやセッティングで時間がかかってしまうのではないかと心配されてましたが、以前、KUROIGAMENでも紹介させていただいたmyGengoハッカソンでMongoDBを使ったことがあったのでたまたますぐに使える状態になっていたので、スムーズにローカルの環境も構築できました。まさかあのときの環境構築がこんなところで役に立ったりするとは。myGengoハッカソンでお世話になったsugyanさんありがとうございます！

あとはひたすらモクモク。結局発表できる状態になったのは終了時間の一時間前くらいでした。ちょっとしたツールでもやっぱり結構時間はかかってしまいますが、とりあえずみんなの前で発表ができる状態までいって一安心。あとは余った時間で発表のスライドを準備したりなど。

その後

イベント終了後に、エラーの処理やバグつぶしなど、新たに見つかったIssueをGithubに登録。仕事の合間に僕も@func09さんもちょこちょこそれらを潰していって、やっと今日のリリースに辿りつけました。

そうそう、余談ですがクリスマスイブの日に開催した一人ハッカソンでもこのサービスのリデザインをやってました。デザインの方は最初の作り始めたときから時間が少し経っていて、僕のテンションを維持するためにガラッと変えてしまいました。Tech系のイベントを想定して、僕が参加するTech系のイベントは男の参加者が圧倒的に多いので、男の子っぽく秘密基地のようなデザインにしました。

というわけで、機会がありましたら「ATND Grouping」を是非使ってみてください！

• ATND
• func09
• p4d

黒い画面（ターミナル）を使って簡単にTumblrのデザインを作成する環境を作ることが出来るオープンソース、その名も「Fumblr」を見つけました（moongift様の記事で）。

Tumblrはもっぱらフォローしている人のを読むだけでのツールとしてしか使ってなくて、読みにくくなければOKくらいに思っていて、全くデザインを自分で作ろうと思ったことがないくらいの超ライトユーザーの自分なので、全然「Eating your own dog food」の精神に反してしまうのですが、デザイナーのためにデザイン作成環境を簡単に構築するものを用意するというアプローチの方法がなかなか興味深かったので紹介してみたいと思います。

今回もRuby

デザイナーお助けツールなんですが、Rubyで出来てるので、例のごとく黒い画面が必要になってしまいます。だけど、Rubyが入ってて、RVMを使う準備も整ってたらすごい簡単。五分かからずに環境が作れてしまいます。

fumblrもリポジトリも毎度おなじみGithubに置いてあります。こちら。

まずはgit cloneでリポジトリをローカルに持ってきます。

$ git clone http://github.com/pengwynn/fumblr.git 

KUROIGAMENを読んでる方には説明はいらないと思うけど、そういえば一度も触れたことがなかったので一応、のところに任意の名前を付けると、その名前のディレクトリの中にfumblrの中身が入ります。を省略すると「fumblr」という名前のディレクトリが出来て、その中にfumblrの中身が入ります。これはfumblrに関わらずgit cloneのときはいつもそのルールが適用されます。

今回は「fumblr」って名前のままにしました。

cloneが完了したら「fumblr」ディレクトリへ移動。

$ cd fumblr

するとここで、

==============================================================================
= NOTICE                                                                     =
==============================================================================
= RVM has encountered a new or modified .rvmrc file in the current directory =
= This is a shell script and therefore may contain any shell commands.       =
=                                                                            =
= Examine the contents of this file carefully to be sure the contents are    =
= safe before trusting it! ( Choose v[iew] below to view the contents )      =
==============================================================================
Do you wish to trust this .rvmrc file? (/Users/machida/Sites/fumblr/.rvmrc)
y[es], n[o], v[iew], c[ancel]>

こんなのが出てきました。

「.rvmrc」というファイルがfumblrに用意されていて、そこに書かれている設定を適用させますか？と聞いているんですね。では、「.rvmrc」の中身を見てみたいと思います。置いてある場所は「fumblr」ディレクトリの一番上の階層。

rvm use ruby-1.9.2@fumblr

あれ、中身はたったこれだけ！これだけなのですが、「fumblr」のディレクトリに入ったら、Rubyのバージョン1.9.2を使い、「fumblr」という名前のRuby1.9.2用のGemsetを使います、という設定になっています。全然問題ないので、Yesの「y」を打ちます。

==============================================================================
= NOTICE                                                                     =
==============================================================================
= RVM has encountered a new or modified .rvmrc file in the current directory =
= This is a shell script and therefore may contain any shell commands.       =
=                                                                            =
= Examine the contents of this file carefully to be sure the contents are    =
= safe before trusting it! ( Choose v[iew] below to view the contents )      =
==============================================================================
Do you wish to trust this .rvmrc file? (/Users/machida/Sites/fumblr/.rvmrc)
y[es], n[o], v[iew], c[ancel]> y

すると、

Gemset 'fumblr' does not exist, rvm gemset create 'fumblr' first.

と出てしまいました。

「fumblr」なんてGemsetは存在しないよ、先に「rvm gemset create」で「fumblr」というGemsetを作ってね。

と、黒い画面は言ってますね。なので、言われるがままに、

$ rvm gemset create fumblr

gemset「fumblr」作ってあげて、続いてそれを使う設定。

$ rvm gemset use fumblr

これで準備OK。

では、Gemset「fumblr」に必要なGemをドドドッと突っ込みます。

$ bundle

もし、これで入らない場合は「bundler」というGemが必要です。その場合はこれ。

gem install bundler; bundle install;

僕の場合はRVMを導入したときに勝手に作られる「global」という名前のGemsetにbundlerを入れておいたので今回は「$ bundle」と打つだけで済みました。bundlerはほとんど毎回使うGemなので、globalに入れてしまうのがオススメです。一応その方法も。

$ rvm gemset use global

$ gem install bundler

これだけ。そのあとに、「$ rvm gemset use fumblr」と打って、Gemset「fumblr」に戻っても、globalの中に入ってる「bundler」が使えます。globalとは「どのGemsetを使ってもglobalの中のGemが使える、という便利なGemset」です。

ちょっと話が逸れましたが、環境構築はこれでほぼ完了。さっそく立ち上げてみましょう。

$ bundle exec padrino start

このコマンドを打った後、Railsアプリでおなじみの「http://localhost:3000」にアクセス。

おおっ！Tumblrだ。

さて、ただTumblrの見た目だけ作れるなら静的なHTML配ればよくない？なんて思ってしまうところなんですが、ちょっとした便利機能がfumblrには付いてます。それの紹介も。

Sass、Compassに対応

最初からSass、Compassが含まれてるので、それらを使ったコーディングでデザインが出来ます。まずはCSSをテンプレートに読み込ます準備。

publicディレクトリの中の「tumblr.html」を開いて、

link rel="stylesheet" type="text/css" href="/css/screen.css"

これをheadの中に記入。

続いて、Sass、Compassを使う準備。もう一個ターミナルを開いて、cdコマンドで今いじってる「fumblr」ディレクトリに移動。そして、

$ compass watch

このコマンドを打ちます。この状態で、「public/sass/」の中の「screen.sass」ファイルを編集すると、保存をしたときに勝手に「public/css/」の中の「screen.css」に書きだしてくれます。これでガツガツSassを使ってデザインが出来るようになります。

「/config.rb」ファイルに、

# Compass Configuration

# HTTP paths
http_path             = '/'
http_stylesheets_path = '/css'
http_images_path      = '/images'
http_javascripts_path = '/javascripts'

# File system locations
sass_dir              = 'public/sass'
css_dir               = 'public/css'
images_dir            = 'public/images'
javascripts_dir       = 'public/javascripts'

# Set to true for easier debugging
line_comments         = false
preferred_syntax      = :sass

# CSS output style - :nested, :expanded, :compact, or :compressed
output_style          = :expanded

# Determine whether Compass asset helper functions generate relative
# or absolute paths
relative_assets       = true

# Learn more: http://compass-style.org/docs/tutorials/configuration-reference/

と、書いてありますが、この設定があるから「compass watch」と打つだけで勝手にSassをCSSにコンパイルしてくれるっぽいですね。

ついでに、僕の場合は邪魔だからテンプレート（tumblr.html）のheadに書いてある、32行目から749行目のベタ書きのCSSは消してしまいます。

自分のTumblrアカウントから実データを取ってこれる

もう一個の便利機能がこれです。やっぱりデザインをするときって実データがないと全然できないですよね。この機能の実装はなんだか面倒そうなのにちゃんとやってあってデザイナー心がわかるエンジニアさんだ、と感動してしまいました。

まずはTumblrからデータをインポート。

$ padrino rake import

このコマンドを打つと、

What is your Tumblr username?

と、聞かれます（黒い画面に）。ここで、「username」とは、「XXXXXX.tumblr.com」の「XXXXXX」です。では、今回は自分の全然使ってない「machixx.tumblr.com」というTumblrがあるのですが、そこからデータをインポートしたいと思います。

What is your Tumblr username? machixx

「machixx」とタイプしました。

で、「/public」ディレクトを見てみると、「machixx.yml」というファイルが出来ました。

続いて、「machixx.yml」を読み込ます設定。

「/public」ディレクトリの中の「fumblr.example.yml」を「fumblr.yml」という名前に変換。で、「fumblr.yml」を開くと、

asset_host: yourownserver.com
username: yourtumblrusername

と、書いてあります。

yourownserver.com は削除。色々試しましたが、ここは空欄で大丈夫でした。で、次に「yourtumblrusername」を消して、「machixx」と書きます。

asset_host:
username: machixx

では、

$ bundle exec padrino start

これを打ってもう一度サーバを立ち上げてみましょう。

日本語は文字化けしちゃってますが、実データを取り込むことに成功しました！

作ったテーマを適用

テーマを作ったら、それに使う画像やCSS、JSはここからアップロード。

管理画面のここから、

HTMLの編集画面に行って、

作ったHTMLを貼りつけ。

これでTumblrのカスタマイズは完成。ついでに、こちらから自分が作ったTumblrのテーマを応募してみんなに配ることもできるみたいです。

と、まぁ普段そこまでTumblrを使わない僕ですが、色々書いてしまいました。もし、間違えなどがあったらごめんなさい。

それにしても、サービスにデザインを入るときに発生する手間を減らす仕組みっていいなぁ、と思いました。アプリを作ったときに、それにデザイナーにデザインを入れてもらいたい場合、デザイン入れくれー、とTweetをしたりするのもいいんですが、こういう仕組みを用意したり、アプリをデザイナーでもローカルで立ち上げやすいようにREADMEを細かく書く、など、デザイナーがついつい触りたくなるようにするというのも効果的かもしれないです。

休日なので軽い話題で。

SassやらHamlやらCoffeeやら

今、フィヨルドで作ってる怖話というサイトは、テーマ部分のマークアップはHaml、CSSはSass、JavaScriptはCoffeeScriptで書かれてます。

一度覚えてしまうとすごく書く文字数が減って、もう二度とHaml→HTMLなんて戻れなくなってしまうほど便利なのですが、例えば、FacebookのSocial Pluginでボタンやコメントを設置したいとこに、貼りつけコードをHamlにするのとか、頭で考えるのが面倒。いちいち黒い画面（ターミナル）からコマンドを打ってgenerateをするのも面倒です。

こういうときに便利なのが、ブラウザでペッと貼りつけて変換が出来るジェネレータがすごく便利。今回はそれらの紹介をしておきたいと思います。

JavaScript ←→ CoffeeScript

http://js2coffee.org/

HTML → Haml

http://html2haml.heroku.com/

CSS → Sass/SCSS

http://css2sass.heroku.com/

ついでに

HTMLのインデントを綺麗にする

ついでに手前味噌ですが、HTMLのインデントを綺麗にする、というジェネレータ。納品前のデザイナーやマークアップをする人用の便利ツール。

http://hamcutlet.fjord.jp/

これは実は、HTMLを一旦Hamlにして、またHTMLに戻すってことをサーバで行っています。

CSSのインデントを綺麗にする

http://sassience.com/

こちらはNekostagramや、宇多田ヒカループの作者としておなじみの@ruedapさん作。こちらも納品前のデザイナーやマークアップをする人には便利。

@ruedapさんのブログ、アインシュタインの電話番号☎はデザイナーにとっても役に立つプログラム情報が満載でオススメ！

• CoffeeScript
• Haml
• Sass
• 休日なので軽い話題で

明けましておめでとうございます。

OSをLionにアップデートしました。スクロールが逆になって気持ち悪いなぁ、くらいしか今のところ違いは感じないのですが…。

「Codekit」というLess、Sass、Stylus、CoffeeScriptをコンパイルしてくれるソフトがあって、それを使ってみたかったのですが、Lionじゃないとそれが使えなかったので、やっとこの正月に重い腰をあげた次第です。

Xcode4.2を入れるとRubyが入らない！

LionにしたついでにMacAppStoreからXcodeをインストール。

…と、これをインストールすると大変なことになるみたいです（黒い画面に詳しくない僕のようなデザイナーにとっては）。今（2012年1月1日現在）のXcodeの最新版はバージョン4.2なのですが、このXcodeを入れたあとに新たにRubyをインストールをしようとしてもエラーが出てしまいます。今回はこれにはまってみました。

GCCというやつが必要みたい

Rubyがインストールできない、って話は@komagataさんから聞いていて、「インストールするにはGCCが必要」ということも小耳に挟んでました。「インストールするにはGCCが必要」、この一言だけどとても貴重な情報ですね。これを知っていないと検索もしようがない、という…黒い画面の世界は厳しいです。

さてさて、色々ググったところ、今までのXcodeに梱包されてたGCCというものが、Xcode4.2以降には入らなくなって、その代わりにLLVM GCC 4.2がインストールされるようになったらしい、という情報を見つけました。で、そのLLVM GCC 4.2だとRubyが入らないみたいです（今のところ）。だから自分でGCCを入れる必要があるのかな〜、これが@komagataさんが言ってたやつかな？って感じで調査を進めました。

GCCとは？

では、「GCC」とは？について調べてみたいと思います。

GNUプロジェクトによるフリーなコンパイラ。ほとんどのUNIX系OSに移植されている。当初はC言語およびC++言語をサポートしていたため「GNU project C and C++ Compiler」と呼ばれていたが、様々な言語をサポートするようになったため、「GNU Compiler Collection」に名称変更された。

引用元：http://e-words.jp/w/gcc.html

ふむふむ、なるほど。GCCとは「GNU Compiler Collection」の略のようです。GNUプロジェクトという言葉も出てきたので、これもついでに調べておきましょう。そうそう、GNU「グニュー」って呼びます。

GNUとは？

GNUとは、Unixに似た完全なオペーレーティングシステムをフリーソフトウェアとして開発、配付するプロジェクトのことである。リチャード・ストールマンを中心に、1984年に発足した。

GNUの目的を実現するために、フリーソフトウェア開発のための非営利団体であるフリーソフトウェア財団（FSF）を設立し、GNUの主要なスポンサーとなっている。コピーライトをもじったコピーレフト、GNU GPLが有名である。

現在はカーネルにLinuxを採用したGNU/Linuxと呼ばれるシステム（多くの亜流、派生バージョンがある）が世界中の多くのユーザーによって利用されている。

なお、GNUとはGNU is No Unix「GNUはUnixではない」の再帰的頭文字からとられている。

引用元：http://ja.wikipedia.org/wiki/GNU

フリーソフトウェアとして開発、配付するGNUプロジェクトというものがあって、そこが出してるフリーなコンパイラセットがGCCということみたいです。次はコンパイラとは？を調べなくては。

コンパイラとは？

人間がプログラミング言語で記述したソフトウェアの設計図(ソースコード)を、コンピュータが実行できる形式(オブジェクトコード)に変換するソフトウェア。

引用元：http://e-words.jp/w/E382B3E383B3E38391E382A4E383A9.html

だそうです。

音楽に例えると、楽譜があるけど、その曲を聴くには録音して音にしなくてはならない、楽譜がソースコードで、音がオブジェクトコード、みたいなものかな。ソースコードって言葉はよく聞きますが、オブジェクトコードって言葉は全然聞かないですね。

ちなみに、リチャード・ストールマンがGNUを作った生い立ちや、その活動を知るには、@jishihaさんから借りて観たんですが、このDVDがおすすめ！僕の場合、このDVDを観てたおかげでGNUが出してるフリーなコンパイラって言葉だけでピンっと来ました。普段色々観ておくと以外なところで役に立ちますね。

自分のMacで使ってるGCCは何なのかを調べてみる

ちょっと話が脱線しましたが、GCCの話に戻ります。

このコマンド、

gcc --version

を打つと、今自分のMacに入ってるGCCが何なのかが出てきます。

i686-apple-darwin11-llvm-gcc-4.2 (GCC) 4.2.1 (Based on Apple Inc. build 5658) (LLVM build 2335.15.00)

GCCではなく、LLVM GCC 4.2.1になってますね。こいつのせいっぽい。

まとめると、

まとめると、

• Rubyをインストールにはコンパイラが必要である
• 今までのXcodeにはGCCが入っていた（こちらに一覧を発見）が、Xcode4.2にはGCCではなく、LLVM GCCが入っている
• LLVM GCCでRVMでRubyをインストールするとエラーが出る
• なので、GCCを自分で入れればOK
• さてさて、GCCってどうやって入れるの？ ← 今ここ

で、色々調べた末、

この記事の通りにやったらRubyが入りました。@DIGITALSQUADさんありがとうございます！

GCCを自力でインストール

まずはココに行って、

<

上の図のGCC-10.7.pkgをダウンロード。これはファイルを開けば簡単にインストールが出来るようになってます。

次に、「~/.bash_profile」に、

export CC=gcc-4.2

と書きます。このファイル（.bash_profile）はRVMのインストールのときにも書き込んだやつですね。

これが終わったらターミナルを再起動。

Rubyを入れてみる

では、ちゃんとRubyがインストールされてるかの確認をしたいと思います。

※そうそう、参考にした記事にはRVMの再インストールをやってましたが、再インストールしないでそのままRubyが使えて、新しいものも入れられたので今のところ僕は再インストールしてないです。

$ rvm list known

このコマンドでインストール出来るRubyの確認。

Rubyの1.9.3のp0がリストにありましたので、これを入れてみます。

ちなみに、Rubyの1.9.3のp0が出ない方はRVMのアップデートが必要。以下をやってみてください。

$ rvm get head
$ rvm reload

上手くいかなかった方はこちら

では、インストール。コマンドはこれ。

$ rvm install 1.9.3-p0

インストールができたら、

$ rvm list

このコマンドで自分のMacに入ってるRubyの一覧を確認。

入ってました！

• GCC
• Ruby
• RVM
• Xcode42

12/4（日）東京・恵比寿でデザイナーとエンジニアがペアを組んで動くものを作るハッカソンを「デザイナー向けプログラミング部」皆さんと開催することになりました。

※締切りになりました。どうしても参加したいっていうデザイナは@machidaまでTwitterでメッセージをお願いします。

開催の経緯

以前、mitaka.rbという三鷹近辺のRubyist（Rubyを使うエンジニア）が集まるイベントにデザイナーであるにも関わらず参加させていただいて、厚かましくもLTまでやらせていただいたのですが、そのLTの最後に、

デザインテロをやろうにもGithubが広大過ぎてどれにデザインを入れればいいか迷う、というのと、結構GUIが必要ないものが多い、という問題があったので、今度はエンジニアと０からOSSプロジェクトを立ち上げる一日ハッカソンをします。

という宣言をしました。で、実際「Good Days List」と「Masher」というプロジェクトを一日ハッカソンで作ったのですが、これが予想以上に楽しかったです。どういうところが楽しかったかを挙げてみると、

• 一人じゃなくチームで頑張るのが楽しい（学園祭の準備みたいな感じ）
• その場の思いつきがすぐ形になるのが楽しい
• どんどん目の前でサービスが出来ていくのが楽しい
• メンバーそれぞれが持ってる強みが完成物に反映されるのが楽しい（即興で作るから調べたりする時間がなくて、自分の得意どころを使う）
• 逆に普段やらないことにチャレンジするのにもいい機会

…などなど。

これだけでも十分楽しいんですが、複数のチームが同時にそれぞれのものを作ってて、最後に成果物の発表までしたらもっと面白くなるんじゃないか、っていうのもあって、今回の「デザイナーとエンジニアがペアを組んで動くものを作るハッカソン」のイベントを前からやりたいなー、と思ってました。

ハッカソンにGitは便利

「Good Days List」も「Masher」も一緒に作ったメンバー全員がGit、Githubを使えたっていうのが、ハッカソンの成功に大きく貢献しました。「Masher」を一緒に作った@satococoaさんにこういうイベントをやりたいんですが…と相談したところ、やっぱりハッカソンにGitは必須だよね、ってことになって、まずはGitが使えるデザイナーを増やすために@satococoaさん講師で「デザイナーのためのGit勉強会」をやっていただきました。この前の前の記事でも書きましたが、20人を超えるデザイナーがGithubにpull requestを送ったという快挙を成し遂げました。

「よし、Gitが使えるデザイナーは揃った、遂にハッカソンだ！」ということで、勉強会に参加いただいたデザイナーの方々にDMを送らせていただいたのですが、うーむ…反響はイマイチ。年末のせいかなぁ。予想よりこじんまりしたイベントになってしまいますが、いよいよハッカソンのイベントが開催されることになりました。僕は超楽しみにしてます。

ハッカソンの流れ

今回は第一回、僕も初めてなのでどう進めたらいいのかがやってみないとわからないのですが、こんな感じで進めたらどうですかね〜みたいなものを書いておきます。

ペア発表

今回は「デザイナー × 1人」、「エンジニア × 1人」のペアを作ってハッカソンで何か動くものを作る、というイベントです。何を作るのか、どんな風に作業が進むのか…などはハッカソンのペア次第。ペアの発表、ドキドキですね。ペアの発表は11/27（日）（←予定）に発表されます。参加者にはTwitterでお知らせします。

事前の打ち合わせ

12/4（日）の当日に「せーの」で作るのでも全然大丈夫なのですが、一応ちょっとペアのエンジニアと軽くTwitterやLingrやSkypeなどを使って軽く打ち合わせをしておくとよさそうです。もし、実際に会って話したいけど場所がないっていうペアがいましたらフィヨルドオフィスが使えますので言ってくださいね。

何を作る？

では、具体的にどんな打ち合わせをしておくといいか、ってことも書いておきます。

やっぱり、まずは「何を作るか」を決めてしまいたいですね。今回は一日で動くものを作るハッカソンなので、機能が少ないシンプルでちょっとしたツールを作るのがおすすめです。

いきなり「これを作ろう！」って考えるよりも「どんな問題を解決するか」を決めてペアのエンジニアと共有して、「それに役立つツールとは？」を一緒に考えたほうがうまくいきそうです（なんてこんなことは今回参加されるデザイナーさんたちは仕事でしょっちゅう考えてることなので余計なお世話だと思いますが…）。

余計なお世話ついでに、最近した失敗（レンタル漫画屋で読んだことあるやつをまた借りてしまった、せっかくコンビニに行ったのに牛乳を買い忘れた、洗濯機を回してて柔軟剤を入れるタイミングを逃してしまった…など）や、最近イラッとしたこと（送られたテキストデータに全角スペースや半角カタカナが混じってる、あとで見ようと思ったURLをTwitterでFavしたか、はてぶしたか忘れて見つからない、気になる情報を配信してるサイトなんだけどFeedがなくて情報を逃す、せっかくいいサービスが思いついたと思ったらすでにあった…など）なんかを挙げていくといいアイディアが思いつくかもしれません。

今回は一日で動くものを作るっていう企画ですが、全然フライングして作業を開始するのはOKです。ペンタブを使いたいけど持っていくの面倒だから先に絵を描いておくか、とか、そういうの全然OKです。

「作るもの」が事前の打ち合わせで決まったらcacooや手書きのスケッチで画面の図を用意しておくと今後の作業がスムーズです。ここまで事前の段階で共有できてたら当日はサクサクですね。まぁ、当日思い付いたアイディアがリアルタイムで実装される楽しさもハッカソンの醍醐味だと僕は思うので、そこまでガチガチに決めておかずに、当日のトラブルやファインプレーも楽しもうという心の余裕を持って臨むのがおすすめです。

そうそう、作るものが事前に決まったら、デザイナー向けプログラム部 相談室に書いておいていただけると当日作るものが他のチームとかぶらなくなりますので助かります。

Gitのおさらいや環境の準備

今回はエンジニアとペアなので、当日ばたばたしないように思いっきりエンジニアに甘えてGitで忘れたことを聞いたり、環境の用意の仕方を聞いたりしておくといいかもしれないです。黒い画面に文字を打つだけで事は済んでしまうので、TwitterやLingrやSkypeなどで大丈夫。まぁ、忙しかったら当日にエンジニアがどうにかしてくれるはず。僕もこのブログにGitの使い方なんかをまとめておこうと思います。

当日

当日は09:30開場、10:00スタートです。今回の会場のベンチャーカフェ in 株式会社サンブリッジ様 はJR恵比寿駅から徒歩0分。すごい便利な場所にあります。飲み物やお菓子、お昼ごはんの時間も作業をしたいって方はご飯も用意しておくといいかもです。あと、作業で使うパソコンは忘れずに。もし持っていたら延長ケーブルも用意しておいてください。

作業

今回はRubyのエンジニアばっかりなので、エンジニア側はRailsやSinatraなどのフレームワークで大枠をつくるところから始めると思います。その間デザイナー側は、デザインの絵を描いて、HTMLとCSSの用意を進めておくのがいいです。大枠が出来たらエンジニアはそれをGithubにアップするので、それをデザイナーはcloneしてローカルで立ち上げます。で、先ほど用意していたHTMLやCSSをはめ込んでいく作業に入ります。ここから先はエンジニアもデザイナーも「pushしましたー」、「あーざっすー」の繰り返し。

発表会

18:00で作業は終了になります。そのまま同じ場所で発表会を兼ねた懇親会を行います。ピザを食べ、ビールを飲みながら各チーム、みんなの前で今日の成果物を発表します。

メディアに報告

作った後はメディアに取り上げてください、メールも送るといいかもです。取り上げられたときに達成感が倍増します。そうそう、メディアに報告をする際、今回作ったプロジェクトをオープンソースする場合は、ライセンスをREADMEにちゃんと書いておきましょう。ライセンスの一覧はこちら

まだ、参加できます（締切りになりました）

デザイナーの参加者一覧。

今回がうまく行ったら毎年恒例のイベントにしたいなぁ。

一緒にGood Days Listを作った吉田さんを発見！

今、会場を貸してくださるベンチャーカフェ様のサイトを見てたら、ここで僕と一緒にGood Days Listを作ったRailsエンジニアの吉田さんを発見！Ruby on Rails でミニブログをつくってみよう！（全2回）という講座を行うみたいです。ついでに、12/8（木）に受託開発の未来　〜10年後も活躍できるエンジニアになるには〜というイベントも開催されるそうです。

• event

Twitter Bootstrap、流行ってますねー。

Twitter Bootstrapとは、自分であんまりデザインをやりたくない人はこれを使えば、とりあえずレイアウトやボタンを整えてくれるっていう便利ツール。簡単にTwitterみたいなデザインを導入することが出来てしまいます。我々デザイナーにとっては、とりあえずではないちゃんとしたデザインをすることを仕事にしているので、Twitter Bootstrapは縁がないものかと思いきや、ちょっと触ってみたらこれはcssのフレームワークとして使うのにもなかなか便利だったのと、CSS拡張メタ言語（SASS、SCSS、LESSなど、CSSをもっと便利なものにしてくれる言語）の使い方を覚えるのにとてもいい教材だったので、KUROIGAMENでもTwitter Bootstrapを紹介してみたくなりました。

ただ、このTwitter BootstrapってLESSっていうCSS拡張メタ言語で書かれてるんですよね。僕の会社（フィヨルド）のサービスの怖話がRailsで出来てるってこともあって、SASSを使っていて（Rails3.1にsassが標準採用されています）、LESSの方は全然馴染みがないです。そのせいでTwitter Bootstrapに手を出さずにいたのですが、The Sass WayというSASS情報のブログでSass Twitter Bootstrapというプロジェクトの紹介を見つけて（http://thesassway.com/projects/sass-twitter-bootstrap）、よしSASSならば、と重い腰を上げてTwitter Bootstrapに手を出しました。ちなみにThe Sass WayはSASS情報の面白いブログなのでおすすめ。

Sass Twitter Bootstrap、SCSSだった

「では、早速リポジトリをクローン」、とSass Twitter BootstrapのリポジトリのGithubページに行ってみたら…あれ？

「Sass Twitter Bootstrap」ってSCSSじゃん！

SCSSとSASSの関係はHTMLとHAMLのようなもので、閉じカッコがなくてインデントで階層を書くというやつ。ややこしいことに、SCSSもSASSもSASSというRubyのgemをインストールすることで使えるようになります（Haml?インデント？と思った方はこちらの記事がおすすめ http://labs.unoh.net/2009/05/5haml.html）。僕は圧倒的にSCSSよりSASS派です。SASSの方が全然書く文字数が少なくて、一度SASSを使ってしまうとSCSSは書く気がしないです。これからSCSSをやってみようと思う方には僕個人としてはSASSをおすすめ。SCSSは、基本的な書き方はCSSと同じで、それに機能が追加されてる感じなので、SASSファイルだけど中身はSASSの機能を使っていない単なるCSSでも問題ないので、SCSSを覚えながら徐々にCSSに機能を追加していける、っていうメリットがあるかなー。

さて、話は戻ってSass Twitter Bootstrapですが、仕方ない、SCSSをSASSにしてやろうとGithubの「Sass Twitter Bootstrap」をフォークしてSASS版を公開することにしました（とは言っても、SCSSからSASSにコンバートする機能はSASS自体に用意されているのでそのコマンドを打つだけだったけど…）。

Sass Twitter Bootstrapをローカルにgit clone

KUROIGAMENでは何度もやってきているおなじみのコマンド「git clone」から今回もスタートです。Sass Twitter BootstrapのリポジトリはGithubで公開されています（https://github.com/jlong/sass-twitter-bootstrap）。Sass Twitter Bootstrapは本家のTwitter Bootstrapからフォークされたものですね。

まずは、自分のマシンのSass Twitter Bootstrapを置きたい適当なディレクトリに移動します。僕の場合はユーザーの下の「サイト」っていうディレクトリに置きました。

$ cd Site

「サイト」に移動したので、ここでクローン。

$ git clone https://github.com/jlong/sass-twitter-bootstrap.git

これでクローンは完了。

中身を見てみる

さてさて、クローンをしたSass Twitter Bootstrapの中身をざーっと見てみますか。

「lib」ってディレクトリにこれからSASSにコンバートする元のSCSSが入ってます。「examples」のディレクトリにTwitter Bootstrapを使ったサイトデザインの例、「docs」はTwitter Bootstrapの説明、「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」がSCSSから生成されたCSSファイルです。

.rvmrc

「.rvmrc」というファイルは、中身を見てみると、

rvm ruby-1.9.2@twitter-bootstrap --create

と書いてあります。

rvm ruby-1.9.2

ここの部分は、今回クローンしたディレクトリに移動をすると勝手にrvmで使うRubyを「ruby-1.9.2」にしてくれるっていう設定。 この後ろにある

@twitter-bootstrap --create

は、rvmで勝手に使うgemsetを「twitter-bootstrap」にしてくれて、もしそれが無かったら作った上で選択してくれるっていう設定。rvmがオワコンって噂があるけど、やっぱり便利だよなー。

Gemfile

「Gemfile」は、中身を見てみると、

source :rubygems

gem 'rake'
gem 'sass'
gem 'rb-fsevent'

と、書いてありますが、これからいつもやってるbundlerを使ってガーっとgemsetに入れるGemのリストです。「Gemfile」でbundle installで入れるものを設定してるんですね。

環境構築

ではでは、Sass Twitter Bootstrapを使う環境構築。

まずは、bundlerで必要なgemを「.rvmrc」の設定で作ってくれたgemset「twitter-bootstrap」にガーっと入れる作業。

おっと、ここでエラー。肝心のgem、bundlerがgemset「twitter-bootstrap」に入ってなかったのでbundleが出来なかった。bundlerはいつも使うgemなので、毎回作ったgemsetに入れるのは面倒。なので、「bundler」は「global」というgemsetに入れてしまいます。「global」というgemsetは、他のgemsetを使っている場合でも、「global」の中のgemも使ってくれるというgemsetです。ここに「bundler」を入れてしまえば、今後どのgemsetを使っても「bundler」を入れる必要はなくなります。ただ、globalは使うrubyのバージョンごとにあるので、今回は1.9.2を使っていますが、例えば1.8.7を使うときは、1.8.7の「global」にも「bundler」を入れないといけないです。

gemsetを「global」に切り替えて、

rvm gemset use global

「bundler」をインストール。

gem install bundler

gemset「global」に「bundler」が入ったので、gemset「twitter-bootstrap」に戻ります。

rvm gemset use twitter-bootstrap

ちなみに、

rvm gemset list

で、今あるgemsetの一覧と今使っているgemsetがわかります。

では、gemをガーっと入れましょう。

bundle install

これだけでもOK。

bundle

SCSSをSASSにコンバート

やっと本題です。SCSSで作られたSass Twitter BootstrapをSASSに変換します。それにしても、なんでScss Twitter Bootstrapって名前じゃないんだろう？

変換の作業はコマンドを一発入力するだけ。

そのコマンドは http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html に書いてありました。

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

なるほど、sass-convertってコマンドだけでいいみたい。そのコマンドの引数に「変換前」、「変換後」を渡すだけ。

これから変換するscssファイルはディレクトリ「lib」の中に入ってるので、まずはそこに移動。

$ cd lib

まずは試しに「bootstrap.scss」を「bootstrap.sass」に変換するって作業をやってみます。

$ sass-convert bootstrap.scss bootstrap.sass

打ったら…無反応。

lsコマンドでlibの中のファイルを確認。

$ ls

黒い画面（ターミナル）では無反応でしたが、「bootstrap.sass」が出来てました！

では、残りのファイルも変換してみます。

$ sass-convert forms.scss forms.sass

$ sass-convert mixins.scss mixins.sass

$ sass-convert patterns.scss patterns.sass

$ sass-convert reset.scss reset.sass

$ sass-convert scaffolding.scss scaffolding.sass

$ sass-convert tables.scss tables.sass

$ sass-convert type.scss type.sass

$ sass-convert variables.scss variables.sass

これ、一発で変換する方法ってないのかなぁ？一個一個コマンドを入力するのが死ぬほど面倒。探しても見つからなかったんですが、もし知っている方がいましたら教えていただきたいです。

これで変換は完了。

ディレクトリ「lib」の中のscssはもう使わないので削除してしまいましょう。

SASSがちゃんと使えてるか確認

ファイルの変換は終わったのですが、一部ファイルの中身も書き換える必要があります。続いてその作業へ。

まずは、ディレクトリ「lib」の中にある「bootstrap.sass」から。ファイルを開きます。

/*!
 * Bootstrap v1.3.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 *
 * Converted to Sass by @johnwlong.
 *
 * Date: @DATE

// CSS Reset
@import reset.scss

// Core
@import variables.scss
@import mixins.scss

// Grid system and page structure
@import scaffolding.scss

// Styled patterns and elements
@import type.scss
@import forms.scss
@import tables.scss
@import patterns.scss

ソースを見れば一目瞭然なんですが、「bootstrap.sass」は、「lib」の中にあるsassファイルを読み込んでるだけのファイルですね。今回はscssをsassに変えたので、このソースの中で指定されている呼び出すファイルの拡張子をscssからsassに変える必要があります。ということで「scss」を「sass」に一括置換。

/*!
 * Bootstrap v1.3.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 *
 * Converted to Sass by @johnwlong.
 *
 * Date: @DATE

// CSS Reset
@import reset.sass

// Core
@import variables.sass
@import mixins.sass

// Grid system and page structure
@import scaffolding.sass

// Styled patterns and elements
@import type.sass
@import forms.sass
@import tables.sass
@import patterns.sass

ちなみに、Converted to Sass by @johnwlong.とありますが、この@johnwlongさんはRubyをやってる人ならおなじみの、

などのデザインや中身を作ってる方みたいです。

続いて、libからひとつ上の階層、Sass Twitter Bootstrapのトップディレクトリに戻って、この階層にある「Rakefile」を開きます。「Rakefile」には、「rake」というコマンドを打つだけで、scssファイルから「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を生成するという命令が書かれています。scssファイルから「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を生成する、という命令を、sassファイルから「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を生成する、書き換える必要があります。まぁ、何も考えずにscssをsassに一括置換。

では、rakeコマンドを打ってみましょう。

$ rake

ここでエラーが！

(in /Users/machida/Sites/sass-twitter-bootstrap)
sass --load-path lib --style expanded lib/bootstrap.sass:bootstrap-1.3.0.css
WARNING on line 384 of lib/patterns.sass:
This selector doesn't have any properties and will not be rendered.
Syntax error: Invalid CSS after "": expected expression (e.g. 1px, bold), was ".btn"
        on line 508 of lib/patterns.sass
        from line 28 of lib/bootstrap.sass
  Use --trace for backtrace.
rake aborted!
Command failed with status (1): [sass --load-path lib --style expanded lib/...]

Tasks: TOP => default => build => bootstrap-1.3.0.css
(See full trace by running task with --trace)

どうやらこのエラーはrakeのファイルがおかしいのではなく、sassのファイルに書き間違えがあって、cssを生成するのを失敗した、っていうエラーっぽいですね。

エラーメッセージに注目。

Syntax error: Invalid CSS after "": expected expression (e.g. 1px, bold), was ".btn"
        on line 508 of lib/patterns.sass

「patterns.sass」の508行目近辺を見てみます。

// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons

\:root .alert-message,
:root .btn
  border-radius: 0 \0

コメントを読んでみると、IE9ハックでIE9の場合は角丸を外して、グラデーションをキープしているみたいですね。うーん、IE9なんて知ったこっちゃないよ、という感じですが、修正は「\:root」の「\」を削除するだけなのでIE9にも対応しておきますか。この削除したエラーの原因である「\」、元のscssを見たらそんなの書いてないんですよね。多分、これはscssからsassにコンバートしたときに勝手に付いてしまったバグ。

// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons

:root .alert-message,
:root .btn
  border-radius: 0 \0

では、もう一度「rake」コマンドを打ちます。

$ rake

今度はエラーが出ませんでした。

(in /Users/machida/Sites/sass-twitter-bootstrap)
sass --load-path lib --style expanded lib/bootstrap.sass:bootstrap-1.3.0.css
sass --load-path lib --style compressed lib/bootstrap.sass:bootstrap-1.3.0.min.css

ではでは、rakeで生成された「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を見てみましょう。ここにちゃんとcssが書かれていたら完成です。

出来てた！

次回は中身に気に食わないところがあったので修正に挑戦をしてみます。その前にSASSの使い方やTwitter Bootstrapの中身の説明もしなくては…。

そうそう、今回のSASS版Twitter Bootstrapはこちらに置いてあります。

• sass
• Twitter Bootstrap

先日（2011年10月）にデザイナー向けプログラミング部の皆さんとWebデザイナー向けGit勉強会を開催しました。僕はひたすら裏方で酒をかったりピザを買ったりなどで走りまわってたのですが、今回は裏方側のレポートをお送りします。表側のレポートは当日講師をやってくれた@satococoaさんのブログ（http://www.223soft.net/48）をどうぞ。

会場を貸してくれた Zynga Japan 様、会場の手配をしてくれた@hiro_yさん、講師をしてくれた @satococoa さん、グループでの作業で先生をやってくれた @shu_0115さん、@soucerjp さん、@tyabe さん、@soucerjp さん、@jishiha さん、@pwimさん、@mreinsch さん、買出しや受付やトイレの案内などをお手伝いをいただいた @rono23 さん、@9d さん、@fumiyasac さん、Ust中継をやっていただいた @monoooki さん、ありがとうございました！

すごく大ごとになってしまって、こんなにたくさんの方にご協力いただいてしまいました。@satococoa さんの教え方が本当に上手で、さらにこれだけ豪華な先生たちのおかげで、参加者全員が pull request を送れた、という快挙を成し遂げられました。20人くらいのデザイナーが当日初めて Git を触ってそこまでやったんですよ。これはすごい！

今後のお知らせが欲しいかた、pull requestを

当日の最後にGithubのリポジトリをフォークして、それをローカルにクローン。それに手を加えてオリジナルにpull requestを送るという練習に使ったリポジトリはコチラです。HTMLで出来た勉強会参加者の名簿になっているのですが、ここに自分の情報を追加してpull requestを送るということをやりました。今後、また勉強会を行うときは、こちらの名簿にあるGithubアカウントにメッセージを送りますので、ぜひ、興味のあるかたは自分の情報を追加してpull requestを送ってください。

当日のスライド

satococoaさんがこの勉強会のために作ってくれたスライドです。

事前準備

打ち合わせ

大体の打ち合わせは Lingr のデザイナー向けプログラミング部チャットとGoogle Groupsのメーリングリストで行いました。

簡単にチャットルームが作れる Lingr が便利。世の中、いろんな情報共有ツールが出まわってますが、Lingr で十分じゃね？って思うのが結構あるように僕なんかは思ってしまいます。その割に Lingr はあんまり知られてないから、アカウントを作るのが面倒ってよく言われることもあって、Lingr が流行るか、別のLingrと同じくらいシンプルなチャットサービスが流行らないかなー、って思うこの頃。ちなみに、Lokka のやりとりも Lingr を使ってます（http://lingr.com/room/lokka_ja）。

チャットは結構Skypeを使ってる方が多いと思いますが、Skypeはお互いがログインしていないと発言が届かないっていうのが結構不便なんですよね。なので僕はLingr派です。

一回だけフィヨルドオフィスで顔を合わせてMTGを行いました。そのとき決まったのは、

• 全体の講師は@satococoaさんにやっていただく
• 三部構成にして、最初は挨拶とGitの概要、次にローカルでGitを使うハンズオン、最後にグループでGithub上でpull request（もうこの辺は教え上手のsatococoaさんにお任せ）
• グループでの作業もあるので名札を用意する
• グループでの作業があるので先生をやってくれるエンジニアさんたちに声をかけよう

…と、まぁこんな感じでした。

買い物

僕は事前準備に買い物を担当。ペンと名札シールを買いました。

ペンはぺんてるのサインペン。これ好きなんですよね。昔、僕がCD屋さんでアルバイトをしてたときのPOP描きに重宝してました。

確か、名札のシールはこれ。もしかしたら違うやつかも。名札シールは服の上から貼るので、剥がれにくいようにラベルシールを買いました。ラベルシールは種類がたくさんあって、どれを買ったかわからなくなりますね。

当日

当日は懇親会の準備に追われてました。懇親会でお店を予約するとなると、事前にお金を集めないと幹事が自腹を切るはめにあったりして大変です。今回は懇親会の場所もZynga Japan 様を貸していただけたので、そういった心配がいらなくなってすごく助かりました。

ピザ

会場の Zynga Japan 様オフィスの側にピザ屋さんがあることを@hiro_yさんに教えていたき、懇親会のピザはそこに決定。直接取りに行く割引もあって結構安く済みました。 Zynga Japan 様で勉強会をやるときの懇親会のピザはここで買って直接取りに行くのが必勝パターンです。

お店はここ（ピッツァ サルヴァトーレ クオモ代官山）。Zynga Japan 様から徒歩五分かからないくらいの近さ。

大きな地図で見る

ここでMサイズで1500円以下の安いピザを買えるだけ買いました。

ビール

続いてビール。ビールはカクヤスに出前を頼む予定だったのですが、電話したら安い発泡酒の在庫がないことが判明。思いがけないトラブルにパニック、安いビールを足で探しに行くことになりました。

外をぶらぶらしていたら、Zynga Japan 様の近くに「ショッピング オーワダ」という聞き慣れない名前のスーパーを発見。ここで一本70円の激安ビール（もどき）を発見！

オーワダグループのHPがなかなかイカしたやつで、これはググッても出てこないはず。HPに入っても店の場所もわからないとは…。まぁ、おかげで予算内に全てを収めることができました。というわけで、Zynga Japan 様での懇親会のビールはショッピング オーワダで買うのが必勝パターンです。こちらも徒歩5分くらい。

大きな地図で見る

Zynga Japan 様

先ほどから何度も名前が出てくる会場を貸してくれた Zynga Japan 様の紹介を。

デザイナーの皆さんにはUnoh Labでおなじみウノウ株式会社様が2010年8月に株式がZynga様に譲渡されて、Zynga Japanという会社になった会社です。ちなみにウノウ株式会社はフィヨルドの@komagataさんやつくる社の@jishihaさんが前にいたこともあって、気が付いたら今日フィヨルドオフィスで作業してる人は僕以外全員元ウノウの人だった、ということがよくあります。

提供しているサービスは、ガラケーの人がTwitterで写真をアップするときによく使ってる、フォト蔵、フォト蔵って月最大3Gまでアップロードできて、合計の容量は無制限という実はかなり太っ腹な画像のサービス。mixiアプリの「まちつく！」、cityvilleやcastlevilleなどのvilleシリーズのFacebookアプリはもう有名ですね。最近、もじとも☆という可愛いアンドロイドアプリもリリースされました。アンドロイドを持っていないので出来ないのが悔しいです。

今度はハッカソンやります！

今度はエンジニアとデザイナーがペアを組んでGitを使って一日で動くものをつくる、というハッカソンをやることになりました！ぜひ、ご興味のあるデザイナーはご参加ください。

デザイナー×エンジニアハッカソン

• git
• 勉強会

だいぶ更新が滞ってました。色々書きたいことはあるのですが、うまくKUROIGAMENを最新Lokkaにアップデート出来なかったり、呼ばれた結婚式の余興を頼まれたり、家でマンガ読んだり、なんだかバタバタの毎日です。あとは、黒い画面を使わない本来の仕事であるデザインもやってます。

先日、僕の隣で仕事をしてる @komagata さんに突っ込まれて気がついたのですが、僕のRVM、結構古くなってました。僕の RVM でインストールした Rubyは1.9.2 の p180 だったのですが、どうやら今の RVM の Ruby は p290 みたい。自分のも p290 にするには、 RVM をアップデートして、取ってくる Ruby のリストを新しくする必要があるとのこと。 KUROIGAMEN の再開として軽く今回は RVM のアップデートに挑戦したレポートをお送りします。それにしても、黒い画面のツールもMac アプリみたいに「新しいバージョンが出ましたよ、インストールしますよ」って通知とアップデートを自動でやってくれたらいいのに、って思います。RVM のアップデートも黒い画面に疎いデザイナーの僕にとっては挑戦。しかもどっかで失敗したら仕事も滞るし、結構ドキドキです。

ところで、この「ｐ」はパッチのことみたいです。では、パッチとは？

コンピュータにおいてプログラムの一部分を更新してバグ修正や機能変更を行なうためのデータのこと。「修正プログラム」や「アップデート（プログラム）」などとも呼ばれる。実際に変更を施す際は「パッチを当てる」、「パッチを適用する」と言う。

引用元：
http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%83%E3%83%81

と、wikipedia にありました。パッチとは元々「つぎあて、あて布のこと」なので、つぎあて、あて布の様に上書きしたファイルのことですね。1.9.2がリリースされてから、280個のパッチが当てられたということで、Rubyコミッタの皆様、パッチを送った開発者の方、ご苦労様です。

RVM のアップデート

さてさて、話は戻って RVM のアップデートへ。

まずはRVMのバージョンの確認。このコマンドで確認が出来ます。

$ rvm-v

うっかりバージョンの確認をするのを忘れてしまってました。確認してキャプチャを撮っておけば良かった…。※ちなみにアップデート後のバージョンは「rvm 1.8.6」になってました。

では、アップデート。RVM のアップデートのコマンドはコレ。

$ rvm get latest

おっと、ここでエラーが！ググってたら助かる記事を発見 http://zunermuka.blogspot.com/2011/05/rvm-get-latest.html。この記事にある通り、

エラーが出たときはコレをまず打ってから、

$ rvm get head

もう一度、

$ rvm get latest

これを打つ。

はい、RVM アップデート出来ました。zunermuka さんありがとうございます、助かりました！

アップデートが出来たので、RVM からインストールできる Ruby のリストを表示してみます。

まずはリストを更新して、

$ rvmreload

リストを表示。

$ rvm list known

[ruby-]1.9.2[-p290] が出現！

RVM で Ruby1.9.2 をアップデート

では、Ruby1.9.2 をアップデートします。「Ruby1.9.2 p180」を「Ruby1.9.2 p290」に。

$ rvm upgrade ruby-1.9.2-p180 ruby-1.9.2-p290

ruby-1.9.2-p180をruby-1.9.2-p290にするの？と聞かれるので「Yes」。

そのあと、Gemset も一緒に移行する？と聞かれるので、こちらも「Yes」。 ただ、このGemsetの移行がすごい時間がかかってしまって、ことのとき僕は仕事中の身でしたので、イライラしちゃって全部途中でキャンセルしてしまいました。

今回の作業は「http://d.hatena.ne.jp/naberon/20110302/upgrade_rvm」こちらのブログがとても助かりました。naberonさん、ありがとうございます。

RVM はオワコン？

そうそう、RVM がオワコン（終わったコンテンツの略、終了ってこと）ということをhttp://blog.niw.at/post/11016737935 こちらのブログ（シンプルで素敵なデザイン）で知りました。うーん、全然RVM便利でバリバリ使ってるんだけどなー。「代替の方法は一杯あって、Rubistの数だけ存在すると聞いていますが」…これは逆に面倒そう。

で、RVMに代わってrbenvってやつが今流行ってるみたいで、調べてみたらデザイナー向けプログラミング部や先日のWebデザイナー向けGit勉強会などでいつもお世話になってる@satococoaさんがブログに書いてました（http://www.223soft.net/50）。 なるほど、rbenvの方がもっとシンプルで軽いみたい。

RVM が使えなくなったらそっちに移行するかなー。今は全然便利なんだけどなぁ。

オマケ

普段RVMはターミナルからしか見ることはないのですが、今回の記事を書くにあたって RVMのサイトを色々見てみたんですが、RVM って Blue Box Group さんという会社と ENGINEYARD さんがスポンサーになってるんですね。どちらも Ruby アプリのホスティングサービス。Lokka のスポンサーもやってくれないかしら（Heroku の SalesForceさんとか）、と思ったり。

• Ruby
• RVM

「今月で都合がいい日っていつですか？」…というメールの返信。

Googleカレンダーや手帳を開いて、

• 9/7（水）はOK
• 9/8（木）はダメ
• 9/9（金）は夜だけOK …

とメールに書いていく。

この作業が面倒過ぎる！

ということで、@amesel さんにお願いして休日にフィヨルドオフィスに来ていただき、この面倒な作業を取り除くツールをほぼ一日で作っていただきました。

できたのがこれ。

Good Days List

開発の様子

どんな感じで開発をしたかをここで紹介しておきます。

@ameselさんとはQlippyというサービスのデザインのお仕事をやらせていただいたときに、@ameselさんはQlippyのシステムの開発をやられていて、その繋がりで知り合ったのですが、ずっとリモート作業だったので、一度@ameselさんと顔を合わせながら作業をしてみたいなー、と思っていました。

で、今回作ったサービスのネタは前からあったのですが、@ameselさんにお願いして一緒にハッカソンをして作ろう、と思いつき、Skypeでお願いして、休日の朝からフィヨルドオフィスに来ていただくことになりました。

ハッカソンは11:00開始で、行きの電車の中で頭の中で仕様を考えて、オフィスに到着したのが11:00ちょっと前だったので、ノートに仕様をパパっとスケッチ。

すごくいい加減なものだけど、顔を合わせて作業をやるならこれだけで仕様を伝えるのは十分！本当にこれ1ページだけ。

@ameselさんが到着して作業を開始して2時間くらいでシステムのところはほとんど完成させてくれました。

@ameselさんがRails3.1に挑戦したい、とのことでお互い初のRails3.1を触りました（ハッカソン当時はrc4）。3.1はデザイナーが触るcssや画像のディレクトリも変わるのでちょっと面倒でした。うーん、まだ慣れてないだけかもしれないけど、assetsは嫌だなぁ・・・。

途中、祝日もメモ欄に出てくるといいよね、ってことになったので、ちょうど@komagataさんが日本の祝日を取ってくるGemを作っていたので、それを使って祝日を表示する機能も追加。ついでにそのGemをRuby1.9.2でも使えるようにちょこっと文字コードの指定を書いてpull request。

日本の祝日を取ってくるGem https://github.com/komagata/holiday_jp

一日で大体完成したのですが、細かいところがちょっと残っていたので、それらはGithubのIssueを使ってリモートで作業。色々僕のわがまま聞いていただきありがたかったです。

デザインは、外国の文房具屋さんに置いてあるっぽい感じをイメージしました。

ライセンスについて

このサービスのリリースしたことをMOONGIFT様に連絡をさせていただいたのですが、MOONGIFT様からご指摘をいただいて、気が付きました。ライセンス表記がない！

急いで先ほどライセンスを追加。「MITライセンス」にしました。ここは色々やっていただいた@ameselさん名義で。

ちなに、MITライセンスは

MIT License - Wikipedia

要約すると、MIT Licenseとは次のようなライセンスである。

このソフトウェアを誰でも無償で無制限に扱って良い。但し、著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。

作者または著作権者は、ソフトウェアに関してなんら責任を負わない。

という、ゆる〜いライセンス。

こんなライセンスなので、ぜひ自分の作ったサービスの機能追加などにご利用ください。

リポジトリはこちら

そうそう、調整さんでイベントを作ったときの候補日を入力するときにも便利です。

• heroku rails ハッカソン