WisdomTrees

ちょっとウェブサイトのスクラッチをしようと思って、CMSフレームワークはGumbyを使おうと思ってスタート。

以前にもつかった事あるし〜と思いながらGumbyのDLサイトに行くとGumbyの開発が終了したとのおしらせ。
なぜ・・・。

結局CSSフレームワークはBootstrap一強時代に突入なのか。
Gumby使い勝手よかっただけに残念です。今後OSS化するらしい。
Bootstrapの学習面倒くさい・・・。

気を取り直してまだ下の方でDL出来たのでGumbyゲット（結局使うやつ）

さて、今回はParallaxを使いたかったのでBowerを使ってParallaxを導入としたところ、npmもbowerも環境がなかったので構築しようとしたところハマったのでメモです。

npmのインストール

# apt-get install npm
でOKです。

npmを使ってbowerのインストール

# npm install -g bower

でどうぞ。
ちなみに-gはグローバルにインストールという事でこれをつけるとpathが通るって事だと思います。

続いて、gumbyのディレクトリに移動してから

$ bower install gumby-parallax

としたところ、

/usr/bin/env: node: そのようなファイルやディレクトリはありません
#英語だと
/usr/bin/env: node: No such file or directory

との表示が。

bowerないじゃん！

という事で、解決策を探したところありました。

# ln -s /usr/bin/nodejs /usr/bin/node

をしたらいいとの事です。

/usr/bin/node を　/usr/bin/nodejs　にリンクさせてあげたらよかったんですね。

これでめでたく、parallaxのmoduleがゲットできました。

それでは、また。

関連記事

Linux mint でcompassをインストールしようとすると失敗する件

一番理解しやすかったやり方を備忘録。

@import "compass";
@import "../img/icons/*.png";
@include all-icons-sprites;

$sprites: sprite-map("../img/icons/*.png");

.btn {
	background-image: $sprites;
	background-position: sprite-position( $sprites, facebook );
	&:hover{
		background-position: sprite-position( $sprites, facebook_off );
	}
	width:52px;
	height:52px;
}

関連記事

超簡単マウスオーバーで画像をふわりと切り替えるjQueryライブラリ smart-crossfade.js ブラウザ上でcssやjavascriptのキャッシュを使わせない方法 総widthの真ん中に1カラム、もう一カラムを右端に配置する方法 PreprosのCustom Rubyを使うことでGumbyコンパイルエラーを解決

WindowsでもCompass使えて、なおかつライブプレビューをしたいなーと思っていたところ、Preprosがいいという情報を見つけました。

つまり、HTMLやCSSを変更すると、即座にブラウザ上の編集しているページに変更が同期されるわけですね。
より直感的なコーディングが可能になります。

それで早速インストールして、使ってみたらこれがなかなか快適。
しかし、HTMLを変更してもそれはライブプレビューに反映されません。
これはProの機能だという事でProを購入しました。日本円で2500円くらいでした。

これでCSSフレームワークを使ってかっこいいサイトを作るぞ！と意気込み、フレームワークはGumbyが熱いという事で、これを使う事に。

しかし使い始めてしばらくして、トップのナビの色を変更したいなと思って該当のファイルをいじってみたところ(_setting.scss)、それ以降gumby.scssのコンパイルが通らなくなってしまいました。

ネットの情報を見てみたところ、こういう人は結構多いようで？
config.rbの中のコメントを外したりつけたりしたりだとか
参考：CSSフレームワーク「Gumby」について質問です。

などの情報がありまして、試してみたのですが解決しません。。。

custom Rubyにチェックを入れないといけないよ。
[SOLVED] Can't compile gumby.scss that was generated by Claymate

という情報を見つけたので、これはPreprosについてくるCompassを使うのではなくて、マシンにインストールしたRubyを使うのだなと理解した私は、こっちにかけて見ることに。

とりあえず、rubyをWindows7のマシンにインストールするために、ソースコードからビルドとかちょっと不安だったのでインストーラーを使う事に
このページでx64のインストーラーをダウンロードして実行しました。
http://rubyinstaller.org/downloads/
インストールする時にPathを通すのもお忘れなく～。

それから
gem installコマンドを使って　sass と　compass をそれぞれインストール。
ついでにgumbyが使っている数式ライブラリである、modular-scaleとsassy-mathもインストールしておきました。

意気揚々とPreprosのオプション→Advanced Optionsから
Use Custom Rubyにチェックをいれ、For Sassにもチェックを入れ、いざコンパイル！
としてみたところ、やはり動かず。

config.rbをいじって該当箇所のコメントをつけたり外したりしてみたけどダメぽ。
PermissionDeniedとか出てきてWindowsでPermissionってどうするの？状態。

途方にくれていると、こちらの情報を見つけました。
なるほど、バージョンに依存するバグなのか？
参考：compassで自動コンパイルを設定した！

参考にさせていただいたサイト様の情報によると、以下の通り

1.コマンドプロンプト「gem uninstall sass gem uninstall compass」でsass/compassのアンインストールをする
2.コマンドプロンプト「gem install sass –-version “3.2.10″」でsassをインストールする
3.コマンドプロンプト「gem install compass –-version “0.12.2″」でcompassをインストールする

とあり、このバージョンを使えばうまく行くのかなあと、実際に試してみました。

上記は原文ママの引用ですが、私の使っているgemのバージョンではバージョンを指定するオプションは––versionでした。
つまり、gem install sass ––version “3.2.10″
とする事でコマンドを通す事が出来ました。

それでコンパイルをしてみましたが、やっぱりダメでした。
ダメ元でconfig.rbの構成を

# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"

Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))

# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'

と、マシンにインストールしたcustom rubyを使っているにもかかわらず、modular-scaleなどのライブラリはgumby付属のものを使うという設定にしてみたところ、
動いた━(ﾟ∀ﾟ)━!

という事で紆余曲折ありつつ、なんとかGumby.scssに触れる権利を手に入れました。
いやー、ハマったハマった。