Zenn
💭

私のChromebookの開発環境セットアップ

2024/03/11に公開
tech

はじめに

私は出先のパソコンとしてChromebookを使っているので、その開発環境のセットアップを紹介します。

実証に使用しているPCはAcer Chromebook Spin 714のusキー配列で、日本未発売のモデルですが、他のモデルでも同様にできるはず。

Linuxを起動

Chrome OSではLinuxの仮想環境が使用できますので、それを利用して開発環境構築をします。このChrome OSで使えるLinuxはcrostiniと呼ばれ、制限があるため通常のLinuxのようには使用できませんが、私がやりたい範囲では問題ないです。

Chrome OSでLinuxを使用するには、Settings/Developers/Linux development environmentをTurn Onしてください。

参考:https://support.google.com/chromebook/answer/9145439?hl=en

Linuxのアップデート

Linuxを入れたらまずはアップデートします。ついでにタイムゾーンを日本時間にします。

sudo apt update -y
sudo apt upgrade -y
sudo apt autoremove -y
sudo timedatectl set-timezone Asia/Tokyo

IMEの設定

現状、デフォルトの状態では、Chrome OSのIMEは、crostiniのIMEと連動していません。今後改善の見込みのある要素で、現在はExperimental版という形でIMEを連動できます。
ちなみに、fcitx-mozcをインストールすることで、日本語入力できるようにする記事もありますが、今回紹介する方法はそれらより後出のやり方です。変換候補が気に入らなければ、Linux内で別のIMEを使うとベターかもしれませんが、個人的にはIMEを連動させるほうがわかりやすくて好きです。

chrome://flags/ でcrostini-ime-supportをEnabledにしてください。そして、以下のコードを実行してください。

# Create directory and override configuration file for sommelier@.service
mkdir -p ~/.config/systemd/user/sommelier@.service.d/
touch ~/.config/systemd/user/sommelier@.service.d/cros-sommelier-override.conf

# Add configuration to sommelier@.service override file
echo "[Service]" | sudo tee -a ~/.config/systemd/user/sommelier@.service.d/cros-sommelier-override.conf
echo 'Environment="SOMMELIER_ACCELERATORS=Super_L,<Alt>bracketleft,<Alt>bracketright,<Control>space,<Control><Shift>space"' | sudo tee -a ~/.config/systemd/user/sommelier@.service.d/cros-sommelier-override.conf

# Create directory and override configuration file for sommelier-x@.service
mkdir -p ~/.config/systemd/user/sommelier-x@.service.d/
touch ~/.config/systemd/user/sommelier-x@.service.d/cros-sommelier-x-override.conf

# Add configuration to sommelier-x@.service override file
echo "[Service]" | sudo tee -a ~/.config/systemd/user/sommelier-x@.service.d/cros-sommelier-x-override.conf
echo 'Environment="SOMMELIER_ACCELERATORS=Super_L,<Alt>bracketleft,<Alt>bracketright,<Control>space,<Control><Shift>space"' | sudo tee -a ~/.config/systemd/user/sommelier-x@.service.d/cros-sommelier-x-override.conf

VS Codeをインストール

VS Codeをインストールしたいと思います。VS CodeでGitHub認証等を行うために、gnome-keyringをインストールする必要があります。

sudo apt-get install -y gnome-keyring

以下のコマンドでCPUの種類を確認し、 https://code.visualstudio.com/download からVS Codeのインストーラーをダウンロードします。

dpkg --print-architecture
# amd64なら、.debパッケージの「64bit」
# arm64なら、.debパッケージの「ARM64」を選択

ダウンロードできたら、インストーラーを起動します。インストールできたら、VS Codeの設定でgnome keyringを使うことを明記します。

echo '{"password-store": "gnome"}' > ~/.vscode/argv.json

フォント

UDEV Gothicという、日本語を利用する場合のプログラミングに適したフォントを使っているので、それをインストールする方法です。

wget https://github.com/yuru7/udev-gothic/releases/download/v1.3.1/UDEVGothic_v1.3.1.zip

unzip UDEVGothic_v1.3.1.zip
rm UDEVGothic_v1.3.1.zip

sudo mv UDEVGothic_v1.3.1/*.ttf /usr/share/fonts/

sudo fc-cache -f -v

VS CodeのSettings.jsonに以下を追加する。

{
    "editor.fontFamily": "'UDEV Gothic 35', 'Droid Sans Mono', 'monospace', monospace",
    "editor.fontLigatures": false,
    "markdown.preview.fontFamily": "'UDEV Gothic 35JPDOC'"
}

リモート開発環境の設定

Chromebookなので、クラウドサーバー等に繋いで開発します。以下のコマンドで、SSHに必要な鍵の生成と交換が行えます。

ssh-keygen
ssh-copy-id -i ~/.ssh/id_rsa.pub -p <port number> <remote user>@<remote host name>

SSH接続の際には、先ほどインストールしたVS CodeのRemote SSHがおすすめです。私はWireguardでVPN接続をすることで、自宅やラボのWSL(Windows Subsystem for Linux)に接続し、Devcontainerを利用して開発を行うことが多いです。詳しくは、私の別の記事（私のWindowsの開発環境セットアップ
,
私のVPNのセットアップ）を参考にしてください。他にも、GCP, Github Codespaces, Chrome Remote Desktopを利用して、Chromebookを使って出先から開発しています。

Flutterでアンドロイドアプリ開発

  1. ChromebookのAndroidの開発者モードをOnにしてください。
    Settings->App->Google Play Store->Manage Android preferences

  2. Android Studioをインストール
    以下のリンクからインストール。Andoid Studioはそれなりに容量を食うため、Linuxのdisk sizeに気をつけましょう。
    https://developer.anroid.com/studio/?hl=ja

  3. Android Studioを起動しSDKをダウンロード。

  4. Flutterをインストール

    git clone https://github.com/flutter/flutter.git -b stable

  5. ブラウザアプリが作れるようにする

    sudo apt install chromium

/.bashrc
export CHROME_EXECUTABLE=/usr/bin/chromium
export PATH=$PATH:$HOME/flutter/bin

  6. うまく環境設定できたか確認
    以下のコマンドを実行すると、Flutterの開発環境の診断が行えます。うまく行っていないとエラーが出るため、検索しつつ解決してください。

    flutter doctor

おわりに

参考にしてみてね！

Discussion