eureka

わたしのMacセットアップ

0

現場が変わると毎回Macを新しく支給されるので、いつもの環境に素早くセットアップして爆速で業務に移れるように自分のためにまとめておくことにしたよ〜。

おとぼけた顔してやるのう。

Macの本体設定

キーボード入力をWindows風にする

元Windowsユーザだと、入力時に勝手に変換されてしまう『ライブ変換』、とEnterを2回押さないと確定されない仕様が憎いので、最初に設定を変更してストレス軽減。

システム環境設定 > キーボード > 入力ソース

  • 『ライブ変換』のチェックを外す
  • 『Windows風のキー操作』にチェックを入れる

指紋認証登録

ロックがかかっても開けるように先に登録しておく。
指紋認証に頼りすぎるとパスワードを忘れたときに困るので注意。

システム環境設定 > Touch ID

Finderのフルパス表示

MacのFinderは初期状態だと上部にはフォルダ名しか表示されておらず、どこの階層にいるかがわからない。フルパスで表示させちゃう。

作業はターミナルで。

$ defaults write com.apple.finder _FXShowPosixPathInTitle -boolean true
$ killall Finder

隠しファイル表示

.sshや.gitなどのドットから始まるファイルはコアファイルなことが多く、間違って編集されないように隠しファイルとして通常見えなくなっている。
表示の設定をするとグレーの文字で可視化される。

ターミナルで設定する場合は下記。

$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

ショートカットでやるなら下記.

command + shift + .(ドット)

デスクトップアプリのインストール

普段使用しているアプリのインストール。

  • Slack:コミュニケーションツール
  • FinderPath:Finderにアドレスバー追加
  • Spectacle:ウィンドウリサイズをショートカット化
  • VScode:エディタ
  • BoostNote:ノート
  • FireFox:ブラウザ
  • SorceTree:GUI Git管理ツール
  • Figma:UX/UIデザインツール
  • Gyazo:画像スクリーンショット
  • Clipy:クリップボード拡張、詳細設定は後述
  • Xcode:iOS開発ツール

システムインストール

ターミナルによる操作で各種システムのインストールを行う。

  • homebrew
  • MySQL
  • nodenv
  • Docker

homebrew

Macのパッケージをインストールしたりアンインストールしたりできるパッケージ管理システム。

インストール時はコマンドが変わっているかもしれないので、必ず公式サイトのコマンドをコピーしてインストールする。
公式サイト

インストール中に途中で止まるのでXcode Command Line Toolsのインストールを許可する。Xcodeを先にインストールしていると止まらないかも。

バージョン確認のコマンドを叩いてcommand not foundにならなければOK。

$ brew -v

MySQL

Homebrewを使用してインストールする。
Homebrew以外でもインストール可能だが、できるだけシステムインストールでパッケージマネージャーを統一しておくと、問題が起こったときに原因を特定しやすくなる。

下記の手順で進める。

  1. MySQLをインストール
  2. パスを通す
  3. ファイルの実行
  4. MySQLの起動
  5. MySQLに接続

1. インストール(最新バージョン)

$ brew install mysql

1. インストール(バージョン指定あり)

$ brew install mysql@5.6

@5.6がバージョンになるため、必要に応じて指定を変える。

2. パスを通す

うまくインストールができるとターミナルに下記のようなメッセージが出るのでそれに従ってパスを通す作業を行う。
(以下mysql@5.6のインストール時のため、コマンド入力時は自分がインストールしたバージョンに合わせて適時変更する。)

mysql@5.6 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have mysql@5.6 first in your PATH run:
  echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile

パスを通す。

$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile

catコマンドで出力された行の中に直前にechoした一行が入っていればOK。

$ cat ~/.bash_profile
export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"

3. ファイルの実行

.bash_profileはmacOSにログインしたときに実行されるファイルで、今のままだと設定に反映されていない状態なので、設定を反映させる。

Macの再起動でも可能だが、手動でやるなら下記のコマンドで。

$ source ~/.bash_profile

これでmysqlのコマンドが使用できるようになっているはずなので確認する。
出力メッセージがCommand not foundになっていないことを確認。

$ mysql --version
mysql  Ver 14.14 Distrib 5.6.47, for osx10.15 (x86_64) using  EditLine wrapper

4. mysqlの起動

インストール時の下記メッセージを確認。

To have launchd start mysql@5.6 now and restart at login:
  brew services start mysql@5.6
Or, if you don’t want/need a background service you can just run:
  /usr/local/opt/mysql@5.6/bin/mysql.server start

常に起動させておきたいときは下記。

$ brew services start mysql@5.6

一時的に起動したいときは下記。(シャットダウンと同時に落としたいとき。)

$ /usr/local/opt/mysql@5.6/bin/mysql.server start

5. mysqlに接続

mysqlにrootとしてログインし、接続状態を確認する。
なお、4のステップで立ち上がっている状態でないとログインできないので注意。

$ mysql -uroot

プロンプトのマークが『$』から『mysql>』に変わっていればOK。ログアウトして終了。

mysql> exit

Nodenv

node.jsのバージョン管理システムのひとつ。node.jsのバージョンをプロジェクトごとに変更することができる。

