Numb. » WebCreate

Sass を使うなら、Compass も使うと便利

hibiki — Fri, 13 Jan 2012 02:51:53 +0000

あちこちで Sass のエントリーが増えてるので、私の環境も書いてみます。
Sass 使う時、より便利になる Compass というフレームワークを一緒に使っています。

Compass Home | Compass Documentation

Compass って？

便利だなと思う機能満載なフレームワークで、これも一緒に使うことで Sass がさらに簡単になったり使い勝手がパワーアップしたりします。具体的に例をあげたほうが分かりやすいと思うので、いくつか書いてみます。

Compass はいろいろな Mixin が含まれている

@import “compass”; で呼び出して使えます。自分で書かなくていいから楽ちん。

@import "compass";
.ex1 {
  @include clearfix;
}
.ex2 {
  @include border-radius(5px);
}
.ex3 {
  @include opacity(0.5);
}

↓

.ex1 {
  overflow: hidden;
  *zoom: 1;
}
.ex2 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.ex3 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

他にどんなものがあるかは、「Compass Core Framework | Compass Documentation」を見ると分かります。

監視も簡単、流用も簡単

Sass では、.scss を監視して .css を書き出す場合以下のような感じですが、

sass --watch test.scss:test.css

Compass だと、config.rb という設定ファイルをルートに置いておけば

watch compass

これだけで OK。
config.rb の内容は以下のようにしてます。ここで書き出す css や scss のディレクトリや、書き出し方法など指定しています。

http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "/"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

watch compass すら打つのが面倒なので（というか忘れちゃうので…）、バッチファイルを作ってます。

compass_start.bat とかそんな感じの名前で、以下の内容を保存。

watch compass

bat ファイルをダブルクリックすることでコマンドプロンプトが立ち上がり、watch が始まります。Ctrl＋C で watch は止められます。

このあたりは、「Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design」を参考にさせていただいてます。

htdocs 内に config.rb と start.bat を置いてみた図。
一度、下図のようにサイトスケルトン（テンプレート）を作成してしまえばあとは使い回せるので便利です。

画像の縦横 px を取得でき、計算に使える

Compass は画像のサイズも取得できます。ちょっと凄い。

img ディレクトリに 150*150 の 150.jpg がある場合、

  width: image-width("img/150.jpg") - 0px;
  min-width: image-width("img/150.jpg") - 20px;
  height: image-width("img/150.jpg") - 50px;

↓

  width: 150px;
  min-width: 130px;
  height: 100px;

これは素敵だなーと思ってます。詳しくは「Compass Image Dimension Helpers | Compass Documentation」。

その他の機能

他にも CSS スプライト用の画像を書き出せたりまでするようです。凄い。
参考：簡単に使える Compass のオススメ機能 – log

インストール

紹介はこれくらいにして、じゃあどうやって使うの？ということで。

まず、Ruby のインストールをする必要があります。以前書いたエントリー「Windows に Ruby と RubyGems を入れる | Numb.」を見て Ruby と RubyGems を入れてください。

Ruby を入れたら、以下のように打っていきます。

gem のアップデート

gem update --system

Sass のインストール

gem install sass

Compass のインストール

gem install compass

これだけです。

注意点

htdocs は、日本語の入るパスに置くとうまく動きません。そこだけ注意が必要。

Compass 便利ですので、ちょっとでも気になったようでしたら是非 :)

2011 年も残すところ 1 時間

hibiki — Sat, 31 Dec 2011 14:27:36 +0000

2011 年もあと少しで終わりですね。
私個人としては多くの経験を積めた年でした。

WordPress

今まであまりオフラインではイベントに参加していなかった私ですが、今年は勇気を振り絞って参加したのが大きかったです。オフラインでコミュニティに参加することの楽しさを感じました。

お会いできた方の中には、ネットでは 6 年ぐらいやりとりのあった方も。オフラインでお会いするのがはじめてでも、不思議と「ずっと前から知っていた」という感じで、お会いできたこと自体とても嬉しかったです :)

勉強会・懇親会に参加することは、人脈や知識を得ることができるのもメリットですが、そんなこと抜きに参加することそのものが楽しい！これにつきます。
来年も積極的に参加していきたいなあと思います！

このブログは仕事とは別に捉えて気まぐれに書いているのですが、WordPress コミュニティで出会った人が仕事に関する人とかぶっていたり、つながりがおもしろかったです。世の中は狭いものだなぁと思ったり。

カメラ

デジタル一眼の E-P2 を購入して、下手ながらに写真をたくさん撮るようになりました。これも大きかった！最近は単焦点レンズがお気に入りです :)

購入する際はかなり迷ったのですが、イベントに行く際 PC と一緒に持っていくことが多かったので、比較的軽いマイクロフォーサーズにして良かったなと思っています。

仕事

仕事は難しいことも色々ありましたが、やりがいのあることばかりで経験値をあげれる年だったと思います。好きな言葉を 2 つ。

