MacのRubyをRVMでアップデートしてみるの巻

先日、念願のMBAを導入してもらいました。アプリ系のインストールもだいたい完了しましたので、あとは開発環境を・・・ということで、ruby周りのインストールメモです。

デフォルトはruby1.8系が入っていますが、それをアップデートしたりするというのが今回の目的でございます。
なにぶん、ド素人なもので、備忘録としての記事でございますゆえ、細かいツッコミはご遠慮願いたく存じます。

さて、MACのRubyのアップデートの方法は、色々な方がノウハウをご提供いただいておます。調べていくと、RVMなるものが存在して、複数のRuby実行環境を構築できるようなので、試してみます。(といっても、複数の環境を築くことはないと思いますが・・・)

ではさっそく、

RVMをインストール

こちらを参考にインストール完了しました。
hogehoge foobar Blog Style5 | Mac に rvm をインストールして 複数バージョンの Ruby を使う

かなりごにょごにょ感がありますので、あまり深く理解できていない様子ですが、次へ進みます。

Rubyのアップデート

$ rvm install 1.9.3
Can not find compiler and 'make' tool - make sure Xcode and/or Command Line Tools are installed.
Requirements installation failed with status: 11.

なんか怒られてしまいました。

どうやらXcodeがインストールされていないらしです。
うん、インストールしてなかったです。

Xcodeのインストール

$ rvm install 1.9.3
Can not find compiler and 'make' tool - make sure Xcode and/or Command Line Tools are installed.
Requirements installation failed with status: 11.

また、怒られました。同じ怒られ方です。

コマンドラインツールなるものがインストールされていない様子。

??

これ
インストールしたった。

再度挑戦。
いけそうです。


インストールできたみたいです。

$ ruby -v
ruby 1.8.6

変わってないじゃん。

あ、デフォルト設定してなかた。

$ rvm use 1.9.3

ってな感じで、無事Ruby 1.9系の環境を導入する事ができました。
この辺のことをすんなりできるくらい精進したいと思います。

静的なページ作成にはmiddlemanがいいかもしれない

mid

先日ruby製の静的ページジェネレータjegyllのご紹介をしましたが、静的なページの作成だったらmiddlemanの方がいいよというご指摘をいただき、試してみましたので、ご紹介します。

>middleman

middlemanもrubyで出来ている静的ページジェネレータです。
jegyllとの大きな違いは、システムに依存せずに、静的ページを生成してくれることだと思うのですが(違っていたらご指摘ください)
jegyllの場合、静的なページを作ることはできますが、公開する場合、サーバーにもjegyllがインストールされていないとだめだったような感じです。(すみません、詳しく調べていません)
なので、公開先としてはgithub pagesとか特殊な環境に限定されてしまうようです。

・・・歯切れが悪い説明だな。こりゃ

その点milldemanだと、build(いわゆるコンパイルです)すると、完全な形で静的なhtmlを生成してくれるので、そのままFTPとかでアップすればOKということですね。

僕がmiddlemanがいいなと思ったわけ

htmlをパーツに分けてコンポーネント化できる。

わざと難しく書きました。
つまりは、headerとかsidebarとか全ページ共通の部分を一つの塊として管理できるということです。

CMSでは、おなじみの処理ですね。

これができると、かなり便利です。個人的な話であれですが、このコンポーネント化をしたいがために、わざわざCMSでサイト構築をしていたりします。
これができれば、ドリでサイト定義して全ページ置換で修正なんて手間も省けるようになります。

テーマを複数作れる。

コンポーネント化に近いかもしれませんが、テーマファイルも自由に作成できます。
例えば、商品ページ用のテンプレート、店舗紹介用のテンプレートみたいな形で必要なテーマを用意しておけば、
流し込み作業も楽になります。

この2つにつきますね。
まだ実務で使っていませんが、使うのが楽しみです。

導入方法

僕が紹介するまでもありませんが、備忘録としてmiddlemanの導入方法をまとめておきます。

rubyはインストール済みという前提です。

middlemanのインストール
(sudo)gem install middleman

ダダダだ-っと文字が流れてきてエラーにならなければこれでOKです。

middlemanのプロジェクト作成

これもコマンドラインでの作業です。
適当なディレクトリに移動して

