【Mac】node.js のバージョン管理

nodeのバージョン管理は、「n」 「nvm」 「ndenv」 「nodebrew」などいくつかあるようですが、今回は nodebrew で対応します。

nodebrew のインストール
GithubのREADME通りですが以下のように進めます。

nodebrewをインストールする

curl -L git.io/nodebrew | perl - setup```
1
2
3
4
5

パスを通す

```$ echo 'PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
$ source ~/.zshrc

パスが通っているか確認

nodebrew help```
1
2
3
4
5
6

完了していたら、次はnode.jsのインストールを進めます。

まずは、現在公開されているインストール可能な node.js のバージョンを下記で確認します。

```$ nodebrew ls-remote

そしてインストールですが、nodebrewでは「nodebrew install vX.X.X」と「nodebrew install-binary vX.X.X」の2種類の方法があります。
前者はソースをコンパイルしてインストールする方法で、後者はバイナリパッケージをダウンロードしてインストールします。
どちらでもお好みでいいかと思いますが、前者だと時間がかかるので、今回は後者にて進めます。

nodebrew install-binary v4.2.0
1
2
3
Fetching: https://nodejs.org/dist/v4.2.0/node-v4.2.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

インストールしたバージョン一覧は下記で確認できます。

ls
1
2
3
4
v0.10.36
v4.2.0

current: none

使用するバージョンの設定は下記でできます。

nodebrew use v4.2.0
1
use v4.2.0

バージョンを確認すると設定されているはずです。

node -v
1
v4.2.0

【Mac】rbenv で Ruby のバージョン管理

プロジェクトごとに異なるRubyバージョンの場合が多々あるので、rbenv でバージョンを切り替えられるようにします。

■Ruby のバージョン確認

ruby -v
1
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin15]

■rbenv のインストール
Homebrewにて導入します。

まずは、Homebrew のリポジトリを最新にします。

brew update```
1
2
3
4

その後、下記コマンドで rbenv をインストールします。

```$ brew install rbenv ruby-build
Installing dependencies for rbenv: autoconf, pkg-config, openssl, rub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
==> Installing rbenv dependency: autoconf
==> Downloading https://homebrew.bintray.com/bottles/autoconf-2.69.el_capitan.bo
######################################################################## 100.0%
==> Pouring autoconf-2.69.el_capitan.bottle.4.tar.gz
==> Caveats
Emacs Lisp files have been installed to:
/usr/local/share/emacs/site-lisp/autoconf
==> Summary
/usr/local/Cellar/autoconf/2.69: 70 files, 3.0M
==> Installing rbenv dependency: pkg-config
==> Downloading https://homebrew.bintray.com/bottles/pkg-config-0.29.1.el_capita
######################################################################## 100.0%
==> Pouring pkg-config-0.29.1.el_capitan.bottle.tar.gz
/usr/local/Cellar/pkg-config/0.29.1: 10 files, 627.2K
==> Installing rbenv dependency: openssl
==> Downloading https://homebrew.bintray.com/bottles/openssl-1.0.2g.el_capitan.b
######################################################################## 100.0%
==> Pouring openssl-1.0.2g.el_capitan.bottle.tar.gz
==> Caveats
A CA file has been bootstrapped using certificates from the system
keychain. To add additional certificates, place .pem files in
/usr/local/etc/openssl/certs

and run
/usr/local/opt/openssl/bin/c_rehash

This formula is keg-only, which means it was not symlinked into /usr/local.

Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries

Generally there are no consequences of this for you. If you build your
own software and it requires this formula, you'll need to add to your
build variables:

LDFLAGS: -L/usr/local/opt/openssl/lib
CPPFLAGS: -I/usr/local/opt/openssl/include

