【起動5秒】ChromebookでVSCodeを超快適に使う

みなさん，Chromebook使ってますか？
僕はちょうど昨日から使い始めてるんですが，とても満足しています😁
ただ，VSCodeがちょっと重くて...
ということでめちゃくちゃ軽くする方法を考案してみました．

え？デベロッパーモードでごにょごにょやる？そんな複雑なことは一切致しませんよ！ちゃんと公式のLinux環境(Crostini)で動きます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/4ef22dc4-64e0-15e5-bf55-d4425cfa8c13.png)

最終的にはこんなかんじにPWAになります！

# 結論

以下のことをするだけです．

1. 何らかの方法でVSCodeをホストする
2. Chromeで開く

これだけです．Chromeが超快適に動く環境なんだから，VSCodeもChrome上で動かせば超快適なんじゃね？という発想です．

## 手段
最近現れたGitHub Codespaces(旧Visual Studio Codespaces)という公式のツールを使った方法や，VSCodeの最新ソースで`yarn web`を実行するといった方法がありますが，サブスクリプションが必要だったり手順が複雑だったりするので，今回は[code-server](https://github.com/cdr/code-server)という比較的簡単にホストできるツールを使うことにしました．

# メリット
こんないいことがありました

- とにかく軽い！！！！！！！！！
- 本家VSCodeだとタッチパネルから操作するとスクロールできなかったけど，こっちだとできる！！
- なんかタイトルバーまでダークテーマに準じててかっこいい！！
- LinuxのMozcとかに依存しない日本語！！(Chrome OSの方の入力メソッドが使えます)
- 何よりもとにかく軽い！！！！！！！

# デメリット
- 公式のVSCodeじゃないから使えない拡張機能がある...
- 今までのVSCodeの設定を引き継げない...[^5]
- てかそもそも公式のVSCodeじゃないこと自体がデメリット...


# 実際にやってみる
やってみましょう

## Linux環境をインストールする
Chrome OSにLinux環境をまだインストールしていない場合はここで準備しておきましょう．設定→Linux(ベータ版)からオンにするだけです．OSが最新でない場合は先に最新にしておくことをおすすめします[^1]．
(ここで本来であればVSCodeのために日本語のセットアップをするのですが，今回はあくまでもChrome上で動かすためしなくてもOKです)

## code-serverをインストール

先に後で使うためのツールをインストールしておきます[^2]．

```bash
$ sudo apt install screen
```

次に[cdr/code-server](https://github.com/cdr/code-server)の`README.md`に載っているコマンドを実行します．たったこれだけ．

```bash
$ curl -fsSL https://code-server.dev/install.sh | sh
```

## 実行 / 動作チェック
起動は以下．

```bash
$ screen -S codeServer code-server
```

起動したら`Ctrl + A`，次に`D`でもとの画面へ戻れます．
もし停止したい場合には以下．

```bash
$ screen -r codeServer
```
でアクセスした後に`Ctrl + C`．

デフォルトでは[localhost:8080](http://localhost:8080)でホストしていると思うので，アクセスしてみます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/25b54c35-90e0-1c3c-20b9-614a09e49b0f.png)

初回ではパスワードを要求されます．`~/.config/code-server/config.yaml`に載っているそうなので確認してみましょう．

```bash
$ cat ~/.config/code-server/config.yaml
```
↓結果

```
bind-addr: 127.0.0.1:8080
auth: password
password: xxx
cert: false
```

`pasword: xxx`の`xxx`がパスワードです．もしこの認証方法に不安があれば後で変えておきましょう．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/4f2278e5-d8bb-13b9-72ae-bf217e28d188.png)
こんな感じに出てくればOK．最低限は完了しました．

# もっと使いやすくする
上の方法でも十分ですが，毎回`code-server`実行したり`localhost:8080`を入力する必要があります．もっといろいろ便利にしたいですよね？ということでいくつか．

- アプリ一覧に追加する / アプリっぽく表示する(PWA化)
- VSCode本家のアイコンにする(`manifest.json`編集)
- ホスト鯖の起動を自動化
- [カスタムフォント(firacode, powerline)の適用(別記事)](https://qiita.com/BonyChops/items/2f78ec57d55db63cb7e3)

## アプリ一覧に追加する / アプリっぽく表示する(PWA化)
といっても実はもとからPWAに対応しているのでクリックするだけです．うれしいね😁
ただし**VSCode本家のアイコン**にする場合は**ここでインストールを実行しないでください**(仮にしちゃってもそこまで問題ではない．対処法は後述)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/9c2f60c0-45cd-90a2-3c1c-18acf76ca555.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/6cd766cb-6cb7-adcb-78f7-facf7187a05f.png)

いい感じの見た目になってくれます．


## VSCode本家のアイコンにする(`manifest.json`編集)

code-serverさんのアイコンも素敵ですが，せっかくなら本家VSCodeのアイコンと名前を使いたいですよね？ということで`manifest.json`をいじって変えてみましょう．
`manifest.json`は`/usr/lib/code-server/src/browser/media`にあります．
(ついでにバックアップも取ります)

```bash
$ cd /usr/lib/code-server/src/browser/media
$ sudo cp manifest.json manifest.json.old
```

次にVSCodeのアイコンを探してきます．直リンがある場合は以下のコマンドが便利です．このときファイルはPNGのものを選んでください[^3]．ダウンロードしたら`vscode.png`に名前を変えます．
以下は`vscode.png`としてファイルをダウンロードするコマンド．

```bash
$ sudo wget -O vscode.png {アイコンのリンク.png}
```

`manifest.json`を編集します．僕が作ったやつはこれです．

```manifest.json
{
  "name": "Visual Studio Code Lite",
  "short_name": "VSCode Lite",
  "start_url": "{{BASE}}",
  "display": "fullscreen",
  "background-color": "#fff",
  "description": "Start VSCode on a remote server.",
  "icons": [
    {
      "src": "{{CS_STATIC_BASE}}/src/browser/media/vscode.png",
      "type": "image/svg+xml",
      "sizes": "48x48 72x72 96x96 128x128 256x256 512x512 1024x1024"
    }
  ]
}
```
GitHub Gistは[こちら](https://gist.github.com/BonyChops/45ec811fc48d173548c2171d7508147b)

自分で作るのが面倒であれば僕のファイルを直接落としてください．

```bash
$ sudo wget -O manifest.json https://gist.github.com/BonyChops/45ec811fc48d173548c2171d7508147b/raw/
```

これで完了です．`localhost:8080`を開いて確かめてみましょう．code-serverを再起動する必要はありません．
このとき，すでにインストールを行ってしまった場合は，一度`code-server`を**アプリ一覧から[^4]**アンインストールし，`Ctrl + Shift + R`です．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/edb4846b-392d-eeda-77c2-96d020b1b044.png)




### 変更が反映されない！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/1d502e33-2036-e91d-7dda-8d5aac7c9b79.png)


もしまだこのように変更が反映されていなければ，一度Chromeのキャッシュを更新してあげる必要があります．

`Ctrl + Shift + I`，または，右上の三点リーダー(︙)→その他のツール→デベロッパーツールより，`manifest.json`を探します．
見つけたらリンクを右クリックして`Open in new tab`．そして出てきたタブで再読み込みをすると変更が反映されると思います(されなかったら`manifest.json`が本当に変更できていません！やりなおしてください...)．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/6d6d867a-ded8-3605-e5a7-16df3ecdb94a.png)


## ホスト鯖の起動を自動化
当然ですが，鯖を起動していない状態でVSCodeを起動するとこうなります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/b2d402a6-55af-23b1-340f-9a41980f61b6.png)

