node-sassをつかってscssをcssにコンパイルする

自分の関わった過去のプロジェクトを見返すと、grantを使っていたり、gulpをつかっていたり、webpackを使っていたりして、ウェブフロントエンドの開発環境の移り変わりの早さを感じます。

正直最近は環境構築が面倒なので、JavaScriptもHTMLも生で書いてしまうことが多いのですが、唯一SCSSのみは使い続けてまして、そして最近、過去のプロジェクトを再編集しようと思ったところ、「そういえば新しいPCにSassを入れてなかったな」と気づきました。

kimizuka.hatenablog.com

昔（2014年）の僕は、gemでsassを導入していましたが、これから入れるのはものすごく今更感がありますし、プロジェクトを引き継ぐ時に後任にも「Rubyとsassを入れてから開発してね」と言っておかないといけなくなるので、node-sassを導入することにしました。package.jsonに記載しておけば引き継ぎも用意ですし。

kimizuka.hatenablog.com

導入方法

npm install node-sass --save-dev

watch方法

package.jsonと同じ階層に_scssフォルダとpublicフォルダを置き、index.cssをwatchで書き出したい場合は、

node-sass --include-path _scss _scss/index.scss public/css/index.css -w

こんな感じ、

更に圧縮までしたいなら、

node-sass --include-path _scss _scss/index.scss public/css/index.css -w --output-style compressed

これをpackage.jsonのscriptsに、

"scripts": {
    "start": "node-sass --include-path _scss _scss/index.scss public/data/css/index.css -w --output-style compressed"
  }

という感じで書いておけば、

npm start

でscssファイルを監視し、変更があった際にCSSファイルを書き出してくれます。

Macの開発環境を整える 2018 決定版

今年の3月に更新したばかりですが、開発環境に若干の変化があったためまとめ直します。
決定版と書いてありますが、あくまで自分用メモです。年に2回目なので昔のパワプロ的な命名にしてみました。

用途はフロントエンドの開発がメインで、NodeJS、Unity、iOSアプリ、Androidアプリの開発環境を整えています。
最近はAlexaスキルの開発も行なっているので、のちにAWS関連の設定を加筆するかもしれません。
前回からの決定的な違いは、Unity Hub、AndroidStudioの追加と、nodebrewからndenvへの乗り換えです。

kimizuka.hatenablog.com

変更した設定

キー入力周り

1. 入力ソースに日本語（ひらがな）を追加
2. ライブ変換をOFF
3. 推測候補表示をOFF
4. Shiftキーの動作を英字モードに変更
5. SpotlightのショートカットをOFF
6. 入力ソース切り替えを command + space に変更

Dock

1. Dockを自動的に隠すように設定

Finder

1. 新規Finderで開く場所をホームディレクトリに変更

トラックパッド

1. その他ジェスチャの「ページ間をスワイプ」を「3本指でスワイプ」に変更
2. その他ジェスチャの「フルスクリーンアプリケーション間をスワイプ」を「4本指でスワイプ」に変更

インストールしたアプリケーション

Google Chrome

www.google.co.jp
デフォルトブラウザに設定する。

Sublime Text3

www.sublimetext.com

{
    "margin": 2,
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "draw_white_space": "all"
}

タブとインデントを変更。

Dropbox

www.dropbox.com

Xcode

Xcode

• Apple
• 開発ツール
• 無料
• 

Arduino

www.arduino.cc

SourceTree

www.sourcetreeapp.com

Go2Shell

Go2Shell

• Alice Dev Team
• 開発ツール
• 無料
• 

Unity Hub

unity3d.com

Android Studio

developer.android.com

Up Studio

UP Studio

• Beijing Tiertime Technology Co., Ltd.
• ユーティリティ
• 無料
• 

ターミナルから導入したもの

gem （アップデート）

sudo gem update --system

Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ndenv

brew install ndenv

echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile

echo 'eval "$(ndenv init -)"' >> ~/.bash_profile

exec $SHELL -l

git clone https://github.com/riywo/node-build.git $(ndenv root)/plugins/node-build

node

ndenv install v11.1.0

ndenv rehash

ndenv global v11.1.0

npm（アップデート）

npm update -g

ffmpeg

brew install ffmpeg

MacBook Air (11-inch, Mid 2011)のバッテリーを交換する

www.apple.com

新型MacBook Airが発表された今日この頃、愛用しているMacBook Air (11-inch, Mid 2011)のバッテリーが全く充電できなくなってしまったので、修バッテリー交換をするためにAppleStoreに持ち込んだのですが、パーツの生産が終了しており交換が不可能と言われてしまいました。

しかたないので、Amazonでバッテリーを自分で購入し、交換してみたのですが、驚くほど簡単でした。
保証対象ではなくなりますが、そもそも公式のサポートも切れているということで、問題ないでしょう。

[asin:B01A6LAPAW:detail]

バッテリーを交換するために必要なドライバーも付属してますし、作業自体もとても簡単で、何も迷うことなくバッテリーを交換でき、快適なMacBookAirライフを取り戻しました。

MacBook Air (11-inch, Mid 2011)は残念ながら、OSをMojavaにアップデートすることはできませんが、まだしばらくは使いことができそうです。