みかづきブログ その3

3ヶ月つづけてみました。

Macの開発環境を整える 2020(Catalina編)

毎年セットアップしている気がしますが、今回はOSがCatalinaになったことによってbashがzshになったのでパスを通すコマンドに変更があります。
あとGo2Shellが動かなくなったのでインストールするのをやめました。

変更した設定

キー入力周り
  1. 入力ソースに日本語(ひらがな・英字)を追加
  2. 入力ソースから英語を削除
  3. ライブ変換をOFF
  4. 推測候補表示をOFF
  5. Shiftキーの動作を英字モードに変更
  6. SpotlightのショートカットをOFF
  7. Caps Lockキーで英字入力モードと切り替えるをON
  8. 入力ソース切り替えを command + space に変更
Dock
  1. Dockを自動的に表示/非表示をON
  2. 最近使ったアプリケーションをDockに表示をOFF
Finder
  1. 新規Finderで開く場所をホームディレクトリに変更
  2. サイドバーにホームディレクトリを追加
トラックパッド
  1. その他ジェスチャの「ページ間をスワイプ」を「3本指でスワイプ」に変更
  2. その他ジェスチャの「フルスクリーンアプリケーション間をスワイプ」を「4本指でスワイプ」に変更

インストールしたアプリケーション

Google Chrome

www.google.co.jp
デフォルトブラウザに設定する。


Sublime Text3

www.sublimetext.com

{
    "margin": 2,
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "draw_white_space": "all"
}

タブとインデントを変更。


Xcode

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料

インストール後一回起動してコマンドラインツールをいれる


Unity Hub

unity3d.com


Docker Desktop

hub.docker.com




ターミナルから導入したもの

gem (アップデート)
sudo gem update --system
Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
ndenv
brew install ndenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zprofile
echo 'eval "$(ndenv init -)"' >> ~/.zprofile
exec $SHELL -l
git clone https://github.com/riywo/node-build.git $(ndenv root)/plugins/node-build
node
ndenv install v13.6.0
ndenv rehash
ndenv global v13.6.0
npm(アップデート)
npm update -g
yarn
brew install yarn
ffmpeg
brew install ffmpeg

input type="number"の右のボタンをカスタムする 💻

input type="number"の右のボタンがspin buttonということを知りました。
そしてwebkit限定ですが、CSSである程度カスタムできることを知ったので、早速カスタムしてみました。
本当のスピンボタンは透明にしつつ、大きくしておいて、その上に当たり判定のないダミーのボタンを置くという方針を取っています。

SCSS

body {
  background: #ECEFF1;
}

.input-box {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  max-width: 600px;
  width: 100%; height: 60px;

  &:before {
    position: absolute;
    top: 8px;
    right: 20px;
    color: #ECEFF1;
    font-size: 20px;
    content: "▲";
    pointer-events: none; // 当たり判定をなくす
  }
  
  &:after {
    position: absolute;
    bottom: 8px;
    right: 20px;
    color: #ECEFF1;
    font-size: 20px;
    content: "▼";
    pointer-events: none; // 当たり判定をなくす
  }
  
  .input {
    box-sizing: border-box;
    display: block;
    margin: 0 auto 40px;
    border: none;
    border-radius: 10px;
    padding: 20px 60px 20px 20px;
    width: 100%; height: 60px;
    font: 20px "Avenir Next";
    box-shadow: 0 0 2px rgba(0, 0, 0, .5) inset;
    -webkit-appearance: none;
    
    &:focus {
      outline: none;
    }

    &::-webkit-inner-spin-button {
      position: absolute;
      top: 0; bottom: 0;
      right: 0; // 右端に固定
      margin: auto;
      transform: scale(5); // 当たり判定を大きくする
      transform-origin: right center;
      opacity: 0; // 透明にして見えなくする
    }
    
    &::-webkit-contacts-auto-fill-button {
      opacity: 0; // Safariのオートフィルボタンを透明にして見えなくする
    }
  }
}

HTML

