• 参考：Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
• 参考：【gulp】初めてでもできるgulpの導入ととりあえず使ってみるまで

とりあえず必要な node.js 導入後、ターミナルにて

$ node -v

でバージョン確認できたら完了

gulpをグローバルインストール

node.jsがインストールされていたら npm コマンドが使えるので、
従来は下記のように入力しインストールするが若干変わったらしく・・・

$ npm install -g gulp

以下でインストールする。

$ npm install --global gulp-cli

※ちなみにgulp導入済みだった場合は、衝突を防ぐため下記を実行で一旦gulpを削除してからインストールをした方が良いようです

$ npm rm --global gulp

最後に下記コマンドでバージョンが表示されれば、各プロジェクトにgulpをインストールする準備完了

$ gulp -v

作業ディレクトリごとにgulpをローカルインストール

まず npm で cd コマンドを使い作業環境に移動するのですが、作業ディレクトリをターミナルアイコンにドラッグして起動すると移動済み状態で開始するというのを知ってからは後者の方法で進めています。

下記コマンドで npm セッティング。設定内容はとりあえず全部 Yes ということで -y をつけると自動で進むらしい。

$ npm init -y

package.json が作成されるので、ようやく gulp のローカルインストールへ。
下記コマンドで現在の作業ディレクトリに gulp 関係のファイルがインストールされます。

$ npm install gulp --save-dev

インストール後、gulpfile.js というのを作りいろいろ記述していくようなのですが、今回は既存環境の実行だったのですでに存在していました。

gulpを走らせる

既存の gulpfile.js ということで、下記コマンドを実行すれば良いはずだったんですが

$ gulp

すぐにプラグイン不足ということに気づき、gulpfile.js に記載されているプラグインをインストールしていきます。
プラグインのインストールコマンド

$ npm install プラグイン名 --save-dev

プラグインのアンインストールコマンド

$ npm uninstall プラグイン名 --save-dev

下記記述方法で一括インストール可能

$ npm install --save-dev プラグイン名 プラグイン名 ...

ただ、どうしても imagemin-pngquant というプラグインが下記エラーでインストールできず

npm ERR! pngquant-bin@3.1.0 postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the pngquant-bin@3.1.0 postinstall script.
npm ERR! This is most likely a problem with the pngquant-bin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node lib/install.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls pngquant-bin
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 15.4.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "imagemin-pngquant" "--save-dev"
npm ERR! cwd /Users/XXXX/XXXX/XXXX/XXXX
npm ERR! node -v v0.11.11
npm ERR! npm -v 1.3.25
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/XXXX/XXXX/XXXX/XXXX/npm-debug.log
npm ERR! not ok code 0

よくよく読んでいるとnodeとかnpmが古いんじゃないかと思い下記サイト様を参考にアップデートしました。

• 参考：Node.js と npm のアップデート

imagemin-pngquant のインストールが完了し、再び下記コマンドで無事にgulp環境が動いて終了です。

$ gulp

今回の教訓はエラーちゃんと読め！でした。

ただ、adobeのアカウント再認証や、使っていたSassやCompassが動かなくなりターミナルでのインストール先を変更する必要があるなどありましたが、問題はXcode経由でCompassを導入しようとした際、アップデートされたXcodeを起動してすぐライセンス・規約に同意するフェーズで[agree]ボタンが無反応だったところです。

• 参考：【Mac】OS X 10.11 El CapitanでSassなどが動かなくなった場合の対処方法

ターミナル側からの認証も試したのですが何の反応もなく、1日対処法を探しあきらめてクリーンインストールをした時のメモです。
（Fusion DriveのOS再インストールとしてこれが正しいかはわからないですが、今の所おかしい挙動もなく動いています。

ディスクユーティリティでSDD/HDDを消去する前に、認識されている論理ボリュームグループを消去する

先にこの工程を行っておかないと、HDDを初期化中にエラーが起きてディスクを認識されなくなりロックされたりすることがあるようです。

• 参考：El Capitanクリーンインストール中にまさかのトラブル発生-HDDが認識されない不具合の修正方法

iMacを終了後、[コマンド＋R]を押しながら起動し、OS Xユーティリティの画面まできたら画面上部メニューのユーティリティからターミナルを起動します。

下記を入力、Enterを押してMacにマウントされているディスク情報を確認します。

diskutil cs list

Logical Volume Group の右に表示されているのが論理ボリュームグループとして認識されているディスク固有の文字列だそうです。

次に下記を入力、Enterを押してディスクを消去します。
※XXXXの部分は前の工程で表示された文字列をコピぺ

