ChromebookにNode.js開発環境を構築する


## 概要
最近出先でプログラミングをする機会が増えてきたのですが、
持ち運びのできるまともな開発環境がMac mini(持ち運び？)くらいしかありませんでした。
そこそこ安価でそこそこ動作してくれるノートPCで簡単な開発環境を構築しようと考えて実行した、その備忘録です。

続き 
[chromebookへのphp開発環境構築(Xampp)](https://qiita.com/kamekame85/items/2c00aa9766a0c406d3cc)
[ChromebookにDockerを導入](https://qiita.com/kamekame85/items/3c7386a7c96e23c22031)

## 完成形
この記事の通りに作業すれば、以下の環境が整います
- Visual Studio Code
- Node.js
- crostini日本語対応
- ~~Docker~~（別記事に切り分けました。[こちら](https://qiita.com/kamekame85/items/3c7386a7c96e23c22031)）

## chromebookである理由
モノはいいようではありますが・・・
- 安価
- Linuxベースであるため同価格帯で他OSより動作が軽い
- Chrome・Android・Linuxのアプリが標準で使用でき、汎用性が高い
- サンドボックス環境でアプリが動作するためセキュリティが強固

## 目次
1. Linux（Crostini）コンテナを作成
1. Visual Studio Codeをインストール
1. Node.jsをインストール
1. 日本語入力を可能にする

## Linux（Crostini）コンテナを作成

とっても簡単

1. [⚙設定] > [詳細設定] > [デベロッパー] を選択 
1. [Linux開発環境] の[オンにする]を選択する
1. 案内に従ってlinuxコンテナを作成
1. linuxコンテナのターミナルが起動する

- 設定画面のデベロッパー（画像はlinux開発環境をオンにした後）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/fa8142d5-9c6a-e5f8-de53-fb797b01f9bc.png)
- ターミナル
![Screenshot 2022-05-29 00.13.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/b4b9ed2e-a953-1755-8c0b-a82c39b70187.png)


## Visual Studio Codeをインストール
- 基本的に公式に従って操作すればOK

https://code.visualstudio.com/blogs/2020/12/03/chromebook-get-started

### gnome-keyring をインストールする
``` bash.
$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install -y gnome-keyring
```

### Linux用パッケージ(.deb 64bit)をダウンロード
debian系で自分のPCのcpuに合ったものを選択
cpu のアーキテクチャが不明な場合は、以下のコマンドで調べられる(amd64: 64bit, arm64: arm64)
``` bash.
$ dpkg --print-architecture
amd64
```

ダウンロードページ

https://code.visualstudio.com/download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/cdf87a20-00db-3ede-9df2-7937c035d277.png)

### linuxコンテナにインストール
- ダウンロードしたファイル（code_***_amd64.deb）をダブルクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/e0c10954-2bcf-6335-1170-eb980c482529.png)

## Node.jsをインストール
- こちらも公式の通りにやれば問題なし

https://code.visualstudio.com/blogs/2020/12/03/chromebook-get-started#_code-with-javascript-and-nodejs

### nvmをインストール
- バージョン管理したいので、nvmを導入
``` bash.
$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
```
- .bashrcに以下が追加される
``` .bashrc
export NVM_DIR="$HOME/.config/nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

-  .bashrcを再読み込み
``` bash.
$ source .bashrc
```

### Node.jsをインストール
2022.5現在、v18がインストールされる
``` bash.
$ nvm install node
```
### verを指定してインストールする場合や使用するverを変更する場合
``` bash.
$ nvm install 16
$ nvm use 16
```

## Mozcをインストール（日本語対応）
### Mozc
google日本語入力のオープンソース版
- 一応 apt update
``` bash.
$ sudo apt update
$ sudo apt upgrade -y
```

### インストール前の準備
- タイムゾーンを東京に設定（デフォルトで東京だが、念の為）
``` bash.
sudo timedatectl set-timezone Asia/Tokyo
```
- 日本語フォントをインストール
```
sudo apt install task-japanese locales-all fonts-noto-cjk -y
```
- ロケールを日本に設定
```
sudo localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"
```
- 設定を再読み込み
```
source /etc/default/locale
```
### Mozcをインストール
```
$ sudo apt install fcitx-mozc
```
### 環境変数を追加

- 環境変数を追加


`/etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf`に環境変数を記述するのは非推奨になった（削除予定）ため、`/etc/environment.d`内に任意のconfファイルを作成し、環境変数を設定する。（[こちらのwebサイト](https://catalyst-wakaba.com/linux-on-chrome-os/
)から引用 2022年7月には既に非推奨だった模様）


今回は引用元に倣ってファイル名を`99-fcitx.conf`とする。

``` bash.
sudo vim /etc/environment.d/99-fcitx.conf
```
- 開いたファイルに以下の４行を追記（最後の行は不要かも）
```/etc/environment.d/99-fcitx.conf
Environment="GTK_IM_MODULE=fcitx"
Environment="QT_IM_MODULE=fcitx"
Environment="XMODIFIERS=@im=fcitx"
Environment="GDK_BACKEND=x11"
```
 (@excelsior091224 さんに元ファイルが非推奨であるご指摘と新しい方法の追記をしていただきました。ありがとうございます。)


ちなみに、環境変数設定に関する公式情報が気になる方はこちらをご参照ください

https://chromium.googlesource.com/chromiumos/docs/+/main/containers_and_vms.md#Can-I-set-environment-variables-for-my-container
>Can I set environment variables for my container?
Sure! There are a few ways to do this.<br>
    - `environment.d` lets you set environment variables for your systemd --user session, which includes the Terminal and all GUI apps.
    - If you just want environment variables in your Terminal, set those in your shell's config file, such as ~/.bashrc or ~/.zshrc.<br>




- 自動起動の設定
~/.sommelierrcを作成し、fcitxの自動起動を記述
（sommelierはコンテナ内で実行される Chromebookとの入出力のプロキシ、らしい）
```
echo "/usr/bin/fcitx-autostart" >> ~/.sommelierrc
```
### linuxコンテナを再起動
- crosh（crostiniのシェル）を起動
chromeを開き、ctrl + alt + t を同時押し
- croshからlinuxコンテナを一度停止（設定を反映するため）
``` crosh.
crosh> vmc stop termina
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/2ef72f08-231c-0be6-721b-61cae5c421c9.png)

