MacBookを買ってウキウキ開発環境構築

突然ですが、M2 MacBook Air(CPU 8コア, GPU 8コア, メモリ 16GB, SSD 512GB)を買いました!ふつうに買うと220,800円という感じなのだけど、Apple Storeでおなじスペックの整備済製品があったので2万円ほど安く買えたのと、楽天リーベイツを経由して1,800ポイントもらえた。やったね。

使ってみてよかったことを簡潔に3つ紹介します。重量が1.24kgでメチャ軽いので、出張やちょっとした外でのミーティングなど、気軽にmacOSを外へ連れていけること。はじめてAppleのMなんとかチップのパソコンを触ったけど、メモリ16GBなのにじゅうぶんサクサクだったこと。あとは、体感できるくらい電池が長持ちなこと。30Wで出力するモバイルバッテリーでも充電できるのはうれしいね。

さて、そんな新しいパソコンを買ってウキウキな気分でやるのが開発環境の構築ということで、今回やったことをまとめておこうと思います。

シェルの設定

シェルはZshを使っています。理由はmacOSのデフォルトだから…。Zshの設定のフレームワークにはずっとPreztoを使っていたのだけど、ちょっとばかし起動が遅いのが気になっていて、この機会にZimを試してみることに。起動がちょ〜はやい。テーマの設定は .zimrc ファイルに zmodule eriner と書くだけでいい感じの見た目に。フォントはRicty for PowerlineをインストールしてiTerm 2のプロファイルで設定(でも、Rictyは「サポート終了」したそうなので、代替のフォントを選んだほうがいいのかもしれません)。

Sixeightさんの記事を参考に、設定ファイルもホームディレクトリ直下ではなく ~/.config ディレクトリにまとめてみました。XDG Base Directory Specificationなんてディレクトリ構造の仕様があるって知らなかったなあ。

.config
├── git
│   ├── config
│   └── ignore
└── zsh
    ├── .zim
    ├── .zimrc
    ├── .zprofile
    ├── .zsh_history
    ├── .zshenv
    └── .zshrc

/etc/zshenvZDOTDIR=$HOME/.config/zsh と書いたうえで ~/.config/zsh/.zshenv で環境変数を設定しておく。

export XDG_CONFIG_HOME="$HOME"/.config
export XDG_CACHE_HOME="$HOME"/.cache
export XDG_DATA_HOME="$HOME"/.local/share
export XDG_STATE_HOME="$HOME"/.local/state

~/.config/zsh/.zshrc には、おなじみのaliasの設定など。

alias g='git'
alias ga='git add'
alias gc='git commit -m'
alias gca='git commit --amend'
alias gcaa='git commit --amend --no-edit'
alias gce='git commit --allow-empty -m'
alias gd='git diff'
alias gdd='git diff --cached'
alias gs='git status -sb'
alias mm='git-checkout-default-branch'
alias o='open'
alias pwdd='open -a iTerm .'
alias z='exec $SHELL -l'

git-checkout-default-branch() {
  local BRANCH=`git remote show origin | grep 'HEAD branch' | awk '{print $NF}'`
  git checkout $BRANCH && git pull && git pull origin $BRANCH
}

こだわりポイントとしては、 mm って打つと、Gitのどのブランチにいてもmasterやmainブランチへ移動して最新版をpullしてくれるコマンドをよく使ってます。あと pwd ならぬ pwdd って打つと、いま自分がいるディレクトリを新しいiTermのタブで開いてくれるコマンドも便利。もっといい書き方やツールがあるのかもしれませんが…。

プログラミング言語のインストール

複数の言語やプロジェクトごとに異なるバージョンを管理しやすくするために、anyenvを利用してます。ということで、まずanyenvとanyenv-updateをインストール。

$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ anyenv init
$ exec $SHELL -l
$ anyenv install --init
$ mkdir -p $(anyenv root)/plugins
$ git clone <https://github.com/znz/anyenv-update.git> $(anyenv root)/plugins/anyenv-update

そのうえでNode.jsをインストール。

$ anyenv install nodenv
$ exec $SHELL -l
$ anyenv update
$ nodenv install -l
$ nodenv install 18.16.0 #記事公開時のLTSの最新バージョンです
$ nodenv global 18.16.0

あとRubyもインストール。

$ anyenv install rbenv
$ exec $SHELL -l
$ anyenv update
$ rbenv install -l
$ rbenv install 3.2.2 #記事公開時の安定版の最新バージョンです
$ rbenv global 3.2.2

グラフィックツールの設定

Adobe Creative Cloudにも毎月お金を払ってるので料金の高額さに怒りながらインストールします(1ライセンスで2台までOKとのこと)。よく忘れるので設定をメモしておきます。なお、僕は印刷物をまったく作りません。

  • Photoshop
    • 環境設定 > ツール
      • ツールヒントを表示 をOFF
    • 環境設定 > 単位・定規 > 単位
      • 定規文字pixel
    • 環境設定 > ガイド・グリッド・スライス > グリッド
      • グリッド線10 pixel
      • 分割数10
  • Illustrator
    • 環境設定 > 一般
      • キー入力1px
      • ツールヒントを表示 をOFF
    • 環境設定 > 単位
      • すべて ピクセル

