SassをWindows10に導入してみる
どうもこんばんにちは．うぃるです．
今回はSassをWindows10に導入してみたいと思います．
導入と言うことでまだscssファイルのコンパイルは行いませんので悪しからず．
もう少しお勉強したら記事を書くのでよろしくお願いします．
また，当方の環境としては，
Windows10 Home 64bit
を使用していますが，他のバージョンでも問題なくインストールできると思われます．
目次
Rubyをインストールする
Ruby（ルビー）は、まつもとゆきひろ（通称 Matz）により開発されたオブジェクト指向スクリプト言語であり、スクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。 また日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証された事例となった[4]。
wikiより引用
宝石の方のルビーではありませんよ？言語の方のRubyです．
sassを利用するためにRubyの環境が必要になってくるのでRubyをインストールしておきます．
今回使用するインストーラーはRubyInstallerです．
リンク：RubyInstaller
RubyInstallerのページに行ったら，Downloadボタンを押してダウンロードページへ飛びます．
ダウンロードページに行ったら，RubyInstallersのところの最新版をダウンロードします．
私の環境だとwindows10の64bit環境なのでRuby2.2.4(x64)を選択しました．
ダウンロードが完了したら，ダウンロードした場所へと移動し，ダウンロードしたファイルを実行します．
さくっと実行してみます．
次にインストールする言語を選びます．デフォルトで日本語になっていると思われますが，なっていない場合は各々変更してください．また，日本語が読めない方は自分の対応できる言語に変更お願いします．
OKボタンを押して，使用許諾契約書への同意が求められます．
内容を一通り読んで，許諾に同意できるのであれば，同意するにチェックを入れ次へ進みます．
また，許諾に同意できない場合は同意しないにチェックを入れて終了です．
そして，ここがちょっと重要なのでしっかりと目を開いて確認してください．
まず，インストールする場所ですが，基本的にはCドライブ直下にした方が無難です．(間違ってもProgram Files等に入れないでください)
私はDドライブ直下にしています．
そしてRubyの実行ファイルへ環境偏すPATHを設定するに必ずチェックを入れておいてください．
(これをやっておくと，OSを壊す環境変数を弄る必要がなくなるので，分からない人はこちらにチェックを入れておいてください．)
後，必要があれば，一番下の.rbと.rbwファイルをrubyに関連づけるにもチェックしておくと良いと思います．
ここにチェックを入れると，windowsでは識別されないRubyファイルが識別されるようになります．
ここまで来たらインストールボタンを押してインストールの開始です．
この画面になったらRubyのインストールは完了です．
Rubyの確認
Rubyのインストールは終わったので，ちょこっと確認しておきたいと思います．
ここからはWindows搭載のコマンドプロンプトを使っていくのでちょっと難易度が上がりますが，気にせず作業をしていきましょう．
Windowsのコマンドプロンプトを起動します．Windowsボタンを押してcmdと打ち込むとコマンドプロンプトが検索で出てくるので起動します．
そうすると，Linuxでよく見るターミナルの方なモノが出てくるので，ここで次のコマンドを打ち込みます．
ruby -v
このコマンドを入力してEnterを押すと，現在インストールされているRubyのバージョンが表示されるはずです．
Sassのインストール
Rubyのインストールが確認できたので，次に本命のSassをインストールしていきたいと思います．
Rubyに搭載されているGemsを使用してSassをインストールします．
その前に，ちょっと余談ですが，パッケージ管理システムについてお話したいと思います．
Windowsユーザは馴染が少ないパッケージ管理システムですが，LinuxやMacを使用しているユーザは意外と馴染があると思います．超簡単に言えば，iOSのAppStoreやAndroidのPlayストアなどが該当します．
Rubyにもこのパッケージ管理システムが搭載されており，比較的新しいRubyをインストールした場合は何も弄らずに使用することができます．
まず始めに，文字コードを変更します．
WindowsではデフォルトだとShift-JISの文字コードになっているので，これをUTF-8に変えてしまいましょう．
rubyのバージョンを確認したところの次のところからで構いません！次のコマンドを打って文字コードを変えましょう．
set LAND=ja_JP.UTF-8
ここで注意するべき点はja_JPとなっているところです．くれぐれもjp_JPなんてしないでくださいね．
入力が終わったらEnterを押して次のコマンドを入力していきます．
gem update --system
このコマンドでgem自体のアップデートをかけます．systemの前のハイフンは2つです．間違えではありません！
gemのアップデートが始まるとちょっとフリーズしている様な感じになりますが，動いています．
ちょっと時間が経つとログがバーっと流れるので，そのまま放置してください．
最後にRubyGems system software updatedと表示されたらアップデートが完了です．
そして今回の最後の行程である，sassのインストールを行いたいと思います．
コマンドは簡単，次のコマンドをコマンドプロンプトに入力するだけです．
gem install sass
このコマンドを入力してしばらく待ちます．
白丸で囲んだ様に，1 gem installedと表示が出れば完了です．
一応インストールができているか確認するために，バージョンのコマンドを叩いておきます．
コマンドプロンプトから，
sass -v
とコマンドを打って，sassのバージョンが出てくればインストールが完了です．
最後に
今回はsassのインストールをやりました．
このsassだけでは余り意味がないですが，今後Bootstrapのページを新しく作ってみようと思ったのでその前行程であるsassのインストールを行いました．まぁ，必要がない人には必要がないですよね．
sassのインストールと同時にrubyの環境も整ったのでrubyについても今後記事を書いても良いと思います！
それでは最後までお付き合いいただきありがとうございました．
0 件のコメント :
コメントを投稿