下記の手順で進める。

  1. nodenvをインストール
  2. nodenvにパスを通す
  3. node-build をインストール
  4. Node.jsのインストール
  5. 使用するNode.jsの指定
  6. 不要なNode.jsのアンインストール

1. nodenvをインストール

nodenv をホームディレクトリの .nodenv にクローン。

$ git clone git://github.com/nodenv/nodenv.git ~/.nodenv

2. nodenvにパスを通す

bashに追記する。

$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile

catコマンドで下記の2行が表示されていればOK。

$ cat ~/.bash_profile
export PATH="$HOME/.nodenv/bin:$PATH"
eval "$(nodenv init -)"

ファイルを実行する。

$ source ~/.bash_profile

nodenvのコマンドが使用できるか確認。

$ nodenv -v
nodenv 1.3.1

3. node-buildをインストール

nodenvのプラグイン。インストールするとnodenv installnodenv uninstall のコマンドが使用できる。

$ git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
$ nodenv init

4. Node.jsのインストール

いよいよ。Node.jsをインストールしていく。まずはインストールできるNode.jsのバージョンを確認して、開発環境に応じたNode.jsをインストールする。

まずはインストール可能なバージョンを表示。

$ nodenv install -l

たくさん表示されているバージョンの中から、インストールしたいものを指定してインストールする。
インストールしたらリハッシュもしておく。

$ nodenv install 12.6.0
$ nodenv rehash

5. 使用するNode.jsの指定

インストールされているNode.jsのバージョンの中で使用するものを指定できる。
グローバル(PC全体)とローカル(作業ディレクトリ内のみ)の2パターンで指定可能。

グローバルで使用したいとき。

$ nodenv global 12.6.0

ローカルで使用したいとき。
コマンドを実行するとカレントディレクトリに 指定したバージョンが記載されている.node-version というファイルが作成される。

$ nodenv local 12.6.0

インストールされているバージョンの確認をしたいとき。

$ nodenv versions

Docker

DockerもHomebrew経由でインストールする。なお、Homebrew Caskが使用できる前提でのインストールとする。

下記の手順で進める。

  1. Dockerのインストール
  2. GUIアプリのインストール
  3. Dockerの起動

Dockerのインストール

Docker本体とアプリのインストール。
バージョンが表示されればOK。

$ brew install docker
$ docker --version
Docker version 19.03.4, build 9013bf5

2. GUIアプリのインストール

GUIのアプリをコマンドラインでインストールする。

$ brew cask install docker

アプリケーションフォルダにDocker.appが爆誕する。

Dockerの起動

Dockerのコマンドを使用できる状態にするため、アプリを起動する。
アプリケーションフォルダからクリックしても良いが、せっかくなのでコマンドラインから。

$ open /Applications/Docker.app

サインインorサインアップして、MacのメニューバーにDockerのアイコンが表示されたらOK。

Google Chrome拡張機能追加

フォント

VScodeやターミナルはこのフォントじゃないとイヤよ〜イヤイヤ。

源ノ角ゴシック Code(Source Han Code JP)

https://github.com/adobe-fonts/source-han-code-jp/releases

VScode 拡張機能

VScode設定

{
  "html.suggest.html5": false,
  "html.mirrorCursorOnMatchingTag": false,
  "html.autoClosingTags": false,
  "editor.parameterHints": false,
  "editor.wrappingColumn": 0,
  "editor.renderIndentGuides": true,
  "editor.wordWrap": "on",
  "editor.hover.enabled": false,
  "editor.renderWhitespace": "all",
  "editor.suggestSelection": "first",
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "editor.fontFamily": "'SourceHanCodeJP-Medium', 'Source Han Code JP',  Consolas, 'Courier New', monospace",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.tabSize": 2,
  "editor.renderLineHighlight": "all",
  "editor.renderControlCharacters": true,
  "editor.cursorBlinking": "smooth",
  "editor.smoothScrolling": true,
  "editor.minimap.showSlider": "always",
  "files.autoSave": "onWindowChange",
  "files.trimTrailingWhitespace": true,
  "window.zoomLevel": 0,
  "window.openFoldersInNewWindow": "on",
  "window.title": "${activeEditorMedium}${separator}${rootName}",
  "workbench.editor.labelFormat": "short",
  "workbench.editor.tabSizing": "shrink",
  "workbench.colorTheme": "Golden Dracula",
  "workbench.iconTheme": "eq-material-theme-icons-light",
  "workbench.startupEditor": "newUntitledFile",
  "breadcrumbs.enabled": true,
  "extensions.autoUpdate": true,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.variables": {
    "lang": "ja"
  },
}

その他こだわり

ターミナルの表示設定

ターミナル > 環境設定 > プロファイル

フォント源ノ角ゴシック Code JP
文字サイズ14px
行間隔1
背景色適当な黒
文字色適当な白

Clipy詳細設定

登録したテキストテンプレートをショートカットで呼び出すことができる。主にGitのコミットメッセージで使用している。

  1. ここからzipファイルをダウンロードして解凍する。
  2. Clipy.appを起動して上部のツールバーのインポートから解凍したsnippets.xmlを選択してインポートする。

参考文献

0