職業というのは本来愛のある行為であるべきなんだ。便宜的な結婚みたいなものじゃなくて。
（村上春樹）

私のクライアントはいつも自分自身だった。私はずっと自分を喜ばせるために働いてきたんだ。
（ウィレム・サンドベルフ Willem Sandberg）

人それぞれ違うとは思うのですが、私はこういうタイプで。やっぱり私はこの仕事が好きだし、この仕事ができていて、趣味でやっていたブログも仕事につながって、本当に幸せだなと思います。

ではでは、来年ものんびり続けていこうと思いますので、どうぞよろしくお願いいたします！

zencoding v0.7 Wrap With Abbreviation メモ

hibiki — Wed, 28 Dec 2011 13:47:40 +0000

aaaaaa
bbbbbbbbb
ccccccccc

例1. 三行選択して、li*>a[href="$#.jpg"]{ファイル名：$#}

ファイル名：aaaaaa
ファイル名：bbbbbbbbb
ファイル名：ccccccccc

例2. 三行選択して、html:5>ul.hoge>li#0$*>a[href="#$#"]{$#}




	
	


	
		aaaaaa
		bbbbbbbbb
		ccccccccc

vim でも dreamweaver でも。「$#」が選択部分、「$」は連番なので、#$# としてたら #選択部分に。

参考：Big Sky :: zencoding-vimを少しだけversion0.7対応した

WordBench TOKYO & WordCamp TOKYO 2011 に行ってきました

hibiki — Mon, 28 Nov 2011 19:10:42 +0000

@Isaki さん作の、わぷー！

2011/11/26（土）に WordBench TOKYO、11/27（日）に WordCamp TOKYO に参加してきました。WordCamp はスタッフをしていたのもあり写真があまりないのですが、WordBench のほうではパシャパシャしてきたので何枚か載せます :)

WordBench TOKYO

朝 WordCamp TOKYO のお手伝いに楽天タワーへ。その後 WordBench TOKYO 会場へ行く組に同行しました。KDDI さんのビル綺麗でした！

WordBench TOKYO の前日にお子さんが産まれた、おでさんのセッション。

会場入り口（受付前）、まがりんがポーズとってくれましたｗ

うえぶるじょんさんセッション中の会場の様子。満員です。

みんな真剣に聞いていました。

この日、6 年越しで WordPress ユーザーとして交流のあったひろまささんといさきさんとお会いすることができました。念願の初対面で、とても嬉しかったです！

懇親会もたくさんの方が参加しており和気藹々とても楽しかったです。WordCamp KOBE でお会いした方もいらっしゃっていたり。二次会では鹿児島からいらっしゃっていた @marushu さんや @d_dp_p さんとたくさん話すことができました。鹿児島での開催、期待してます！

WordCamp TOKYO 2011

実はスタッフ申し込みに間に合わなかったのですが、直前にスタッフが足りないと聞き急遽スタッフ参加しました。

朝イチ受付だったのですが、開場の 9:15～最初のセッションあたりでもう 300 人くらいの入場と伺いました。楽天タワーに入る際にはゲストカードの着用が必須だったので、朝はそれを渡していく係をしていました。その際、WordCamp KOBE で友達になった方とも会えました :)

セッションはあまり聞くことができなかったのですが、裏方も楽しかったです。ランチ配布中にスピーカーの方を間近で見てドキドキしたりしましたｗセッションのほうは Ust も公開されるようなので、スライドとあわせて見ようと思います。

スタッフの中でもリーダークラスの方は一日中受け付けにいたり、本当に大変だったのではと思います。スタッフのみなさんお疲れ様でした＆ありがとうございました！

懇親会に登場した、わぷーケーキ！

かなり再現度高いわぷーが描かれていました。見た目だけじゃなく味も美味しかったです。

6 年越し

この日は、@aka_aus_pd さんともお会いできました。昨日に引き続き aka さんも 6 年越しでやっと初対面で、お会いできて本当に嬉しかった！みんな偶然 WordPress に手を伸ばして、初期からユーザーでお互いを知っていて、こうして実際会えたのは感慨深かったです。お会いしたときは感動しました。

遠距離恋愛をしている恋人と漸く遇えたような、そんな感じ。 RT @Isaki: 6年越しの初対面、 @hiromasa さんと @aka_aus_pd さんと @hibiki443 さん。感無量です。Sun Nov 27 02:50:12 via モバツイ / www.movatwi.jpaka aus Cothodyntomo
aka_aus_pd

まさに、こんな感じでした。

二次会

撤収作業後スタッフ打ち上げがあったようなのですが、私は 6 年越し組＋初対面のお二人に合流しました。カメラを出したところ向かいに座っていた方が焼きそばの皿を片手にポーズをとってくださったんですが、解散した後にそれが PukiWiki の yu-ji さんだったと知りました。あんなポーズ取らせてすみません…！