diskutil cs delete XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

• 参考：Yosemiteのクリーンインストール時にディスクエラーになりインストール出来ない時の対処方法

ディスクユーティリティでSDD/HDDを初期化し
OSのインストールへ

ターミナルを終了しディスクユーティリティを開き、マウントされているSSD/HDDを各個消去します。

いざ、El Capitanをインストールしようとディスクユーティリティを閉じ「OS Xを再インストール」を開き進んでいくと
SSDとHDDのどっちにインストールする？にような状態になっていたので、これはFusion Driveなのかと不安になりました。

これでいいのかと思い調べると下記記事を発見。

• 参考：El Capitan、Fusion Driveは要注意

現バージョンでは不明ですが「El CapitanのDisk UtilityはFusion化をしてくれません」との記述あり。

Yosemiteインストデータをすぐに準備出来そうになかったので、
自分でFusion化できないかと調べると古めの記事ですが下記記事を発見しました。

• 参考：Mac で HDD+SSD で Fusion Drive を作って MacOS Xを再インストールするAdd

ターミナルを使いSDD/HDDをFusion Drive化

上記サイトを参考にまずOS Xインストールを中断し、ターミナルを開きます。

まず下記を入力、Enterを押してマウントされているdisk*のどちらがSSD/HHDなのかを調べます。

diskutil list

次に下記を入力、Enterを押してSSD/HDDを一つの論理ボリュームグループとしてまとめます。
参考サイトに、“ただし disk0 が SSD で、disk1 が HDD の場合。”とあるのでSSDであるdisk1を先に記述。
‘SKYLAB’の部分は論理ボリュームグルームの名前らしいので任意のもので。

diskutil cs create 'SKYLAB' disk1 disk0

CoreStrage operation が走り数十秒ほど待つと、
Discoverd new Logical Volume Group の右にディスク固有の文字列が設定されます。

上記文字列をコピーし下記を入力、Enterを押してFusion化へ。
ここでの’SKYLAB’の部分はHDDの名前になるので以降この名前で表示されます。
（↑基本では’Macintosh HD’と表示されているやつです

diskutil coreStorage createVolume XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX jhfs+ 'SKYLAB' 100%

これでFusion Drive化が終了し、ディスクユーティリティでも1つのドライブと認識されました。

OS Xを再インストール

OSのインストール先を選ぶ画面でも1つのドライブとして表示されました。

最後に、冒頭で起こっていたXcodeを起動後のライセンス・規約に同意するフェーズで[agree]ボタンが無反応！という現象について
El Capitanインストール後にすぐXcodeをインストールして起動してみたところ何事もなかったかのように[agree]ボタンは機能しました。

• Sublime Text 2 をインストールして初期設定
• Sublime Text 2 にPackageをインストール
• Sublime Text 2 の見た目を変える Theme と Color Scheme
• Sublime Text 2 を日本語化
• Sublime Text 2 で Haxe を使うまでの手順
• Windows で Sublime Text 2 を使った時のメモ

Sublime Text 2 をインストールして初期設定

【参考】Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ

【1】Sublime Text 2 を公式からダウンロードしてインストール
【2】ユーザ初期設定をする

【参考】Sublime Text 2 のDefault設定ファイルを眺める
Preference > Settings User を開くとPreferences.sublime_settings というタブが開くのでそこに変更箇所を “,” 区切りで記述していきます。以下は、とりあえず自分の設定です。

{
	"detect_indentation": false,
	"draw_white_space": "all",
	"highlight_line": true,
	"line_padding_top": 2,
	"soda_folder_icons": true,
	"tab_size": 4,
	"trim_trailing_white_space_on_save": true,
	"word_separators": "./\\()\"':,.;<>~!@#%^&*|+=[]{}`~?"
}

Sublime Text 2 にPackageをインストール

【参考】Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ
【1】Package Control をインストール
【2】command + Shift + p で Command Palette を開き、Package Control:install Package を選択。
一覧から必要なPackageをインストールしていきます。以下は、自分がインストしたもの。

HTML5
CSS Snippets
jQuery
jQuery Mobile Snippets
SublimeLinter
BracketHighlighter
SFTP

Sublime Text 2 の見た目を変える Theme と Color Scheme

いくつかデフォルトでテーマがインストールされていますが追加するときは、Package Control:install Package から Theme – XXXX を選択でインストできます。

Preferences.sublime_settings を開き、設定を追加します。(“,”の記述に注意)

{
	：
	"theme": "Soda Light.sublime-theme"
}

また、Color Scheme は TextMate というエディタのものを流用できるようなので下記からダウンロードしてきました。
→ TextMate Theme

