余ったWindowsPCをUbuntu 20.04.2 LTSで開発用PCとして生まれ変わらせる[開発環境]

## はじめに
- 開発環境をDockerで構築して作業を行うことになった
- MacよりもUbuntuの方がDocker早く動くよ？という誘惑
- 偶然にも自宅で余らせていたWindowsPCがある

これらの条件が重なり、Ubuntu環境構築することに。
WindowsOSだともっさりしすぎていて使い物にならないので、生き返らせてあげたい...！

ちなみに2018年に更新された下記記事を参考にしながらインストールしてみたので、近しい内容ですが2021年時点で動く情報、Noumiの好みの設定をお届けします。
[WindowsにUbuntuをインストールするのは気持ち良いゾイ!!~導入編~](https://qiita.com/kaitaku/items/4132e552a615a050a841)

## 今回の開発用PCの要件

- Dockerが快適に動くこと
- VSCodeで開発できること

## 利用技術・ツール
- OS: Ubuntu 20.04.2 LTS
- OSインストール: Rufus
- IDE: VSCode
- ブラウザ: Chrome
- デスクトップ: GNOME
- Firewall: GUWF

## 完成画面
![スクリーンショット 2021-09-26 0.11.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/6da30cc9-0586-81d8-e1c4-70cd7ea7c5bf.png)


※作業はWindowsのパソコンを利用します。ソフトもWindowsのものを利用しているので、他のOSで作業する場合は各自該当するものを探して利用してください。
## Ubuntuインストール用USBフラッシュドライブの用意
### Ubuntuのisoイメージのダウンロード

下記よりisoイメージをダウンロードします。
僕は安定版のLTS(Long Term Support)を選んでダウンロードしました。
[Ubuntu Desktop 日本語 Remixのダウンロード
](https://www.ubuntulinux.jp/download/ja-remix)

### isoイメージを起動するUSBドライブ(ライブUSB)を作成する

下記から起動用USBドライブ作成ソフトをダウンロードします。
[Rufus 起動可能なUSBドライブを簡単に作成できます](https://rufus.ie/ja/)

ダウンロードしたexeファイルを起動します。
USBフラッシュドライブ（USBメモリなど）をパソコンに指して、それをドライブプロパティの「デバイス」に指定します。

ブートの種類には右側の「選択」ボタンから先程ダウンロードしたisoイメージを選択します。

最後に一番下の「スタート」ボタンを押して、書き込みを開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/b08a6319-8b0b-e04c-deb1-349969eb75a4.png)

## Ubuntuをインストールする
### BIOSあるいはUEFIの設定画面を開く
書き込みが完了したら、UbuntuをインストールするPCを電源が入っていない状態で用意します。
UbuntuをインストールするPCでBIOSあるいはUEFIの設定画面を開きます。

マザーボードごとにキーが違うらしいので、電源入れた直後自分の環境にあったキーを押してBIOS画面を開いてください。

```
1. 「Del」キー　ASUS
2. 「F2 」キー　Intel
3. 「Del」キー　Giga-byte
4. 「Del」キー　ESC
5. 「F2 」キー　ASROCK
6. 「Del」キー　MSI
```
※F7、F10、F11などのパターンもあるみたいです。

BIOS画面になったらUSBデバイスから起動する指示をする必要があります。
`操作は矢印キーで移動、決定はEnter、キャンセルはEsc`

直接起動デバイスを選択できるものはそのままUSBデバイスを選んで起動してください。
そうでない場合は、Bootタブを選択します。そこでUSB起動の選択肢があればそれを選んでください。
それも見つからない場合は、Bootの優先順位を変更する項目があるので、そちらを変更で行けるはずですｂ

### Ubuntuインストール設定
一度画面が暗転しますが、Install Ubuntuの選択肢が出てくるのでそれを選択し、そのまま好きな設定で進めます。
途中で出てくる「アップデートと他のソフトウェア」は「通常のインストール」がおすすめです。

その他のオプションに関しても特殊な使い方をしない限り、下記をチェックする設定が一番ラクかと思います。
- Ubuntuのインストール中にアップデートをダウンロードする
- グラフィックスとWi-Fiハードウェアと追加のメディアフォーマットのサードパーティ製ソフトウェアをインストールする

設定項目の参考はこちら。https://linuxfan.info/ubuntu-20-04-install-guide

インストールが完了し再起動を促されたら、Ubuntuインストール用のUSBを抜いて再起動を行ってください。
再起動後は登録したユーザ名/パスワードでログインできます。簡単！
その後の設定は後でアプリを開いて設定できるのでスルーしても大丈夫です。

## Ubuntuを使う前に抑えて置きたい設定・更新
### パッケージ管理システムAPTの更新
APT (Advanced Packaging Tool、あるいは Advanced Package Tool)の状態を最新に更新します。
セキュリティ観点からも出来る限り最新にしておくことが望ましいはず。下記コマンドを実施してください。

```
sudo apt update
sudo apt upgrade
```

### Firewallの設定
uwfをCUIで設定しても良いのですが、せっかくGUIなので「Firewall Configuration」を使います。
Ubuntuソフトウェアで「guwf」で検索すると一番上に出てきます。

使うツールややりたいことによって設定を変更すると思いますが、基本は下記設定にしておきます
- ステータス:オン
- 受信：Deny
- 送信：Allow

参考:[ファイアーウォールの設定をする - Ubuntu 20.04編
](https://sicklylife.jp/ubuntu/2004/gufw.html)

## 開発環境準備
### Gitインストール

```
sudo apt install git
git --version
```
最低限の設定もしておく

```
git config --global user.name 名前 　
git config --global user.email メールアドレス
git config --list
```

### SSHキー作成
せっかくなのでrsaより強固と言われているEd25519を使ってみます。

```
$ ssh-keygen -t ed25519 #SSHキー作成
Generating public/private ed25519 key pair.
Enter file in which to save the key (/Users/[ユーザ名]/.ssh/[SSHキー名]):  #作成される場所と名前。問題なければEnter。
Enter passphrase (empty for no passphrase):  #パスフレーズの入力。
Enter same passphrase again:  #パスフレーズの再入力。
$ ls ~/.ssh #SSHキーが作成されたことを確認
```

作成出来たら`id_ed25519.pub`の中身をすべてコピーして、GithubのSSH keysに登録しておきましょう。
https://github.com/settings/keys

### VSCodeインストール
参考：[UbuntuにVSCodeをインストールする3つの方法](https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8#%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B)

マイクロソフトのGPGキーを取得
```
$ sudo apt install curl
$ curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
```

microsoft.gpgが存在するか確認
```
$ ls -l
```

レポジトリ登録
```
$ sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
```

レポジトリ登録が出来たか確認
```
$ ls -l /etc/apt/trusted.gpg.d/
```

aptにvscode情報追加
```
$ sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
```

vscode情報追加出来たか確認
```
ls /etc/apt/sources.list.d/
```

aptでhttps通信できるように準備
```
sudo apt install apt-transport-https
```

リポジトリ更新
```
$ sudo apt update
```

aptのリストにvscodeがあることを確認
```
$ apt list code
```

vscodeインストール
```
$ sudo apt install code
$ code --version
```

### Dockerインストール
インストール

```
sudo apt install docker docker-compose
```
バージョン確認

```
sudo docker --version #Dockerのバージョン確認
sudo docker-compose --version #docker-composeのバージョン確認
```
毎回sudoしなくて良いようにユーザグループ追加

```
sudo groupadd docker #Dockerを操作できるユーザグループ追加
sudo usermod -aG docker $USER #ユーザグループに現在ログインしているユーザを追加
# 再起動して適応してから再度確認
```

## デスクトップ環境のカスタマイズ[準備]
あとは使ってて快適なカスタマイズをしたら開発用PC完成です。
今回はGNOMEというデスクトップ環境システムを利用します。
GNOMEを拡張するGNOME Shellという仕組みを使うのですが、Chrome拡張機能からインストールする必要があるので、まずはChromeをインストールしたいと思います。

### Chromeインストール
```
cd ~/tmp
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb
```
これでaptのリストにも追加されているので、aptコマンドでのアップデートにも対応できているようです。

### GNOME Shellインストール
下記コマンドで追加
```
 sudo apt install chrome-gnome-shell
```

### GNOME Shell integrationインストール
次にChhrome拡張でGNOME Shellを利用する為にGNOME Shell integrationをインストールします。
下記よりChromeに追加してください。
[GNOME Shell integration
](https://chrome.google.com/webstore/detail/gnome-shell-integration/gphhapmejobijbbhgpjhcjognlahblep?hl=ja)

### User Themesのインストール
「GNOME Shell テーマ」を変更する為に必要となります。
下記よりインストールしてください。
https://extensions.gnome.org/extension/19/user-themes/

### GNOME Tweaksインストール
唐突に出てきましたがこれはGNOMEのカスタマイズツールです。
デスクトップ環境の設定を変更できる便利なツールだったりします。
とりあえずコマンドを打ち込んでインストールしちゃいましょう。

```
sudo apt-get install gnome-tweaks
```

## デスクトップ環境のカスタマイズ[設定]

まずはアプリケーション全体のテーマやフォント・アイコンの変更をします。
GNOME Tweaksを開いて設定を開始します。

### 「外観」の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/124ca149-6b34-b1c2-b47e-d5f7ca827c15.png)
Adwaitaは多分元から入っていたはず・・
アイコンテーマのPapirus-Darkは下記からダウンロードしてください。
アイコンテーマPapirusはマテリアルデザインベースのかわいいアイコンなのでおすすめです。
[Papirusテーマ](https://launchpad.net/~papirus/+archive/ubuntu/papirus/+packages?field.name_filter=papirus-icon-theme)

インストール出来たら「papirus-icon-theme-master.zip」を解凍(最近は展開と言うらしい)してください。
解凍された「papirus-icon-theme-master」内にある「Papirus」フォルダを「/usr/share/icons/」フォルダにコピーします。

※別PCに同じ環境作る時にコマンドのほうが早かったのでコマンドが良いかも。
https://github.com/PapirusDevelopmentTeam/papirus-icon-theme

これで「外観」の設定は出来ると思うので画像を元に設定してみてください。

### フォント設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/7e5daa29-e94e-7b69-b5ea-c7341517083d.png)
そんなにこだわってないのですが、フォントはここで変更できます。
基本はNotoSansを選んでます。時間あるときにフォントも選定したい。

### 拡張機能追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/b675dc90-d8d3-2e20-1d85-8422b22ca73d.png)

さて、ついに楽しい拡張機能の時間です。参考までに僕の拡張機能一覧も載せておきました。
確認して雰囲気を感じながらGNOME Shell integrationを開きます。
https://extensions.gnome.org/

「拡張機能を検索...」とhintの入っているテキストボックスに入れたい拡張機能の名前を入れてバンバンインストールしちゃいましょう。

Noumiが入れている拡張機能
- User Themes by fmuellner
- Dash to Panel by charlesg99
- Applications Menu by fmuellner
- Places Status Indicator by fmuellner
- Frippery Move Clock by rmyorston
- Simple net speed by bijignome
- SysPeek-GS by eugene-rom

簡単に説明するとこんな感じ。
欲しい物だけ参考にしてみてください。

```
User Themes：既に説明した通り「GNOME Shell テーマ」を変更する為に必要となります。
Dash to Panel：よく使うアプリを置いておくドックをカスタマイズできる。トップバーに統合タイプ。
Applications Menu：過去のWindowsみたいにトップバーから種類別のアプリ一覧を表示できる。
Places Status Indicator：Macのようにトップバーから特定フォルダを直接開ける
Frippery Move Clock：何故かステータスバーの中央にある時計を右に寄せる。
Simple net speed：ステータスバーでネット回線スピードがいつでも見れる。
SysPeek-GS by eugene-rom：ステータスバーでCPU使用率がいつでもみれる。
```

Dash to Panelの設定はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/2c2b452f-9641-5965-2351-ef7f06cfbc7b.png)


初期は「Dash to Dock」を入れていたのでその設定も書いておきます。
今はWindows寄せデザインを採用していますが、Mac風にしたい方はこちらもおすすめです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/5d7293c9-4bec-abb8-7603-f449aba11803.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/acafb19b-1cd2-cbc6-7e8f-87a47d561b44.png)![image.png]
(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67805/5bd52558-f71e-8b0b-b8e7-1bfa12eb129d.png)

合わせて、トップバーの時計の表示はTweaksの「トップバー」から曜日・日時・秒を追加していたり、バッテリー残量も表示したりしています。

## 追記

Macではkarabinerでキーマップいじってたけど、UbuntuではシンプルなものならXmodmapでいけそう。
リモートデスクトップ時に案外重宝してる。
https://qiita.com/macinjoke/items/746c0c0adb74cfdeb9e7

## 開発用PC完成！
ということで、Dockerをいい感じに使うためのUbuntu環境が整いました！
デスクトップ環境などを好きにカスタマイズ出来たり、Windowsと違ってCUI環境も幸せなので、現時点最高です！

このあと、Chromeリモートアクセスを導入してどこでも開発PC使える環境を手に入れたのも快適だったので、ぜひ皆さんも試してみてください。
※リモートアクセスだとショートカットとか諸々つらい気持ちになりがちですが、全画面表示で結構解決するので全画面表示利用をデフォにするのがおすすめです。

## 宣伝
現在、誰もが快適に働けるテレワークオフィスの一元管理サービス「テレスペ」( https://telespace.jp )を作っています。

気になった方は是非気軽にお声がけください！
職種問わずランチとか行きましょう！！DMお待ちしています。

Twitterフォローもよろしくです！
[@noumi0k](https://twitter.com/noumi0k)