middleman init [プロジェクト名]

これでmiddlemanのプロジェクトを生成してくれます。
(macの場合システムのパスワードを聞かれます)

このプロジェクト作成時にオプション設定をすることができます。
詳しくはヘルプを見てもらうといいかと思います。

middleman init --help
テンプレート

middlemanにはいくつかのテンプレートが用意されています。default/html5/mobileなど
これらを利用する場合は

middleman init [プロジェクト名] --template=html5

のように指定します。

ちなみに、理由は分かりませんが、僕の環境だとdefaultでプロジェクトを生成するとbuildしたhtmlからcssやjsへのパスがうまく通っていないです。
他のテンプレートなら問題ないのですが…
詳しく検証していないのですが、もしかしたらテンプレートはhtml5とかのほうがいいかもしれません。

css/js/imagesディレクトリの名称変更
--css-dir= 

でcssディレクトリの名称を変更できます。
普段使っているディレクトリ名があれば、ここで設定変更するといいです。

プロジェクトが生成されたら、ローカル環境でテストしてみます。

コマンドラインでプロジェクトのディレクトリに移動して

middleman

これでローカルサーバーが起動して、サイトが閲覧できるようになります。

ブラウザでlocalhost:4567にアクセスするとサイトが見れるはずです。

ローカルサーバーの停止はctrl+Cです。

サイトのbuild(コンパイル)

同じくコマンドラインで

middleman build

これで、サイトを生成してくれます。
プロジェクトディレクトリの中にbuildディレクトリができているはずです。
この中のhtmlファイルを開くと、サイトが閲覧できます。

こんな感じで、middlemanでサイトが生成できました。

DEMO(かなり地味なデモですね)

次は、以前作ったモバイル用CSSワークフレームを使って、簡単なモバイルサイトを作ってみたいと思います。(公開日未定です…)

静的HTMLジェネレータ jekyllを考えるの巻

Jekyllというrubyの静的HTML生成ツールがあります。
実際に実務としては使っていませんが、割りと面白いツールですので勉強がてら紹介してみます。

インストールなどについては、詳しく説明しているブログが多数ありますので、ここでは割愛します。

Jekyllについて詳しく説明しているサイト
CodeGrid 有料ですがかなり詳しく紹介してあります。
ゆっくりと…【WordPressよりjekyllで本格的ブログを作りたくなる、かもしれないまとめ】
kaoriya 【Windowsでjekyllを使えるようにするよ】

ここでは、実際のweb制作の現場でどう使えるかを考えてみたいと思います。

Jekyllとは?

静的なHTMLを書き出してくるツールです。
と書くとすごく分かりにくいですね。
素のHTMLと違って、headerなどのパーツをインクルードできたり、ブログ的なアーカイブページができたり、テーマファイルの共有ができたりします。
データベースが不要ですので、ローカルで開発環境を整えるだけで利用可能です。

Jekyllはあくまでジェネレーターなので、自由にデザインを適用することができます。(逆をいうと、素の状態からのスタートになります)
※bootstrapを組み込んだJekyllワークフレームもあります。

ちなみに、jekyll-bootstrapはgit経由で簡単に導入できます。
(windows環境ではgitの設定など少し手間です。その辺の話題はまた後日書きます。)

git clone http://github.com/plusjade/jekyll-bootstrap.git インストールしたいディレクトリ

Jekyllでのサイト作成時のワークフロー

ざっくりと書くと
Jekyllの起動(コマンド)

ベースとなるファイルの作成、編集(テキストエディタ)

サーバー(ローカル環境)の監視&HTMLの生成(コマンド)

となります。

そう、黒い画面必須です。
残念ながら、これで、ハードル3割増し(当社比)

といっても、コマンド自体はデータのあるディレクトリに移動して

jekyll build

Webサイトの生成を行います。

jekyll build --watch

ファイルの変更を監視して、変更のあるたびにWebサイトの生成を行います。

jekyll serve

ローカルサーバを立ち上げてWebサイトのプレビューを行うことができます。URLはデフォルトでhttp://localhost:4000となります。

jekyll serve --watch

ローカルサーバを立ち上げつつ、ファイルの変更も監視してそのたびにWebサイトの生成を行います。

くらいですから、それほど大変なことではありません。