その席で撮ったわぷー。しっぽがなんと可動式！

@wctokyo わぷー

今回は Twitter で @wctokyo のわぷーが大活躍でした。いいキャラなのでいくつかツイートを紹介して終わります。

みんな、わぷーに幻想持ちすぎだよね。僕も、その幻想に答えられるように頑張るよ！応援してね、お約束だよ。Sat Nov 26 01:04:37 via UberSocial for BlackBerryWordCamp Tokyo
wctokyo

もつ鍋旨いよー。 http://t.co/2HJAFAwCSat Nov 26 11:00:41 via yabminWordCamp Tokyo
wctokyo

みんな楽しんでくれた？僕は、みんなが楽しんだとかどうでも良いけど楽しかったよ！ありがとう！ #wctokyoSun Nov 27 15:23:20 via UberSocial for BlackBerryWordCamp Tokyo
wctokyo

僕たちの WordCamp は終わらない！雷門わぷー先生の次回作にご期待ください！Mon Nov 28 03:02:20 via webWordCamp Tokyo
wctokyo

参加した方々、スタッフの方々、お疲れ様でした！
全ては書ききれないのですが、たくさんの出会いがありました。今回も楽しかったー :)

WordCamp KOBE 2011 に行ってきました！

hibiki — Mon, 12 Sep 2011 15:05:50 +0000

前日に仲良くなった YUKI さんと三宮で待ち合わせて一緒に向かいました。待ち合わせ場所が分からず、早速遅れる私… YUKI さんごめんなさい；

学園都市について、朝ご飯がまだだったので「腹が減っては戦ができない！」と朝マック。
WordCamp KOBE 2011 会場までの道順のご案内を見て道順をチェックしながら向かいました。これは画像付きでとても分かりやすかったです。こういうのって大事だな～と思いました。

日差しがジリジリと真夏のようで、眉毛が消えていく予感を感じつつ案内の通りに進むと、こんなカワイイ看板が見えてきました。

おー！ここだー、と中へ進むとキリンがｗ卒業制作の作品らしい？です。

あちこちに細かく案内があって、迷うことは全然なかったです。

パンフレット等は机に並べてあり、自分で必要な物を袋に詰める方式。

わぷーのステッカー発見！

WordPress ロゴのものも。

IIJ さんのところでは、わぷーのマグカップを名刺と交換で配っておりゲット。欲しかったので嬉しかったです！

アンカンファレンス

アンカンファレンスは「プラグイン開発」がテーマのところへ YUKI さんと一緒に参加しました。確認画面のないフォームプラグイン作者の三好さんと、確認画面のあるフォームプラグイン作者の堀家さんを中心に色々お話を伺いました。

アンカンファレンスで一緒の場所にいたカワイイ女の子panichiさんとカナさんと一緒に、お昼は四人で駅前ケンタへ！

ケンタで真面目にお仕事の話などもしつつ、和気藹々と楽しかったです :)

いよいよ開始！

直子さんによる、WordPress の最新事情。アンカンファレンスの時より増えて、もう満員！

CMS 内での WordPress シェアは今年 9 月現在 56.6% とのこと。数字で見ると WordPress 凄いなあと改めて感じますね。WordPress への協力、「あなたも参加してみませんか？」というところで、「楽しそうだな～」と思ったんですが、そういうところが WordPress の良いところだと思います！

実はこの時点でカメラのレンズキャップを紛失。スタッフの方に見つけたら取っておいてください、とお願いしました。速攻紛失してる自分に、もービックリでした…

セッション

Designer’s Cafe は大人気で常時、人が教室の外に溢れているように見えました。

私はほとんど Developer’s Cafe にいたんですが、最初は IE6 しか動かない状態だったようでスピーカーの方は大変そうでした。スライドを出せずにトークのみで頑張ってらっしゃった堀家さんは凄かった！

セッションは部屋が暗かったことと私の写真の腕のなさが重なり、ションボリ画質なので小さめにダイジェストで。

WiMAX は入らないかもしれないと覚悟していたんですが、ギリギリ電波が入ってなんとかノート PC をネットにつなげて使えました。セッション内容はメモを取りながら聞いていたのですが、スライド内容や発言内容の全てが大事に思えて、全てメモを取ろうとしてしまい間に合わなーいーという状態に。公開されたスライドとメモをあわせて復習しようと思います。

セッション内容はどれもおもしろく興味深い物でした。同時間帯に行われているセッションで他にも見たいものがたくさんあったので、それは公開されるスライドを見たりしようと思ってます。

終わったあと

閉会直前に、カメラのレンズキャップがあったということでスタッフの方が持ってきてくださいました。見つからないかもなあと思っていたのですが、とても綺麗な状態で戻ってきて嬉しかったです。その節はスタッフの方、拾ってくださった方、ありがとうございました！

