文章書きツールとしてのchromebook

10_補足：Crostini構築手順

　本稿の手順は以下のサイトの情報を参考に手順を再構成したものです。

『商業誌を20冊以上書いたボクがたどり着いたChromebookのテキストエディタ』

by Goodegg.jp

https://goodegg.jp/archives/11469

==========

　以下は新規構築の手順です。

1. 前提の手順

1.1. Chrome OS標準のアプリ『ターミナル』を起動します。

1.2. 稼働しているLinuxを更新します。

コマンド：

sudo apt update && sudo apt upgrade -y

1.3. 前提となるプログラムをインストールします。

コマンド

sudo apt install git libnss3-tools nano -y

2. code-serverのインストール

2.1. code-serverをインストールします。

コマンド：

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

2.2. code-serverを自動的に起動するよう設定します。また、同時に起動します。

コマンド：

sudo systemctl enable --now code-server@$USER

2.3. アクセスパスワードを確認します。以下のコマンドで表示される内容のうち、passwordの行に記載の文字列を記録しておきます。またはコピーしておきます。

コマンド：

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

※コピーはCtrl + Shift + cです。また、ペーストはCtrl + Shift + vです。

2.3. 現時点で動作を確認しましょう。ブラウザにて、http://localhost:8080にアクセスします。求められるパスワードは直前に確認した文字列を入力します。

　もしこの時ページが存在しない旨の画面が出たときは、以下の点を確認しましょう。

・code-serverが起動しているか？

コマンド：

ps -ef | grep code-server | grep -v grep

→上記コマンドが何も返さない場合は起動していません。以下のコマンドで再起動しましょう。

コマンド：

sudo systemctl start code-server@$USER

3. PWA化対応

　code-serverをPWAとして動作するため、HTTPSでアクセスできるようにします。

3.1. SSL証明設定

3.1.1. mkcertのインストーラパッケージをダウンロードします。

［arm64系CPUの場合］

コマンド：

wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-arm64

［amd64系CPUの場合］

コマンド：

wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64

3.1.2. mkcertをインストールします。加えて依存するプログラムも導入します。

コマンド：

chmod +x mkcert

sudo mv mkcert /usr/local/bin/

3.1.3. Chromeのブラウザを閉じます。

3.1.4. 証明書の作成を行います。

コマンド：

mkcert -install

mkdir ~/.cert

cd ~/.cert

mkcert localhost

3.1.5. code-serverの作業フォルダーを作成します。

コマンド：

mkdir ~/ws_code-server

3.1.6. code-serverの設定を変更します。このタイミングで前回のアクセス時に求められたパスワード認証を無効化します。また、［ユーザ名］と記載された場所はそれぞれLinuxを有効化した際に設定したユーザ名を入力してください。忘れた場合は、ターミナルの右の

『xxxx@yyyy:』となっている部分のxxxxがユーザ名です。

コマンド：

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

設定内容：

bind-addr: 127.0.0.1:8080

auth: none

cert: /home/［ユーザ名］/.cert/localhost.pem

cert-key: /home/［ユーザ名］/.cert/localhost-key.pem

user-data-dir: /home/［ユーザ名］/ws_code-server

※編集対象のファイルには既存の内容がありますが、先頭に『#』を入力することで無効化できます。

3.1.7. code-serverを再起動します。

コマンド：

sudo systemctl restart code-server@$USER

4. 動作確認

　Chromeのブラウザにてhttps://localhost:8080にアクセスします。パスワード認証なしに画面が表示されれば成功です。

　また、アドレスバーの右側にあるアイコンの中に、カーソルを合わせると『code-serverをインストールする』と表示されるアイコンがあります。このアイコンをクリックすることで、アプリケーションとしてインストールできます。

==========

　以下はcode-server更新の手順です。更新については自動で行ってくれないので、必要に応じてcode-serverの開発サイトにアクセスしてバージョンを確認する必要があります。

code-server

https://github.com/cdr/code-server

端末に導入しているcode-serverのバージョンは、左側の一番上のアイコンをクリックして、『ヘルプ』→『ようこそ』で確認できます。

1. コマンドを実行します。

コマンド：

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

※インストール時のコマンドと同じです。

この手順は今後変更される可能性があります。『更新をもっといい感じにしたほうがよくないか？』という提案がされており、この提案が実現すると別の手順で更新することになります。

==========

　以下は拡張機能を導入する手順です。

1. code-serverの左側にアイコンが縦に並んでいます。この内、一番上から六個目のアイコン（四角形がまとまろうとしているような形）をクリックします。

2. 拡張機能と表示されているペインのうち、上部の検索窓に導入したい検索窓の名称を入力します。

3. 入力に合わせて検索処理が行われ、候補となる拡張機能がリストアップされます。

4. 該当する拡張機能が表示されたら『インストール』のボタンをクリックします。

5. キーボードの更新キー（大抵の端末ではキーボード最上部の左から四つ目にある円を描く矢印です）を押します。