Github desktop を Ubuntu(wsl2) 上で使いたい

## 背景
WSL2 上で開発してるけど、git コマンド各種を打つのが面倒
慣れた GUI でやりたいなと思ったから

## 参考
まんまこれ。備忘のために詳細を記載する
https://qiita.com/taketori98/items/334af2a3437596f5f55c
https://github.com/shiftkey/desktop
https://postgresweb.com/install-google-chrome-ubuntu-20-04
https://astherier.com/blog/2021/07/windows11-wsl2-wslg-japanese/

## 環境メモ
Windows 10
WSL2/Ubuntu

## Github Desktop をインストール
https://github.com/shiftkey/desktop の README を参考にインストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/c02982a9-c696-233b-b2a6-30e7d0c6911e.png)

#### (1) @shiftkey packege feed の公開鍵の登録、リポジトリを追加

```bash
wget -qO - https://apt.packages.shiftkey.dev/gpg.key | gpg --dearmor | sudo tee /usr/share/keyrings/shiftkey-packages.gpg > /dev/null
```
```bash
sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/shiftkey-packages.gpg] https://apt.packages.shiftkey.dev/ubuntu/ any main" > /etc/apt/sources.list.d/shiftkey-packages.list'
```

#### (2) インストール

```bash
sudo apt update && sudo apt install github-desktop
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/8e3c76b5-3ab0-be24-7430-d9ba46d7b597.png)

#### (3) 起動

```bash
github-desktop
```

Unlock keyring でたらスーパーユーザーの Password を入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/8d3a859a-1595-3a49-c376-b186dbe23a1f.png)


無事に起動した

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/36875984-20e4-feea-7bc0-637aca6cacc7.png)


#### (4) 終了

終了するときは右上の「×」で閉じる


## Google Chrome をインストール

あとで認証が面倒らしいのでブラウザもインストールする

#### (1) リポジトリの追加と公開鍵のダウンロードと登録

```bash
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
```

```bash
sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
```

#### (2) インストール

```bash
sudo apt update && sudo apt install google-chrome-stable
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/a49e28ff-fbb3-7760-2111-953568fceabf.png)

#### (3) 起動

```bash
google-chrome
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/8e8a0a9a-ed3e-6238-7d1f-d89d99416630.png)

#### (4) 終了

終了するときは右上の「×」で閉じる

## 既存のリポジトリを追加する

#### (1) [Add an Existing Repository from your local drive...] を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/7bed05e2-b87d-a5b6-5801-668ea5c5c253.png)

#### (2) [Choose...] を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/d731be1b-5c60-1667-a1e7-5bd0f89d65fe.png)

#### (3) 既存の git ディレクトリを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/6427ac11-7ce8-124e-edf7-32f4c1e472bb.png)

#### (4) [Open] を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/785d4c01-c48b-905c-f0f7-f2d007b40f9c.png)

#### (5) [Add repository] を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/8161ff7a-c7fc-d06d-ef6f-5b315bc46b37.png)

#### (6) リポジトリが表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/e055f439-2599-9576-27ca-5e3c9cc13902.png)



## 日本語化する

このままだと、History など日本語が化けて表示される。ので、日本語化する。

#### (1) Ubuntu を起動する


#### (2) シェルスクリプトをダウンロードする

日本語化の bash を提供してくださっている親切なサイト様より拝借して対応しましょう。

````bash
wget https://astherier.com/static/blog/2021-07-11/japanize-wslg.sh
````

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/2ec8b02b-16e1-b72a-c3cd-0f3f6d71c235.png)

#### (3) シェルスクリプトを実行する

```bash
bash japanize-wslg.sh
```

実行するといろんなものをとってきてくれる。
終了するとこんなメッセージが表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/1068623b-07de-ce41-8f21-971499c2ee0a.png)

#### (4) PowerShell もしくは コマンドプロンプトなどを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/0e44a7e5-b6e2-0ede-a12e-c1425be7aa9b.png)



#### (5) WSL2 の再起動を行う

```bat
wsl -t Ubuntu
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/a19083b8-b958-85ec-f942-af3f5a68041e.png)

> いま自分がインストールしているのが何か分からないときは `wsl -l` で確認できる

#### (6) PowerShell もしくは コマンドプロンプトなどを閉じる

```bat
exit
```

もしくは右上の「×」ボタンを押下

#### (7) Ubuntu を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/50109292-327e-6ccd-e642-f191551865f7.png)

#### (8) fcitx-config-gtk3 を実行する

```bash
fcitx-config-gtk3
```

#### (9) Mozc になっていることを確認する（設定済みのはず）