YUKI さんは懇親会に出ずに帰られるということだったので、ぜひぜひ、と一緒に写真を撮りました。わーっと集まって 6 人くらいで撮ったんですが、他の方々も顔がバッチリ写っているため載せないでおきます。でもでも、良い記念になりました！

懇親会

飲んだり食べたりに必死であったことと、酔いも回って写真撮るのを忘れました！！すみません…！
カイさんの書かれた Android 本をゲットしたり、たくさんの方と名刺交換できたり、カナさんと再会できたり、もう本当に楽しかったです。

二次会で仲良くなれた方もいて。今後も今回出会った方々と仲良くしていけたら嬉しいな～と思ってます :)

おまけ 1. 真夜中

真夜中に目が覚めていろいろな方の WordCamp レポートを読んでいるうちにテンションが上がり、よーし私も記事書こう、と思ったのですが Eye-Fi 設定を MacBookAir にしてなかったのでどうにもカメラから写真が出せず。

諦めて WordPress の管理画面からテーマの更新がきていたのでポチッとやったところ、トップページが真っ白になり夜中にホテルで一人テンプレート修正をするハメに…。昨日・今日で名刺をたくさん交換して、見てくださる方もいらっしゃるかもしれないのにーと必死で直しました。割と簡単に修正できたので良かった～。

おまけ 2. 翌日

帰路につく前に、まがりんたちが「突撃隣のデジタルキューブ」をするということなので、私も同行させていただきました。

そこで Tai さんにお会いできて、本当に嬉しかったです！WordPress ME 時代、まだユーザが少なかった頃から Tai さんのブログはよく参考にさせていただいていたので、緊張しつつもお会いできて幸せでした。せっかくお会いできたのに名刺がもう切れてしまっていて渡すことができず…＞＜。次の機会には絶対またご挨拶に伺いたいと思います！

デジタルキューブさんのオフィスでバランスボールを抱えるわぷー風まがりんｗ

最後、三宮に戻り明石焼きを。おいしかったです :)

はじめて WordPress のイベントで遠くまで行きましたが、とても楽しい旅でした。同業種の方とも沢山交流できて刺激もありました。また今日から仕事頑張ろうと思います！

今回お会いした方々、みなさん本当にありがとうございました！また次の機会にお会いできることを楽しみにしてます！

WebAttend 2011 に参加しました

hibiki — Mon, 12 Sep 2011 12:11:06 +0000

WordCamp KOBE の前日である 9/10 に、WebAttend 2011 が大阪であるということで参加してきました！Web 業界に関わる・もしくは興味のある方が集まる異業種交流会で、かなりたくさんの方が参加なさってました。

当日は東京でまがりんと PS のみなさんと合流、新幹線で大阪へ。一旦三宮まで行きホテルに荷物を置いて再度合流、大阪へ。

私はとても方向音痴なのではぐれたら終わりだと思い、今回の神戸ではまがりんと PS のみなさんからはぐれないよう気をつけて行動してました。（みなさんありがとうございました！）

途中、梅田のヨドバシで YUKI さんと合流して WebAttend 2011 会場へ。以前から YUKI さんのブログをよく拝見していたので、「本物だー！！」とテンションがうなぎ登りでしたｗ

入り口はこんな感じの、手書きのボードがありました :)

受付を済ませ、しばらくすると人・人・人…本当にすごい人数に！

YUKI さんと二人スタダでゴハンをゲットして mgmg し、その後はいろいろな方と名刺交換やご挨拶を。想像よりも沢山の方と名刺交換したため最後は名刺が切れてしまい残念なことに…。

「明日の WordCamp 行かれるんですか？」「はい！」という会話があちこちであって、翌日の WordCamp への期待もふくらんだり。あんなに大人数の方々と一気に交流できることって中々ないので、とても良い経験でした。

あれだけ規模が大きかったのに問題もなくスムーズに進み、素敵な交流会でした。主催のみなさま、ありがとうございました！

携帯から PC サイトへアクセスした際、携帯サイトへ転送する

hibiki — Sat, 23 Jul 2011 22:02:01 +0000

携帯から PC サイトへアクセスがあった場合、携帯サイトへ転送してユーザーに携帯サイトを見せたい、という場合の設定等メモ。忘れないために…

.htaccess の内容

それぞれ、.htaccess　は http://wp.graphact.com/ 直下においているものとして 2 例。

例 1

携帯から http://wp.graphact.com/hoge/ にアクセスしたら http://wp.graphact.com/mobile/ に飛ばす場合。

RewriteEngine on

#user agent set
BrowserMatch ^DoCoMo CARRIER=docomo
BrowserMatch ^KDDI CARRIER=au_hdml
BrowserMatch ^UP.Browser CARRIER=au_wap
BrowserMatch Vodafone CARRIER=softbank
BrowserMatch J-PHONE CARRIER=softbank
BrowserMatch MOT- CARRIER=softbank
BrowserMatch SoftBank CARRIER=softbank
BrowserMatch WILLCOM CARRIER=willcom
BrowserMatch DDIPOCKET CARRIER=willcom
BrowserMatch PDXGW CARRIER=willcom