==> Summary
/usr/local/Cellar/openssl/1.0.2g: 1,678 files, 12.0M
==> Installing rbenv dependency: ruby-build
==> Downloading https://github.com/rbenv/ruby-build/archive/v20160330.tar.gz
==> Downloading from https://codeload.github.com/rbenv/ruby-build/tar.gz/v201603
######################################################################## 100.0%
==> ./install.sh
/usr/local/Cellar/ruby-build/20160330: 204 files, 120.3K, built in 7 seconds
==> Installing rbenv
==> Downloading https://homebrew.bintray.com/bottles/rbenv-1.0.0.el_capitan.bott
######################################################################## 100.0%
==> Pouring rbenv-1.0.0.el_capitan.bottle.tar.gz
==> Caveats
Rbenv stores data under ~/.rbenv by default. If you absolutely need to
store everything under Homebrew's prefix, include this in your profile:
export RBENV_ROOT=/usr/local/var/rbenv

To enable shims and autocompletion, run this and follow the instructions:
rbenv init
==> Summary
/usr/local/Cellar/rbenv/1.0.0: 36 files, 61.9K

完了したらパスを通します。

echo 'export RBENV_ROOT=$HOME/.rbenv' >> ~/.zshrc
1
2
$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.zshrc
$ source ~/.zshrc

■Ruby のインストール
まずはインストール可能なバージョンを確認します。

rbenv install -l
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
Available versions:
1.8.6-p383
1.8.6-p420
1.8.7-p249
1.8.7-p302
1.8.7-p334
1.8.7-p352
1.8.7-p357
1.8.7-p358
1.8.7-p370
1.8.7-p371
1.8.7-p374
1.8.7-p375
1.9.1-p378
1.9.1-p430
1.9.2-p0
1.9.2-p180
1.9.2-p290
1.9.2-p318
1.9.2-p320
1.9.2-p326
1.9.2-p330
1.9.3-dev
1.9.3-preview1
1.9.3-rc1
1.9.3-p0
1.9.3-p125
1.9.3-p194
1.9.3-p286
1.9.3-p327
1.9.3-p362
1.9.3-p374
1.9.3-p385
1.9.3-p392
1.9.3-p429
1.9.3-p448
1.9.3-p484
1.9.3-p545
1.9.3-p547
1.9.3-p550
1.9.3-p551
2.0.0-dev
2.0.0-preview1
2.0.0-preview2
2.0.0-rc1
2.0.0-rc2
2.0.0-p0
2.0.0-p195
2.0.0-p247
2.0.0-p353
2.0.0-p451
2.0.0-p481
2.0.0-p576
2.0.0-p594
2.0.0-p598
2.0.0-p643
2.0.0-p645
2.0.0-p647
2.0.0-p648
2.1.0-dev
2.1.0-preview1
2.1.0-preview2
2.1.0-rc1
2.1.0
2.1.1
2.1.2
2.1.3
2.1.4
2.1.5
2.1.6
2.1.7
2.1.8
2.1.9
2.2.0-dev
2.2.0-preview1
2.2.0-preview2
2.2.0-rc1
2.2.0
2.2.1
2.2.2
2.2.3
2.2.4
2.3.0-dev
2.3.0-preview1
2.3.0-preview2
2.3.0
2.4.0-dev
jruby-1.5.6
jruby-1.6.3
jruby-1.6.4
jruby-1.6.5
jruby-1.6.5.1
jruby-1.6.6
jruby-1.6.7
jruby-1.6.7.2
jruby-1.6.8
jruby-1.7.0-preview1
jruby-1.7.0-preview2
jruby-1.7.0-rc1
jruby-1.7.0-rc2
jruby-1.7.0
jruby-1.7.1
jruby-1.7.2
jruby-1.7.3
jruby-1.7.4
jruby-1.7.5
jruby-1.7.6
jruby-1.7.7
jruby-1.7.8
jruby-1.7.9
jruby-1.7.10
jruby-1.7.11
jruby-1.7.12
jruby-1.7.13
jruby-1.7.14
jruby-1.7.15
jruby-1.7.16
jruby-1.7.16.1
jruby-1.7.16.2
jruby-1.7.17
jruby-1.7.18
jruby-1.7.19
jruby-1.7.20
jruby-1.7.20.1
jruby-1.7.21
jruby-1.7.22
jruby-1.7.23
jruby-1.7.24
jruby-9.0.0.0.pre1
jruby-9.0.0.0.pre2
jruby-9.0.0.0.rc1
jruby-9.0.0.0.rc2
jruby-9.0.0.0
jruby-9.0.1.0
jruby-9.0.3.0
jruby-9.0.4.0
jruby-9.0.5.0
jruby-9.1.0.0-dev
maglev-1.0.0
maglev-1.1.0-dev
maglev-2.0.0-dev
mruby-dev
mruby-1.0.0
mruby-1.1.0
mruby-1.2.0
rbx-2.2.2
rbx-2.2.3
rbx-2.2.4
rbx-2.2.5
rbx-2.2.6
rbx-2.2.7
rbx-2.2.8
rbx-2.2.9
rbx-2.2.10
rbx-2.3.0
rbx-2.4.0
rbx-2.4.1
rbx-2.5.0
rbx-2.5.1
rbx-2.5.2
rbx-2.5.3
rbx-2.5.4
rbx-2.5.5
rbx-2.5.6
rbx-2.5.7
rbx-2.5.8
rbx-2.6
rbx-2.7
rbx-2.8
rbx-2.9
rbx-2.10
rbx-2.11
rbx-2.71828182
rbx-3.0
rbx-3.1
rbx-3.2
rbx-3.3
rbx-3.4
rbx-3.5
rbx-3.6
rbx-3.7
rbx-3.8
rbx-3.9
rbx-3.10
rbx-3.11
rbx-3.12
rbx-3.13
rbx-3.14
rbx-3.15
rbx-3.16
rbx-3.17
rbx-3.18
rbx-3.19
rbx-3.20
ree-1.8.7-2011.03
ree-1.8.7-2011.12
ree-1.8.7-2012.01
ree-1.8.7-2012.02
topaz-dev

