Ubuntu Desktop 20.04 の開発環境の構築メモ

はじめに

開発環境としての Ubuntu Desktop 20.04 LTS 日本語 Remix のインストールメモです。
基本的には「Ubuntu Desktop 18.04 開発環境の構築メモ」とほぼ同じです。

インストール先のマシンは以下です。

• ThinkPad T480s

手順

Ubuntu Desktop 18.04 をインストール後に、以下の手順でアップグレード。

sudo apt update
sudo apt install update-manager
sudo apt dist-upgrade
sudo do-release-upgrade -d -f DistUpgradeViewGtk3

ホームディレクトリ内の日本語のディレクトリ名を英語に変更

「端末」から以下のコマンドを実行。

$ LANG=en_US.utf8 xdg-user-dirs-gtk-update

そして、上記実行後に「Update standard foloders to current language?」というウィンドウが出たので、「Update Names」ボタンを押下。

左 Ctrl キーと Caps Lock キーの入れ替え

以下を読みながら、いい感じにインストールしました。Emacs Input は OFF のままに。

• Docker で開発するなら Linux 使おう - キーボードレイアウト変更

システム時刻を UTC 管理から LocalTime 管理に変更

• ubuntuとwindowsをデュアルブートしたとき時間がずれたらこれを打つ
• マルチブート時の時刻設定

Windows 10 と Ubuntu のデュアルブート環境の場合、現状のこのままだと、Windows を起動すると、システム時刻が-9hになる。

以下のコマンドを実施して、Ubuntu のシステム時刻管理を LocalTime にする。

$ timedatectl status | grep local
      RTC in local TZ: no
$ sudo timedatectl set-local-rtc true
$ timedatectl status | grep local
      RTC in local TZ: yes
Warning: The system is configured to read the RTC time in the local time zone.
     'timedatectl set-local-rtc 0'.

Google Chrome のインストール

$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ sudo dpkg -i google-chrome-stable_current_amd64.deb

Slack のインストール

以下サイトから deb ファイルをダウンロードする

• Slack

その後、以下でインストール。

$ sudo apt install gconf2 gconf-service
$ sudo dpkg -i slack-desktop-4.0.2-amd64.deb

Hyper のインストール

以下サイトから deb ファイルをダウンロードする

• Hyper

その後、以下でインストール。

$ sudo apt install libappindicator1
$ sudo dpkg -i Downloads/hyper_3.0.2_amd64.deb

fish のインストール

参考記事: fish shellが結構良かった話

$ sudo apt install fish
$ fish
$ fish_config

ブラウザで fish shell configuration が表示されるので、「prompt」で「Informative Vcs」を設定。
そして、~/.bashrc に以下を追記。

exec fish

対話式で bash を使いたい場面があったときに、上記設定をすると bash を実行しても fish が起動してしまうため、対話式で bash 　を fish 内で使うときは ~/.bashrc を読み取らないように ~/.config/fish/config.fish に以下を追記。

alias bash="bash --norc"

fisher をインストール。

$ sudo apt install curl
$ curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish

Emacs のインストール

以下のように Emacs 27 をインストール。(※)

$ sudo snap install --classic --beta emacs 
$ sudo apt install emacs-mozc-bin
$ sudo apt install silversearcher-ag

.emacs を以下のように設定。