#mod_rewrite
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^hoge/$ http://wg.graphact.com/mobile/ [R=302,L]

例 2

携帯から http://wp.graphact.com/ にアクセスしたら http://wp.graphact.com/mobile/ に飛ばし、http://wp.graphact.com/foo/ にアクセスしたら http://wp.graphact.com/bar/ に飛ばす場合。

RewriteEngine on

#user agent set
BrowserMatch ^DoCoMo CARRIER=docomo
BrowserMatch ^KDDI CARRIER=au_hdml
BrowserMatch ^UP.Browser CARRIER=au_wap
BrowserMatch Vodafone CARRIER=softbank
BrowserMatch J-PHONE CARRIER=softbank
BrowserMatch MOT- CARRIER=softbank
BrowserMatch SoftBank CARRIER=softbank
BrowserMatch WILLCOM CARRIER=willcom
BrowserMatch DDIPOCKET CARRIER=willcom
BrowserMatch PDXGW CARRIER=willcom

#mod_rewrite
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^$ http://wg.graphact.com/mobile/ [R=302,L]
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^foo/$ http://wg.graphact.com/bar/ [R=302,L]

検索エンジンから来るユーザーに配慮

携帯で Google から検索してサイトを訪れた場合、表示されるのは「Google が PC サイトを調整して携帯向けにしたページ」ということがあります。この場合、.htaccess で転送の指定をしていても直接ページを開いてもらっていないため、携帯サイトに飛ばすことができません。

これを防ぐための方法を調べていたところ、Google のサポートページに以下のような内容がありました。

ウェブページを変換することを望まない場合は、ユーザーがトンランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするように Google にリクエストしてください。リダイレクトをリクエストするには、ページの HTML ファイルのセクションに次の行を含めてください。

『携帯電話での表示用にウェブページが調整される仕組みを教えてください。 – ウェブマスターツールヘルプ』より引用

上記の内容どおり PC 向けページのヘッダ内に記述してみたところ、1 日ほどで Google が調整したページは表示されなくなり、無事携帯サイトが表示されるようになりました。

ちなみに Google が変換して表示するこの機能は、Google Wireless Transcoder と言うようです（参考：Google Wireless Transcoder 【グーグルの携帯電話用ページ変換】）。
Google Wireless Transcoder ページから、この変換でどのように表示されるか見ることができます。

確認方法

Google（モバイル）
上記 URL から検索をして、Firefox + FireMobileSimulator （ユーザーエージェントを変えられるアドオン）でモバイル表示をシミュレート。

勿論、携帯実機から検索してみて確認するのが一番ですが、何度も何度も確認しているときはとりあえずシミュレートで確認し、そこで OK であれば実機で確認、としています。

参考サイト

以下のサイトを参考にさせていただきました。ユーザーエージェントに関しては、時々最新の情報を確認しておいた方がいいかもしれません。

オライリーの Ebook Store で何冊か購入しました

hibiki — Tue, 29 Mar 2011 04:44:30 +0000

地震、凄かったですね。私は南関東在住ですが大きな被害もなく平常運転してます。

オライリーのEbook、著作権者への印税や決済手数料以外を日本赤十字へ義援金＋半額　”O’Reilly Village／オラの村 – Deal of the Week – 災害支援キャンペーン開催”…というのが 3 月 26 日までやっていたので、これを機に欲しかった本を何冊か買いました。

義援金にもなるしね！ってことで、Apache、JavaScript、Perl、PHP、正規表現、パフォーマンス系と合計 10 冊買いました。実は今までオライリーの本って、高いし、重いし、買ったことなかったんです。楽しみ！少しずつ読んでいこうと思います。

話は変わりますが、ニュースで見た SONY の手回し充電ラジオどんなものなんだろうと調べてみたら、これが凄い！ラジオはもちろんのこと、懐中電灯にもなるし、携帯も充電できるし、電池でも、手回し充電で使えると。流通が落ち着いたら買おうと心に決めました。

手回し充電ラジオなんてものがあることすら知らなかったんですが、SONY こういう地味ながら便利そうなものも作ってるんだなあ。

SONY 防災用手回し充電 FM/AMポータブルラジオホワイト ICF-B02(W)

SONY のサイト内に、体験レポートもありました。参考までに。

手回し充電ラジオ　体験レポート

計画停電も慣れてきました。1 日 2 回あったりすると作業時間が結構減っちゃうのでスケジュールタイトになってしまってカツカツですが、そこは気合いで！しかし、IT 系の人は電気がないと仕事がほぼ何もできないことを痛感しました…

Windows に Ruby と RubyGems を入れる

hibiki — Tue, 08 Feb 2011 11:36:38 +0000