その中から必要なバージョンをインストール。

$ rbenv install 2.2.0

rbenvでインストールした一覧は下記で確認できます。

rbenv versions
1
2
3
* system (set by /Users/lab3-34/.rbenv/version)
1.9.3-p551
2.2.0

切り替えは次のコマンドでできます。

$ rbenv global 2.2.0


【Mac】Java JDK を複数バージョンインストールして管理

ちょっと特殊かもしれないですが、複数のJava JDKのバージョンを使い分けたいことがあり、Homebrewにて管理できるようにした時のメモです。

1. Homebrewのインストール
こういうことをやろうとしている人は既にインストール済みの場合が多いかもしれないですが、まだの人は下記などを参考にインストールしてください。
Homebrewのインストール

2. brew-cask のインストール
brew-cask とは、アプリをインストールする際に使用するHomebrewの拡張機能の一つです。
公式サイトによると、Google Chromeなんかもインストールできるようですね。

今回はそれを使うので、下記コマンドにてインストールします。

brew tap caskroom/cask
1
$ brew install brew-cask
Installing brew-cask from caskroom/cask
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
==> Cloning https://github.com/caskroom/homebrew-cask.git
Cloning into '/Library/Caches/Homebrew/brew-cask--git'...
remote: Counting objects: 3408, done.
remote: Compressing objects: 100% (3368/3368), done.
remote: Total 3408 (delta 54), reused 523 (delta 19), pack-reused 0
Receiving objects: 100% (3408/3408), 5.88 MiB | 1.20 MiB/s, done.
Resolving deltas: 100% (54/54), done.
Checking connectivity... done.
Note: checking out 'b4c92f3658d47712aa6114fb29be50a763cf78ee'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

git checkout -b <new-branch-name>

==> Checking out tag v0.60.1
==> Caveats
You must uninstall this formula. It is no longer needed to stay up to date,
as Homebrew now takes care of that automatically.
==> Summary
/usr/local/Cellar/brew-cask/0.60.1: 4 files, 7.8K, built in 17 seconds

3. homebrew-cask-versions をインストール