; package.el
(require 'package)
;; MELPAを追加
(add-to-list 'package-archives '("melpa" . "https://melpa.org/packages/"))
;; MELPA-stableを追加
(add-to-list 'package-archives '("melpa-stable" . "https://stable.melpa.org/packages/"))
;; Marmaladeを追加
(add-to-list 'package-archives  '("marmalade" . "https://marmalade-repo.org/packages/"))
;; Orgを追加
(add-to-list 'package-archives '("org" . "http://orgmode.org/elpa/"))
;; 初期化
(package-initialize)


; 細かい設定
;; site-lisp path
(add-to-list 'load-path "~/.emacs.d/site-lisp")
;;not make backup files
(setq make-backup-files nil)
;; tab width 2
(setq-default tab-width 2 indent-tabs-mode nil)


; twittering-mode
(load "twittering-mode")
(setq twittering-allow-insecure-server-cert t)
(setq twittering-use-master-password t)


; web-mode
;; https://qiita.com/kwappa/items/6bde1fe2bbeedc85023e
;; どの拡張子を web-mode で開くかを指定
(add-to-list 'auto-mode-alist '("\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css$" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js[x]?$" . web-mode))
;; 拡張子 .js でもJSX編集モードに
(setq web-mode-content-types-alist
      '(("jsx" . "\\.js[x]?\\'")))
;; インデント
(add-hook 'web-mode-hook
          '(lambda ()
             (setq web-mode-attr-indent-offset nil)
             (setq web-mode-markup-indent-offset 2)
             (setq web-mode-css-indent-offset 2)
             (setq web-mode-code-indent-offset 2)
             (setq web-mode-sql-indent-offset 2)
             (setq indent-tabs-mode nil)
             (setq tab-width 2)
          ))


;日本語入力
;; https://qiita.com/Maizu/items/fee34328f559c7dc59d8#emacs-mozc
;;半角全角キーで日本語入力をすると、日本語入力モードで `Ctrl + [なにか]` をやるときにうまく動作しない。
;;また、`Ctrl + \` での日本語入力モードだと、「ん」を入力するときにうまくいかない。
;;上記を解決するために emacs-mozc をインストールする。
(require 'mozc)                                 ; mozcの読み込み
(set-language-environment "Japanese")           ; 言語環境を"japanese"に
(setq default-input-method "japanese-mozc")     ; IMEをjapanes-mozcに
(prefer-coding-system 'utf-8)                   ; デフォルトの文字コードをUTF-8に(require 'mozc)
(custom-set-variables
 ;; custom-set-variables was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 '(package-selected-packages (quote (mozc))))
(custom-set-faces
 ;; custom-set-faces was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 )


; Helm
;; https://qiita.com/jabberwocky0139/items/86df1d3108e147c69e2c
(require 'helm-config)
(helm-mode 1)
(global-set-key (kbd "M-x") 'helm-M-x)
(global-set-key (kbd "C-x b") 'helm-mini)
(global-set-key (kbd "C-x C-f") 'helm-find-files)
;; rebind tab to run persistent action
(define-key helm-map (kbd "<tab>") 'helm-execute-persistent-action)
;; make TAB work in terminal
(define-key helm-map (kbd "C-i") 'helm-execute-persistent-action)
;; list actions using C-z
(define-key helm-map (kbd "C-z")  'helm-select-action)

; Helm-ag
;; 事前準備: sudo apt install silversearcher-ag
;; M-x helm-ag

M-x package-list-packages で以下をインストールする

• mozc
• twittering-mode
• web-mode
• helm
• helm-ag

※ $ sudo snap install emacs --classic で実行すると Emacs 26 がインストールされるが、M-x package-list-packages の実行で Segmentation fault で落ちる問題にぶつかった。(解決のために参考にしたIssue)

PhpStorm のインストール

(導入部分未記載)

プラグインは以下を入れている。

• .env files support
• GitLink

nvm のインストール

以下のコマンドを実行して nvm をインストール。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
$ fisher add jorgebucaran/fish-nvm 

Node.js と npm をインストール。

$ nvm use 12.11.0
$ node -v
v12.11.0
$ npm -v
v6.11.3

Yarn のインストール

「インストール|Yarn」を参考にしてインストール。

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn

tldr コマンドのインストール

$ npm install -g tldr

Java のインストール

OpenJDK 11 のインストール

$ sudo apt install openjdk-11-jdk

git の設定

$ sudo apt install git
$ git config --global user.name "ユーザ名"
$ git config --global user.email "メールアドレス"
$ git config --global core.editor "emacs"

ssh の設定

ファイルサーバーからGitHub の秘密鍵を ~/.ssh にコピーする。
その後、以下のコマンドを実行して、オーナーユーザーの読み取り権限のみを秘密鍵に設定。

$ chmod 400 ~/.ssh/id_rsa

パスフレーズを毎回入力しなくて済むようにする

$ ssh-add ~/.ssh/id_rsa
$ ssh-add -l

Docker のインストール

以下を読みながら、いい感じにインストールしました

• Get Docker Engine - Community for Ubuntu

PHP のインストール

$ sudo apt install php
$ php -v
PHP 7.4.3 (cli) (built: May 26 2020 12:24:22) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.3, Copyright (c), by Zend Technologies

Peek のインストール

デスクトップ画面を GIF キャプチャできるように Peek をインストールします。

$ sudo add-apt-repository ppa:peek-developers/stable

$ sudo apt update
$ sudo apt install peek

参考資料
GIF形式でのキャプチャが簡単にできるPeekをUbuntuにインストールする手順と使い方

Ruby のインストール

$ apt install ruby
$ gem install bundler

Python のインストール

$ apt install python