ちょっと前に Ruby をインストールしました。
忘れないように Ruby のインストールと、RubyGems について軽くメモ。

ダウンロード

RubyForge: Ruby Installer for Windows: Project Info から、RubyInstaller をダウンロード。

rubyinstaller-バージョン.exe をダウンロード。大体の場合、最新バージョンで良いと思います。

ダウンロードできたらインストール。

インストール

I accept the License にチェックして Next 。

Add Ruby executables to your PATH: Ruby に PATH を通す設定。手動で環境変数に追加するのも面倒なので、チェックをつけておくほうが楽です。
Associate .rb and .rbw files with this Ruby installation: .rb と .rbw を Ruby に関連づけするならチェック。

どちらもチェックをつけておく方が楽かなと思います。チェックしたら Next 。

インストール完了。これで Ruby と、RubyGems が入ったはず。

ちゃんと入ったか確認

コマンドプロンプトなどに、以下のように打ってみます。

ruby -v

Ruby のバージョンが出ます。

gem -v

RubyGems のバージョンが出ます。Gem は perl でいうと CPAN みたいなもので、これがあると色々インストールが楽になる、という認識でいいと思います…多分…。

使い方は、以下のような形。

gem install --remote <パッケージ名>

“–remote” は、リモートリポジトリから探してインストールするよ、という意味で、つけない場合にはローカルリポジトリとリモートリポジトリ（RubyForge）の両方を探してインストールしてくれるようです。

RubyGems のコマンド、最低限知っていたいもの

RubyGems 本体のバージョンを最新にする

gem update --system

RubyGems からパッケージをインストール
バージョンを指定したいときは、–version バージョンとオプションを後ろにつけてあげれば OK

gem install --remote <パッケージ名>

RubyGems で入れたパッケージのアンインストール

gem uninstall <パッケージ>

この辺りは、以下のサイトを参考にさせていただきました。

RubyGems の使い方 – WebOS Goodies

やってみると結構簡単だなと思ったので、やってみたい方がいらっしゃったら是非。色々と試せるので中々楽しいです。

何が出来るのか

LESS を使える

LESS は、CSS を動的に書き出しちゃおうぜ！もっと楽に書こうぜ！変数とか使っちゃおうぜ！というものです。以下の記事が詳しかったので、興味を持たれた方は是非。

ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog

おもしろそうな PaaS、Heroku を試せる

昨日書いた github の導入とあわせて行っておくと、Windows からも「デザイナーもHerokuを使ってみよう！Herokuを使って静的ページを無料で作る – KUROIGAMEN(黒い画面)」の内容が出来るようになります。

ちなみに、上記記事の内容は Win でも大体同じコマンドを打っていけば大丈夫だったのですが、sudo gem install heroku 部分だけは、sudo を取って以下のように。

gem install --remote heroku

sudo は UNIX のコマンドなので使えません。管理者として色々やるよ、という意味なので、Windows の場合はコマンドプロンプトを管理者として実行、あたりが代替えになるかなと思います。（管理者として実行でうまくいくかは試していませんので推測です。私は管理者権限ユーザーでログインしてやりました。）

Github を Windows で使ってみる 2011 年版

hibiki — Mon, 07 Feb 2011 13:46:25 +0000

github を Windows で使ってみるという記事を 2008 年に書いたのですが、未だにそこそこ需要もあり見ていただいているようなので 2011 年版として新たに書いてみます。GUI で色々ごにょごにょ出来るようになっていたり感動しました。進化してる！

Help.GitHub – Welcome でざっと手順を眺める。書いてある手順を引用すると以下の通り。

Getting started with Git and GitHub

Getting up and running from scratch is easy:
1. Take a quick crash course on git
2. Install Git
3. Generate a keypair – If you have troubles
4. Set your user and email in git
5. Create a repo or fork an existing repo

『Help.GitHub – Welcome』より引用

Install Git

まずは「2. Install Git」、インストール説明ページ Help.GitHub – Installing git (Win/msysgit) へ。

最新バージョンの msysgit をダウンロードしてねと書いてあるので、msysgit のリンク先、msysgit – Project Hosting on Google Code へ。

ダウンロードページ Downloads – msysgit – Project Hosting on Google Code から Git-バージョン-preview日付.exe をダウンロード。

現時点での最新 Git-1.7.4-preview20110204.exe を今回はダウンロードしました。

インストール作業は以下のように。基本的には Enter 連打で OK だと思います。

インストールが終わったら、以下のことをする必要がある、と書いてある。「generate an SSH keypair and set your local git config.」、つまり SSH keypair を作るのと、ローカル git の設定をしてね、ってことらしい。それぞれ、最初の項目でいうと、「3. Generate a keypair」と、「4. Set your user and email in git」に該当する作業ですね。

Generate a keypair

「3. Generate a keypair」 Help.GitHub – Generating SSH keys (Win/msysgit) へ。書いてある項目順に進めます。

