2013-05-01

Railsの"cycle"というヘルパーが便利

@machida さんのブログで知ったcycleというヘルパーこれ使ってみたらすごく便利だった。
Rails で li や table の tr に偶数、奇数の class を付ける

https://gist.github.com/machida/5487284#file-gistfile1-haml

これはさらにこんな使い方もできるっぽい。

https://gist.github.com/taea/5496560
3の倍数番目の 'p.user' にだけ、'.nth-child-3' というclassを追加する。
つまり、liとかでなくても、divでもpでも何でもclassとかを付けられるものなら、eachで回している中の一定の要素で使えるらしく、さらに繰り返し回数もいくつでもいいっぽい。
CSSとかHTMLとかで頑張らなくてよくて、とっても便利だ！

2013-04-25

作るもの決めて #p4d 参加したらだいぶ実りあった

Ruby on Rails

#p4d 感がすごい！ twitter.com/satococoa/stat…
— Satoshi Ebisawa ☃ (@satococoa) April 25, 2013

いつも漫然となんとなく何やるかも決めずに参加してしまっていたp4d （デザイナー向けプログラム部）なんですが、それでも毎回色んな話できるだけでも楽しかったのでまあよかったのですが、なんかそれもアレだなあと思い、今日は作りたいものを決めてから臨んだら、皆さんに教えていただいたおかげでとても充実したp4dでした。
普段仕事では、プログラマの皆さんが既に作ったRailsアプリの中の、デザインやフロントエンド部分をいじる感じのことをしていることが多いのですが、イチからRailsアプリを一人で作って公開レベルにまで持っていくようなのがそろそろやりたいと思ってたところでした。

今日やったこと

完成・公開する前に大々的にネタばらししてしまうのもなんか寒いので、何作ることにしたかはここでは詳しく言及しないけど（でも割と言いたい）、今日の仕事中に思いついたやりたいネタを持って行ったら、今日は@satococoaさんに、モデルの設計から、scaffoldで作ってみるところまで教わることができました。
今回 "Task" というModelの中にこのようなカラムを作りたい。

title:string
point:integer
status:string
memo:text
started_at:datetime
finished_at:datetime

という場合はこのようなコマンドを実行。



$ rails g scaffold Task title:string point:integer status:string memo:text started_at:datetime finished_at:datetime

すると、db/schema.rb に以下のように書かれる。（上記コマンドでtypoした時はここを修正すればよい）



  create_table "tasks", :force => true do |t|

    t.string   "title"

    t.integer  "point"

    t.string   "status"

    t.text     "memo"

    t.datetime "started_at"

    t.datetime "finished_at"

    t.datetime "created_at",  :null => false

    t.datetime "updated_at",  :null => false

  end

これで、



$ rake db:migrate

すると、scaffoldが動く（はやい！）

さらに、Haml派なので、Gemfileに



gem 'haml-rails'

gem 'erb2haml'

を追加する。
erb2hamlをbundleして、



$ rake haml:replace_erbs

を実行すると、erbを全てHamlに変換してくれる。
さらにCompassを追加。



group :assets do

  gem 'sass-rails',   '~> 3.2.3'

  gem 'coffee-rails', '~> 3.2.1'

  gem 'compass-rails'

さらにSassの設定を追加。config/application.rb に以下の2行を書いておく。



    config.sass.line_comments = false

    config.sass.cache = false

ここまでできたので、後はデザインやフロントエンド部分を自力で整えて次回に臨（めるといいなあ…）

「ハマらないと覚えない」

Rubyを覚えたくて、以前ドットインストールをやってみたんだけど、やってる最中は面白くてなるほどなあーと思いながら学んでるんだけど、すぐ忘れてしまう。
まあ、継続して使い続けなかったり、復習したりしないと忘れてしまうのは当たり前なんだけど、ああいうのなんかいい手ないんですかね、という話を終わったあとの懇親会でしてて、その時に @willnet さんと @satococoa さんがおっしゃってた、
「ハマらないと覚えない」
というのがとても印象的で、確かにああそうだよなーと思いました。
言われた通りやって、一発でうまく動いてしまうと、なかなか記憶に残らんのでしょうね。
やっぱり、自分なりの工夫が必要になる、実際の仕事や自分の作りたいものを作る中で、色々ハマりながら覚えるのが一番身になるんだろうなー。
あと、Railsアプリのデザインやってると思うのは、そろそろhelperを自分で書けるようになりたいですね。わかりそうな部分は見よう見まねで書く時もあるんだけど、自分でもっと工夫して書けるようになると、さらにDRYで良い感じなRailsのデザインができそう。

