なぜか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設定
以下に設定ファイルがあるのに追記します。
Environment="GTK_IM_MODULE=fcitx"
Environment="QT_IM_MODULE=fcitx"
Environment="XMODIFIERS=@im=fcitx"
Environment="GDK_BACKEND=x11"
上3行はインプットメソッドモジュールにfcitxを使う設定
4行目は、一部アプリで日本語入力がうまく動かないことへのハックのようです。場合によっては不要かもしれません。1
上記設定をLinux起動時に毎回読み込むように設定します。
...以下を追記
/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を実行してブラウザで使う。というプロジェクトです。
こちらの記事2 で紹介されていたのですが、つまりChromebookなら、Crostini（Linux）で稼働させて、Chromeブラウザからアクセスすることで、ChromeOSのメインの環境でVS-Codeが使えるというとても素晴らしいアイディアだと思います。
インストール
公式の通りで問題なくインストールできました。
$ curl -fsSL https://code-server.dev/install.sh | sh
公式のドキュメントには一応、--dry-runでお試しをする手順が書かれていますので、初めての人は試した方がいいかもです。
起動
$ code-server
設定ファイル確認
起動すると設定ファイルが作成されますので、内容を確認しておきます。
bind-addr: 127.0.0.1:8080
auth: password
password: *******************
cert: false
パスワードをメモったらChromeブラウザから
これで起動します。 動いたら、 http://localhost:8080 にアクセス
パスワード入力画面が表示さえるので上のパスワードを入力すれば、ブラウザにVS-Codeが表示されるはずです。
LinuxでVS-Codeをインストールするよりも、ChromeOSの日本語入力などが使えるし動作も早い（気がする）のでとてもよいです。
自動的に起動
ここまできたら、Linux起動時に自動的に起ち上がるようにしたいですのでサービスとして登録して自動的に起動するようにします。
設定ファイルを書き換え
これは任意ですが、自分はポート8080は他の開発案件のときに使ったりしそうだなと思ったのでポートを変更しました。
bind-addr: 127.0.0.1:50080
auth: password
password: *******************
cert: false
起動コマンドを作成
起動させるためのコマンドを作成します。
# !/bin/bash
/usr/bin/code-server /home/[ユーザー名] --config="/home/[ユーザー名]/.config/code-server/config.yaml"
1つ目の引数は初期ディレクトリです。ホームにしましたが、他のディレクトリでもよいと思います。
configオプションで指定しているのは、上で設定ファイルです。ここを変更すれば他の設定で起ち上げたりできそうです。
コマンドやファイルはフルパスで書きます。
実行権限
コマンドに実行権限付与
$ sudo chmod +x /opt/code-server.sh
サービスの作成
自動起動させるためのLinuxサービスの設定です。
[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 Crostini の有効化と日本語化
- Crostiniで日本語環境設定:健康で文化的な最低限度の生活のためのChromebook設定(2)
- ChromebookにLibreOfficeをインストールしてみました
- Chromebookには、VS Code より code-server がオススメ
- リモートサーバー上でvscodeを動かしてブラウザからアクセスする ―code-serverのススメ
- ブラウザ上でVScodeが使えるcode-serverを試してみる
-
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) ↩