<div class="input-box">
  <input class="input" type="number"/>
</div>



最近noteも書いてます。

note.mu

Macの開発環境を整える 2019 春(MAMP・Cyberduck・Docker・Go・rbenv・bandler・ImageMagick・MySQLの導入)

昨年末に最低限の環境を整えたのですが、もろもろ開発を進めるに当たって追加で色々導入したので、導入手順をまとめておきます。

kimizuka.hatenablog.com

MAMP

www.mamp.info

PHPのサイトをリニューアルするために導入しました。
ローカルでMySQL、Apache、PHPを簡単に動かせるので便利ですね。
ただMySQLのバージョンがMAMPのバージョンに固定されているため、こちらのページ から3.5.2をダウンロードしました(5.5系のMySQLを使いたかったため)。

www.mamp.info

PHPのバージョンは「MAMP > 環境... > PHP」から選択できますが、GUI上にはインストールされているものの新しいもの2つしか表示されないので、/Applications/MAMP/bin/phpの中に入っているディレクトリを、適当にリネームしましょう。

f:id:kimizuka:20190308112739p:plain

僕の場合は、5.2.17を使いたかったので、7.0.8と5.2.17以外のディレクトリにすべて_をつけています。

f:id:kimizuka:20190308112747p:plain


Cyberduck

SFTPでのファイルアップロードのために導入しました。
学生の頃は愛用していまして、アイコンが好きなので使わなくてもDockに置いておいた時期もあります。

Cyberduck

Cyberduck

  • David Kocher
  • 仕事効率化
  • ¥2,900

学生の頃は無料で使わせていただいておりましたが、いままでの感謝を込めてこの度購入しました。

cyberduck.softonic.jp

無料版はこちらです。


Docker

便利だという噂は聞いていたのですが、いまだになんなのかは良くわかっていません。
開発で必要になったので導入しました。

hub.docker.com

良くわからないまま雰囲気で「Docker Desktop for Mac」を導入したものの、問題なく動いております。


Go

開発に必要になったのでhomebrewをつかって導入しました。

brew install go

で、すべてデフォルトの設定にしたため、~/go/というディレクトリができました。ちょっと気になりますが、まあ良しとしましょう。

echo 'export GOPATH=${HOME}/go' >> ~/.bash_profile
echo 'export PATH=$GOPATH/bin:$PATH' >> ~/.bash_profile

で、GOPATHとPATHを通せばOKです。


rbenv ruby-build

複数のRubyのバージョンを切り替える必要が出てきたためrbenvとruby-buildを導入しました。

brew install rbenv ruby-build

のあとに、

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

でOKです。


ruby

旧バージョンのrubyが必要になったためインストールしました。

rbenv install -l

でインストール可能なバージョンの一覧を確認し、

rbenv install 2.2.2

という感じでインストールできます。

rbenv global 2.2.2

で、グローバルのバージョンを切り替え。

rbenv local 2.2.2

で、ローカルのバージョンを切り替えです。

bandler

gem install bundler

で導入できるはずなんですが、2.2.2のRubyが必要だったため、

ERROR:  Error installing bundler: bundler requires Ruby version >= 2.3.0.

というエラーに悩みました。

rbenv global 2.2.2
gem install bundler -v "1.16.4"

とバージョンを指定して導入しました。


ImageMagick


開発に必要になったので導入しました。

brew install imagemagick

でOKです。余談ですが、ImageMagickを調べていたらこんな記事に出くわしました。

blog.cybozu.io


MySQL

導入に一番苦戦しました。
5.6系を導入したかったので、

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

で良いはずなんですが、

mysql.server start

で、起動しようとすると、

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)
. ERROR! The server quit without updating PID file.

的なエラーが出て、なかなか起動できず、アンインストールとインストールを繰り返していたのですが、

/usr/local/var/mysql

を削除してから、再インストールしたところ無事に起動できるようになりました。



環境構築にほぼ丸1日掛けてしまいましたが、今回はこんな感じです。