倒れるときは前のめり。

カレーが好きです。

2018年を迎えたので開発環境を見直した(iTerm2 + zsh + prezto + peco + anyframe + vim + VSCode)

MacBook Proクリーンインストールして homebrew で必要なアプリ群を導入したあとにやることをまとめた。アプリごとの細かい設定は mackup で Dropbox に退避していたのでほぼノータイムで復旧できて大変よろしい。

こちらの記事の続きとなる。

Ricty を捨てて Myrica に乗り換える

もともと Ritcy を使っていたんだけど、もろもろのビルドが面倒なので、この機に Myrica へ乗り換えることにした。

myrica.estable.jp

brew tap caskroom/fonts
brew cask install font-myrica font-myricam

VSCode で使うときは "editor.fontFamily": "Myrica M" で OK. あとは powerline 用にパッチを当てる。

ghq get Lokaltog/powerline-fontpatcher
cd -- ~/src/github.com/Lokaltog/powerline-fontpatcher
fontforge -lang=py -script ./scripts/powerline-fontpatcher ~/Library/Fonts/MyricaM.TTC

作業ディレクトリに MyricaM Monoscape for Powerline.otf なるファイルができているので、Finder からファイルをダブルクリックしてインストールすれば OK.

ターミナル環境

iTerm2 + zsh + prezto + peco + anyframe の環境を整えていく。

iTerm2

iTerm2 の設定ファイルは mackupDropbox に移しているので、Preference > General > PreferencesLoad preferences from a custom folder or URL: に設定ファイルのパスを指定すればよい。

なお vim-powerline では文字化けするので、iTerm2 の Profiles > Text > Non-ASCII Fonthttps://github.com/powerline/fonts から Space Mono for Powerline をインストールして指定する。

zsh + prezto + peco + anyframe

zsh の見た目をかっこよくしてくれる prezto を導入。さらに peco + anyframe でらくらくコマンドライン環境を整える。

まずは homebrew でインストールした zsh をデフォルトシェルに設定する。

sudo sh -c "echo '/usr/local/bin/zsh' >> /etc/shells"
chsh -s /usr/local/bin/zsh

つぎは prezto.

github.com

git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"
setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

anyframe は作者の Qiita の記事を読みながら導入。

qiita.com

ghq get mollifier/anyframe

~/.zshrc へ以下追記してやる。

function exists { which $1 &> /dev/null }
if exists peco; then
  fpath=($HOME/src/github.com/mollifier/anyframe(N-/) $fpath)
  autoload -Uz anyframe-init
  anyframe-init

  # 最近使用したのコマンドを叩いたりディレクトリに移動したり
  bindkey '^]' anyframe-widget-cdr
  bindkey '^r' anyframe-widget-put-history

  # ghq list のディレクトリに移動する
  bindkey '^g' anyframe-widget-cd-ghq-repository

  # kill process
  bindkey '^x^k' anyframe-widget-kill

fi

vim(macvim)

vim のパッケージ管理には dein を使用する。プラグイン管理は .vimrc から切り離して toml ファイルにまとめているので、例に漏れずシンボリックリンクを貼ってやる。

github.com

brew install macvim --with-lua --with-override-system-vim

# dein のインストール
sh ~/Dropbox/Mackup/.vim/installer.sh ~/.vim/dein

ln -s ~/Dropbox/Mackup/.vim/.dein.toml ~/.vim/dein/.dein.toml
ln -s ~/Dropbox/Mackup/.vim/.dein_lazy.toml ~/.vim/dein/.dein_lazy.toml

あとは vim を起動して、call dein#install(), call dein#update(), call dein#clear_state() すれば動くはず。

vim に導入している設定はだいたい以下の URL を参考にしている。

qiita.com

tmux + powerline

http://powerline.readthedocs.io/en/latest/installation/osx.html をもとに、シュッと powerline をインストール。

pip3 install powerline-status

