Chromebook でもサイト構築とか Web アプリ開発ならできるよ



「Chromebook はネット見るだけ!w」なんて言う人もいるけれど, 最近の Chromebook では Linux が使えるので実は開発もできるんですよ というお話.

先に考慮しておかないといけないのはストレージです. 大きな Linux アプリやライブラリなんかを入れるとストレージが足りなくなる場合があります (特に 16GB や 32GB の Chromebook を使用している場合). micro SD カードや大きめのストレージの Chromebook を用意してください.

1. Linux の有効化・インストール

さて, では早速 Linux を有効化しましょう. Chromebook の設定から [Linux (ベータ版)] で [オンにする] を選択します. 画面に表示される手順でセットアップをすすめるとターミナルが起動し, Linux が利用できるようになります (セットアップには 10 分以上かかるらしいです).

参考: Chromebook ヘルプ
https://support.google.com/chromebook/answer/9145439?hl=ja


2. 最低限必要 (だと思う) なパッケージをインストール

2-1. git

Chromebook の Linux ではパッケージマネージャ apt が使用できます. 以下のコマンドで git をインストールできます.
sudo apt install git

2-2. Node.js と npm

以下のコマンドを実行することで Node.js の v12 をインストールできます.
curl -sL https://deb.nodesource.com/setup_12.x | bash -
sudo apt install -y nodejs
[参考] GitHub nodesource/distributions
https://github.com/nodesource/distributions/blob/master/README.md

インストールが完了したら node コマンドと npm コマンドが使えることを確認しましょう.
which node
which npm

2-3. Pyenv と Python

Python のバージョンを管理するために Pyenv を使用する場合は git のインストールが必要です.

まずは Pyenv のリポジトリをクローン.
git clone https://github.com/pyenv/pyenv.git ~/.pyenv

次にパスを通す.
echo 'export PATH="$HOME/.pyenv/bin:$PATH"' >> ~/.bash_profile

.bash_profile を読み直させて完了.
source ~/.bash_profile

pyenv コマンドが使えることを確認してください.
which pyenv

Pyenv のインストールができたら Python をインストールします. pyenv コマンドでインストール可能なバージョン一覧を表示してそこから選びます.
pyenv install --list

一覧を見れば分かる通り, anaconda もインストールできます.
ここでは 3.7.0 をインストールするときのコマンドを例として示します.
pyenv install 3.7.0

さて, これで Python 3.7.0 が Pyenv を通してインストールされました. 他のバージョンも同様にしてインストールできます.
インストール済み一覧は
pyenv versions

で確認できます. system となっている場合, もとからインストールされている Python が選択されています. pyenv global コマンドを使用して使用するバージョンを切り替えられます.
pyenv global 3.7.0

これで先程インストールした Python 3.7.0 を python コマンドで使用できるようになりました.


3. コマンドを使わずにインストールする

通常の Chrome ブラウザでインストーラをダウンロードします. 形式は Debian 向け (拡張子 .deb) です. ダウンロードが完了したらファイルエクスプローラでダブルクリックします. 自動的にインストールが始まるはずです.
インストールしたアプリケーションはコマンドからだけでなく Chrome OS のアプリシェルフからも起動できます.

ただし, 日本語フォントが Linux 向けにインストールされていないため, これらの GUI アプリの言語設定を日本語にすると文字化けしてしまいます. また, 日本語を含むファイルを開いた際も文字化けが発生します.
GUI アプリでの日本語入力も別途 IME をインストールする必要がありますがここでは GUI アプリの日本語化については割愛します.


4. 開発環境の構築

ここから先は開発するものによって理想の環境が異なるはずなので, 私が設定しているものを紹介します. あんまり参考にならないかもしれません.

4-1. Firebase CLI Tools をインストール

Google の Firebase を使って開発するため, デプロイのために CLI ツールが必要となります. Node.js のモジュールですので npm を使用してインストールします.
npm i -g firebase-tools

インストールが完了したら Google アカウントにログイン
firebase login

ブラウザが起動するので画面に従ってログインします. ブラウザが自動的に開かない場合は自分で URL をコピーしてブラウザのアドレスバーに貼り付けます.

ログインが完了したら下準備は終了です.

4-3. git の状況を視覚的に確認する
git コマンドだけではどうしても状態が把握しにくい場合があります. そんなときに使える gitk という GUI の git 閲覧ツールがあります. apt でインストールできます.
sudo apt install gitk

めっちゃ見やすい.

4-2. ls -l が面倒なのでエイリアスを作る

ls より ls -l (リスト形式で表示) と ls -la (隠しファイルを含めてリスト形式で表示) を使用することが多いのでエイリアスを定義しておきます.

Vim で .bash_profile を開き, エイリアスを追記します.
vim ~/.bash_profile
alias ll='ls -l'
alias lls = 'ls -la'

ちなみに Vim で入力を開始するには最初に i を入力して INSERT モードに入る必要があります. 入力が終わったら esc キーで INSERT モードから抜けて, :wq と入力することで上書き保存・終了します.
.bash_profile を読み直させれば完了です.
source ~/.bash_profile

4-3. lssl と打ち間違えたときのために

疲れているときは lssl と打ってしまうことがあります. そんなときに冷徹な sl: command not found というメッセージを見ると一気に萎えます. そこでもうちょっと優しく間違いを指摘してくれるようにします.

以下のコマンドを実行します.
sudo apt install sl

試しに sl コマンドを実行してみてください. sl: command not found の代わりに走る SL が表示されます.



和みます.

4-4. Vim をカスタマイズ
CLI 上で使えるテキストエディタ Vim はそのままでは使いにくいと感じる人が多いので .vimrc ファイルでカスタマイズします. 私が使っている .vimrc はこんな感じです.
:syntax on
:colorscheme elflord
set expandtab
set tabstop=2
set shiftwidth=2
set autoindent
set smartindent
set autoread
set noswapfile
set number

set encoding=utf-8
set fileencodings=utf-8
set fileformats=unix,dos,mac


5. まとめ
最後の方はただの Linux の設定ですが, Chromebook でも Linux を使用して開発ができることがわかっていただければいいかなぁと. 高スペックな Chromebook では Android Studio が動くらしく, Web 開発だけでなく Android アプリも作れるようですので, どうしても Mac じゃないといけない場合以外は Chromebook も意外と使えるんじゃないかな, と思います.






コメント