HIR0

<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
先日、MacbookPro M3Proモデルを購入したので新しく開発環境のセットアップを行いたいと思う。 
自分自身への備忘録代わりに本記事を作成する。

<h2 id="homebrew">
<a class="header-anchor-link" href="#homebrew" aria-hidden="true"></a> Homebrew</h2>
Macで広く利用されるパッケージマネージャー
<a href="https://brew.sh/" target="_blank" rel="nofollow noopener noreferrer">公式サイト</a>に記載されているコマンドを実行すればインストールできる。
AppleSiliconチップの場合は自分自身でパスを追加してあげる必要があるのでこちらも追加で実行しておく。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># パス追加
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' &gt;&gt; /Users/&lt;ユーザー名&gt;/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"

＃ 念のためインストール確認
$ brew -v
</code></pre></div><details><summary>基本コマンド</summary><div class="details-content"><div class="code-block-container"><pre class="language-shell"><code class="language-shell"># homebrewのチェック
$ brew doctor
Your system is ready to brew.

# homebrewでインストールしたパッケージの確認
$ brew list

# インストール可能なパッケージの検索
$ brew search &lt;パッケージ名&gt;

# インストール済みパッケージのアップデート
$ brew upgrade

# パッケージのインストール
$ brew install &lt;パッケージ名&gt;

</code></pre></div></div></details>

<h2 id="git%26github">
<a class="header-anchor-link" href="#git%26github" aria-hidden="true"></a> Git&amp;GitHub</h2>
開発環境にGitは必須。Macには通常AppleSilicon版のGitがインストールされているが、 
ここではhomebrewでインストールしたものを利用したい。
<h3 id="git%E3%81%AE%E5%86%8D%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#git%E3%81%AE%E5%86%8D%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Gitの再インストール</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># インストール済みのGitを確認
$ git -v
git version 2.39.3 (Apple Git-145)

# homebrewでgitをインストール
$ brew install git
</code></pre></div><h3 id="%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8Bgit%E3%82%92homebrew%E7%B5%8C%E7%94%B1%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8Bgit%E3%82%92homebrew%E7%B5%8C%E7%94%B1%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> 起動するGitをhomebrew経由でインストールしたものに変更する</h3>
<div class="code-block-container"><pre><code>$ vi ~/.zshrc
# 以下内容を入力する

# &gt;&gt; git &gt;&gt;
export PATH=/usr/local/bin/git:$PATH
# &lt;&lt; git &lt;&lt;

# wq:

$ source ~/.zshrc
$ git -v
git version 2.43.0
</code></pre></div><h3 id="github%E3%81%A8%E7%B4%90%E3%81%A5%E3%81%91">
<a class="header-anchor-link" href="#github%E3%81%A8%E7%B4%90%E3%81%A5%E3%81%91" aria-hidden="true"></a> GitHubと紐づけ</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># 設定を行う
$ git config --global user.name &lt;"アカウント名"&gt;
$ git config --global user.email &lt;メールアドレス&gt;
$ git config --global init.defaultBranch main
$ git config --global core.editor "code --wait"
$ git config --global fetch.prune true
$ git config --global core.autocrlf input
$ git config --global core.quotepath false

# SSHのキー作成
$ ssh-keygen -t ed25519 -C "メールアドレス" -f ~/.ssh/sshkey_github
$ pbcopy &lt; ~/.ssh/sshkey_github.pub

# GitHubの画面でコピーした公開鍵データを登録する

# configファイルを作っておく
$ vi ~/.ssh/config

Host github.com
 HostName github.com
 IdentityFile ~/.ssh/sshkey_github
 User &lt;アカウント名&gt;
 UseKeychain yes
 StrictHostKeyChecking no

# wq:
# 接続確認
$ ssh -T git@github.com
Hi HIR0-728! You've successfully authenticated, but GitHub does not provide shell access.
</code></pre></div>