tap caskroom/versions```
1
2
3
4
5
6
7
8
9
10

```==> Tapping caskroom/versions
Cloning into '/usr/local/Library/Taps/caskroom/homebrew-versions'...
remote: Counting objects: 277, done.
remote: Compressing objects: 100% (272/272), done.
remote: Total 277 (delta 65), reused 43 (delta 2), pack-reused 0
Receiving objects: 100% (277/277), 95.10 KiB | 0 bytes/s, done.
Resolving deltas: 100% (65/65), done.
Checking connectivity... done.
Tapped 0 formulae (292 files, 381.5K)

4. JDK をインストール
下記コマンドにてjavaのバージョンを検索すると、

cask search java```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

現時点で、次のような結果となっていました。

```==> Tapping caskroom/versions
Cloning into '/usr/local/Library/Taps/caskroom/homebrew-versions'...
remote: Counting objects: 277, done.
remote: Compressing objects: 100% (272/272), done.
remote: Total 277 (delta 65), reused 43 (delta 2), pack-reused 0
Receiving objects: 100% (277/277), 95.10 KiB | 0 bytes/s, done.
Resolving deltas: 100% (65/65), done.
Checking connectivity... done.
Tapped 0 formulae (292 files, 381.5K)
lab3-34% brew cask search java
==> Exact match
java
==> Partial matches
charles-applejava java-beta java9-beta
charles-beta-applejava java6 yourkit-java-profiler
eclipse-java java7

なので最新バージョンとjava7をインストールしておきました。

brew cask install java
1
2

$ brew cask install java7

5. jEnv のインストール
すでにパスを切り替えれば複数バージョン使い分けられるのですが、面倒なので jEnv にて切り替えられるようにします。

brew install jenv```
1
2
3
4
5
6

完了したらパスを通します。

```$ echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(jenv init -)"' >> ~/.zshrc
$ source ~/.zshrc

次に、jenvに各バージョンを登録します。

/usr/libexec/java_home -V
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Matching Java Virtual Machines (2):
1.8.0_77, x86_64: "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_77.jdk/Contents/Home
1.7.0_80, x86_64: "Java SE 7" /Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home

$ jenv add /Library/Java/JavaVirtualMachines/jdk1.8.0_77.jdk/Contents/Home
oracle64-1.8.0.77 added
1.8.0.77 added
1.8 added

$ jenv add /Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home
oracle64-1.7.0.80 added
1.7.0.80 added
1.7 added

$ jenv versions
* system (set by /Users/lab3-34/.jenv/version)
1.7
1.7.0.80
1.8
1.8.0.77
oracle64-1.7.0.80
oracle64-1.8.0.77

切り替えは次のように行います。

jenv global oracle64-1.7.0.80
1
2
3
4
5

$ java -version
java version "1.7.0_80"
Java(TM) SE Runtime Environment (build 1.7.0_80-b15)
Java HotSpot(TM) 64-Bit Server VM (build 24.80-b11, mixed mode)

参考
http://kendik.hatenablog.com/entry/2015/09/02/013207


Macのホスト名変更

ターミナルなどでMacのホスト名が表示されますが、初期設定が上手くいかなかった等で微妙な感じになってしまった場合の変更方法。

システム環境設定 > 共有 > 編集

で、変更することができます。
img-hostname

また、CUIからも変更できます。

まずは確認方法

scutil --get ComputerName
1
2
3
4
5
lab3-34
$ scutil --get LocalHostName
lab3-34
$ scutil --get HostName
HostName: not set

変更する場合は、

sudo scutil --set ComputerName lab3-34
1
$ sudo scutil --set LocalHostName lab3-34

Mac OS X El Capitanのライブ変換を無効にする方法

El Capitanから「ライブ変換」という新機能が追加されましたが、変換が遅延してタイピングにストレスをもたらすことがあるかと思います。
なので、その設定の切り方です。

メニューバー右上の入力ソースをクリックすると「ライブ変換」の項目があるのでチェックを外すか、
システム環境設定 > キーボード > 入力ソース に「ライブ変換」があるのでチェックを外す。

かんたんそれだけ。


Git first commit snippet

Gitプロジェクトの最初のコミット時に使う定型。