解凍した中の拡張子が “.tmTheme” のファイルを下記フォルダにコピーします。

[Mac OS X 10.6]
ユーザー/ユーザ名/ライブラリ/Application Support/Sublime Text 2/Packages/Color Scheme – Default
[Windows 7]
C:/ユーザー/ユーザ名/AppData/Roaming/Sublime Text 2/Packages/Color Scheme – Default

Sublime Text 2 の Preferences > Color Scheme > さっきコピーしたスキーマファイルを選択して変更。

Sublime Text 2 を日本語化

【参考】Sublime Text 2 の日本語化ファイルを置く場所はここ Windows8

ダウンロードしてきた下記ファイルを、オリジナルをリネームした後にフォルダにコピー。
Main.sublime-menu
Context.sublime-menu

[Mac OS X 10.6]
ユーザー/ユーザ名/ライブラリ/Application Support/Sublime Text 2/Packages/Default
[Windows 7]
C:/ユーザー/ユーザ名/AppData/Roaming/Sublime Text 2/Packages/Default

Sublime Text 2 で Haxe を使うまでの手順

主に下記サイト様を参考に進めました、のでここではざっくりと。
【参考】Haxe + CreateJs を Sublime Text 2 で開発する準備をしてみたのでメモ

【1】Haxe を公式からダウンロードしてインストール
【2】Haxe のプラグインを複数、ターミナルからインストール
【3】Package Control:install Package から Haxe を選択してインストール

これでHaxeがはじめられます。

Windows で Sublime Text 2 を使った時のメモ

・Shift_JIS、EUC_JPに対応していないので日本語が文字化けしてました。
ConvertToUTF8 というプラグインをインストすると解決できます。
【参考】Sublime Text 2をShift_JISに対応させるプラグインがあると聞いて

・win版だと日本語がインラインで入力できなかったのですがコレもプラグインで解決。
Package Control:install Package から IME Surport を選択してインストール
【参考】Windows版「Sublime text 2」で日本語をインライン入力する方法

・【Error】 Fatal error: exception Failure(“File not found build.hxml”) と言われてビルドできず
下記を参考にsublime-projectファイルを設定するとbuild.hxmlを読み込むようになり、ctrl+Bでビルドできるようになりました。
【参考】Sublime Text 2 の Haxe 用プロジェクトファイルのテンプレ

下記サイト様を参考に簡単にインストールできました。
MacOSXローカル環境にWordPressをインストール ｜ 横浜のホームページ制作 スタジオFIXの社長ブログ

Mac環境にMAMPをインストール

下記MAMP公式サイトにアクセスし、Download nowをクリック。
→ MAMP: Mac, Apache, MySQL, PHP

DLしたファイルを開くとインストーラーが起動するので手順に従ってインストール。

アプリケーションからMAMPを起動するとブサウザが開いて”MAMPへようこそ!”ページ表示されば無事にインストール完了。

ようこそページからphpMyAdminにアクセスし、「MySQL localhost」項目でWordPress用にデータベースを作成。
ここで付けたデータベース名はWordPressインストール時に使用します。

ローカル環境にWordPressをインストール

下記WordPressのサイトににアクセスし、右側の『WordPress ○○（バージョン）をダウンロード』をクリックしてDLする。
→ WordPress

DLして解凍した「wordpress」フォルダを アプリケーション > MAMP > htdocs に移動。

「wordpress」内の「wp-config-sample.php」を「wp-config」にリネームし、下記３カ所を変更。

/** WordPress のためのデータベース名 */
define('DB_NAME', 'wp01');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'root');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'root');

MAMPを起動し、ブラウザで下記アドレスにアクセスします。
http://localhost:8888/wordpress/wp-admin/install.php

ブログタイトルとメールアドレスを入力し、「WordPressをインストール」をクリックするとインストールを開始。

「成功しました！」ページが表示されたら完了です。

インストーラーを起動して手順通りに進めていくと、終盤の「パッケージスクリプトを実行中」にインストーラーエラーが出た。

In order to continue installation,please close the following application:

起動中のアプリを閉じろということで一覧に表示されていたのは「iTunes」でしたが起動はしてない状態です。
調べてみると下記サイト様に対処方法が載ってました。

Cerisier : » Lionで、MacAppStoreからのXcodeインストールに警告がでる

対処法：ユーティリティ > アクティビティモニタ > iTunesHelper の終了。

インストーラーが終了してくれないので、強制終了後に再起動して上記を実行してからxcodeのインストール完了しました。
ありがたや。