<h2 id="%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF">
<a class="header-anchor-link" href="#%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF" aria-hidden="true"></a> エディタ</h2>
コードエディタにはVisualStudioCodeを採用。 
Macには最初からVimがインストールされているが、最新版ではないようなのでbrewでインストールする。 
VisualStudioCodeの設定関連はまた別で記録を残そうと思う。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew install visual-studio-code
$ brew install vim

$ vi ~/.zshrc
# 以下内容を入力する

# &gt;&gt; vim &gt;&gt;
export PATH=/usr/local/bin/:$PATH
# &lt;&lt; vim &lt;&lt;

# wq:

$ source ~/.zshrc
</code></pre></div>

<h2 id="%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" aria-hidden="true"></a> ブラウザ</h2>
私のメインブラウザはGoogleChromeなのでこちらは公式サイト経由でインストール。 
開発中にはFirefoxを使ったり、広告が鬱陶しいときにBraveを使うのでこれらはbrewでインストールする。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew install firefox
$ brew install brave
</code></pre></div>

<h2 id="docker">
<a class="header-anchor-link" href="#docker" aria-hidden="true"></a> Docker</h2>
開発時にはDockerコンテナを使って開発を進めることが多い。 
今回は折角なのでちらほら名前を聞く<a href="https://orbstack.dev/" target="_blank" rel="nofollow noopener noreferrer">Orbstack</a>をインストールしてみる。 
詳しくは自分もまだ良くわかっていないのだが、どうやらDockerDesktopForMacより軽量に動作するコンテナ環境及びLinuxVM環境らしい。
下記リンク先にDockerDesktopとの比較表が載っていた。 
<a href="https://docs.orbstack.dev/compare/docker-desktop" target="_blank" rel="nofollow noopener noreferrer">OrbStack vs. Docker Desktop</a>
ざっくりまとめると 
DockerDesktopよりも軽量、高速、シンプルといった感じなのかな？ 
VSCodeのDevContainerと組み合わせても問題なく利用できるみたい。
使用感などわかってきたらまた別記事を起こしてみたい。
とりあえずインストールしておく。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew install orbstack

# docker コマンドがそのまま利用可能(http://localhost:80)
$ docker run -d -p 80:80 docker/getting-started
</code></pre></div>

<h2 id="%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> キーボード設定</h2>
私はUSキーボード愛用者であるが、デフォルトの設定だと日本語と英数の切り替えが<code>control+space</code>となっていてとても切り替えづらい。 
Windowsマシンではcaps lockを使って切り替えをできるようにしているためMacでも同様の切り替え方法ができるようにする。 
そのためにKarabiner-Elementsを使用する。プロファイルを好みにいじることでキーを役割を自由に変えたりできる。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew install karabiner-elements
</code></pre></div>プロファイル設定は下記リンク先のものをそのままお借りする。
<a href="https://qiita.com/ruemura3/items/dff3d8112e3da3ada41e" target="_blank" rel="nofollow noopener noreferrer">[Mac]Google日本語入力でCaps Lockキーによる日本語と英語のトグル切り替えを行う[US配列]</a>

<h2 id="anyenv">
<a class="header-anchor-link" href="#anyenv" aria-hidden="true"></a> anyenv</h2>
anyenvを使って複数の**envを一括管理できるようにする。 
homebrew導入済みなので、セットアップは簡単。
公式のリポジトリは<a href="https://github.com/anyenv/anyenv#anyenv---all-in-one-for-env" target="_blank" rel="nofollow noopener noreferrer">こちら</a>
<h3 id="anyenv%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E5%AE%9F%E6%96%BD">
<a class="header-anchor-link" href="#anyenv%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E5%AE%9F%E6%96%BD" aria-hidden="true"></a> anyenvのインストール実施</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew install anyenv
$ anyenv init --init

$ vi ~/.zshrc
# 以下内容を入力する

# &gt;&gt; anyenv &gt;&gt;
alias brew="env PATH=${PATH/\/Users\/${USER}\/\.anyenv\/envs\/pyenv\/shims:/} brew"
eval "$(anyenv init -)"
# &lt;&lt; anyenv &lt;&lt;

# wq:

$ exec $SHELL -l
$ anyenv -v