git init
1
2
3
4
5
6
7
8
$ touch .gitignore
$ vi .gitignore
$ git status
$ git add --all
$ git commit -m "first commit"
$ git remote add origin git@github.com:[repository path]
$ git pull origin master
$ git push origin master

【Mac】SSH認証用の公開鍵と秘密鍵の生成

次のコマンドで生成できます。

ssh-keygen```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

下記のように対話して生成するので、適宜設定してください。

```Generating public/private rsa key pair.
Enter file in which to save the key (/Users/USERNAME/.ssh/id_rsa): [ファイル名の指定がなければそのままEnter]
Created directory '/Users/USERNAME/.ssh'.
Enter passphrase (empty for no passphrase): [パスワードを設定しない場合はそのままEnter]
Enter same passphrase again: [パスワードを設定しない場合はそのままEnter]
Your identification has been saved in /Users/USERNAME/.ssh/id_rsa.
Your public key has been saved in /Users/USERNAME/.ssh/id_rsa.pub.
The key fingerprint is:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
The key's randomart image is:
+---[RSA 2048]----+
| .oo |
| o+. |
| . oo.o . . |
| . ooo+ + |
|.. . . .S+ o . |
|o.. o.ooo o o .|
|o. . . oB.o = + |
|. + . .*.+ X .|
| o.. E ..+ =.|
+----[SHA256]-----+

生成したSSH鍵の公開鍵は、次のコマンドを実行すると確認できます

$ cat ~/.ssh/id_rsa.pub

これで出力された内容を、GitHub等に設定してください。


Homebrewのインストール

インストールは公式サイトにあるコマンドを叩けばOK。

-e "$(curl -fsSLlink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

コマンドライン・デベロッパー・ツールをインストールしていない場合は、インストールが促されるのでOKを押す。
パスワードを求められるので入力すれば完了。


```$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/Library/...
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
==> The following directories will be made group writable:
/usr/local/.
==> The following directories will have their owner set to lab3-34:
/usr/local/.
==> The following directories will have their group set to admin:
/usr/local/.

Press RETURN to continue or any other key to abort
==> /usr/bin/sudo /bin/chmod g+rwx /usr/local/.

WARNING: Improper use of the sudo command could lead to data loss
or the deletion of important system files. Please double-check your
typing when using sudo. Type "man sudo" for more information.

To proceed, enter your password, or type Ctrl-C to abort.

Password:
==> /usr/bin/sudo /usr/sbin/chown lab3-34 /usr/local/.
==> /usr/bin/sudo /usr/bin/chgrp admin /usr/local/.
==> /usr/bin/sudo /bin/mkdir /Library/Caches/Homebrew
==> /usr/bin/sudo /bin/chmod g+rwx /Library/Caches/Homebrew
==> /usr/bin/sudo /usr/sbin/chown lab3-34 /Library/Caches/Homebrew
==> Downloading and installing Homebrew...
remote: Counting objects: 456, done.
remote: Compressing objects: 100% (413/413), done.
remote: Total 456 (delta 26), reused 312 (delta 17), pack-reused 0
Receiving objects: 100% (456/456), 694.24 KiB | 207.00 KiB/s, done.
Resolving deltas: 100% (26/26), done.
From https://github.com/Homebrew/brew
* [new branch] master -> origin/master
HEAD is now at d5085ed curl: fall back to /usr/bin/curl when HOMEBREW_CURL doesn't exist
==> Tapping homebrew/core
Cloning into '/usr/local/Library/Taps/homebrew/homebrew-core'...
remote: Counting objects: 3656, done.
remote: Compressing objects: 100% (3539/3539), done.
remote: Total 3656 (delta 14), reused 1566 (delta 5), pack-reused 0
Receiving objects: 100% (3656/3656), 2.70 MiB | 68.00 KiB/s, done.
Resolving deltas: 100% (14/14), done.
Checking connectivity... done.
Tapped 3531 formulae (3,682 files, 8.5M)
==> Installation successful!
==> Next steps
Run `brew help` to get started

こんな感じでインストール完了。
とりあえずセルフチェックしてみる。

brew doctor
1
Your system is ready to brew.

brewコマンドが叩けて、チェックも問題ないので完了。

もし、brewコマンドが使えなかったらパスが通ってないかもしれないので、次のようにしてみてください。

・環境変数の確認

echo $PATH```
1
2
3
4

