見出し画像

Chromebookには、VS Code より code-server がオススメ

いいものを見つけてしまいました。 " code-server " というオープンソースのアプリです。

画像29

Visual Studio Code のクローンで、サーバーサイドで動作して、Webブラウザ経由で使用できるコードエディタです。

なので、まんま Visual Studio Code なんです。

これが、LinuxをインストールできるChromebookと相性が良すぎた。

前回記事で、 Visual Studio Codeのインストールの仕方を紹介いたしましたが、使えないほどではないが、やや重いなと感じた方は、 " code-server " をオススメいたします。

Microsoft の クラウドサービス Visual Studio Codespaces
(以前の Visual Studio Online)

というのが存在しますが、これを自前のサーバーで実現できるイメージと考えて良さそうです。

ChromebookにはLinuxの仮想マシンをOSの機能としてインストールできるので、クライアントとサーバーを兼ねる形を非常に簡単に実現できるので、非常に相性が良いと思います。

また、Raspberry Piのようなシングルボードコンピュータに
" code-server "をインストールしてChromebookのChromeブラウザを使う方法もいいかもしれないです。

Chromebook化したドンキPCにVisual Studio CODEをインストールし、日本語化を行い、Python で 動作確認(Hello World)まで行いました。

以前の記事、「Chromebook化したドンキPCでLinux (ベータ版)を利用する」の通り、Linux (ベータ版)のセットアップが終わっていることが前提です。

code-server GitHub ページ


Linux, macOS, FreeBSD用の code-server をインストールするスクリプトがaあるようです。

code-server のインストール

とりあえず。

sudo apt update && sudo apt upgrade -y

インストール可能か確認(スキップしてもいいかもしれないです)

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

インストール( 末尾の -s -- --dry-run を取り除く)

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

インストール中の画面

画像11

code-serverの起動

code-server
info Wrote default config file to ~/.config/code-server/config.yaml
info Using config file ~/.config/code-server/config.yaml
info Using user-data-dir ~/.local/share/code-server
info code-server 3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259
info HTTP server listening on http://127.0.0.1:8080
info - Using password from ~/.config/code-server/config.yaml
info - To disable use `--auth none`
info - Not serving HTTPS

別のターミナルを起動し、以下のコマンドを入力

cat ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: d7b348f241f8d2998c9736ea
cert: false

初回起動時にランダムに生成されるパスワードを確認することができます。

ChromeブラウザのURL http://127.0.0.1:8080 または http://localhost:8080 と入力しエンターキーを押してください

画像12

Welcome to code-server 画面が表示されました。

画像13

確認したパスワードを入力すれば、code-server に入ることができます。

画像14

更に、PWA化するとキャッシュの効果で動作が速くなりそうです。
(見た目もスッキリします)

code-server を PWA としてインストール

プログレッシブ ウェブアプリ(PWA)を使うと、パソコンやモバイル デバイスですばやいウェブ操作が可能になります。PWA をインストールして、簡単にアクセスできるようにしたり、追加機能を利用したりすることができます。

Chromeブラウザで code-server のサイトを開いた状態で、Chromeの設定メニューを開き “「 code-server 」をインストール…” をクリック

画像4

PWAとしてインストールする確認画面、インストールボタンをクリック

画像3

PWAとして起動した状態の画面(Chromeのメニューバーが無くなりスッキリしたイメージ)

画像2

ランチャーに固定する。

画像1

code-server の日本語化

画像15

ハンバーガーメニュー → View → Command Pallet

画像16

コマンドパレットが開くので、検索窓に「lang」と入力する。

選択候補が絞られるので「Configure Display Language」をクリックします。

画像17

「Install additional languages...」をクリックします。

画像18

左側に言語のリストが表示されます。「日本語」を探して「Install」をクリックします。

画像19

右下にアプリの再起動を促すメッセージが表示されます。「Restart Now」をクリックして再起動しました。

無事、日本語化されました。

画像20

バージョン情報

バージョン: 1.45.1
コミット: 48f7c2724827e526eeaa6c2c151c520f48a61259
日付: 2020-06-04T10:39:14Z
ブラウザー: Mozilla/5.0 (X11; CrOS x86_64 13020.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36

Python で 動作確認(Hello World)

Python 3 のバージョン確認

ターミナルで以下のコマンドを実行

python3 -VV
Python 3.7.3 (default, Dec 20 2019, 18:57:59)
[GCC 8.3.0]
PyLint Pythonソースコード静的解析ツールをインストール

pip をインストールし、PyLint を インストールする。

pip は、The Python Package Index に公開されているPythonパッケージのインストールなどを行うユーティリティで、Python 3.4以降には、標準で付属しています。
sudo apt install python3-pip
sudo pip3 install pylint

拡張機能アイコンをクリックし、検索窓に「 Python 」と入力し、
Python (Microsoft) をインストールしました。

画像21

最新のPython拡張は何故か、うまく動作しないため、過去のバージョンをインストールする必要がありました。(改善される可能性あり)

画像22

2020.5.86806 というバージョンを選択しました。

画像30

拡張機能の自動更新を防ぐ方法

左上のハンバーガーメニューから → ファイル → ユーザー設定 → 設定をクリック

画像8

検索欄に ext と入力

画像7

機能の下の拡張機能(機能と同じ階層にも拡張機能があるので注意)

画像6

Python3 フォルダを予め作成しました。

画像31

ハンバーガーメニュー → ファイル → フォルダーを開く をクリック

画像23

Python3をクリックで選択し、OKボタンでフォルダーを指定しました

画像24

PYTHON3というフォルダーが追加されました。

画像25

PYTHON3の文字をクリックすると現れる、ファイル作成アイコンをクリック

画像26

「 helloworld.py 」というファイルを作成しました

画像27

ファイル 「 helloworld.py 」の編集画面が開くので

print("Hello World")

画像27

とコーディングし、ハンバーガーメニュー → ファイル → 保存をクリック

画像28

「 helloworld.py 」のファイル名を右クリックでコンテキストメニューから「ターミナルで Python ファイルを実行」をクリックする

画像29

ターミナルが開き、実行結果(Hello World)が正しく表示されました。

画像29

code-server 広めましょう!

ドンキPC(MUGA ストイックPC2)をChromebook化する方法

※この記事もChromebook化したドンキPCで書いてます。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

よろしければサポートお願いいたします。クリエイターとしての活動費とさせていただきます。

ありがとうございます。励みになります。
13
現在フリーのエンジニア HTML5プロフェッショナル認定資格レベル2 情報セキュリティマネジメント(経済産業省認定) PHP5 技術者初級試験 認定

こちらでもピックアップされています

ドンキPCをChromebook化して使う【2020年版】
ドンキPCをChromebook化して使う【2020年版】
  • 19本

ドン・キホーテから2018年12月7日に発売された、激安の約2万円のフルHD解像度14.1型ノートPC「MUGA ストイックPC2」(型番:KNW14FHD2-SR)は用途によっては、Windowsのまま使うよりChromebook化すると便利かもしれないです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。