もじばけおなう

個人的なメモ

非モテのためのCSS - Ruby女子とあそぼう -

非モテのみなさん、おはようございます。もじばけおでございます。

PHP界隈で非モテを名乗っていた某一番さんがついに婚約されました。
いやおめでたいです。末永くお幸せに！非非モテじゃねーか！！

という私信を冒頭で軽く済ませつつ、今回はSCSSで遊んでみます。
SCSSでできることを抜粋すると、こんな感じみたいです。

  • &で親セレクタ参照できる
  • 制御構文使える
    • if
    • for
    • each
    • while
  • @mixinで関数も作れちゃう
  • @extendで別のセレクタからスタイルを継承できる
  • 監視させて自動でcss生成できるぽい
  • オプションで圧縮とかできる

ぶっちゃけ週末PHPerな僕にはLESSでもいいと思いますし、SCSSより手軽なんですが(あんまかわんないけど)、
噂によるとRails3.1からは標準でSCSSが組み込まれてるようです。
話題のRubyistな女子大生モデルと仲良く会話するためにも是非触れておきたいものです。
まさに非モテな僕らのためのCSS！
僕はSinatra派ですけどもちろんSCSS読み込んでつかえます。

まずはインストールから。

gem install sass

これだけ。ちょお簡単ですね。


適当にcss書いていきましょう。

&で親セレクタ参照からはじめます。

  • selector.scss
div {
  a  {
    text-decoration: none;
	
	&:hover {
	  text-decoration: underline;
	  font-weight: bold;
	}
  }
}

こんな感じに書いて

sass selector.scss selector.css

してみると、こんな感じに出力されます。

  • 実行結果: selector.css
 div a {
   text-decoration: none; }
   div a:hover {
     text-decoration: underline;
     font-weight: bold; }

うーん。ぱっと見きもいけど実際編集するのこっちじゃないし動けばいいのかなって。

ifとかelseは@mixinで関数作るときに使って、forの中で組み込めばいい気がするから、
一旦とばしてforしてみる。忘れてたから変数も使ってみましょう。

  • for.scss
$start: 1;
$end: 3;
@for $i from $start through $end {
  .id-#{$i} {width: 80%}
}
  • 実行結果: for.css
.id-1 {
  width: 80%; }

.id-2 {
  width: 80%; }

.id-3 {
  width: 80%; }

まぁ普通にfor文書けばループしますよねってかんじ。
whileもそんな感じなので省略。

mixinしてみましょう。
たとえば背景色ごとにフォントの色変えたいならこんな感じ。

  • mixin.scss
$bg: '#999999';

@mixin switch-color($bgcolor) {
  @if $bgcolor == '#000000' {
    color: #FFFFFF;
  } @else if $bgcolor == '#999999' {
    color: #000000;
  } @else {
    color: #FF00FF;
  }
}

div {
  background-color: $bg;
  @include switch-color($bg);
}
  • 実行結果: mixin.css
div {
  background-color: "#999999";
  color: #000000; }

きっとたぶんこれはこんな感じでつかうんだとおもう。

  • for-mixin.scss
@mixin switch-color($num) {
  @if $num <= 3 {
    color: #FFFFFF;
  } @else if $num <= 6 {
    color: #000000;
  } @else {
    color: #FF00FF;
  }
}

@mixin switch-bgcolor($num) {
  @if $num % 2 == 0 {
    background-color: #000000;
  } @else {
    background-color: #999999;
  } 
}

$start: 1;
$end: 9;

@for $i from $start through $end {
  div.foo-#{$i} {
    width: 100%;
    height: 20px;
    line-height: 20px;
    @include switch-bgcolor($i);
    .text {
      width: 4em * $i;
      @include switch-color($i);
    }
  }
}
  • 実行結果: for-mixin.css