・結果(例)

```/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

「/usr/local/bin」がなかったら次のコマンドを実行

echo export PATH='/usr/local/bin:$PATH' >> ~/.zshrc
1
source ~/.zshrc

※bash等の場合は適宜変更してください


phpインクルードでページ毎に別の内容を出力

phpインクルードに配列を持たせて出力させる方法。
ページ毎に違った内容を出せるので、パンくずなどに用いると便利です。
今回はパンくずに最適化させたソースの例です。

index.php(html)には、下記のように変数に配列をもたせた形にてインクルードファイルを読み込ませる。

1
2
3
$pankuzu = array('&lt;a href="/"&gt;トップ&lt;/a&gt;', '&lt;a href="/second/"&gt;第二階層&lt;/a&gt;', '第3階層');
require($_SERVER['DOCUMENT_ROOT'] . "/include_foldar/pankuzu.php");
?&gt;

次に、インクルード元のデータは下記のようにする。
パンくず数はページ毎に異なってくるかと思うので、今回は配列数分をfor分にてループさせるようにカスタマイズしています。

1
2
3
4
5
6
&lt;?php
for($i= 0; $i < count($pankuzu); $i++) {
echo "&lt;li&gt;$pankuzu[$i]&lt;/li&gt;";
}
?&gt;
&lt;/ol&gt;

見やすいように整形しているため実際とは違いますが、上記のファイルが展開されると下記のようになります。

1
2
3
4
  &lt;li&gt;&lt;a href="/">トップ&lt;/a>&lt;/li&gt;
&lt;li&gt;&lt;a href="/second/">第二階層&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;第3階層&lt;/li&gt;
&lt;/ol&gt;

これを元にカスタマイズすることで、
ページタイトル部分だけ異なるヘッダーのインクルードファイル、
css等の共通リソースの出し分け(あるページだけ出力しない)
等々、設計の幅を出すことができるかと思います。


Bootstrap3 LESSのカスタマイズ

はじめてBootstrap LESSをがっつりカスタマイズしたので、今回はその覚え書きです。
Bootstrap3 Lessを使用するにあたり、Gruntを導入したほうが俄然便利なため、今回はGruntの導入から説明いたします。

Botstrap LESSでカスタマイズする理由

前もって言ってしまうと、基本的なカスタマイズは公式サイトのカスタマイズページで十分すぎるくらい出来てしまいます(以前見た時よりも、ものすごく項目数が充実しているような気が…)。
そのため、わざわざLESSを使い、さらには環境を整えてやる必要があるかと言われれば、使用目的によっては不要かもしれないですね。
ただ、LESSでのカスタマイズだと公式サイト以上の編集が容易にスピーディーにでき、もしも途中で大幅な仕様変更があった場合でも柔軟に対応できます。
また、構造把握や管理がしっかりできるので、今後もBootstrapを使用していくつもりなら一度は経験したほうがいいかと思います。
大規模なフレームワークは構造把握が面倒なのですが、よくわからないまま使用してしまうと思わぬエラーにつながる恐れがありますし、作りがとてもよく出来ているのでとても勉強になりますよ。

コンパイル方法の変更

Bootstrap3になってからコンパイル方法がGruntになったので個人的には使いやすくなりました。
いままでは、makeコマンドを使用してコンパイルしていたようなのですが、今回からGruntになりました。
こういうのが苦手な方は、ちょっと「うっ」となってしまうかもしれないですが、Gruntfile.jsというタスクを実行するファイルが既に用意されているので、Gruntが入っている環境ならばコマンドを叩くだけで実行されます。
もちろんlessをコンパイルするだけならば、Koaraなどのコンパイラを使ってもいいとは思うのですが、コンパイル以外のタスクを実行できますので、これをきっかけに導入することをお勧めします。

Grunt.jsとは

Grunt.jsは、サーバーサイドのNode.jsというJavascriptを使用したビルドツールです。
コーディングの手助けをしてくれるタスクを自動で行ってくれます。
使用方法は、お馴染みの黒い画面になりますが、実行だけならば基本的にはscssとかと大差ないです。

では具体的にどんなことができるのかというと、一部ですが以下などです。

  • sass,lessなどのメタ言語のコンパイル
  • HTML,css,jsなどをminify化
  • CSS Spriteの自動生成
  • 画像を最適化
  • ファイルの結合
  • スタイルガイドの生成

フロント側コーディングの簡単な部分だけ抜粋しましたが、まだまだ多くのことができます。

Grunt.jsのインストール

Gruntを実行するためにNode.jsをインストールする必要があります。

Node.jsのインストール
下記からダウンロード・インストールしてください。
Node.js

Node.jsのインストールが完了しましたら、ターミナルやコマンドプロンプトにて、grunt-cli をインストールします。
コマンドを起動後、次のものを記述してください。

Mac

npm install -g grunt-cli```
1
2
3
4