# **env環境を一括でアップデートできるプラグイン
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
$ anyenv update

$ git clone https://github.com/znz/anyenv-git.git $(anyenv root)/plugins/anyenv-git

</code></pre></div><h3 id="anyenv%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fenv%E7%B3%BB%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#anyenv%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fenv%E7%B3%BB%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> anyenvを使ったenv系ツールのインストール</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># インストール可能なenvの確認
$ anyenv install -l

# pyenvのインストール
$ anyenv install pyenv
$ exec $SHELL -l
$ pyenv -v

# pythonインストール
$ pyenv install 3.11.7
$ pyenv global 3.11.7
# 設定したpythonバージョンに切り替わってるか確認する
$ pyenv versions
$ python --version
</code></pre></div><details><summary>anyenv基本コマンド</summary><div class="details-content"><div class="code-block-container"><pre class="language-shell"><code class="language-shell"># anyenvでインストールしたenvの確認
$ anyenv versions
</code></pre></div></div></details>

<h2 id="node.js%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89">
<a class="header-anchor-link" href="#node.js%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" aria-hidden="true"></a> Node.jsの環境構築</h2>
Node.jsのバージョン管理にはnodenvを使用する
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># nodenvのインストール
$ anyenv install nodenv
$ exec $SHELL -l
$ nodenv -v

# node.jsインストール時に一緒にyarnをインストールしてくれるプラグインを追加
$ mkdir -p "$(nodenv root)/plugins"
$ git clone https://github.com/pine/nodenv-yarn-install.git "$(nodenv root)/plugins/nodenv-yarn-install"

# node.jsインストール
$ nodenv install 21.3.0
$ nodenv rehash
$ nodenv global 21.3.0
# 設定したnode.jsバージョンに切り替わっているか確認する
$ nodenv versions
$ node --version
$ yarn --version

</code></pre></div>

<h2 id="oh-my-zsh%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#oh-my-zsh%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> Oh My Zshをインストールする</h2>
oh my zshはzshのフレームワークで、補完機能やテーマの変更などを可能にする。 
インストール時に既存の~/.zshrcのファイル内容が上書きされてしまうので予めどこかに退避しておくことを推奨<a href="#fn-9157-1" id="fnref-9157-1">[1]</a>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
</code></pre></div><h2 id="%E8%A8%AD%E5%AE%9A%E3%81%A8%E3%81%8B">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E3%81%A8%E3%81%8B" aria-hidden="true"></a> 設定とか</h2>
自分はテーマを<code>ys</code>というものに変更して使っています。 
追加プラグインはzsh auto suggestions<a href="#fn-9157-2" id="fnref-9157-2">[2]</a>, zsh syntax highlighting<a href="#fn-9157-3" id="fnref-9157-3">[3]</a>, peco<a href="#fn-9157-4" id="fnref-9157-4">[4]</a>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"># プラグインのインストール
$ git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
$ git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
$ brew install peco

# vimで開いて該当する設定を変更
$ vim ~/.zshrc

ZSH_THEME="ys"

plugins=(
 git
 zsh-autosuggestions
 zsh-syntax-highlighting
)

# &gt;&gt; peco &gt;&gt;
function peco-select-history() {
 local tac
 if which tac &gt; /dev/null; then
 tac="tac"
 else
 tac="tail -r"
 fi
 BUFFER=$(\history -n 1 | \
 eval $tac | \
 peco --query "$LBUFFER")
 CURSOR=$#BUFFER
 zle clear-screen
}
zle -N peco-select-history
bindkey '^r' peco-select-history
# &lt;&lt; peco &lt;&lt;