Backup and remove existing keys

Windows スタートメニュー -> Git -> Git Bash で、起動させた画面に以下の通り入力（※入力するのは “$ “の後ろからです）。

$ cd ~/.ssh

これで ~/.ssh ディレクトリに移動。ちなみにこれは、Win7 では C:\Users\ユーザー名\.ssh に当たります。XP などでは C:\Documents and Settings\ユーザー名\.ssh に当たります。「~」は HOME を示すので、要するに HOME ディレクトリ内の .ssh ディレクトリです。

$ ls
config  id_rsa  id_rsa.pub  known_hosts
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

書いてあるとおり入力。やってることは、ls でディレクトリ内容を表示して、ディレクトリの内容がバーっと出たら表示通りか一応見て、mkdir で key_backup ディレクトリを作って、cp で id_rsa～で始まるファイルを key_backup にコピー、rm で .ssh ディレクトリ内の id_rsa～で始まるファイルを削除。

よし出来た。次、「Generating a key」という項目をやります。

Generating a key

$ ssh-keygen -t rsa -C "自分のメールアドレス"

ここでやってることは、-t 鍵の種類、-C “コメント”　で認証用の鍵作るよ！というかんじです。コメントに自分のアドレスを入れたのは、Help.GitHub – Generating SSH keys (Win/msysgit) でそうなっていたからです。必要かはちょっと分からなかったのですが一応入れておきました。

ssh-keygen [-q ] [-b ビット数 ] -t 鍵の種類 [-N 新しいパスフレーズ ] [-C コメント (訳注:SSH1のみ)] [-f 出力先identityファイル ]

『SSH-KEYGEN (1)』より引用

先ほどの内容を打つと、以下のように出てくるはず。

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/ユーザー名/.ssh/id_rsa):

() 内の場所に鍵ファイルを作るよ、OK ならエンター押して、いう内容。id_rsa は先ほどバックアップも取ったので作成して OK ということでエンター。すると以下のように出てきます。

Enter passphrase (empty for no passphrase):

パスフレーズ入れてエンター押して、という内容。空のままエンターだとパスフレーズなしになるようです。パスフレーズを適宜決めて入力してエンター。パスフレーズは 4 文字以下だとエラーになるので、4 文字より多い文字数で。エンターすると以下のように出てきます。

Enter same passphrase again:

もう一度パスフレーズを入れてエンターして、という内容。確認してるだけですね。パスフレーズを再度入力してエンター。バーっと文字が流れ、鍵作成が終わりです。

「Adding the key to your GitHub account」の項目へいきます。

Adding the key to your GitHub account

GitHub の自分のアカウントページへいって、“SSH Public Keys” （SSH 公開鍵）セクションの “add another public key” （別の公開鍵の追加）をクリックして、“key” フィールドに public key (id_rsa.pub) の中身を入力して、と書いてあります。なのでその通りに。id_rsa.pub の中身は、適当にテキストエディタなどで開けばみれますのでそれをコピペすれば OK です。

Testing things out

きちんとつなげることが出来るかテストします。書いてある通り以下のように入力。

$ ssh git@github.com

すると、以下のようにでてきました。

Enter PassPhrase for key '/c/Users/ユーザー名/.ssh/id_rsa':

先ほど設定したパスフレーズを入力してエンター。するとズラズラっと文字が出てくるので、その中に “successfully authenticated” とあれば OK 。
ちなみに私の場合には以下のような文言が出ていました。これは時期によって多少変わるようなので、参考程度に。同じ文言でなくても “successfully authenticated” とあれば大丈夫です。

Hi 名前! You've successfully authenticated, but Github does not provide shell access.
Connecting to github.com closed.

内容は、「やあ○○！あなたの認証に成功したよ。だけど Github はシェルアクセスは提供してないんだよね。github.com から接続を切るよ。」的なかんじです。認証成功してれば OK ってことです。これで「3. Generate a keypair」は終了。

ちなみに、もしも “successfully authenticated” の文字が見あたらなかったら、Help.GitHub – Troubleshooting SSH issues をみてね、とありました。私はすんなり進んだので、このまま次へ進みました。

Set your user and email in git

「4. Set your user and email in git」、Help.GitHub – Setting user name, email and GitHub token へ。

Setting user name and email globally in git

$ git config --global user.name "自分のユーザー名"
$ git config --global user.email "自分のメールアドレス"

ユーザー名とメールを設定。変更を push した時に、これらの名前やアドレスが一緒に送られるので、その辺は気をつけてください。設定しておかないとマシン名が表示されたりすることになり恥ずかしい思いをするとのことです…。

他にも項目がありますが、通常、この設定まですればこのページは OK のはず。

Create a repo or fork an existing repo

いよいよ最後、「5. Create a repo or fork an existing repo」。Github にリポジトリを作り、設定します。先ほど気づいたんですが、いつから Github 日本語表示できるようになってたんでしょうか。ビックリ。