### Mozcの設定
- ターミナルを起動し、fcitxの設定を開く

```bash.
$ fcitx-configtool
```
- 入力メソッドを確認
Mozcが表示されていればOK
表示されていなければ、linuxを再起動するか、ウィンドウ右下の+から追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/4e471a9c-855c-2df8-bb4b-9bc7cb3db09b.png)

- ホットキーの変更
デフォルトではctrl + spaceで日本語入力のオン/オフ切り替えとなっているが、以下のように変更（好みなので好きにイジる）

　英数ボタン：ローマ字入力（入力メソッドをオフに）
　かなボタン：日本語入力（入力メソッドをオンに）
　かな⇔英数：切替え（入力メソッドのオンオフ）

![Screenshot 2022-05-29 01.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1741746/6e80e190-2cd7-98ef-fedb-6b2021ebfbe9.png)


## まとめ
linux上でVSCode、Node.js、日本語入力を導入
簡単なweb開発ならchromebookで十分可能なので、モバイル環境を安価に構築したい方は試してみても良いかもしれません。
chrome OS Flex で少し古くなったPCを復活させるのも楽しそうですね。

続き
[chromebookへのphp開発環境構築(Xampp)](https://qiita.com/kamekame85/items/2c00aa9766a0c406d3cc)
[ChromebookにDockerを導入](https://qiita.com/kamekame85/items/3c7386a7c96e23c22031)