# 設定反映
$ source ~/.zshrc
</code></pre></div><section class="footnotes">
脚注
<ol class="footnotes-list">
<li id="fn-9157-1" class="footnote-item">
一応<code>~/.zshrc.pre-oh-my-zsh</code>というファイル名でoh my zshが退避してくれるので、そこらから内容を復元することも可能 <a href="#fnref-9157-1" class="footnote-backref">↩︎</a>
</li>
<li id="fn-9157-2" class="footnote-item">
過去に実行したコマンドから、実行するコマンドを補完してくれる。cd + [Tab]で移動も快適に <a href="#fnref-9157-2" class="footnote-backref">↩︎</a>
</li>
<li id="fn-9157-3" class="footnote-item">
コマンドにシンタックスハイライトが付き見やすくなる <a href="#fnref-9157-3" class="footnote-backref">↩︎</a>
</li>
<li id="fn-9157-4" class="footnote-item">
<code>Ctrl + r</code>を押すことでコマンド履歴を表示することができる <a href="#fnref-9157-4" class="footnote-backref">↩︎</a>
</li>
</ol>
</section>

<h2 id="istatmenus%E3%81%A8mos">
<a class="header-anchor-link" href="#istatmenus%E3%81%A8mos" aria-hidden="true"></a> iStatMenusとMos</h2>
<h3 id="istatmenus">
<a class="header-anchor-link" href="#istatmenus" aria-hidden="true"></a> iStatMenus</h3>
<iframe id="zenn-embedded__f69213d864903" src="https://embed.zenn.studio/card#zenn-embedded__f69213d864903" data-content="https%3A%2F%2Fbjango.com%2Fmac%2Fistatmenus%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://bjango.com/mac/istatmenus/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://bjango.com/mac/istatmenus/</a> 
メニューバーでシステムのモニタリングを行うためのツール。 
類似ツールにstatsなどが存在するが、よりUIが今どきかつわかりやすい。 
ただし有料なので注意。
インストールや設定は以下のページを参考にした。 
<iframe id="zenn-embedded__edd7cf2ec004c" src="https://embed.zenn.studio/card#zenn-embedded__edd7cf2ec004c" data-content="https%3A%2F%2Fwebrandum.net%2Fistat-menus%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://webrandum.net/istat-menus/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://webrandum.net/istat-menus/</a>
<h3 id="mos">
<a class="header-anchor-link" href="#mos" aria-hidden="true"></a> Mos</h3>
<iframe id="zenn-embedded__8626793ac750a" src="https://embed.zenn.studio/card#zenn-embedded__8626793ac750a" data-content="https%3A%2F%2Fmos.caldis.me%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://mos.caldis.me/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://mos.caldis.me/</a> 
Macだとサードパーティ製のマウスを使用すると、スクロールの動きがおかしい。 
マウスホイールを少しだけ動かすと、非常に僅かにしかスクロールされないし、多めに動かすとスクロールされすぎてブラウジングが不便。 
そんな問題を解決してくれるのがMos。
インストールや設定は以下のページを参考にした。 
<iframe id="zenn-embedded__adf2158c072c8" src="https://embed.zenn.studio/card#zenn-embedded__adf2158c072c8" data-content="https%3A%2F%2F60dd.co%2Fblog%2Fentry%2Fapp-mos" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://60dd.co/blog/entry/app-mos" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://60dd.co/blog/entry/app-mos</a> 
<iframe id="zenn-embedded__32871832a6c28" src="https://embed.zenn.studio/card#zenn-embedded__32871832a6c28" data-content="https%3A%2F%2Fwww.taikun-room.com%2F2020%2F09%2Fmac-software-mos.html" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://www.taikun-room.com/2020/09/mac-software-mos.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.taikun-room.com/2020/09/mac-software-mos.html</a>

<h2 id="poetry">
<a class="header-anchor-link" href="#poetry" aria-hidden="true"></a> Poetry</h2>
Pythonのパッケージ管理ツールの一つ。pipコマンドやpipenvなどと同じ要領でプロジェクト毎にPythonパッケージの仮想環境構築が可能になる。 
poetryの場合パッケージ管理に使用するファイルの生成・変更を自動で行ってくれるため、チーム開発などにも便利となる。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ curl -sSL https://install.python-poetry.org | python3 -

$ vi ~/.zshrc
# 以下内容を入力する

# &gt;&gt; poetry &gt;&gt;
export PATH="/Users/${USER}/.local/bin:$PATH"
# &lt;&lt; poetry &lt;&lt;