tmux のバージョンが 2.6 以降だとコピー機能がうまく動かなかったので、公式の issue を見ながら .tmux.conf を修正する。

ref. https://github.com/tmux/tmux/issues/754#issuecomment-297452143

# ~/.tmux.conf
bind-key -T copy-mode-vi y send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
bind-key -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"

VSCode

これまで AtomIDE(RubyMine)を使用していたが、2017 年から VSCode を本格導入して以来もうこれなしには開発できない。

code --list-extensions > ~/Dropbox/backup/vscode/vscode-extensions.txt

クリーンインストール前に拡張機能の一覧を出力しておいて、

cd ~/Dropbox/backup/vscode
cat ./vscode-extensions.txt | while read line
do
  code --install-extension $line
done

で一括インストール。あとは Setting sync で gist にアップロードした設定を読み込めば終了。

code.visualstudio.com marketplace.visualstudio.com

開発言語のバージョン管理

RailsJavaScript 開発は Docker 上で完結させたいのだけど、ちょっと irb やコンソール上から動かしたいこともあるので、最低限の実行環境を入れることにした。

Ruby(rbenv + ruby-build)

brew install rbenv ruby-build

# ~/.zshrc に追加
export PATH=$HOME/.rbenv/bin:$PATH
eval "$(rbenv init - zsh)"

# 変更を反映させておく
source ~/.zshrc

rbenv install 2.4.0
rbenv global 2.4.0

which ruby # => /Users/cheezenaan/.rbenv/shims/ruby
ruby -v # => ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin17]

JavaScript(nodebrew + yarn)

公式のとおり curl を用いて nodebrew をインストールする。

github.com

curl -L git.io/nodebrew | perl - setup
export NODEBREW_ROOT=/path/to/.nodebrew

homebrew で nodebrew をインストールした場合、以下のエラーが表示されてコケる。

nodebrew install-binary latest

Fetching: https://nodejs.org/dist/v9.3.0/node-v9.3.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/cheezenaan/.nodebrew/src/v9.3.0/node-v9.3.0-darwin-x64.tar.gz:
Warning: No such file or directory
                                                                           0.0%
curl: (23) Failed writing body (0 != 1124)
download failed: https://nodejs.org/dist/v9.3.0/node-v9.3.0-darwin-x64.tar.gz
brew install yarn --without-node

落穂ひろい

  • logicool options のインストール
  • Google 日本語入力を IME のデフォルトにする

Karabiner-Elements

https://pqrs.org/osx/karabiner/complex_modifications/ から For Japanese の設定を Import しておく。

rcmdnk.com

残課題

2018年を迎えたので MacBook Pro のクリーンインストールをした(homebrew + Brewfile + mackup)

f:id:cheezenaan:20180102111010j:plain
毎年毎年、最初からはじめられる。それは素晴らしいことだと思いますよ ― 「響け!ユーフォニアム2 第13話『はるさきエピローグ』」

ここ数年は年末年始を使って、自宅PCのクリーンインストールと開発環境構築をしているのだけど、2018年も例に漏れずやってみた。

TL:DR;

homebrew + Brewfile + mackup を使って、らくらく環境構築。

クリーンインストール前にやること

SSH 鍵のバックアップ

[SSH] 秘密鍵を Dropbox にバックアップしつつ、シンボリックリンクを張って使えるようにする設定 | CodeNote を参考に、Dropbox 上に SSH 鍵を移してシンボリックリンクを貼った。

