Linux開発環境の構築メモ

# はじめに
Web系の開発環境として長年Windowsを使っていましたが、数ヶ月前にLinux環境に切り替えました。

使用環境が安定してきたので、利用環境構築の備忘録として使用中のソフトとインストール方法を簡単にまとめました。

# 利用環境紹介

## OS

### Ubuntu 18.04
ディストリビューションは特にこだわり無いため、シェアの高いものを選びました。
デスクトップ環境ですが、低スペックPCの再利用などの用途では無いため、デフォルトのGNOMEを使っています。

最小設定でインストールしました。

パーティションも、デフォルト設定です。
500GBのSSDなので、
ブートローダー用の「EFIシステムパーティション（/boot/efi）」が500MBほど、
残りがルート（/）領域で設定されました。

## 外観/Ubuntuの設定

標準の設定ツールではテーマやフォントの変更ができないため、tweakをインストールします。

Ubuntu標準のソフトウェア管理ツール「Ubuntu software」でインストールするか、下記コマンドでインストール

```bash
sudo apt install gnome-tweaks
```

### テーマ

下記のように設定しました

- アプリケーション：materia-dark
- カーソル：paper
- アイコン：paper

```bash:テーマインストール
sudo add-apt-repository ppa:dyatlov-igor/materia-theme
sudo apt update
sudo apt install -y materia-gtk-theme
```

```bash:アイコンインストール
sudo add-apt-repository -u ppa:snwh/ppa
sudo apt install -y paper-icon-theme
```

### フォント

Ricty Diminishedをインストールしました。

```bash:インストール
sudo apt install -y fonts-ricty-diminished
```

設定はとりあえず下記の感じに
![Screenshot from 2019-11-30 20-42-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536139/f5789eb4-06c1-5716-d866-2ba859db5b0a.png)

### アプリ切り替えをウィンドウ単位に変更

デフォルトでは「Alt+Tabキー」での切り替えがアプリ単位となる。
Windowsと同じように、ウィンドウ単位での切り替えとなるよう、設定画面からキーバインドを変更する

設定ツールを開き、「Device」→「Keyboard」の中の「Switch Windows」に「Alt+Tabキー」を設定する

### 日本語環境のインストール