# wq:
 
$ poetry version
$ poetry self update

# 仮想環境が各プロジェクトの配下に作成されるように設定
$ poetry config virtualenvs.in-project true
$ poetry config --list
</code></pre></div>

<h2 id="%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 便利ツール</h2>
基本的に各ツールはHomebrewを使ってインストールするものとする。
<h3 id="gyazo">
<a class="header-anchor-link" href="#gyazo" aria-hidden="true"></a> Gyazo</h3>
<a href="https://gyazo.com/ja" target="_blank" rel="nofollow noopener noreferrer">Gyazo</a> 
スクリーンショット用アプリ。 
WindowsとMacどちらでも使うことができ、任意の範囲のみのスクリーンショットや簡易的なGIFの作成なども可能。またスクリーンショットをURLで共有することができるため誰かに画面の内容を見せたいときなども便利。
ショートカットはデフォルトから変更している。
<ul>
<li>範囲選択して撮影 <code>Option+Shift+P</code>
</li>
<li>フルスクリーンを撮影 <code>Option+Shift+Cmd+P</code>
</li>
<li>動画を撮影 <code>Option+Shift+V</code>
</li>
</ul>
<h3 id="skitch">
<a class="header-anchor-link" href="#skitch" aria-hidden="true"></a> Skitch</h3>
<a href="https://evernote.com/ja-jp/products/skitch" target="_blank" rel="nofollow noopener noreferrer">Skitch</a> 
こちらもスクリーンショット用アプリ。 
Mac専用だがスクリーンショットを撮ってすぐ、そのまま編集にはいることができる便利なアプリケーション。撮影した画像はエクスポートすることで好きなディレクトリに保存可能。 
標準のスクリーンショットより便利だが、メニューの選択画面などのキャプチャができない点は注意。 
Skitchはショートカットが変更できないが標準のスクリーンショットと被ってしまっているため、標準のスクリーンショットのキーを変更することで対応する。
<h4 id="skitch%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC">
<a class="header-anchor-link" href="#skitch%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC" aria-hidden="true"></a> Skitchのショートカットキー</h4>
<ul>
<li>範囲選択して撮影 <code>Command+Shift+5</code>
</li>
<li>前回の範囲選択を撮影 <code>Command+Shift+Option+5</code>
</li>
<li>フルスクリーンを撮影 <code>Command+Shift+6</code>
</li>
</ul>
<details><summary>ショートカットキーの変更</summary><div class="details-content">
<img src="https://storage.googleapis.com/zenn-user-upload/21414bd77948-20231229.jpg" alt="ショートカットキー" loading="lazy" class="md-img"> 
ここをCommand+Shift+2に設定。
</div></details>
<h3 id="ticktick">
<a class="header-anchor-link" href="#ticktick" aria-hidden="true"></a> TickTick</h3>
<a href="https://ticktick.com/" target="_blank" rel="nofollow noopener noreferrer">TickTick</a> 
言わずとしれたタスク管理アプリ。 
以前はNotionを使ってタスク管理をしていたが、Notionだとどうしても各タスクのリマインドや繰り返しなどが不便であった。タスクを管理、遂行するという目的に特化するためにも新たにTickTickを導入してみることとした。 
※デフォルトのショートカットキーが一部VSCodeのショートカットと競合するので注意が必要。
<h3 id="bitwarden">
<a class="header-anchor-link" href="#bitwarden" aria-hidden="true"></a> bitwarden</h3>
<a href="https://bitwarden.com/ja-JP/" target="_blank" rel="nofollow noopener noreferrer">Bitwarden</a> 
パスワード管理マネージャアプリ。 
同じようなアプリケーションとしてよく<a href="https://1password.com/jp" target="_blank" rel="nofollow noopener noreferrer">1Password</a>が話題にあがるが基本的な機能は同じ。 
ただ、こちらはほぼすべての機能が無料で使えるという点が自分に取ってはメリットなのでこちらを使っている。パスワード管理にお金かけたくはないよね。 
あと複数デバイス間の同期ができるというのもポイント。自分の運用方法では全くといっていいほど不満はない。
<h3 id="sourcetree">
<a class="header-anchor-link" href="#sourcetree" aria-hidden="true"></a> SourceTree</h3>
<a href="https://www.sourcetreeapp.com/" target="_blank" rel="nofollow noopener noreferrer">SourceTree</a> 
Git GUIアプリ。 
Git操作をGUIで実行できるようになる。基本的にはVSCodeのGit拡張機能で問題ないのだが、コンテナ内で開発をしている際などはコンテナ側にも拡張機能をインストールする必要があって面倒なので、SourceTreeを使ってコミットするようにしている。 
アカウントの接続はPersonalAccessTokenを使うようにしている。
<details><summary>設定などの参考リンク</summary><div class="details-content">
<a href="https://qiita.com/YuukiYoshida/items/2e6b250d44bf1e0f5a0b" target="_blank" rel="nofollow noopener noreferrer">【Git】personal access tokenを使用してGitHubへアクセスする</a> 
<a href="https://qiita.com/1noseA/items/04054ad8745b09c92324" target="_blank" rel="nofollow noopener noreferrer">【備忘録】現場でのGitの運用【SourceTreeの使い方】</a> 
<a href="https://zenn.dev/nenenemo/articles/68cd7e71906622" target="_blank">Gitを使いやすくするためのGUIツールSourcetreeの使い方</a>
</div></details>
<h3 id="rectangle">
<a class="header-anchor-link" href="#rectangle" aria-hidden="true"></a> Rectangle</h3>
<a href="https://rectangleapp.com/" target="_blank" rel="nofollow noopener noreferrer">Rectangle</a> 
ウィンドウ位置整理アプリ。 
ショートカットやドラッグでウィンドウ位置を整理することができる。
<h4 id="rectangle%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC">
<a class="header-anchor-link" href="#rectangle%E3%81%AE%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC" aria-hidden="true"></a> Rectangleのショートカットキー</h4>
<ul>
<li>左半分 <code>Contorol+Option+←</code>
</li>
<li>右半分 <code>Contorol+Option+→</code>
</li>
<li>上半分 <code>Contorol+Option+↑</code>
</li>
<li>下半分 <code>Contorol+Option+↓</code>
</li>
<li>左上 <code>Contorol+Option+F1</code>
</li>
<li>右上 <code>Contorol+Option+F2</code>
</li>
<li>左下 <code>Contorol+Option+F3</code>
</li>
<li>右下 <code>Contorol+Option+F4</code>
</li>
<li>最大化 <code>Contorol+Option+Enter</code>
</li>
<li>次のディスプレイ <code>Contorol+Option+Command+→</code>
</li>
<li>前のディスプレイ <code>Contorol+Option+Command+←</code>
</li>
<li>高さを最大化 <code>Contorol+Option+Shift+↑</code>
</li>
</ul>