そんなわけで、p4dは今回も楽しかったなあ。参加の皆様、今回主に教えていただいた @satococoaさん、どうもありがとうございました。

今回のKPTはこちら
https://github.com/prog4designer/meetups/wiki/%E7%AC%AC19%E5%9B%9E%E6%9C%AC%E4%BC%9A%E5%A0%B4
人気で参加者募集がすぐ埋まってしまったため、今回はサテライト会場ができてて（すごい！）そっちも盛り上がったようです。

2013-04-21

CSSは "セレクタA + セレクタB" とすると隣接した要素に指定ができる

CSS

えっ・・・(ΦωΦ)
やばい、し、し、知らなかった……。。



h4 + p {

  color: red;

}

とかやると、h4に隣接してるpが赤くなる。ヤダー何これ便利！



h4 + p + p + p {

  color: red;

}

~~だと、3つ目の隣接要素までが赤くなる。~~
だと、3つ目の隣接要素が赤くなる。
ひゃー知らなかった…すいません、すいません、すいません……トホホー！

2013-04-21

First commit が git rebase -i できない問題 → git rebase -i --root でできる

Git

git init してから一番最初のcommit内容を、2番目のcommitと一緒にまとめたい、と後で思った。
よーし、git rebase -i HEAD~~からのfixupで…



$ git rebase -i HEAD~~

fatal: Needed a single revision

invalid upstream head~~

えっ・・・(ΦωΦ)
一番最初のcommitはgit rebase -i HEADほにゃららでは遡れないのか・・・

一番最初のcommitはgit rebase -i できないのか・・・？
— TAE ✅ (@ken_c_lo) April 21, 2013

@ken_c_lo それ方法あったら知りたいですねー。調べた限りでは無さそうなのもあって、自分でリポジトリ作る時はgit flow initを使って最初に空のInitial commitを作るようにしてます
— ルエダップ (@ruedap) April 21, 2013

おお！最初に空のinitial commit 作るの頭いい！なるほど…

@ken_c_lo やってみないとわかりませんが。git checkout --orphan で別世界のブランチを作成して、そこにファーストコミットをつくって、次に元々のファーストをコピーしてcommit、後はcherry-pickで残りのコミットを以降というのはどうかな
— GNUE(鵺)♓ (@gnue) April 21, 2013

git checkout --orphan !!! そんな機能があるの知らなかった・・・。
gitのorphanブランチを理解する - ::Eldesh a b = LEFT a | RIGHT b

orphanブランチというのは、元のブランチからの歴史を受け継がず、gitリポジトリ内で新しく0から歴史を持つブランチです。新しくルートになり、親コミットを持ちません。

なるほど、何かできそうな気がする。。裏ワザっぽくてカッコイイからやってみたいぞ…。
と思ったら、

@ken_c_lo git rebase -i --rootでいけまする
— Hideki IGARASHI (@gantawitter) April 21, 2013

おおお！
＿人人人人人人人人人人人人＿
＞　git rebase -i --root 　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣



$ git rebase -i --root

↓



pick xxxxxxx first commit

pick yyyyyyyy second commit

でたー！first commit.

そんなわけでgit rebase -i --root とすると、一番最初のcommitから遡ってgit rebase -iしてくれるようです。
ということは、すごく長く続いてるプロジェクトとかでこれやったらどうなっちゃうんでしょうね…怖くて試せません。。
で、さっきのを



pick xxxxxxx first commit

fixup yyyyyyyy second commit

fixupして、second commitの内容が first commitの中にめでたくまとまり、気に入らない歴史が改ざんされました。

@ruedap Git様はやはり万物の歴史を塗り替えるのか……
— TAE ✅ (@ken_c_lo) April 21, 2013

Git様、偉大なり…
皆様、ありがとうございました。

入門Git

posted with amazlet at 13.04.21

濱野純(Junio C Hamano)
秀和システム
売り上げランキング: 135,129

Amazon.co.jpで詳細を見る

2013-04-16

dotjsでGitHubのOctocatアイコンを荒ぶるkomagataアイコンに差し替える

jQuery

New GitHub Logo · GitHub
GitHubのOctocatのアイコンのデザインが変わっていたので、記念に…

↓
Chrome拡張の[https://github.com/defunkt/dotjs:title=dotjs]を使ってOctocatを荒ぶるkomagataさんのアイコンに差し替えてみたのです。
↓

https://gist.github.com/taea/5398278

すみっこで小さく荒ぶっておられます。

[http://docs.komagata.org/:title=（※参考）荒ぶるkomagataアイコンとは]