なぜかChromebookで開発するのにロマンを感じてしまい、いろいろいじっています。
詳しい皆さんが上げてくれている情報で学びながら自分なりの方法がまとまってきたので備忘録的に書きました。

対象

Chromebookでコード書きたい人
とくにWeb周りの人
VS-Code使う人
この記事ではとくにJSとPHPの人

初期設定

Linux環境(Crostini）を使うので設定します。
最初はChromeOSの設定から初期設定が必要です。
Linux環境を作ったら、ターミナルを立ち上げます。

日本語環境を設定

まずはお決まりの日本語環境から。
Linuxの言語と地域の設定をします。日本語のUTF-8に設定してシェルに反映させます。

ターミナル

$ sudo localectl set-locale LANG=ja_JP.UTF-8
$ source /etc/default/locale

Mozcインストール

Fcitx-MozcはLinuxの日本語に使われているIMEです。
Fcitxという共通インプットメソッドフレームワークの日本語版です。Google日本語入力のオープンソース版とのことで、非常に使いやすい入力システムです。

ターミナル

$ sudo apt install fcitx-mozc

Mozc設定

以下に設定ファイルがあるのに追記します。

/etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf

Environment="GTK_IM_MODULE=fcitx"
Environment="QT_IM_MODULE=fcitx"
Environment="XMODIFIERS=@im=fcitx"
Environment="GDK_BACKEND=x11"

上3行はインプットメソッドモジュールにfcitxを使う設定
4行目は、一部アプリで日本語入力がうまく動かないことへのハックのようです。場合によっては不要かもしれません。¹

上記設定をLinux起動時に毎回読み込むように設定します。

.sommelierrc

...以下を追記
/usr/bin/fcitx-autostart

Sommelierというのは、どうやらChromeOSとLinuxアプリの橋渡しをしてくれているものらしいのですが、それの起動時日本語入力モジュールの設定を行うようにしている。。ということみたいです。
Sommelier - Nested Wayland

これでLinuxを再起動すれば日本語設定が有効になります。
再起動は、ターミナルを閉じてから、ターミナルアイコンを右クリックで Linuxをシャットダウン を選択し、しばらく待ってからターミナルを起動するのがわかりやすいです。

日本語入力方法の設定

再起動したらFcitxの設定アプリを立ち上がれられるようになっているはずです。

ターミナル

$ fcitx-configtool

こんな感じのが開きます。

Mozcが選択されていればそのままで大丈夫です。なければ「＋」ボタンを押して追加します。
また、Global Config から入力切り替えボタンが設定できます。
（上記のMozcインストール後に再起動をしないとここにMozcが表示されませんので注意）
Ctrl＋Spaceのままでもいいし、お好みで設定できます。

自分は結局デフォルトのまま使っています。そのままで良い人は設定アプリの立ち上げも不要かもです。

これで日本語環境は一通り完了です。
数年前にCrostiniをいじったときはもう少し手順が多かったです。随分簡素になって嬉しいですね。

Dockerのインストール

公式サイトのドキュメント通りでインストールできました。
https://docs.docker.com/engine/install/ubuntu/

（不要かもですが）古いファイルをアンインストール

ターミナル

$ sudo apt remove docker docker-engine docker.io containerd runc

必要なパッケージをインストール

ターミナル

$ sudo apt update
$ sudo apt install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

Dockerのインストールに必要な復号キーを設定します。

ターミナル

$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

Dockerのリポジトリを登録します。

ターミナル

$ echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Dockerをインストールします。

ターミナル

$ sudo apt update
$ sudo apt install docker-ce docker-ce-cli containerd.io

以上でインストール完了
Dockerが起動するか確認します。

ターミナル

$ sudo docker run hello-world

Docker Composeのインストール

こちらも公式サイトのLinuxのところ参照
https://docs.docker.com/compose/install/

ターミナル

$ sudo curl -L "https://github.com/docker/compose/releases/download/[バージョン番号]/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

バージョン番号のところは任意のバージョンが入ります。
とくに指定のバージョンがない場合は公式サイトのをそのまま使うのが良いと思います。

実行権限を付与

ターミナル

$ sudo chmod +x /usr/local/bin/docker-compose

実行時にエラーになる場合

/usr/bin にシンボリックリンクを作っておくといいらしい。

ターミナル

$ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

インストール確認

ターミナル

$ docker-compose --version
# バージョンが表示されればOK

npmのインストール

ウェブのフロントエンドで必須のnpmをインストールします。
Node.js、npmのバージョンを管理したり切り替えたりできるnvmが便利だったのでインストールしました。

こちらも公式サイトのままで
https://github.com/nvm-sh/nvm

インストール

ターミナル

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/[バージョン番号]/install.sh | bash

こちらもバージョン番号に指定がないときは公式のを参考にするのがよいです。

起動設定
Linux起動時に自動的に起動するように設定します。
下記コマンドで、.bashrcに起動コマンドが書き込まれます。

ターミナル

$ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"

起動

ターミナル

$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # 起動コマンド

確認

ターミナル

$ nvm --version

一応Linux再起動してちゃんと起動しているか確認してみましょう。

Node.js、npm のインストール

nvmをつかってNode.jsをインストールします。
nvmがあれば、いろいろなバージョンをインストールしたり切り替えたりして使えて便利ですが、とりあえず安定版のみインストールする方法です。

ターミナル

# 安定版をインストール
$ nvm install stable --latest-npm
# 安定版を使用
$ nvm alias default stable

以上でNode.jsとnpmのインストール完了
確認します。

ターミナル

# Node.js確認
$ node --version
# npm 確認
$ npm --version

以上で、npmの環境も整いました。

PHP環境（Laradock）のインストール

Laravelの開発環境でおなじみのLaradockを使って開発するときに、ChromeOSはhostsが書き換えられないので少し不便です。
PHPの開発環境であるLaradokのインストールとhosts記述の代替えになる手段をこちらにまとめたのでよろしければどうぞ。
Crostini + Laradock でChromebookのPHP開発環境をつくる

code-serverのインストールと設定

Chromebookでコード書くのにLinux版VS-Codeが一般的だし最良の選択ではありますが、Chromebookと相性のよい（と自分では思っている）クラウド版VS-Codeであるcode-serverをインストールして使えるようにする方法を紹介します。

code-serverとは

公式のリポジトリ

Run VS Code on any machine anywhere and access it in the browser.

とのことで、サーバ上でVS-Codeを実行してブラウザで使う。というプロジェクトです。
こちらの記事² で紹介されていたのですが、つまりChromebookなら、Crostini（Linux）で稼働させて、Chromeブラウザからアクセスすることで、ChromeOSのメインの環境でVS-Codeが使えるというとても素晴らしいアイディアだと思います。

インストール

公式の通りで問題なくインストールできました。

ターミナル

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

公式のドキュメントには一応、--dry-runでお試しをする手順が書かれていますので、初めての人は試した方がいいかもです。

起動

ターミナル

$ code-server

設定ファイル確認

起動すると設定ファイルが作成されますので、内容を確認しておきます。

~/.config/code-server/config.yaml

bind-addr: 127.0.0.1:8080
auth: password
password: *******************
cert: false

パスワードをメモったらChromeブラウザから

これで起動します。動いたら、 http://localhost:8080 にアクセス
パスワード入力画面が表示さえるので上のパスワードを入力すれば、ブラウザにVS-Codeが表示されるはずです。
LinuxでVS-Codeをインストールするよりも、ChromeOSの日本語入力などが使えるし動作も早い（気がする）のでとてもよいです。

自動的に起動

ここまできたら、Linux起動時に自動的に起ち上がるようにしたいですのでサービスとして登録して自動的に起動するようにします。

設定ファイルを書き換え

これは任意ですが、自分はポート8080は他の開発案件のときに使ったりしそうだなと思ったのでポートを変更しました。

~/.config/code-server/config.yaml

bind-addr: 127.0.0.1:50080
auth: password
password: *******************
cert: false

起動コマンドを作成

起動させるためのコマンドを作成します。

/opt/code-server.sh

# !/bin/bash

/usr/bin/code-server /home/[ユーザー名] --config="/home/[ユーザー名]/.config/code-server/config.yaml"

1つ目の引数は初期ディレクトリです。ホームにしましたが、他のディレクトリでもよいと思います。
configオプションで指定しているのは、上で設定ファイルです。ここを変更すれば他の設定で起ち上げたりできそうです。
コマンドやファイルはフルパスで書きます。

実行権限

コマンドに実行権限付与

ターミナル

$ sudo chmod +x /opt/code-server.sh

サービスの作成

自動起動させるためのLinuxサービスの設定です。

/etc/systemd/system/code-server.service

[Unit]
Description = code-server service

[Service]
ExecStart = /opt/code-server.sh
Restart = always
Type = simple
User = [ユーザー名]
Group = [ユーザーグループ名（ユーザ名と同じで大丈夫なはず）]

[Install]
WantedBy = multi-user.target

ExecStartは先程つくった起動コマンド
User Group はユーザー名とグループ名（おそらく同じ名前でいけるはず）を指定（これを指定しないとVS-Codeでターミナル開いたときにrootユーザで開いてしまい不便です）

サービスの起動

上記まで作ったらサービスの起動。

ターミナル

$ systemctl start code-server
$ systemctl enable code-server

これでLinux起動時に自動起動します。
停めたくなったら。

ターミナル

$ systemctl stop code-server
$ systemctl disable code-server

（※）念の為、あくまでお手軽にカンタンにChromebook内のローカルで使うための設定ですので、公開サーバとかのときはちゃんとした設定が必要です。

PWAとしてインストール

ここまできたら、code-severをVS-Codeライクにつかうためにもうひと手間
PWAとしてインストールしてしまいましょう。
やり方はカンタンです。

Chromeブラウザでcode-serverを開く
[︙]をクリックしてメニューを開く
code-serverをインストールという項目をクリック

以上で完了
Dockにアイコンがシェルフに表示されるはず。
デスクトップアプリみたいな感じで起動します。

VS-Codeの編集

お好みですが、Chromeブラウザで起動させるためにショートカットキーがChromeOSのものと被ってしまうので、最初だけ諸々設定する必要があります。
code-serverの設定や操作方法はVS-Codeなので、あとはいつものようにやれば大体いつものようにやれます。
ただ、拡張機能が本家VS-Codeと比べて少なかったり古かったりします。なんとかした場合は
https://qiita.com//canonrock16/items/b043a996fe1175298207
こちらの記事で詳しく解説されているのでオススメです。

バックアップ

大体ここまでで一通りかなと思います
ChromeOSのCrostiniには環境をまるっとバックアップする機能がついていますので、このあたりまで設定したら一旦バックアップを取っておけば、何かあってLinux環境を潰したときもすぐに復元できるし、Googleドライブに保存してしまえば他のChromeboookでも復元できるのではないかと思います。

さいごに

以上でChromebookに最低限のウェブ周りの開発環境が構築できました。
あとは、FirebaseやAWSのCLIなどもインストールできますので、JSからPHPから色々遊べると思います。
なんというか、Chromebookでやる必要あるの？と聞かれたら、今のところは「ロマンなので」としか言えない状態ではありますが、Chromebookは今のところは文教向けだったり家庭でのライトユース向けなイメージがありますが、市販されているLinuxベースOSのPCなので開発側にも少しづつ向いてくれれば面白くなっていきそうな感じはあります。
安くて速くて、Andoroidアプリが使えて、ペンでお絵かきやメモもできて、なおかつ開発もできる。という贅沢さに惹かれる今日このごろです。

参考サイト

以下のサイトにとてもお世話になりましたありがとうございました。

ChromebookにLibreOfficeをインストールしてみました (https://ja.blog.documentfoundation.org/2019/12/05/install-libreoffice-on-chromebook/) ↩
Chromebookには、VS Code より code-server がオススメ (https://note.com/digzero/n/n70ee0402a92b) ↩