cp .ssh/* ~/Dropbox/ssh/
chmod 755 ~/Dropbox/ssh
chmod 600 ~/Dropbox/ssh/id_rsa
rm -rf .ssh/
ln -s ~/Dropbox/ssh/ .ssh

~/.ssh » la ~/.ssh
lrwxr-xr-x  1 cheezenaan  staff    29B 12 31 12:18 /Users/cheezenaan/.ssh -> /Users/cheezenaan/Dropbox/ssh

~/Dropbox » la ssh
total 24
-rw-------@ 1 cheezenaan  staff   3.2K 12 31 12:16 id_rsa
-rw-r--r--@ 1 cheezenaan  staff   766B 12 31 12:16 id_rsa.pub
-rw-r--r--@ 1 cheezenaan  staff   189B 12 31 12:25 known_hosts
homebrew

こうなっていれば OK.

ref. お前らの SSH Keys の作り方は間違っている - Qiita

Brewfile の作成

github.com

homebrew でインストールしたパッケージの一覧を Gemfile 風にまとめたファイルを生成する。 Brewfile は Git 管理するのがいいかもしれない。

brew bundle dump -f --file=~/Dropbox/backup/Brewfile

mackup で設定ファイルを Dropbox に待避

github.com

デフォルトだと ~/Dropbox/Mackupディレクトリを掘って、dotfiles をはじめとする設定ファイルをバックアップし、シンボリックリンクで読み込むようにしてくれる。

mackup backup

クリーンインストール後にやること

XCode と追加コンポーネントのインストール

High Sierra 以降からなのか homebrew インストール時には XCode が不要になっていた。とはいえ macvim を homebrew で導入する際に XCode が必要になるので、このタイミングでインストールする。

homebrew + Brewfile を用いたパッケージ管理

なにはなくとも homebrew をインストール。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew doctor
brew tap caskroom/cask

Brewfile や mackup を使いたい都合上、先に Dropbox だけインストールして認証を済ませておく。

brew cask install dropbox

homebrew 経由で peco をインストールする際に GitHub 上の peco/peco から git clone しているっぽく、 Dropbox に保管していた ssh 鍵の同期をあらかじめ行う。 id_rsaパーミッションが 600 以外になっていたらよしなに直す。

ln -s ~/Dropbox/ssh/ .ssh

あとは

brew bundle --file=~/Dropbox/backup/Brewfile

を実行。Amazon ビデオで SHIROBAKO でも視聴していれば、もろもろのインストールが終了する。

mackup で dotfiles など設定ファイルを同期する

mackup restore

コマンド一発で設定ファイルの同期が終わる。控えめに言って最高。

あとはターミナル環境(iTerm2 + zsh + tmux + vim)と開発言語(Ruby, JavaScript)等の整備があるけれど、長くなりそうなのでいったん区切る。

2017年を振り返る

年の瀬なので、2017 年にやってきたことを振り返ってみることにした。

PowerPoint 用のアドオン開発

PIXTA (お試し版) – Microsoft AppSource

  • PIXTAAPI を利用して画像検索したりサンプルデータをダウンロードできるように
  • 実質ひとりチームで、Rails アプリケーションを 1 つ シュッ と作る貴重な体験をした
  • 諸事情あって今はペンディングになってるけどいつか再開したい

音楽素材販売対応

nlab.itmedia.co.jp

  • 写真、イラスト、動画につづく第 4 の素材販売
  • 具体的には、素材詳細ページならびに検索結果ページの改修を行っていた

素材詳細ページ

  • 煩雑化していた Controller / View をミニマムでリファクタしつつ対応
    • いろいろとつらい処理が多かった Controller および関連ロジックの整理
    • View にビジネスロジック書きすぎていたので、適切に Decorator や Model へ移譲
  • mediaelement とはだいぶ仲良くなれた
    • 開発中にひとつバグを踏んだのでさっさと issue なり Pull Request 送らねば…

検索結果ページ

詳細は以下のブログを読んでくれ…と言いたいところだけど、簡単にまとめるとだいたい以下の通り。

texta.pixta.jp

  • 既存の検索結果ページに React + Redux + Flow が導入されていたが「今回のスコープなら Redux いらなくね」となり、 React + Flow で組み込み
  • ES2017 + React + Flow によるフロントエンド JavaScript 開発の前線を肌で体感するいい機会に
  • medialement と React コンポーネントのつなぎ込みがなかなかの苦労ポイント

モバイル対応

2018 年から本格適用されると噂の MFI(Mobile First Index) に向けて自社サービスのモバイル化対応をやっている。自分が携わっているのはこのあたり。

  • 素材詳細ページの構造化データを microdata から JSON-LD へ移し替える
  • 検索結果ページの絞込フィルタを knockout + erb から React へ移し替える

素材詳細ページへの JSON-LD 組み込み

  • そもそも既存の gem だと JSON-LD とパンくずの両方をいいぐあいに生成できない
  • 諸般の事情で 1 ページ 2 パンくず出しているため Breadcrumb On Rails では機能が足らず、 Gretel をハックすることに
  • Value Object や immutable / mutable とか、インタフェース駆動で開発するぞ!とか、gem のコードを意識して読みはじめるとか、もろもろ意識しはじめたのがこのあたり

検索結果ページの絞込フィルタ React 移行

  • storybook + enzyme を用いた UI コンポーネント開発をやりはじめる
    • UIの確認は storybook 上でチェックしつつ
    • 複雑なロジック実装で不安なところは enzyme で TDD のサイクルを回していく
    • コード修正のフィードバックがほぼリアルタイムでなされるので、開発スピードが爆上げ
  • knockout に取り残されていた jQuery プラグインも React に移植しきる
    • コンポーネントのライフサイクル、ref の使い方をようやく実感としてわかってきたかな…という段階
      • componentDidMount とか componentWillReceiveProps とか
      • mediaelement とか既存ライブラリをラップするコンポーネント、という発想とか
  • React コンポーネントの設計指針、これというものがまだ自分の中で確立してない
    • いわゆる Container / Presentational とかいう分け方はまぁ意識できているんだけど、HoC とかもろもろのパターンとかまだ実感わかない
    • 既存の OSSソースコードを読んで引き出しを蓄積していかないとかなぁ、というお気持ち

社内勉強会・読書会の開催

この数年で社内の人員が急増したこともあり、開発チームで保有している知識やノウハウをうまく全社に展開できたら、ハッピーになるんじゃないの…という思いがあっていろいろやっていた。具体的にはスクラム本の読書会や、Redash を用いた社内 SQL 勉強会の企画・運営など。このあたりの話もブログにまとめているので読んでもらえると。

texta.pixta.jp

社内ブログ執筆

ひょんなことから社内ブログを書く機会をもらい、気がつけば年内に 3 本公開していた。

texta.pixta.jp

  • 自分の経験や知見を文章にまとめて世に送り出す歓びや楽しみを知ってしまう
  • 「これブログにまとめたら面白そうじゃない?」という視点から日々の業務を取り組むようになった

2018年にむけて

来年で30の大台に乗ることもあるし、いろいろと思うこともあるのだけど、それを書くには長くなるので端折ってまとめてしまうと、

  • 健康でありつづける
  • (半年くらい無職になっても生きられる程度には)蓄えをつくる
  • 腕を磨きつづける
  • 人との縁を大事にする

の3+1つを意識しながら過ごしていきたい。

『プロを目指す人のためのRuby入門』出版記念イベント&リファクタリングコンテストに行ってきた

まぁタイトルのとおりなんですが、行ってよかったです(KONAMI

techplay.jp

今日のイベントはざっくり、

  • 書籍『プロを目指す人のためのRuby入門』(通称「チェリー本」)の紹介
  • jnchito 氏による講演: 「わかりやすい技術記事を書くための心構えとテクニック」
  • 公開リファクタリングコンテスト

の3本立て。当日のやりとりは twitterハッシュタグ #railsdm を追いかけるのがよいかと。

『プロを目指す人のためのRuby入門』

パラパラとまえがきと目次を読み、本文をつまみ食いしながら読んでみて、「1年前に出会いたかった!!!!!!111」というのが率直な感想。自分はサーバサイド言語を PHP ではじめて、Ruby をさわるようになったのは今の会社に移ってから。これまでどうやって Ruby を習得してきたんだっけと振り返ってみると、

  • ドットインストールをなめて雰囲気を掴んで、
  • Railsチュートリアルを2周くらいやりきって、
  • 業務で Ruby を触るようになってからは、Qiita の記事や技術ブログから雑多で断片的な知識を吸収しつつ、
  • 『パーフェクトRuby』を読んで体系的に知識を整理しようとするも、メタプログラミングの章で挫折する
  • あとは日々のコードレビューで指摘をもらいながら1つずつ少しずつ自分のものにしていった
    • 振り返るとこれが大きいかなあ

「『パーフェクトRuby』や『Effective Ruby』よりももう少し敷居が低くて、ふだんの Rails 開発に活かせるな本があればなあ」と頭を抱えていた自分にまさにベストマッチで、ありがたや…という言葉しかない。

gihyo.jp

「わかりやすい技術記事を書くための心構えとテクニック」

もともとは「ぼくのかんがえたさいきょうのRubyにゅうもんしょ」~初心者のスキルアップのために技術書は何ができるか~というテーマだったが、「わかりやすい技術記事を書くための心構えとテクニック」 に変更。

あとは今の時代における技術書のあり方論、みたいな話もちらほら。

リファクタリングコンテスト

github.com

前にも同様の試みをやっていたのは twitter のタイムラインで追って知っていたけど、実際に参加するのは今回がはじめて。

とりあえずお題のプロダクションコードとテストコードを初見で読んだ際のメモがこれ。

## テストコード

- minitest さわるの、Railsチュートリアル以来だなあ(小声
- にしてもテストケース読みづらい
- 「ドキュメントとしてのテスト」として書く視点を持つといいかもしれない
  - ex. メソッドを使う側の人間が `\n` とか意識するか?
- たとえば
  - 1 2 3
    4 5 6
    7 8 9
  - を Ruby で書けないか?と考える
    - たしか <~~ でいけたような

## プロダクションコード

- Ruby 本来が持っている仕様を調べるクセをもつといい
  - 誰かがやりたいと思っていることは、きっと他の誰かも考えている
  - それが例えば gem で実現されていることもあれば、 Ruby 標準のライブラリで実現していることもある

メモをもとに自分が出したプルリクエストはこれ。 github.com

ふだん業務で交わしてるやりとりを思い出しつつやってみたものの、どこまで前提条件に踏み込んでいいのかとかコメントのレベル感どうするか?とか、実際のコードリファクタリング以外で考えるポイントが多かった…1

所感

  • 生 jnchito さんは見た目通りに気さくな方だった
  • リファクタリングコンテストは社内でもやってみたい。モブプロとかとあわせてワイワイやるのがいいかも
  • 会場を提供いただいた Speee さん、ラウンジがおしゃれすぎて息を吸うのも心苦しかった

戦果


  1. たとえば「そもそもなんで転置行列なんだ?」とか、「このメソッドはプロジェクト内でどんな役割を果たすのか?」…とか、そのへんの話

ES2015 + Babel + Webpack + ESLint な開発環境をつくった

ナウなヤングに人気な React のチュートリアルを自分もやりたくなったんだが、まあまずは環境構築だよね…ということで、サクッとやってみた。 ついでに Docker 上で動くようにこまかい工夫を加えてみた。

つくったもの

How to Use

$ dbin/yarn install
$ docker-compose up

ディレクトリ構成

$ tree
.
├── .babelrc
├── .dockerignore
├── .eslintignore
├── .eslintrc.json
├── .git
├── .gitignore
├── Dockerfile.dev
├── dbin
│     ├── console
│     └── yarn
├── dist
│     └── index.html
├── docker-compose.yml
├── node_modules
├── package.json
├── src
│     ├── components
│     │     ├── hello.jsx
│     │     └── world.jsx
│     └── index.js
├── webpack.config.js
└── yarn.lock

つくりかた

Docker

公式の node イメージを使った。 alpine ベースだからサイズも小さい。yarn も導入済み。

Dockerfile

FROM node:7.8.0-alpine

WORKDIR /myapp

docker-compose.yml

version: '2'

services:
  main:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - 4000:4000
    volumes:
      - .:/myapp:cached
    command: "yarn start"

docker-compose run ~ と毎回入力するのがだるいので、こんなスクリプトを用意して dbin/console として呼び出すことにした。

#!/bin/bash
set -eux

readonly APP_CONTAINER="your_conitainer_name"
readonly COMMAND="/bin/sh"

docker-compose run --rm $APP_CONTAINER $COMMAND $@

Babel

トランスパイラ。

$ yarn add --dev babel-core babel-loader babel-preset-2015  babel-preset-react

Webpack

ビルドしてくれたりファイル変更を監視してオートリロードしてくれるすげーやつ。

$ yarn add --dev webpack webpack-dev-server

注意点

Docker 環境上で動作させる際には以下留意すること。

  • host: ‘0.0.0.0’
  • watchOptions でポーリング時間を定義
// webpack.config.js

{
  devServer: {
    contentBase: './dist',
    inline: true,
    host: '0.0.0.0',
    port: 4000,
    hot: true
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
(略)
}

ESLint

めちゃくちゃカスタマイズできる文法チェックツール。 とりあえず airbnb のルールを当ててみる。

$ npm info eslint-config-airbnb@latest peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add --dev eslint-config-airbnb@lates
// eslint.json

{
    "extends": "airbnb",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
    }
}

React

みんなだいすきビューライブラリ。

$ yarn add react react-dom

とりあえずそれっぽくコンポーネントつくってみる。

// src/components/hello.jsx

import React from 'react';

const Hello = () => <h1>Hello</h1>;
export default Hello;
// src/components/world.jsx

import React from 'react';

const World = () => <h1>World</h1>;
export default World;
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Hello from './components/hello';
import World from './components/world';

ReactDOM.render(
  <div>
    <Hello />
    <World />
  </div>,
  document.getElementById('app'),
);
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript Boilerplate</title>
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>
</html>

あとは、http://localhost:4000/ にアクセスすれば変更内容を確認できる。 コンポーネントを修正するとブラウザに内容がリアルタイムで反映される。すごい時代だ。

感想

とりあえずトランスパイラとビルドツールの準備が整い、ES2015 の世界へ飛び込めるようになったので、当初の目的は達成。細かい作法や文法は、ESLint で怒られながら気軽に学べるしなんとかなるでしょ。あと webpack-dev-server はやはり便利だ。

つぎはいよいよ React チュートリアルかな。

参考リンク

Docker上にRails5×MySQLな新規プロジェクトを爆速で構築する

概要

Docker Compose を使って、ローカル環境を(ほぼ)汚さずに Rails5 と MySQL が動く環境を作ったので公開してみる。キモは、rails new で新しくRailsプロジェクト作成後に行う、便利Gemのインストールやめんどうくさい設定もろもろを、Rails Application Template で自動化した点。

Rails on Docker

README.md書いてない適当ぷりではあるけれどそこは勘弁。

動作環境(2017/3/5時点)

ホスト

コンテナ

構成

$ tree
.
├── Dockerfile.dev
├── Gemfile
├── Gemfile.lock
├── docker-compose.yml
└── templates
    ├── Gemfiles.rb
    └── settings.rb

1 directory, 6 files.

How to use

mkdir your_rails_app && cd your_own_app
git clone git@github.com:cheezenaan/rails-on-docker.git . && rm -rf .git
docker-compose run --rm webapp rails new . --database=mysql --force -BT -m ./templates/Gemfiles.rb
docker-compose run --rm webapp bundle e rails app:template LOCATION=./templates/settings.rb
docker-compose up -d webapp

Railsアプリには http://localhost:3000 からアクセスできる。

補足

Rails Application Templates

今回の開発環境構築にあたり苦労した箇所。 Application template の場合はGemのインストールやアプリケーションの設定をまとめて行えるのだが、今回 Docker上 で行う場合は

Could not find gem 'pry-coolline' in any of the gem sources listed in your Gemfile.

とエラーが表示されて進まなくなる。Gemのインストールまでで作業を区切った後、再度 docker-compose run ~ することでなんとかなった。

こういうときはどうする?

Gem を新しく追加したい

ホスト側のGemfileを編集してから、

docker-compose exec webapp bundle install

OK.

rubocop でコードスタイルをチェックしたい

ホスト環境にインストールすればいいのでは。

gem install rubocop

もっさりして重い

Docker for Mac特有の問題らしい。docker-sync使うとわりとマシになる。

いちいち docker-compose exec [container-name] ~~~ 打つのだるい

わかる。自分はコマンドライン補完に頼ってるからまだ耐えられるけれどどうにかしたい。 下の参考記事でも紹介されているラッパースクリプトを用意するのがよさそう。

ぐちゃぐちゃになったから環境作り直したい

docker-compose down --volumes --remove-orphans --rmi all

でコンテナ破棄した後、docker-compose up なりすればいい。

参考記事

MarkdownエディタとしてAtomを使えるようにするまでにやったこと

標題の通り。Atomを導入するまでにやったことの備忘録。

事前準備

すでにインストールしていた場合は、いちど消しておく。

rm -rf ~/.atom
rm /usr/local/bin/atom
rm /usr/local/bin/apm
rm ~/Library/Preferences/com.github.atom.plist
rm ~/Library/Application Support/com.github.atom.ShipIt
rm -rf ~/Library/Application Support/Atom/

Homebrewからインストール

brew cask install atom

パッケージインストール

ターミナル上から

apm install [packege-name]

と入力するとインストールできる。

さらに、パッケージ名の一覧が書かれたテキストファイル(package_hoge.txt)を指定して

apm install --package-file package_hoge.txt

で一括インストールができて非常にラク。

sync-settings 導入

Atomの設定(パッケージやキーマップ等)をgistにアップロードして他のPCと同期できる。 GitHubのアクセストークンとgist idが必要なので別途取得すること。

apm install sync-settings

カラースキーマ

Vimやtmuxでも使えるカラースキーマ、Nord一択。かっこよさは正義。

apm install nord-atom-ui
apm install nord-atom-syntax

フォント

RictyかわいいよRicty

全般

  • atom-beautify
  • project-manager
  • vim-mode
  • terminal-plus
  • file-icons
  • minimap
  • advanced-open-file

advanced-open-fileは、cmd + opt + o でファイル名指定して開ける。ファイルが存在しない場合は指定した名前で新規作成してくれるのが便利。よくある「 cmd + n して cmd + s してファイル名入れて保存…」という3ステップが1ステップに短縮。

Markdown支援

markdown-writerMarkdown記法の入力支援パッケージ。 便利なキーバインドをよしなに追加してくれる機能があるので、以下の手順で有効化する。

  1. cmd + shift + p で コマンドパレット開いて、
  2. Markdown Writer: Create Default Keymaps を選択
  3. keymap.csonキーバインドが追加される

おまけ: インストールしたパッケージの一覧を出力する

前述したパッケージの一括インストール(apm install --package-file [package-file.txt])に使える形式で出力できる。

$ apm list -ib
advanced-open-file@0.16.5
atom-beautify@0.29.16
file-icons@2.0.7
markdown-preview-opener@0.1.1
markdown-scroll-sync@2.1.2
markdown-writer@2.6.3
minimap@4.25.7
nord-atom-syntax@0.4.0
nord-atom-ui@0.9.0
project-manager@3.3.3
sync-settings@0.8.1
terminal-plus@0.14.5
tool-bar@1.0.1
tool-bar-markdown-writer@0.2.0
vim-mode@0.65.2