1. 「入力メソッド」タブにおいて、Mozcが指定されていることを確認する
1. 「全体の設定」タブにおいて、Trigger Input Method に Zenkakuhankaku が指定されていることを確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/fcb68f4d-a80a-395d-ae3f-2db087ae7cb2.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/8ef33fc6-1cd0-ecba-a72d-9e2269c5becc.png)


#### (10) 右上の「×」ボタンを押下して、fcitx-config-gtk3 を終了する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/fa1fec50-263c-191f-745e-b96db38b1cf7.png)

#### (11) Github Desktop を起動する

```bash
github-desktop
```

#### (12) History などが文字化けしていないことを確認する

フォントも変わったりしている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/03643d9a-dc4b-5c14-cd4a-4e95e2266c73.png)

## Github との接続を SSH 化する

上手く Github Desktop から Pull や Push ができなかったので SSH 化してみたという備忘。
<!> すでに、CUI でリポジトリを HTTPS で Clone した前提で記載しています。

#### (1) Ubuntu を起動

#### (2) SSH の公開鍵と秘密鍵を作成する

```bash
ssh-keygen -t rsa
```

#### (3) 途中聞かれるものはすべて Enter を押して、そのまま進める

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/9981d338-f9d4-08a9-9538-2d4bb7db3115.png)

> 説明が面倒なので、一旦、上記でやります

#### (4) SSH キーが生成されたディレクトリへ移動する

```bash
cd ~/.ssh
```

> (3) で生成先を変更していなければたぶんココ

#### (5) 生成された公開鍵を確認して、コピーする

```bash
cat id_rsa.pub
```

> 表示された「ssh-rsa AAAAAAAAAAAAAAAAAAA....AAAAAAAAAAAAAAA」をコピーする

#### (6) Github の SSH 設定ページを開く

SSH and GPG keys: https://github.com/settings/keys

> ブラウザでログインしていれば、直接上記 URL から遷移できます。

#### (7) [New SSH Key] ボタンを押下する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/4e16c868-9409-4ffd-e593-c07f285747ef.png)

#### (8) Add new SSH Key 画面が開くので、Title を適当に入力する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/0f2320fe-9c4f-49bf-8dc6-73a4b02eeff2.png)

#### (9) Key type は「Authentication Key」を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/7fa39d8a-f511-4014-ce47-e9dbaf447601.png)

#### (10) 先ほどコピーした公開鍵（ssh-rsa AAAAA....AAA）を貼り付ける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/000c59bd-eb2c-a3d8-93ea-71ec3acdc300.png)

#### (11) [Add SSH Key] ボタンを押下する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/25cdbc83-caa0-dbe9-6e73-b360e356d6eb.png)

#### (12) Ubuntu のコンソール画面に戻り、SSH 接続できているか確認する

```bash
ssh -T git@github.com
```

> `Hi <ユーザー名>! You've successfully authenticated, but GitHub does not provide shell access.`と表示されれば接続できている

#### (13) リポジトリのフォルダに移動する

例えば、`/home/<username>/work/<git-repository-name>` フォルダで作業している場合

```bash
cd /home/<username>/work/<git-repository-name>
```

> `<username>` や `<git-repository-name>` などは環境にあわせて変更してください

#### (14) `.git` フォルダに移動する

```bash
cd .git
```

#### (15) `config` ファイルをエディタで開く

```bash
vi config
```

もしくは、Windows 側から VScode などで開くなら、下記ファイルパスを開く

```cmd
\\wsl.localhost\Ubuntu\home\<username>\work\<git-repository-name>\.git\config
```

#### (16) 取得先の url 部分を SSH のパスに書き換える

多分 HTTPS が書いてあるから、冒頭の `https://` を `git@` に書き換えて、途中の `/` を `:` に書き換えるといいと思っている

正しい SSH の接続先はリポジトリの下記から取得できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/88753ec8-7f6b-00f9-86cd-a22ca0328a93.png)


修正前：
```bash
[remote "origin"]
        url = https://github.com/<organization>/<repository-name>.git
        fetch = +refs/heads/*:refs/remotes/origin/*
```

修正後：
```bash
[remote "origin"]
        url = git@github.com:<organization>/<repository-name>.git
        fetch = +refs/heads/*:refs/remotes/origin/*
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81548/17d8cbc6-dfe4-6f2b-71a3-c03b3fba6175.png)

#### (17) Github Desktop を起動して、Push / Pull などができるかを確認する

```bash
github-desktop
```
> ちなみに末尾に `&` をつければ、バックグラウンドで実行できる
> ```
> github-desktop&
> ```