**Windows**

```npm install -g grunt-cli

Macの場合、パスワード入力を求められる場合がありますが、実行するとインストールがどんどん進みます。

これで、Gruntを使用できるようになっているはずです。
Gruntの使い方を始めるととても長くなってしまうので、それはまた別の機会に…

Bootstrap LESSのダウンロード

下記のgithubからデータをまるっとダウンロードしてください。
bootstrap
解凍した、bootstrapフォルダは任意の場所に置きます。
データを見ると、ものすごく色々なファイルがあるかと思いますが、さわるところは大体決まっているので簡単な説明です。

・/Gruntfile.js
Gruntの実行タスクを記述するファイルです。
デフォルトで主要なタスクは記述されているので、無理に編集する必要はないです。

・/less/
各lessファイルが格納されています。
このファイルを編集してカスタマイズを進めます。

・/js/
bootstrapのjsプラグインが格納されています。
最終的にbootstrap.jsに結合されて出力されますので、いらないプラグインがある場合は、Gruntfile.jsを編集します。

・/dist/
Gruntfile.jsがデフォルトのままだと、このフォルダにcssとjsがコンパイルされます。

・/assets/
jquery.jsやrespond.min.jsなどのライブラリです。
個人でライブラリを持っていない場合は、必要なものを使ってください。

Gruntfile.jsについて

前述通り、Gruntfile.jsには初めから実行タスクが記述されていますので、大幅にいじる必要はないと思いますが、制作を進める上で便利な変更点をあげます。

コンパイル先を編集

デフォルトだと、dist以下に書き出されてしまうのですが、そのままだと使いにくいですね。
私が普段している構造を例にカスタマイズ方法を説明します。

1
2
3
4
5
6
7
8
└css
└js
└img
└bootstrap
└dist



このような構造にしているためcssとjsは、distではなく、/shared/cssなどに出力したいとします。
そこで、Gruntfile.jsを編集します。

ファイルを開いてみると、長々とコードが書かれているのですが、38行目辺りに次のように書かれている部分があります。

{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
  options: {
banner: '',
stripBanners: false
},
bootstrap: {
src: [
'js/transition.js',
'js/alert.js',
'js/button.js',
'js/carousel.js',
'js/collapse.js',
'js/dropdown.js',
'js/modal.js',
'js/tooltip.js',
'js/popover.js',
'js/scrollspy.js',
'js/tab.js',
'js/affix.js'
],
dest: 'dist/js/.js'
}
},

uglify: {
options: {
banner: ''
},
bootstrap: {
src: [''],
dest: 'dist/js/.min.js'
}
},

recess: {
options: {
compile: true
},
bootstrap: {
src: ['less/bootstrap.less'],
dest: 'dist/css/.css'
},
min: {
options: {
compress: true
},
src: ['less/bootstrap.less'],
dest: 'dist/css/.min.css'
},
theme: {
src: ['less/theme.less'],
dest: 'dist/css/-theme.css'
},
theme_min: {
options: {
compress: true
},
src: ['less/theme.less'],
dest: 'dist/css/-theme.min.css'
}
},

これを見れば、大体の人はわかるかと思うのですが、“dest: ‘dist/”とパスが書かれている辺りをどんどん変えていけばいいだけです。
そのため、先ほどの構造の場合ではcss(less)の部分を、次のように書きかえればOKです。

{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  options: {
compile: true
},
//bootstrap.lessをbootstrap.cssにコンパイルする
bootstrap: {
src: ['less/bootstrap.less'],
dest: '../css/.css'
},
//bootstrap.lessをminifyしてbootstrap.min.cssにコンパイルする
min: {
options: {
compress: true
},
src: ['less/bootstrap.less'],
dest: 'dist/css/.min.css'
},
//theme.lessをbootstrap-theme.cssにコンパイルする
theme: {
src: ['less/theme.less'],
dest: '../css/-theme.css'
},
//theme.lessをminifyしてbootstrap-theme.min.cssにコンパイルする
theme_min: {
options: {
compress: true
},
src: ['less/theme.less'],
dest: '../css/-theme.min.css'
}
},

※ついでに何をしてる部分かコメント書いています

jsも同様に編集すれば、コンパイル先を変更できます。

Grunt起動

1.ターミナルを開きbootstrapフォルダまで移動

まずは、ターミナルなりコマンドプロンプトを起動して、ダウンロード・解凍したbootstrapの置き場所まで移動してください。
以前、SassとCompassの導入方法(Windows、Mac)でもコマンドの簡単な使い方を説明しましたが、慣れていない人は、cd␣を入力した後に移動したいフォルダをコマンド画面にドラッグ&ドロップ&Enterで楽に移動できます。
※␣は半角スペースです

2.Grunt実行のコマンド入力

その後、

grunt watch

を入力するだけで、Gruntの監視がはじまります。

Waiting… となれば成功です。
編集ファイルを保存するたびに、compassのように自動でコンパイルしてくれますのでとても楽です。
また、cssなどの記述にエラーがあるとコンパイルされませんのでご注意ください。

終了時は、ctrl+c で終われます。

lessファイルの編集

bootstrapフォルダ内のLESSファイルに色々なLESSファイルが格納されています。
すべての説明はしきれないので、簡単に主要部分を説明していきます。
なお、機能については推測部分もありますのでご了承ください。

・variables.less

色々な変数の設定がまとめられているファイルです。
Bootstrapのカスタマイズ画面でできることは、このファイルの指定を編集でいけるはずです。
例えば、フォントがデフォルトの”Helvetica Neue”のままだとIE9,10で表示できないバグがありますので編集するには、以下のように書き換えます。

1
2
3
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;

@font-family-sans-serif: Arial, sans-serif;

このように、どんどん変えていってしまってください。
変数は400個以上ありますので、それぞれの役割を説明することはできませんが…大体変数名で推測できるかと思います。

・mixins.less

CSS3のベンダープリフィックスなどの設定がまとめられています。
mixinsとは何ぞやの人は、まず調べていただきたいのですが、簡単に言うと長ったらしい記述指定を短縮した記入ができるような設定をしています。
※もちろんそれ以外のものも書かれています

・bootstrap.less

いろいろなLESSファイルをすべて集約して、bootstrap.css として書きだすためのファイルです。
不要な機能があったら、コメントアウトすれば書きだされくなると思います

例えばモーダルウインドウを使わないときは、下記のようにしてください。

1
//@import "modals.less";

・theme.less

デフォルトでは、bootstrap-theme.css という独自テーマのスタイル設定ファイルとして書きだされるファイルです。
Bootstrapオリジナルスタイルの上書きや(個人的にあまりやりたくない…)、独自のスタイルなどを記述します。

以上で主要な部分は上記でカバーできているかと思います。
あとは個々で詳細な構造や、LESSの知識を深めるなどしてどんどんカスタマイズしていけば、今までよりも制作が楽になるかもしれないですね。
また、これをきっかけにGruntの使い方をもっと勉強していくのもいいかと思います。

さわりだけの表面的な説明になってしまいましたが、今回はこの辺で失礼いたします。