div.foo-1 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #999999; }
  div.foo-1 .text {
    width: 4em;
    color: #FFFFFF; }

div.foo-2 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #000000; }
  div.foo-2 .text {
    width: 8em;
    color: #FFFFFF; }

div.foo-3 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #999999; }
  div.foo-3 .text {
    width: 12em;
    color: #FFFFFF; }

div.foo-4 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #000000; }
  div.foo-4 .text {
    width: 16em;
    color: #000000; }

div.foo-5 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #999999; }
  div.foo-5 .text {
    width: 20em;
    color: #000000; }

div.foo-6 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #000000; }
  div.foo-6 .text {
    width: 24em;
    color: #000000; }

div.foo-7 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #999999; }
  div.foo-7 .text {
    width: 28em;
    color: #FF00FF; }

div.foo-8 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #000000; }
  div.foo-8 .text {
    width: 32em;
    color: #FF00FF; }

div.foo-9 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-color: #999999; }
  div.foo-9 .text {
    width: 36em;
    color: #FF00FF; }

結構めんどくさいけど慣れたら楽なのかもしれませんね！
ソーシャルゲームでいうなら属性別に背景色と文字色かえるとかすればいいと思います。


なぜこれを最後にもってきたのかは疑問ですが、
extendで継承してみましょう。

  • extend.scss
.foo {
  margin-top: 6px;
  margin-bottom: 10px;
}

.bar {
  @extend .foo;
  color: #FF0000;
}
  • 実行結果: extend.css
.foo, .bar {
  margin-top: 6px;
  margin-bottom: 10px; }

.bar {
  color: #FF0000; }


ぱっとみやりたいことはできてそうですね！
.fooの後ろに, .barが追加されてます。
これも慣れてきたら結構楽につかえるんじゃないでしょうか。

ちなみに、

  • extend_2.scss
.foo {
  margin-top: 6px;
  margin-bottom: 10px;
}

.bar {
  @extend .foo;
  color: #FF0000;
}
.hoge {
  @extend .foo;
}

こんな感じで.hoge内が@extendしてるだけの要素があった場合、

  • 実行結果: extend_2.css
.foo, .bar, .hoge {
  margin-top: 6px;
  margin-bottom: 10px; }

.bar {
  color: #FF0000; }

単体の.hoge{}が作られないみたいですね。親切！

その他にも便利機能があるみたいです。
今回はいちいちコマンドたたいてscss->cssにしましたが、
自動書き出しも対応しているようです。
# まったくもって無責任ですが今回ためしてません。てへぺろっ。

  • ファイル単位
sass --watch style.scss:style.css
  • ディレクトリ単位
sass --watch path_to_directory

あとは圧縮。

sass --style compressed style.scss style.css

ばっちりぎゅっと圧縮してくれますよ！
色んな意味でぎゅっとして欲しい僕らに嬉しい機能！！


いかがでしょうか。
たぶん全然網羅できてないんですけど、LESS以外にもこんな選択肢がありますよ。
お手軽にめんどうなことを考えずにネストしたいだけならLESSだとは思いますが、非モテな僕らはそれでいいのでしょうか。
Ruby女子を狙うにしても、ぶっちゃけless-railsなんてライブラリも世の中には確かに存在します。
がしかし。非モテな僕らはきっとモテな人よりも何かアピールできるポイントをつくっておいたほうがいいんじゃないかな(棒読み)
まぁ大切なのはLESSもSCSSもどっちでもかまへんで！くらいの余裕を持った男子アピールができることでしょうね！ぜんぜんCSSかんけいない！！
女子力ならぬ男子力をあげてモテの仲間入りをめざしましょう！

ちなみにSinatraで使いたい人は

require 'sass'

get '/style.css' do
  content_type 'text/css', :charset => 'utf-8'
  sass :style
end

とかしてviewのhamlで%link{ :rel => "stylesheet", :href =>"/style.css" }すればいいと思いますよ。

studygiftについて思ったこと覚え書き

色々おもうところがあるので書いとく。

福岡県北九州市出身の僕と同い年(らしい)の坂口綾優という女子が金くれっていってる。
http://studygift.net
サイト自体l10n対応されてないから日本人を中心に訴えかけてるんだとおもうけど、これまた反響がすごいわけで。

批判されてる論点については多々あって、僕が見た範囲内で大きくまとめると、この2パターン。

  • 乞食ｗｗｗみたいなものとか、なんでこいつだけに支援すんの？
  • バイトしすぎて成績が落ちたことで奨学金打ち切られたっていうけど、こいつ旅行しまくったり雀荘いったり遊んで金つかいきっただけやん


前者に関してはまぁそう思いたいならそう思えばいいけど、
サービス自体はプラットフォームとして広く支援していきたいみたいだし、
この子「だけ」に支援するわけじゃないわけで、第1弾がこの子だったっだけでしょう。と。
実際サイト上で支援して欲しい人募集してるし。

後者でいえば、「おまｗｗそれソースは？ｗｗｗ」って聞きたいけど、
FacebookとかInstagramに海外旅行してるっぽい写真がアップされまくってるから、
さすがにそこはちゃんと説明しなきゃいけないだろうなって思う。今後。

あと、ネット界隈で有名っぽい人がブログにこんなことを書いてた。

誰だって失敗はします。こういう理屈がまかり通るなら、「更正」という現象はあり得ないわけです。
しかも、文章を読むかぎり、坂口さんは別に遊びほうけて単位を落としたわけではありません。

言いたいことはわかるし、更生するべき人には更生してもらいたいけど、
だからこそ第1弾にこの人を採用するのは問題だったんじゃないの。
斬新すぎるサービスだということは色んな意見がでてきて当然だと思うのだけど。

ちなみにstudygiftに掲載されてる文章を読む限りの感想が「遊び呆けて単位を落としたわけではありません」なら、
それに対する「更生」という言葉のチョイスには違和感があって、
この子旅行しまくってる(っぽい)っていう知識が記事書くときに既にあったんじゃねーの。って思ってしまう。


この子と、この子に対して言われていることに僕が思うのはこんな感じ。

サービス自体については、
「学費と親への仕送りを稼ぐのはまだいい。ただ、本が買いたいんです」
っていう学生と出会ったことがきっかけで生まれたらしく、
ただ本が買いたいっていう切実な学生さんには、僕は買ってあげたいし応援したいなと思える。

本来は非常に応援したいコンセプトなんだけども、気になってしかたないのは以下2点。

  • ぱっと見た限り現金支給っぽい

基本的に現金支給はよくないと思う。
ほんとにそのために使ったの？っていう無駄な疑惑がうまれるし。
本が買いたいなら図書カード、とか。
学費は代理で振り込むとかいろいろあるようなきがする。可能かどうかは調べてないけど。

  • 学生の個人情報ゴリ押し

中途半端に顔がよかったりすると、斜に構えてる人たちの目には清らかっぽい援助交際っぽく写ってると思う。
優秀であるアピールに名前も性別も、ましてや顔写真なんて必要ないんじゃないかなーと。
がっつり作りこんだプレゼン資料と学校名、学年、年齢くらいの他は必要なんだろうか。

というわけで、納得出来ない点が多々あるものの、
本買ってあげたいなっていう気持ちがあるので、ここで終わらせちゃいけないなという気持ちのほうが強くなって課金done。
僕自身毎月奨学金返してるし結構鬱陶しいのは知ってるから、少しでも楽になればいいかなと。


そういえば本が買いたいだけなんですっていう子は一体どこに行ったんだろう。

earthquake.gemをMacのローカルで動かす

神様のようなTwitterクライアント、earthquake.gemをMacのローカルで動かすためのまとめです。

この記事のゴールは、
「その辺で買ってきた新品のMacに、Growl通知してくれるearthquake.gemをセットアップするためのメモを残す」
ことです。
Growl通知だけじゃなくて当然Streamもしてくれる状態にしましょう。
ふわっとやるとStreamされなくて:recentを都度叩かないといけなくなります。

丁寧に書くつもりではありますが、
残念ながらXcodeを落とすためのAppleデベロッパー登録部分は端折ります。
だって別にそんなの必要ないじゃんっていうのが本音です。

全体の流れ

Xcodeインストール
Gitでrvm落とす && インストール
rvmでRubyインストール
gemでearthquakeインストール
Growl && growlnotifyインストール

Xcodeインストール

まずはここから。だってgitが必要なんだもの。
gccが必要なんだけどもXcode4.3のgccだとgitにそのgccちげーよ言われるので4.2以下をインストールしましょう。
うっかりAppStoreからインストールしたら面倒なことになります。僕みたいに。

Gitでrvmを落としてインストール

適当なディレクトリをでっちあげてから、

$ git clone --depth 1 git://github.com/wayneeseguin/rvm.git && cd rvm && ./install

で終わり。
vimとかemacsで、

$HOME/.bashrc

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"]]

を加えておきましょう。

rvmでRubyインストール

earthquake.gemはRuby1.9.2が必要らしいのでrvmにインストールしてあげましょう。
ただ、前述したようにふわっと1.9.2をインストールすると悲しいことになるので、
予めreadlineとopensslをインストールします。

$ rvm pkg install readline
$ rvm pkg install openssl
$ rvm install 1.9.2 --with-open-ssl-dir=$HOME/.rvm/usr --with-readline-dir=$HOME/.rvm/usr

こんな感じ。
opensslのインストールあたりが一番時間かかる気がするのでトイレにでも行けばいいと思います。

gemでearthquakeインストール

まずは先程インストールした1.9.2をuseしましょう。
普段からRubyを使っていてなおかつ1.9.2がデフォルトじゃ死ぬ！とかいう人じゃなければ、

$ rvm use 1.9.2 --default

とかすればいいと思います。

earthquakeをインストールする前に、Rubyのバージョンが1.9.2であることを再度確認しましょう。

$ ruby -v
ruby 1.9.2p320 (2012-04-20 revision 35421) [x86_64-darwin11.3.0]

無事に1.9.2が使えてるっぽかったらOKです。earthquakeをインストールしましょう。

$ gem install earthquake

で。おわり。

$ earthquake

で起動します。
初回起動の際は勝手にtwitterの認証ページが開くかと思います。
面倒ですが、表示されてる数字をearthquakeに入力してあげましょう。

一応、以上で最低限の利用はできるはずです。もちろんstreamされるはずです。

Growl && growlnotifyインストール

リプライされたときとか呼ばれたときに通知してほしい！っていう人はgrowlnotifyが必要です。
なにも難しいことはないですが、LionとLion以前ではインストール方法が違います。

  • Lion以前の場合:

Lion以前といってもSnow Leopardでしか試してないですが、
まずはGrowlを公式サイトから落とし、普通にインストールしてください。
で、そのdmgにこっそりいるEXTRASの中にgrowlnotifyが潜んでます。
同様にインストールしてあげてください。

  • Lion:

Lionの場合はそもそもdmgが異なります。
両方落としてそれぞれインストールしてあげてください。

  • earthquakeに通知してもらう

別にむずかしいことはないです。
作者であるjugyo氏によるプラグインを導入するだけです。
大変残念ながら、僕の環境では何度ためしても:plugin_installコマンドがうまく動かず、
きっぱり諦めてしまいました。だれかたすけて。

ということで、手動でプラグイン導入します。
~/.earthquake/pluginの中に配置する感じです。

https://gist.github.com/899506
ここからソースコードを入手しましょう。
適当なファイル名(例えばkeywords.rb)とかで上記のpluginディレクトリに保存します。

次に通知するキーワード設定します。
ソースコード内にもサンプルが記載されてますが、
僕の場合はtwitterも[twitter:@mojibakeo]なので、

~/.earthquake/config

Earthquake.config[:keyword] = {
  :pattern => /mojibakeo/i,
  :ignore  => %w(hoge),
  :filter  => false,
  :notify  => true
}

こんな感じになります。

ignoreのリストにhogeとか入れとくとstremの表示対象外になるっぽいですけど、
とりあえず僕には不要。
patternの部分に通知してほしいワードを書いとけばいいとおもいます。
複数指定したいなら、

  :pattern => /mojibakeo|foo|bar/i,

とかすればmojibakeo、foo、barに反応してくれるはず。


以上。だいたいこんな感じ。
あとはconfigにエイリアス書いとくだけで超快適。
僕のconfigの一部を晒すと、

Earthquake.alias_command ':r',  ':recent'
Earthquake.alias_command ':rt', ':retweet'
Earthquake.alias_command ':th', ':thread'
Earthquake.alias_command ':u',  ':user'
Earthquake.alias_command ':f',  ':favorite'
Earthquake.alias_command ':d',  ':delete'
Earthquake.alias_command ':s',  ':search'
Earthquake.alias_command ':o',  ':open'
Earthquake.alias_command ':b',  ':browse'

こんな感じにコマンド名をフルで入力しなくてもよいようにしてます。

以上。


じゃあの。