あとは思い出したら追記しま〜す!

WAI-ARIAウェイウェイ会

WAI-ARIA 1.2 日本語訳 や ARIA Authoring Practices Guide に 公開されている実装の例 を眺めつつ、基礎知識や最近の業務で実装に取り入れたところを共有する社内勉強会を開催した。もともとは自分の知識のなさから調べなきゃな〜とずっと思っていて、この機会に資料を用意することで勉強できたらいいなぐらいに思って企画した会だったけど、関心を持ってる社内のデザイナーやエンジニアがけっこう参加してくれてうれしかった。

せっかくみんなでやってるのだから、おのおの調べて実装しないで全社でベストプラクティスを共有するほうがいいなと改めて思ったし、テーマを絞って集まって勉強会とか読書会をやることで興味や関心が可視化されるのはいいなと感じた。もともと社内のSlackのアクセシビリティに関するチャンネルで活発に投稿していたり、こういう企画をやりやすい環境をつくってくれていたメンバーにも感謝したい気持ちでいっぱい。楽しかった〜。

Let's EncryptでワイルドカードのSSL証明書を発行する

このあいだConoHa VPSでつくったUbuntu 22.04が動くサーバーに独自ドメイン dev.shikakun.com でアクセスできるようにしてLet's EncryptでSSL証明書を発行したのだけど、サブドメイン以下のワイルドカード証明書というのはないらしく、サブドメインを用意するたびにSSL証明書を発行しないといけないし、それぞれ3ヶ月ごとに更新しないといけないのはめんどう。そこで、ルートドメインとして新たに shikakun.dev を取得して、ワイルドカード証明書ひとつで運用できるようにしたい。

これまでのあらすじは以下の記事を参照ください。

ドメインの取得・ネームサーバーの設定

今回はドメインをムームードメインで取得して、ネームサーバーはCloudflareを利用しました。

ムームードメインで取得完了後にDNSを利用しない選択肢を選び、Cloudflareにログインして「サイトを追加」から shikakun.dev を追加、表示される案内に従ってムームードメインの管理画面でネームサーバーの設定を abby.ns.cloudflare.com phil.ns.cloudflare.com へ差し替える。しばらくするとCloudflareから、確認できたよ〜というメールが届いた。

ドメインでアクセスできるようにする

sudo mkdir /var/www/shikakun.dev
sudo chown -R $USER:$USER /var/www/shikakun.dev
sudo vim /etc/apache2/sites-available/shikakun.dev.conf
<VirtualHost *:80>
  ServerName shikakun.dev
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/shikakun.dev
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
sudo a2ensite shikakun.dev
systemctl reload apache2

これで http://shikakun.dev/ でアクセスできるようになった(なお、 .dev.app のTLDはChromeからアクセスしようとするとhttpsへリダイレクトされるが、まだSSL証明書を発行していないのでアクセスできない。FirefoxなどChrome以外のブラウザで確認しました)。

certbotでLet's EncryptのSSL証明書を発行し、apache2の設定ファイルを書き換える。

sudo certbot certonly --webroot --webroot-path /var/www/shikakun.dev -d shikakun.dev -m {メールアドレス}
sudo vim /etc/apache2/sites-available/shikakun.dev.conf
<VirtualHost *:443>
  ServerName shikakun.dev
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/shikakun.dev
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  SSLCertificateFile /etc/letsencrypt/live/shikakun.dev/cert.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/shikakun.dev/privkey.pem
  SSLCertificateChainFile /etc/letsencrypt/live/shikakun.dev/chain.pem
</VirtualHost>
sudo systemctl reload apache2

これで https://shikakun.dev/ でアクセスできるようになった!

ワイルドカード証明書に差し替える

いよいよLet's Encryptでワイルドカード証明書を発行して、さきほど発行した証明書から差し替える。

sudo certbot certonly --manual \
    --preferred-challenges dns-01 \
    --server https://acme-v02.api.letsencrypt.org/directory \
    -m {メールアドレス} \
    -d shikakun.dev \
    -d *.shikakun.dev

上書きするか尋ねられるので Expand の E を入力。

ワイルドカード証明書はDNS認証をする必要があるらしく、案内されたとおりにCloudflareのDNSの設定でTXTレコードに指定の値を入力。反映されたかな〜くらい待ってEnterを押すと、無事に差し替えられた!

3ヶ月に1度の更新が必要で、上記のcertbotのコマンドを実行すればいいらしい。また、更新にあたってTXTレコードの値を差し替える必要があるとのこと。めんどくさい!けど、たぶんきっと調べればなんかいい方法あるでしょう。