このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

新しくMacを購入した際の環境構築まとめ

mac

2015.09.23

この記事は最終更新日から1年以上が経過しています。

スクリーンショット 2015-09-23 2.13.40

最近、何かと公私ともどもMacの環境設定を行う機会が多い気がしましたので、ザッとではありますがまとめてみました。

新しくMacを購入の際などに参考になればと思います。

 

Xcode

スクリーンショット 2015-09-23 2.10.49

Xcode

まずは何より、Xcodeをインストール。

インストール後、Xcodeライセンスに同意していないと何かとコケますので以下のコマンドで同意

sudo xcodebuild -license

スクリーンショット 2015-09-12 2.13.19

このような感じで表示しますので、spaceキーでページ送りして確認し、 qキーでquitとなっております。

良いかなと思ったところで以下のコマンドで同意。

agree

 

Homebrew

スクリーンショット 2015-09-23 2.21.59

Homebrew

HomebrewはOS X用パッケージマネージャーとなっております。

何かと便利なので入れておきます。

Homebrewのインストールには、Command Line Tools for Xcodeが必要なので上記のXcodeのインストールを行っておきましょう。

 

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

 

インストールには少し時間が掛かります。

 

.bash_profile作成

.bash_profileファイルの作成を行いましょう。

.bash_profileファイルはターミナルの設定ファイルとなっております。

ターミナルを初期設定のまま立ち上げるとbashというシェルが動きます。

あなたのホームディレクトリに .bash_profileがあるか確認します。

ターミナルを立ち上げてホームディレクトリに移動。

cd ~

.bash_profileは先頭がピリオドの隠しファイルとなっておりますので、lsに-aのオプションを付けて表示しましょう。

ls -la
 存在しなければ新規で作成。
vim .bash_profile
エイリアスとして良く使うコマンドのショートカット等を記述していると良いでしょう。
# aliases
alias ll='ls -al'
alias l='ls -l'
alias ..='cd ..'
alias ...='cd ../..'
etc..

git configファイルの作成

git
Macではgitは通常インストールされているかと思いますので、gitの設定ファイルである、git configファイルを作成しておきます。
(存在しない場合はyumコマンド等でインストール)
yum -y install git
グローバルのgit configファイルの確認
グローバルのgit configファイルも.bash_profile同様ホーム直下に配置されており、先頭がピリオドの隠しファイルとなっております。
gitコマンドで確認
git config -l --global
catで確認
cat ~/.gitconfig
レポジトリ単位でも設定は可能で、レポジトリ単位のconfigファイルは.git内に配置されております。
cat .git/config
デフォルトのユーザ名、メールアドレスを設定

グローバルで利用するgitのメールアドレス、名前を登録しておきます。

git config --global user.email "Your email"
git config --global user.name "Your name"
グローバルの.gitignoreを設定
globalでgit で無視するファイルを指定します。
以下は、ホーム直下に.gitignoreファイルとして配置した例になります。
git config --global core.excludesfile ~/.gitignore
その他のドットファイル

その他のドットファイルは以下などを参考に作成すると良いかと思います。

dotfiles

SSHキー作成

SSH認証のための公開鍵と秘密鍵を生成する手順となります。

ユーザ名は「webcyou」としておきます。

ターミナルを起動、コマンドを実行
ssh-keygen
Enter file in which to save the key(/User/webcyou/.ssh/id_rsa):/User/webcyou/.ssh/id_rsa

表示された保存場所および名前「id_rsa」でよければそのままEnterを押下。

id_rsaがすでにある、あるいは、別の名前を使いたい場合は、「id_rsa」の部分を変更することができます。

「webcyou_rsa」という名前に変更した場合。

Enter file in which to save the key (/Users/webcyou/.ssh/id_rsa): /Users/webcyou/.ssh/webcyou_rsa
パスフレーズの設定

「PASSPHRASE」のところにパスフレーズを入力してください。

パスフレーズの入力を再び求められるので、同じパスフレーズを入力します。
この作成が終わるまでは忘れないようにしましょう。

Enter passphrase (empty for no passphrase): PASSPHRASE
Enter same passphrase again: もう一回入力
鍵の生成

ホーム直下に作成されたかと思いますので、ターミナルで以下のコマンドで鍵が作成されたか確認。

cd ~/.ssh
ls
id_rsa
id_rsa.pub
known_hosts
Githubなどのwebサービスやサーバーには、「.pub」の付いた公開鍵を渡すことになります。

秘密鍵を渡さないように注意。

vim id_rsa.pub

SSH認証でアクセスすると、初期時はパスフレーズの確認のダイアログが立ち上がりますので

鍵を生成する際に設定したパスフレーズを入力でログインは成功するかと思います。
sshコマンドの確認は以下で確認できます。

ssh -i ~/.ssh/id_rsa

NVM(Node Version Manager)を導入

nvmはその名の通り、バージョン違いのnode.jsを手軽に管理できるパッケージとなっております。

nvmをインストールしておくことで、バージョンの切り替えが凄く簡単に行えます。

これも入れておくと便利でしょう。

git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh

インストール完了したら動作確認

nvm help
Node Version Manager
Note: <version> refers to any version-like string nvm understands. This includes:
...