上記のワークフローも実際には、ある程度自動化できそうですが、肝心なファイルの作成、編集はテキストエディタで行なわなければなりませんし、htmlの生成もコマンドを叩く必要があります。

実際のweb製作現場では、どうかな?

前置きが長くなりましたが、実際の制作現場ではどうなのかというところを考えてみます。
ざっくりまとめると

使えそうな案件
・大前提としてCMSが導入できない案件
・ニュースリリースなどの定期更新が頻繁にある
・サイト構成が似通っていて、モジュール化できそうなデザイン

逆に導入しない方がいい案件
・更新は原則クライアントが行なう。
 →HTMLの生成にはコマンドを叩く必要がありますので
・windows環境
 →設定できますが、結構めんどくさいと思いました。

作業的には基本、テキストエディタで行ないますので、ドリームウィーバーなどのオーサリングツールを利用しているような場合も向きませんね。逆に、普段からCMSでサイト制作をしているような場合は、導入しやすいのではないかと思います。

モジュールのインクルードはかなり自由にできますので、事前にきちんと設計してサイトを作らないとカオス化必須です。

ただ、その辺の問題をクリアでき、作業フローをきちんとルール化できれば、コーダー/プログラマが設計、コーディングし流し込みをそれ以外の人に振るみないな分業化も可能になりそうだなと感じています。
かなりプログラマさんよりなツールなので、簡単に導入できる訳ではないかと思いますが、うまく使えれば作業効率が軽減できそうですね。

実際に使ってみて思ったのが、ノンプログラマにはすこしハードルが高いかもしれないということです。
インストールまではいいですが、サイト/ブログの作成、コンテンツの流し込み、公開に至るまでコマンドを叩く機会が多いです。

次回は実際につまづいてしまった部分を紹介したいと思います。

僕がscssでいいなと思う4つの機能とまとめ

今、絶賛流行中のCSSメタ言語のscssですが、流行りに乗っかってエントリーします。
基本的な使い方は、色んな方が記事にされているので、僕は個人的にいいなと思う機能についてまとめてみます。

extendの方が僕の好みです。

Scss=mixinみたいな流れですが、僕的にはextendの方が実用的だと思っています。
mixinは、cssのプロパティセットを使いまわすための機能です。

@mixin hoge {
 font-size:15px;
 font-weight:bold;
}
.hohohoh {
 @include hoge;
 color:red;
}

コンパイルすると

.hohohoh {
 font-size:15px;
 font-weight:bold;
 color:red;
}

みたいな形で展開されます。

それに対して、extendは既存のセレクタのスタイルを継承してくれる機能です。

.hoge2 {
 font-size:15px;
 font-weight:bold;
}
.hohohoh2 {
 @extend .hoge2;
 color:red;
}

コンパイルすると

.hoge2,.hohohoh2 {
 font-size:15px;
 font-weight:bold;
}
.hohohoh2 {
 color:red;
}

上記の例だと、それほど違いはありませんが、適用させたいセレクタが多い場合、extendを使ったほうが圧倒的に展開後のcssのコード量が減りますし、見通しがよくなります。

scssを知る以前から、clearfixは、extendのような書き方をしていたので、個人的にはコチラのほうが好みです。

リスト これは、ほんと神です。

これだけでも使う価値があります。

.goku-Title {
 background: url(images/goku.jpg) no-repeat 0 0;
}
.gohan-Title {
 background: url(images/gohan.jpg) no-repeat 0 0;
}
.goten-Title {
 background: url(images/goten.jpg) no-repeat 0 0;
}
.chichi-Title {
 background: url(images/chichi.jpg) no-repeat 0 0;
}

こんなような似通ったコードを書かなければいけない時。
めんどくせーなぁとか思いながら、気合で書くしかありませんでしたが、scssのリスト機能を使うと・・・

$gokufamilies:goku,gohan,goten,chichi;

@each $gokufamily in $gokufamilies {
 .#{$gokufamily}-Title {background: url(images/#{$gokufamily}.jpg) no-repeat 0 0;}
}

こんな感じで書くことができます。
これなら、セレクタが増えた時も簡単に増やすことができます。

変数 地味に便利。

リストのところでも使っていますが、scssでは変数を使うことができます。

