概要
新しいマック(Mac)に開発環境を最初から構築した内容を纏めてみようかと思います。このブログはシリーズです。開発環境の別の部分が木になる方は下記の内容を確認してください。
- マック(Mac)の開発環境の構築(1) - iTermとzsh
- マック(Mac)の開発環境の構築(2) - tools
- マック(Mac)の開発環境の構築(3) - 開発環境
- HomebrewとShell Scriptを使ってマック(Mac)の開発環境構築を自動化する
このブログでは新しいマック(Mac)にiTermとzshを設定する方法について説明します。
iTermインストール
下記のリンクを押してiTerm
ダウンロードページに移動します。
- iTermダウンロード: ダウンロードページ
下記の画面が見えたら、Stable Releases
を押してダウンロードします。
![マック(mac)の開発環境の設定 - iTermダウンロード](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-download.jpg)
ダウンロードしたzip
ファイルを圧縮解除してインストールします。
![マック(mac)の開発環境の設定 - iTerm full disk access権限](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-full-disk-access.jpg)
上のようにiTermでFull Disk Access
の権限を要請する時、右下のOpen System Preferences
を洗濯します。
![マック(mac)の開発環境の設定 - iTerm full disk access権限設定](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-full-disk-access-grant.jpg)
上のように親切な説明とSecurity & Privacy
が実行されます。左下の錠前形を押して暗号を入力して修正できるようにします。
![マック(mac)の開発環境の設定 - iTerm full disk access権限設定画面](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-full-disk-access-grant-setting.jpg)
上部のタプでPrivacy
を洗濯して、左リストにあるFull Disk Access
を選択します。
![マック(mac)の開発環境の設定 - iTerm full disk access権限設定iTerm選択](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-full-disk-access-grant-setting-select-iterm.jpg)
右の+
ボタンを押します。Applications
を移動して、iTerm
を選択してOpen
を押します。
![マック(mac)の開発環境の設定 - iTerm終了](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-full-disk-access-grant-setting-quit.jpg)
上のようにiTerm
を終了するかを聞かれる画面が見えたらQuit Now
を押してiTerm
を終了させます。
iTermを実行して問題なく実行されるか確認します。
zsh
zshはターミナルをもっと使いやすくしてくれます。下記のリンクを押したら詳しく内容を確認することができます。
- zsh公式サイト: zsh
zshの公式サイトを見たらインストール方法が下記のように表示しております。
![マック(mac)の開発環境の設定 - zshインストール](/assets/images/category/environment/2019/mac-iterm-zsh/zsh-installation.jpg)
インストールしたiTermやターミナルを開いて下記のコマンドを実行します。
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
インストールが完了したら会のような画面が見えます。
![マック(mac)の開発環境の設定 - zshインストール完了](/assets/images/category/environment/2019/mac-iterm-zsh/zsh-install-completed.jpg)
iTermでzshをデフォルトで設定
iTermの基本的shellを使うようになっております。iTermが基本的zshを使うように設定します。
![マック(mac)の開発環境の設定 - iTerm zsh設定](/assets/images/category/environment/2019/mac-iterm-zsh/zsh-install-completed.jpg)
iTermを実行して左上にあるiTerms2
> Preferences...
を選択します。
![マック(mac)の開発環境の設定 - iTerm zshデフォルト設定](/assets/images/category/environment/2019/mac-iterm-zsh/iterm-zsh-default-setting-path.jpg)
上のように設定画面が表示されたら、上部にあるProfiles
のタプを選択します。右にあるCommand
設定でCommand
を選択して/biz/zsh
を入力して終了します。
また、iTermを実行したらzsh
が基本的実行されることを確認することができます。
iTermテーマ設定
iTermはたくさんのテーマ(Theme)があります。皆さんが好きなテーマを設定して使ったらいいと思います。ここにはiterm2-solarized
のテーマを設定する方法について説明します。
下記のリンクを押してテーマをダウンロードします。
上のリンクを選択したらテーマファイルの内容が見えます。command + s
を押してダウンロードします。
![マック(mac)の開発環境の設定 - zshテーマ設定](/assets/images/category/environment/2019/mac-iterm-zsh/zsh-theme-setting.jpg)
ダウンロード時下にあるFormat
をAll Files
で設定します。ファイルの後ろが.itermcolors
であるか確認します。
また、iTermのPreferencesを開きます。
![マック(mac)の開発環境の設定 - iTermでzshテーマ設定](/assets/images/category/environment/2019/mac-iterm-zsh/zsh-theme-import.jpg)
上のようにProfiles
> Colors
を選択して右下にあるColor Preset...
> import...
を選択します。
上部でダウンロードしたSolarized Dark - Patched.itermcolors
ファイルを選択します。
![マック(mac)の開発環境の設定 - iTermでzshテーマSolarized Dark設定](/assets/images/category/environment/2019/mac-iterm-zsh/zsh-theme-solarized-dark.jpg)
また、Color Preset...
を選択したら以前と違ってSolarized Dark
が追加されたことが確認できます。Solarized Dark
を選択してテーマを設定します。
Powerlevel9k設定
ターミナルでもっt詳しい情報を見るためPowerlevel9k
を設定します。iTermを実行したら今は下記のように見ます。
![マック(mac)の開発環境の設定 - iTerm](/assets/images/category/environment/2019/mac-iterm-zsh/normal_iterm.jpg)
下記のコマンドでPowerlevel9k
をダウンロードします。
git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
zshの設定ファイルは~/.zshrc
です。このファイルを開いてPowerlevel9kを設定します。
vi ~/.zshrc
設定ファイルにテーマ設定部分を探します。
# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
ZSH_THEME="robbyrussell"
テーマをZSH_THEME="robbyrussell"
からZSH_THEME="powerlevel9k/powerlevel9k"
に変更します。
iTermを再起動したら下記のような画面が見えます。
![マック(mac)の開発環境の設定 - iTerm powerlevel9k](/assets/images/category/environment/2019/mac-iterm-zsh/powerlevel9k.jpg)
上のようにユーザ情報と?
が見えます。?はフォントが設定されてないからです。下記のリンクを押してフォントダウンロードサイトに移動します。
上のリンクを押したら下記のように見えます。View Raw
を押してフォントをダウンロードします。
![マック(mac)の開発環境の設定 - iTermダウンロードフォント](/assets/images/category/environment/2019/mac-iterm-zsh/download-font.jpg)
ダウンロードが完了したらダウンロードしたフォントファイルを選択して実行します。
![マック(mac)の開発環境の設定 - iTermフォントインストール](/assets/images/category/environment/2019/mac-iterm-zsh/install-font.jpg)
右下のInstall Font
を押してフォントをインストールします。インストールが終わったら、またiTermのPreferenceを開いてProfiles
> Text
> Change Font
を選択します。
![マック(mac)の開発環境の設定 - iTermフォントインストール](/assets/images/category/environment/2019/mac-iterm-zsh/set-font.jpg)
上部でダウンロードしたMeslo LG M Regular for Powerline
を選択します。
![マック(mac)の開発環境の設定 - iTermフォントインストール確認](/assets/images/category/environment/2019/mac-iterm-zsh/check-font.jpg)
iTermを確認すると上のような画面が見えます。
私はここでユーザ名がな長いからユーザ名を非表示するように設定しました。下記のコマンドを実行します。
vi ~/.zshrc
下記の内容を一番下へ追加します。
prompt_context() {}
または下記のように自分が好きな内容で修正することが出来ます。
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir_writable dir vcs)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(status time battery)
公式サイトにオップションについて詳しく説明があります。
また、iTermを実行したらユーザ名が非表示されたことが確認できます。
![マック(mac)の開発環境の設定 - iTermユーザ名非表示](/assets/images/category/environment/2019/mac-iterm-zsh/no-user-name.jpg)
vscodeとの連動
zshでvscodeのcode
のコマンドを使えるように設定してvscodeには基本ターミナルをzshで設定する方法について説明します。
zshでvscodeのコマンド設定
下記のコマンドでzsh設定を
vi ~/.zshrc
一番下に下記の内容を追加します。
export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
iTermを再起動して下記のコマンドでvscodeが実行されるか確認します。
code .
vscodeにzshを設定
vscodeを実行して右上のCode
> Preferences
> Settings
を選択します。
![マック(mac)の開発環境の設定 - vscode zsh設定](/assets/images/category/environment/2019/mac-iterm-zsh/vscode-setting.jpg)
検索バーへshell
を検索してTerminal > Integrated > Shell: Osx
の部分を/bin/bash
から/bin/zsh
に変更します。
![マック(mac)の開発環境の設定 - vscode zsh shell設定](/assets/images/category/environment/2019/mac-iterm-zsh/vscode-shell-setting.jpg)
上のような画面が出なくてEdit in settings.json
ボタンが表示される場合、そのボタンを押して下記の内容を追加します。
{
"terminal.integrated.shell.osx": "/bin/zsh",
...
}
また、fontfamilyを検索してMeslo LG M for Powerline
を設定します。
![マック(mac)の開発環境の設定 - vscode zsh font設定](/assets/images/category/environment/2019/mac-iterm-zsh/vscode-zsh-font-setting.jpg)
vscodeのターミナルを実行したら、zshが実行されることが確認できます。
![マック(mac)の開発環境の設定 - vscode zsh設定完了](/assets/images/category/environment/2019/mac-iterm-zsh/vscode-zsh-font.jpg)
私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!
アプリ広報
Deku
が開発したアプリを使ってみてください。Deku
が開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。