こちらを[参考](https://www.karelie.net/install-ibus-mozc-1804/)にインストールしました。

普通にaptからインストールすると、日本語切替時のデフォルトが英語モードとなったり、辞書の性能が低かったりします。

日本語の変換は```Super(Win)+Space```となっています。

## ターミナル/シェル

### terminator
ターミナルエミュレータにterminatorを設定しました。

```bash:インストール
sudo apt install -y terminator
```

ほぼこちら方の設定をそのまま使っています。[参考リンク](https://qiita.com/SUZUKI_Masaya/items/ddc9bcfaf6b09708fe32)

また、下記を追加で設定しました。

- hide_windowのショートカットキーを「Ctrl+T」に変更
- 設定の「一般」タブの「フォーカスから外れたら隠す」にチェックを入れる

コマンドが必要なときだけ「Ctrl+Tabキー」を押してターミナルで操作し、「Alt+Tabキー」などでエディタに戻ると自動でターミナルが閉じてくれます。

### fish
シェルはfishを使っています。
コマンドやディレクトリ名の補完機能が便利です。

bashと書式が違うため、bashのスクリプトでは動かないものがあったりしますが、ほぼ初期状態で十分使えるのがおすすめです。
テーマはシンプルな「clearance」に設定しました。

また、aliasなどをbashで設定し、```.bashrc```の末尾に"exec fish"を記載してbash経由で起動しています。

```bash:.bashrc
...
exec fish
```

- fishのインストール  
インストールは公式の情報を[参考](https://github.com/fish-shell/fish-shell)にしました。

```bash
sudo apt-add-repository ppa:fish-shell/release-3
sudo apt-get update
sudo apt-get install fish
```
- fishermanのインストール  
プラグイン管理のツールもインストールします。（[参考](https://github.com/jorgebucaran/fisher)）

```
curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
```

- テーマの変更  
テーマはシンプルな「clearance」をインストールしました。

```bash
fisher add oh-my-fish/theme-clearance
```

- プラグイン：bassのインストール

fishでbashコマンドを使えるようにするためのプラグインです。

```bash:インストール
fisher add edc/bass
```

bashのスクリプトも下記のように動かすことができます。

```bash
bass test.sh
bass source config.sh
```

- プラグイン：pecoのインストール

pecoは入力された一覧から絞り込み検索と、選択ができるようになるツールだそうです。([参考](https://qiita.com/xtetsuji/items/05f6f4c1b17854cdd75b))

いろいろな用途があるようですが、今回はhistoryの検索を設定しています。

```bash:インストール
sudo apt install peco
fisher add oh-my-fish/plugin-peco
```

下記設定ファイルに追加

```bash:~/.config/fish/config.fish
function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
end
```

設定の反映

```bash
 source ~/.config/fish/config.fish
```

## キーバインドの設定

### Xkeysnail
カーソルキーの移動などを設定したかったので、キーリマップツールを設定しました。

### インストール方法
[公式ページ](https://github.com/mooz/xkeysnail)を参照してください。

__① インストール__

```bash
sudo apt install python3-pip
sudo pip3 install xkeysnail
```

__② 設定ファイルを```~/.Xkeysnail/config.py```に保存する__

自分用の設定をこちらに保存
https://github.com/odaryo/my_xkeysnail_config

__③ 起動__

```bash
sudo xkeysnail ~/.Xkeysnail/config.py
```

エラーが起きる場合は下記を実行した後に、上記コマンドを実行してください

```bash
xhost +SI:localuser:root
```

### PC起動時に実行する方法

コマンドを毎回打つのは面倒なので、自動起動の設定を行います。
デーモン化させる方法がいくつか紹介されていましたが、自分の環境では頻繁に停止して、その度に再実行が必要でした。

そのため、```.bashrc```に起動コマンドを書いて起動させる方法で設定します。

__① xkeysnailをパスワード無しでsudo実行させる__

visudo で下記を追記します。
※ちなみに、私の環境では```/usr/local/bin/xkeysnail```にインストールされていました。

```bash
// 設定を開く
sudo visudo

// 下記行を追加
user_id ALL=NOPASSWD: /usr/local/bin/xkeysnail
```

__② ```.bashrc```に自動起動の設定を記載__

```bash:.bashrc
if [ -z `pgrep xkeysnail` ]; then
  xhost +SI:localuser:root
  sudo xkeysnail /home/user_id/.Xkeysnail/config.py -q > /dev/null &
fi
```

※起動中の確認にpgrepを利用しましたが、他に良い方法があるかも知れません。


## エディタ

### vim
ちょっとした設定変更に利用。
カーソル移動でABCDのような記号が入力されるようになったため、設定します。
```~/.vimrc```に下記を追加して保存

```bash:.vimrc
set nocompatible
```

### nano
同じくターミナル上での編集用に利用


## 開発ツール
下記のものをインストールして使っています。

### git
言わずと知れたバージョン管理ツール

クライアントはコマンドラインとPhpStormを使っています。

### ssh
最小構成では入っていないため、後から入れる必要があります。

```
$ sudo apt install openssh-server
```

とりあえずrootログインとパスワードログインを無効化

```bash:/etc/ssh/sshd_config
PasswordAuthentication no
PermitRootLogin no
```

### Docker/docker-compose
開発環境はほぼDocker内に設定しています。

公式サイトに従ってインストール

[Docker](https://docs.docker.com/install/linux/docker-ce/ubuntu/)
[Docker Compose](https://docs.docker.com/compose/install/)

ちなみに、docker-composeを毎回打つのは面倒なので、下記エイリアスを設定しています。
（２番めは本番環境用ファイルの起動用）

```bash:.bashrc
alias doc='docker-compose'
alias docp='docker-compose -f prod.docker-compose.yml'
```

### PhpStorm
IDEはJetBrain派です。

最近Intellij IDEAにマイグレートしました。
PhpStormからIntelliJ IDEAは契約期間を引き継いでマイグレートできるみたいですね。

特に設定しなくても便利に使えます。
DB閲覧やGit管理など、ほぼこれ1つで完結します。

バージョンなどは[Toolbox App](https://www.jetbrains.com/ja-jp/toolbox-app/)を使ってインストールして管理しています。

設定は、ファイルにエクスポートしてクラウドに保存しています。
（設定はアカウントに紐付けて自動同期を行えば楽なのですが、他PCにインストールしたときにすべてのPCの設定が初期状態に上書きされたりと、管理方法が良くわかりませんでした。）

### VSCode
Microsoft製のIDE
主にメモ書きくらいしか使っていない・・・

リモートデベロップなど便利な機能があるため使ってみたいと思いつつそのままに。

余談ですがIntelij系をメインにする問題は、後輩とかにVSCodeのショートカットキーを聞かれたときに即答できない。

### Node.js

ホストにはあまりものを入れたくないのですが、IDEからLintツールで整形するときなど、コンテナ内だとうまく設定できなかったためホスト側に入れています。

nvmからインストールしました。

```bash:インストール
// nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

// Node.jsのインストール
nvm install --lts

// ついでにyarnもインストール
npm install -g yarn
```

## リモート環境

### Chrome Remote Desktop

自宅外から操作する際にChromeリモートデスクトップを使っています。
VPN張ってVNC接続よりも簡単にできるのが良いです。

設定は下記の記事を参考にしました。

[Ubuntu へ Chrome Remote Desktop を使ってMacからリモート接続](https://qiita.com/k_ikasumipowder/items/c173fb92cf12c75b2375)
引用元： [How to Install Chrome Remote Desktop on Ubuntu 18.04](https://medium.com/@vsimon/how-to-install-chrome-remote-desktop-on-ubuntu-18-04-52d99980d83e)

ほぼ書いてあるとおりに設定しております。

記事から変更した点はこちら

- リモートデスクトップアプリがサポート終了したため、Webアプリ版をインストール
    - https://remotedesktop.google.com/
- .chrome-remote-desktop-sessionの内容を下記に設定
    - （X環境はデフォルトのままGnomeを使っています）

```bash:.chrome-remote-desktop-session
exec /usr/sbin/lightdm-session "gnome-session --session=ubuntu"
DESKTOP_SESSION=ubuntu XDG_CURRENT_DESKTOP=Unity XDG_RUNTIME_DIR=/run/user/$(id -u) exec /usr/sbin/lightdm-session 'gnome-session --session=ubuntu'
```

- Windowsキーを右Ctrlに変更
    - デフォルトだとWindowsキーがホスト側に反応してしまうため、右CtrlをWindowsキーにマッピングしました  
![keymap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536139/0dfffd2e-cbb4-e6d0-a749-757051e607fb.png)

- 使ってみての感想
    - 簡単に設定できるのが良い
    - レスポンスや描画速度は申し分ない上に無料
    - Teamviewerよりも早い（気がする）上に、商用利用も問題無さそう
- 設定がわからなかった所
    1. キーボードレイアウト変換方法
        - ホストのキーボードは英語配列のものを使っているのですが、クライアントPCが日本語キーボードの場合に英語キーボードと認識されてしまいます。
        - 特に押せないキーは無いようなのでそのまま使っています
    1. ホストがマルチディスプレイの場合に全ディスプレイが表示されてしまう（ブラウザの中に全画面が横並びで表示される）
        - ググったら設定欄にディスプレイの選択メニューがあるようですが、私の環境では表示されませんでした。
        - ホストの設定の問題？

# 終わりに

IDEの設定は省いていますが、一通り開発できる環境が整いました。
今後、もっと良いツールがあれば追記していく予定です。