このような感じで表示すればインストール成功。

それでは、以下のコマンドでダウンロード可能なNode.jsのバージョンリストが確認できますので確認しましょう。

nvm ls-remote
v0.11.10
v0.11.11
v0.11.12
v0.11.13
v0.11.14
v0.11.15
v0.11.16
v0.12.0

ダーっと表示されますので、現在最新で安定版の0.12.7をインストールしてみます。

nvm install 0.12.7

インストール完了後、問題なければ以下のコマンドでバージョン確認することが可能です

node -v
v0.12.7

grunt インストール

c281040bc4f18d4101893ca97969c67e
言うまでもないかと思いますが、Gruntはフロントエンドのタスクランナーツールです。
こちらもインストール
インストール
npm install -g grunt-cli
詳しくはこちらを参考に

2014年 フロントエンドはGrunt.jsでサクっと自動化 まとめ

gulp インストール

gulp

Grunt同様、gulpもフロントエンドのタスクランナーツールです。

インストール

npm install -g gulp
詳しくはこちらを参考に

Grunt.jsからgulp.jsに移行したら捗った件。 gulp移行のまとめ

Bower インストール

スクリーンショット 2015-09-23 17.52.59

Bowerは、Twitter社が作ったフロントエンド用のパッケージマネージャとなります。

こちらもインストールしておくと良いでしょう。

npm install bower -g

インストール完了後、以下のコマンド入力。

bower -v

以下の様にバージョンが表示すれば、問題なくインストールされています。

1.5.2

 

rbenv を使ってrubyのバージョン管理

RubyもMac初期時にインストールされております。
Rubyのバージョンが合わない。といった時インストールしなおすのは非常に手間ですが、
rbenvを使うと、複数バージョンの Ruby を用意に切り替えることが出来便利です。

切り替えが必要そうであればインストールしておくと良いでしょう。

rbenv をインストール
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

PATH に追加

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

.bash_profile に追加

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

上記設定の再読み込み

exec $SHELL -l
ruby-buildインストール

rubyのインストールを簡単にしてくれます。

ruby-buildのソースをgithubよりcloneします。

git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
ruby の最新版を確認

install — list でインストール可能なバージョン一覧が出力されます

rbenv install --list
Available versions:
   :
   :
  2.0.0-p195
  2.0.0-p247
  2.0.0-p353         
  2.0.0-preview1
  :
ruby のインストール

install — list でリストアップし表示したバージョンを指定する

rbenv install -v 2.0.0-p353
環境確認

再読み込み

rbenv rehash

インストールされているruby一覧を確認

rbenv versions
* system (set by /home/webcyou/.rbenv/version)
  2.0.0-p353
先ほどインストールした最新版に設定
rbenv global 2.0.0-p353
確認
ruby -v
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-linux]

 

sass インストール

sass-lang

sudo gem install sass
バージョン指定
sudo gem install sass -v バージョン

compass インストール

compass1

gem update --system
gem install compass
バージョン指定
gem install compass --version '~> 0.12'

Java SE 6 ランタイム

Java-6-studio-error-message
intelijとかなどアプリで、古いバージョンのJava ランタイムが必要となってくる場合があります。
こちらもインストールしておくと良いでしょう。
ダウンロードは以下のリンクより。

スクリーンショット

 

デフォルトのスクリーンショットの 書き出し先は、デスクトップとなっております。
これでは、スクリーンショットを撮るたびにデスクトップにファイルが増えていき散乱しかねないので、ホーム直下の「ScreenShot」(新たにフォルダを作成)に格納します。
格納先変更
defaults write com.apple.screencapture location ~/ScreenShot/
反映
killall SystemUIServer
格納先変更
defaults delete com.apple.screencapture location
反映
killall SystemUIServer

最後に

といったところでしょうか。
とりあえず、このくらい入れておけば一通りフロントの作業も行えるかと思いますー。
あとは必要なAppをインストールしてください。
Appまで入れると莫大になりそうでしたので、今回は入れておりません。
ではではー!

スクリーンショット 2015-09-23 17.59.35

Comment

Related Article

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

2019.12.08

新しくMacを購入した際の環境構築まとめ

2015.09.23

MacBookPro 15インチRetinaディスプレイ(上位モデル)に変えました!

2015.09.20

【保存用】UNIXコマンド まとめ

2015.05.09

iPhotoライブラリ(写真バックアップ)を「box」と「flickr」で管理するようにした件。

2015.03.16

Mac OS X Yosemite 無料アップデートしました!そのまとめ。

2014.10.19

国民的RPGをPCで!ドラクエ風 8bitレトロRPGゲーム『シルアードクエスト』

2013.05.02

Macで動画のスクリーンキャプチャ作成

2013.01.14

AndroidアプリをMacやWindowsで動かす アプリ「BlueStacks」

2012.07.03

macでiPhoneのiMessageにメッセージ送信!試してみました。

2012.02.19

CATEGORY LIST

LATEST NEWS

Webassembly用いて、SDL 2.0をブラウザでレンダリング

C++

2020.08.10

macOS pyenv環境でtkinterが動かないので、再度インストール

Python

2020.08.09

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US