GitHub にアカウントがまだなければアカウントを作成。あればログイン。

GitHub のトップページの「Create a Repository」をクリックして Create a New Repository ページへ。

プロジェクト名　※英語表示だと「Project Name」: プロジェクト名など分かりやすい名前を適当に入力。
説明（オプション） ※英語表示だと「Description (optional)」: このリポジトリの説明、空白でも OK。
ホームページのURL ※英語表示だと「Homepage URL (optional)」: そのまんまです。オプションなので空白でも OK。
このリポジトリにアクセスできるのは誰ですか？（あとから変更することもできます）　※英語表示だと「Who has access to this repository? (You can change this later)」: デフォルトの Anyone を選択。フリーアカウントでは Anyone しか選べないようです。

これで「リポジトリを作る」（英語表示では「Create Repository」）をクリックすると、設定の書いてある以下のような画面が出ます。

最初の全体設定は、先ほど「4. Set your user and email in git」で行って終わっているのでスルー。次の手順から。書いてあるとおりにすれば良いのですが、一応ちょっと何をするのか書いてみます。

まずディレクトリを作るコマンドを入力するのですが、先ほどの Git Bash の画面を閉じずに連続で作業してる場合、そのまま打つと .ssh ディレクトリ内に作られてしまうので注意。cd ～で移動してから打つようにしたほうがいいです。たとえば、C:\Users\ユーザー名\ 内に hoge というディレクトリを作ってそこをリポジトリにする場合、以下のようにします。

cd ~/
mkdir hoge

もし、D:\ 内に作りたいなら、

d:
mkdir ディレクトリ名

という感じです。
ディレクトリを作ったら、今作ったディレクトリ内に移動して、git init でそこにリポジトリを作成します。

cd ディレクトリ名
git init

あとは以下のように。この部分は先ほど開いたウェブページを見た方がプロジェクト名など間違えなくていいかもしれません。

touch README
git add README
git commit -m 'first commit'
git remote add origin git@github.com:ユーザー名/作ったプロジェクト名.git
git push origin master

もし、push しようとしたときに以下のように出たら、パスフレーズの入力をしてエンターしてください。

Enter passphrase for key 'c\User\ユーザー名\.ssh\id_rsa'

やってることは、以下のような感じ。

touch README で README というファイルを作る
git add README でローカルのリポジトリに README を追加
git commit -m ‘first commit’ でローカルのリポジトリに変更を適用。-m ～はコメントです。書式は -m ‘ここにメッセージ’ 。
git remote add origin git@github.com:ユーザ名/作ったプロジェクト名.git で、リモートのリポジトリを origin という略称でと登録
git push origin master で、ローカルリポジトリのブランチ（master）を、リモートのリポジトリ（origin）に push （コミットみたいなものです。アップしたと思えば OK）。

これで、ローカルリポジトリから、リモートリポジトリの Github に push されてるはずです。ブラウザから「https://github.com/ユーザー名/プロジェクト名」を見ると、README ファイルがアップされていると思います。

略称部分は別のものに変えても勿論いけます。そのときは、push する際も、git push 略称 master という形で適宜変えてください。ちなみに、master は git のデフォルトブランチ名。

もし、間違えたアドレスを略称に登録してしまったら？

間違えて登録した、もしくは略称にヒモづけてるリモートリポジトリのアドレスを変更したくなった場合。

$ git config remote.略称.url 新しいアドレス

これで OK。一応変更されているか、以下のように打って確認。

$ git config remote.略称.url

表示されている内容があっていたら OK。

その他、詳しいコマンド参考：

Gitを使いこなすための20のコマンド – SourceForge.JP Magazine : オープンソースの話題満載

以上で終わりです。 :)

Git GUI でも一部のことは出来る

ちなみに、「3. Generate a keypair – If you have troubles」で行った SSH 鍵の作成は Git GUI のヘルプ -> SSH キーを表示 -> 鍵を生成、からでも作れるようです。

また、「5. Create a repo or fork an existing repo」で行ったリポジトリの作成、リモートリポジトリへの push も Git GUI から行うことができます。しかし Git GUI、ちょっと触ってみたんですが劇的に重かったので、どうだろう…。たまにしか使わないからコマンド忘れちゃう～という場合には手軽でいいかもしれません。

Git GUI については、以下の記事が大変詳しかったです。

小粋空間: Github を Windows で利用する（Git GUI編）

最初から GUI でやるより、一度は Git Bash からごにょごにょしてみたほうが、なんとなく何をしてるかわかりやすい気がします。

番外編：今作ったテストリポジトリを消したい

リポジトリのページから管理画面へ。

右下の「このリポジトリの削除」で削除することができます。

こんなことを書いている割に、ローカルでは Dreamweaver と連携させたくて Subversion を使っていたりします。git + Dreamweaver って出来るのでしょうか。またそのうち調べよう。