$hoge:10px;//変数

.item {
 padding:$hoge;
}

コンパイルすると

.item {
 padding:10px;
}

文字列も変数にすることができたり、演算することもできるようです。

関数 そこまでできるか!

特定の処理をまとめて関数として利用することができます。
たとえば、ブロックの幅に合わせて子要素の幅を自動で割り出すとか。

@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}
.hogogogog {
     width:getColumnWidth(500px,5);
}

コンパイルすると

.hogogogog {
  width: 92px;
}

via:ドットインストール 

ここまで来ると、もはやプログラミング言語ですね。

まとめ

scssやzen-coedingって、コーディングを効率化するという意味では同じかもしれませんが、根本的に別物だと思っています。Zen-cordingは文法を簡略化して早く書くもの、つまり速記法に近い感覚。
scssはcssの全体像を把握した上で、部分的にまとめることで効率化させるプログラム的なもの。
結局、cssや全体の構成をきちんと把握できていないと、破綻してしまうのかなと思いました。
逆にいえば、scssを使うことで、全体像を考えながらその場しのぎでないcssを書くことができるのかもしれませんが。

実際に実務では導入するにはもう少し検証が必要かな~と思っていますが(運用面のルールとか)、すごく楽しいのでしっかり覚えて行きたいです。

macでRuby開発環境を整える

本来どちかというとデザインよりのマークアップをしている人間だったはずの僕が最近のエントリーをみるとどうも方向性が違ってきているような・・・
そして、今日の記事もがっつりサーバーサイドな話だし・・・

という訳で、これも現在進行系ではまっているネタなので記事にしたいと思います。

あまりプログラミング的な事はわかりませんし、そっち方向に行くつもりもあまりない(才能的にもね)のですが、簡単なwebアプリのモックくらいは作れるようになりたい!と思って、ドットインストールを見ながらRuby on Railsの勉強をしております。

で、自宅のMBPの開発環境を整えて勉強していた訳ですが、どうも指示どおりに書いても動かない部分がありまして、なにげにツイートしてみたら、どうやらRubyのバージョンが違うんじゃないとご指摘を頂きました。

Rubyのバージョンについては、初期設定の時に、少し苦戦して、なんとなく動いている風だったので、デフォルトでインストールされているバージョンのまま使っていました。(1.8系です)実はそんなに不自由は感じていなかったんですが、実際にアプリが完成した時に、公開サーバーが最新のバージョンで動かないなんてことがあると困りますので、アップデートしてみようと思います。
といっても、google様に教えてもらいながらなので、塩原流のまとめということでよろしくお願いします。方法だけを書きますので、その理由とかはごめんなさいm(_ _)m

Xcodeをインストール

これは既にインストール済みでしたが、Rubyのアップデートには必須のようです。
Xcode

MacPortsをインストール

そもそもMacPortsって何なんですが・・・Rubyなどのオープンソフトウェアのパッケージ管理ができるアプリという認識でよいです?
MacPorts

Rubyのインストール

ここからが楽しいターミナルタイムですw
既にドットインストールを見ながら簡単なブログアプリを作った訳ですが、コマンドは本当に意味が分かりません。いや、そもそもコマンドは覚えるものか。インストール中なのか何なのかもよくわからんし・・・

えっと、愚痴はおいておいて、本題へ

ターミナルを開いて

$ sudo port install ruby19 +nosuffix

と入れます。
すると・・・

sudo: port: command not found

何ですと?ちゃんと探したの?
だからターミナルって嫌なんです(涙)
でも、泣いていても始まりませんので、google先生に・・・

どうやら、パスが通っていないのが原因のようです。
対処方法は

export PATH=$PATH:/opt/local/bin

とターミナルで打つと直りました。

気を取り直して、

$ sudo port install ruby19 +nosuffix

なんだか良さげな感じです。数分放置すると、ターミナルの画面も動かなくなりましたので、試しに

$ ruby -v

と打ってみると・・・

ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-darwin11]

と返ってきました。

なんとか成功のようです。

そんな訳で、目指せバックエンドエンジニア・・・じゃないです。
これで、ガシガシ進められそうです!

【参考サイト】
http://ref.xaio.jp/ruby/install/macosx
SOFTWARE DEVELOPMENT