スポンサーリンク

【開発環境準備】Chromebookでの開発環境

Code

Chromebookでの開発環境を整えました。
単純にエディタをインストールするだけでは、ブラウザで確認したりできなかったんですよね。
なんとか解決したので、備忘録として残しておきます。

エディタのインストール

そもそもChromebookで使えるエディタも存在するようです。
が、普段Windows+VSCodeの環境なので、ショートカットなどできれば同じものを使いたいところです。
私のChromebookはLinux環境が起動できました。
ということで、次のサイトの3つめの方法を参考にコマンドラインからインストールしました。

UbuntuにVSCodeをインストールする3つの方法 - Qiita
次の3つの方法を全部試してみました。感想としては1の方法が何となく正当なやり方なのかなと思ってましたが、2の方法がめちゃくちゃ簡単でした。基本的に公式サイトを参考にしています。 マイクロソフトのリポジトリを登録する方法 Snapパッ...

ブラウザで開くために

JavaScriptの開発環境の準備なので、エディタとブラウザが必要になります。
エディタはVisual Studio Code、ブラウザはChromebookですのでGoogle Chromeを利用します。
LinuxにChroniumブラウザあたりを入れればいいのでしょうが、もっと簡単な方法を見つけました。
VSCodeに拡張機能をインストールしてしまいます。
今回インストールした拡張機能は、次の2つ。

  1. Debugger for Chrome(ChromeでデバッグをVSCodeで可能にする)
  2. Live Server(ローカルでWebサーバを起動する)

それぞれコピペして、VSCodeの拡張機能検索をかけてインストールしていきます。
あとは、作成したコードを右クリック「Open with Live Server」で開きます。
すると、ChromeOS上のGoogle Chromeで開いてくれます。
openwith_liveserver

Linuxの日本語入力準備

このままだと日本語でフロントエンド表示できません。
つまり、日本語が使えません。
ので、以下の方法で日本語入力のセットアップを行います。

ChromebookのLinux開発環境構築 - Qiita
ChromeOSでLinuxアプリが使える機能「Project Crostini」でLinuxの開発環境を構築したときの、セットアップの手順を記してます。 基本的に個人用のメモです。 Windows版は下記です: Windowsを購...

ファイルの移動も可能

Linux上で作成されたプログラムをChromeOSへ移動することも可能です。
linuxfolder
マイファイル内のLinuxファイルを開けば出てきます。
あとは、ドラッグアンドドロップでコピー完了となります。
とうことは、Googleドライブに出すことも、USBメモリなどに書き出すこともできますね。

コメント

タイトルとURLをコピーしました