<h2 id="iterm2">
<a class="header-anchor-link" href="#iterm2" aria-hidden="true"></a> iterm2</h2>
標準で用意されているTerminalは使いづらいためiterm2を使えるようにする。 
無料ながらにして高機能だが、高機能すぎるが故に設定が複雑であったり、基本的にUIが英語なので環境設定をこまめにさわるのはしんどい。
<h3 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew install iterm2

</code></pre></div><h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E5%A4%89%E6%9B%B4">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> フォントの変更</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ brew tap homebrew/cask-fonts
$ brew install font-hackgen
$ brew install font-hackgen-nerd
</code></pre></div><code>Preferences -&gt; Profiles -&gt; Text -&gt; Font</code>でフォントを選択。フォントサイズは14くらい。
<h3 id="%E8%83%8C%E6%99%AF%E3%81%AE%E9%80%8F%E9%81%8E%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF%E3%81%AE%E9%80%8F%E9%81%8E%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 背景の透過設定</h3>
<code>Preferences -&gt; Profiles -&gt; Windows -&gt; Transparency</code> 
<img src="https://storage.googleapis.com/zenn-user-upload/1d853124e715-20231228.jpg" alt="背景透過" loading="lazy" class="md-img">
<h3 id="%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E5%A4%89%E6%9B%B4">
<a class="header-anchor-link" href="#%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> カラーテーマの変更</h3>
<code>Preferences -&gt; Profiles -&gt; Colors</code> 
ダウンロードするのは面倒なのでとりあえず、Smooooothあたりを選択。 
<img src="https://storage.googleapis.com/zenn-user-upload/2bac1b7a72c3-20231228.jpg" alt="カラーテーマ" loading="lazy" class="md-img">
テーマをダウンロードする場合は、<a href="https://iterm2colorschemes.com/" target="_blank" rel="nofollow noopener noreferrer">こちら</a>のサイトで好きなものを探し、 
表示されたコードを選択して<code>.itermcolors</code>ファイルとして保存。そのファイルをテーマ設定から読み込むことで反映される。
<h3 id="tips%E9%80%9A%E7%9F%A5%E3%82%92%E6%B6%88%E3%81%99">
<a class="header-anchor-link" href="#tips%E9%80%9A%E7%9F%A5%E3%82%92%E6%B6%88%E3%81%99" aria-hidden="true"></a> Tips通知を消す</h3>
<code>Preferences -&gt; Advanced</code> 
<img src="https://storage.googleapis.com/zenn-user-upload/013dba9dbe20-20231228.jpg" alt="Tipsを削除" loading="lazy" class="md-img">
<h3 id="%E3%83%93%E3%83%BC%E3%83%97%E9%9F%B3%E3%82%92%E6%B6%88%E3%81%99">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%BC%E3%83%97%E9%9F%B3%E3%82%92%E6%B6%88%E3%81%99" aria-hidden="true"></a> ビープ音を消す</h3>
<code>Preferences -&gt; Profiles -&gt; Terminal</code> 
<img src="https://storage.googleapis.com/zenn-user-upload/09c1c60724f8-20231228.jpg" alt="ビープ音の削除" loading="lazy" class="md-img">
<h3 id="%E7%B5%82%E4%BA%86%E6%99%82%E3%81%AE%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E5%87%BA%E3%81%95%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#%E7%B5%82%E4%BA%86%E6%99%82%E3%81%AE%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E5%87%BA%E3%81%95%E3%81%AA%E3%81%84" aria-hidden="true"></a> 終了時のダイアログを出さない</h3>
<code>Preferences -&gt; General -&gt; Closing</code> 
<img src="https://storage.googleapis.com/zenn-user-upload/d06e65047fb0-20231228.jpg" alt="ダイアログ" loading="lazy" class="md-img">
<h3 id="%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%83%90%E3%83%BC%E3%81%AB%E6%83%85%E5%A0%B1%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%83%90%E3%83%BC%E3%81%AB%E6%83%85%E5%A0%B1%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> ステータスバーに情報を表示する</h3>
<code>Preferences -&gt; Profiles -&gt; Session</code> 
![ステータスバーの有効化<img src="https://storage.googleapis.com/zenn-user-upload/b4dbc55e631b-20231229.jpg" loading="lazy" class="md-img"> 
表示したい情報をドラッグ&amp;ドロップする。 
<img src="https://storage.googleapis.com/zenn-user-upload/6be6452d8598-20231229.jpg" alt="表示項目の選択" loading="lazy" class="md-img">
<code>Preferences -&gt; Appearance</code> 
ステータスバーの表示位置を下部に指定。 
<img src="https://storage.googleapis.com/zenn-user-upload/3759b74f09ce-20231229.jpg" alt="表示位置の設定" loading="lazy" class="md-img">
<h3 id="%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AE%E6%9C%80%E5%A4%A7%E6%95%B0%E3%82%92%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AE%E6%9C%80%E5%A4%A7%E6%95%B0%E3%82%92%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> スクロールの最大数を設定</h3>
<code>Preferences -&gt; Profiles -&gt; Terminal</code> 
Scrollbackを5000に変更する。
<h3 id="hotkey%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#hotkey%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> HotKeyの設定</h3>
HotKeyを設定しておくことで瞬時にiterm2を画面に表示させることが可能になる。 
私はHotKey用のプロファイルを別にして表示させている。
<h4 id="%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロファイルの作成</h4>
<code>Preferences -&gt; Profiles</code> 
<img src="https://storage.googleapis.com/zenn-user-upload/bccb5fdc6aee-20231229.jpg" alt="プロファイル作成" loading="lazy" class="md-img">
####プロファイル呼び出し用のショートカットキーを設定 
<code>Preferences -&gt; Profiles -&gt; Keys</code> 
私はcontrol+shift+tabキーを呼び出しショートカットに設定している。 
<img src="https://storage.googleapis.com/zenn-user-upload/0d52cf29084e-20231229.jpg" alt="設定" loading="lazy" class="md-img"> 
<img src="https://storage.googleapis.com/zenn-user-upload/764d1e6daab1-20231229.jpg" alt="表示設定" loading="lazy" class="md-img">
<h4 id="hotkey%E3%81%A7%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%AE%E8%A1%A8%E7%A4%BA%E4%BD%8D%E7%BD%AE%E3%82%92%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#hotkey%E3%81%A7%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%AE%E8%A1%A8%E7%A4%BA%E4%BD%8D%E7%BD%AE%E3%82%92%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Hotkeyで呼び出すターミナルの表示位置を設定</h4>
<code>Preferences -&gt; Profiles -&gt; Window</code> 
Styleの項目から表示したい位置を設定する。私は画面の下部から出したいのでFull-Width Bottom of Screenを選択している。
<h3 id="%E3%82%BF%E3%83%96%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%BF%E3%83%96%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> タブに実行しているアプリケーションのアイコンを表示する</h3>
<code>Preferences -&gt; Profiles -&gt; General</code> 
Iconの項目からBuild-in icon for Current Appを選択する。
<h3 id="%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E5%90%8C%E6%9C%9F%E3%81%95%E3%81%9B%E3%82%8B">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E5%90%8C%E6%9C%9F%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> 設定ファイルをクラウド同期させる</h3>
<code>Preferences -&gt; General -&gt; Preferences</code> 
設定ファイルを複数のデバイスで共有させたい場合に便利。私は家にあるNASに設定を保存するようにしている。 
※外出先でMacを使おうとした際にどういった動作になるのかが未確認。 
<img src="https://storage.googleapis.com/zenn-user-upload/d04a91e1d410-20231229.jpg" alt="設定ファイル" loading="lazy" class="md-img">
<h3 id="%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E3%81%AE%E7%A7%BB%E5%8B%95%E7%84%A1%E3%81%97%E3%81%ABiterm%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E3%81%AE%E7%A7%BB%E5%8B%95%E7%84%A1%E3%81%97%E3%81%ABiterm%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> デスクトップの移動無しにitermを表示するように設定する</h3>
<code>Preferences -&gt; General -&gt; Window</code> 
Native full screen windowsのチェックを外す。
<details><summary>参考にしたサイト</summary><div class="details-content">
<aside class="msg message">!<div class="msg-content">
<a href="https://namileriblog.com/terminal/iterm2_settings/" target="_blank" rel="nofollow noopener noreferrer">https://namileriblog.com/terminal/iterm2_settings/</a>
</div></aside>
</div></details>

<h2 id="%E6%A5%AD%E5%8B%99%E7%B3%BB%E3%83%84%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E6%A5%AD%E5%8B%99%E7%B3%BB%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 業務系ツール</h2>
<h3 id="notion">
<a class="header-anchor-link" href="#notion" aria-hidden="true"></a> Notion</h3>
ドキュメンテーションツール
<h3 id="slack">
<a class="header-anchor-link" href="#slack" aria-hidden="true"></a> Slack</h3>
業務用コミュニケーションツール
<h3 id="zoom">
<a class="header-anchor-link" href="#zoom" aria-hidden="true"></a> Zoom</h3>
Web会議ツール