ということでこれをsystemdのサービスとして登録して，自動で起動するようにしてみましょう．以下の2つのファイルを作成してください．要rootです．

```/opt/codeserver.sh
#!/bin/bash
code-server --bind-addr localhost:8080
```

```/etc/systemd/system/codeserver.service
[Unit]
Description = codeserver daemon

[Service]
ExecStart = /opt/codeserver.sh
Restart = always
Type = simple
User=your_username
Group=your_username

[Install]
WantedBy = multi-user.target
```
`User=your_username`と`User=your_username`の`your_username`は，Linuxでのユーザー名ですが，もしrootとして鯖を起動させたい場合はその2行ごと消してください．
あとは，以下のコマンドで起動時に実行するサービスに登録 & 実行．

```bash
$ sudo systemctl enable codeserver
$ sudo systemctl start codeserver
```

これでいつでもVSCodeが開けます！
ただ，Linuxコンテナが起動していないと使えないので，最初使うときだけターミナルを開いて起動してください．

# 参考文献
 - [ブラウザ上でVScodeが使えるcode-serverを試してみる](https://www.cleartex.net/entry/2019/04/23/codevsc)



[^1]: 最新版だとLinuxのユーザー名を自分で決められるため
[^2]: screenの類い(ウィンドウマネージャ)ならなんでも良いです．デタッチしても動作し続けるようにするためのものです．
[^3]: 本来SVGとかでも動いたはずなのですが，なんかうまくいかなかったのでPNGとしています...無念
[^4]: PWAアプリをアンインストールするという意であって，Linux上からアンインストールするわけではありませんよ！
[^5]: 一応できないわけではないらしいです．気になる方はググってみて♡