ChromebookでHTML/CSS/JavaScriptを書くならVSCode
Chromebookは基本的にオンラインで起動するWebアプリケーションを使用して使うパソコンです。
オンラインで使用するWebアプリケーションの一つにブログがあります。
実際にChromebookでブログを、WordPressなどを使用して書いている方は多いと思います。
ブログを書いていると、本格的なブログを作りたいを思ったりすると思います。
それにはHTML/CSS/JavaScriptが必要です。
これらはChromebookの付属のTextというテキストエディタで書くことは出来ます。
しかしHTML/CSS/JavaScriptを書くには、Textより専用のエディタを使った方が、コードの補助などをしてくれるので非常に便利です。
そこでオススメしたいのがVSCodeです。
ChromebookでVSCodeを使用するには、ChromebookにLinux環境を導入することが必要です。
ChromebookにLinux環境を導入する方法は以下のサイトに書いてあります。
導入自体は非常に簡単です。
今回は、Linux環境を導入したChromebookにVSCodeをインストールする方法をご説明します。
のChromebookのLenovo IdeaPad Duet Chromebookに、Bluetoothのマウスをペアリングして、作業を行いました。
![](http://image.moshimo.com/af-img/2262/000000036328.png)
ChromebookのLinux環境でVSCodeをインストールする方法
①VSCodeのダウンロードのページを開く
VSCodeのダウンロードのホームページを開きます。
![](https://nabesang.com/wp-content/uploads/cocoon-resources/blog-card-cache/2d12e02afa45389f9df5f8f7ed2e9d01.png)
ここからChromebookにインストールするVSCodeをダウンロードします。
![](https://nabesang.com/wp-content/uploads/2021/12/001-3.png)
②ダウンロードすべきVSCodeのパッケージを調べる
Chromebookに使用されているCPUはいろいろあります。
CPUによってVSCodeのダウンロードのパッケージが異なるので、それを調べる必要があります。
調べる方法ですが、ランチャーでLinux アプリをクリックし、ターミナルを起動します。
ターミナルに以下のコマンドを入力します。
dpkg --print-architecture
![](https://nabesang.com/wp-content/uploads/2021/12/002-3.png)
amd64と表示された場合は「64bit」を、rm64と表示されたら「ARM64」をダウンロードすることになります。
③VSCodeをダウンロードする
自分のダウンロードすべきパッケージをクリックしてダウンロードします。
![](https://nabesang.com/wp-content/uploads/2021/12/003-3.png)
④ChromebookにVSCodeをインストールする
ファイルからダウンロードを選択し、VSCodeのファイルをダブルクリックします。
![](https://nabesang.com/wp-content/uploads/2021/12/004-3.png)
すると以下の画面になりますので、インストールをクリックします。
![](https://nabesang.com/wp-content/uploads/2021/12/005-3.png)
すると、インストールが出来ない場合があります。
そんな時は、何度も同じことを繰り返して下さい。
するとインストール出来ます。
インストールが出来ると、ランチャーのLinux アプリをクリックするとVSCodeが表示されます。
![](https://nabesang.com/wp-content/uploads/2021/12/006-3.png)
⑤VSCodeを日本語化する
インストールしたVSCodeは表示が日本語になっていません。
それを日本語にします。
拡張機能を選択し、検索窓にjapanと入力します。
すると日本語化のパッケージが出てきます。
それを選択しインストールボタンします。
![](https://nabesang.com/wp-content/uploads/2021/12/007-3.png)
インストールをしていない場合は、インストールボタンが表示されますので、それをクリックして下さい。
その後、VSCodeを再起動すると日本語の表示になります。
![](https://nabesang.com/wp-content/uploads/2021/12/008-3.png)
⑥VSCodeに日本語を入力できるようにする
今のままだとVSCodeの入力が出来ません。
それを出来るようにします。
なおChromebookのLinux環境ですが、ただ導入するだけだと日本語入力は出来ません。
出来るようにする方法は、以下のサイトに載っていますので、それを見て日本語入力出来るようにして下さい。
![](https://3nmt.com/wp-content/uploads/2023/07/chromebook-linux-setup-01.webp)
![](https://nabesang.com/wp-content/uploads/cocoon-resources/blog-card-cache/4bf4c3edc631d96ce9ffba32ced9a804.jpg)
ランチャーのLinux アプリのFcitxをクリックします。
![](https://nabesang.com/wp-content/uploads/2021/12/009-3.png)
アイコンはクルクル回っていますが、それを気にしないで、ターミナルに以下のコマンドを入力します。
fcitx-configtool
![](https://nabesang.com/wp-content/uploads/2021/12/010-3.png)
現れた画面の一覧にあるKeyboard – English(US)を、下にあるーマークをクリックして削除します。
すると以下の画面になります。
![](https://nabesang.com/wp-content/uploads/2021/12/011-2.png)
+マークをクリックして、mozcを選択してOKボタンをクリックします。
![](https://nabesang.com/wp-content/uploads/2021/12/012-2.png)
VSCodeを再起動します。
これでVSCodeに日本語入力が出来るようになります。
![](https://nabesang.com/wp-content/uploads/2021/12/013-2.png)
VSCodeは、HTML/CSS/JavaScript以外の言語を書くが出来ます。
Chromebookは、代表的なプログラミング言語であるJava、Python、Ruby、PHPが使用可能なので、VSCodeを使ってプログラミングが出来ます。
HTML/CSS/JavaScriptだけでなく、プログラミングをChromebookで行いたい方にもオススメできるのがVSCodeです。
ChromebookのLinux環境でVSCodeをインストールする方法 解説動画
このブログ記事の解説動画を作成していますので、参考にご覧いただけたら幸いです。
![](http://image.moshimo.com/af-img/2262/000000036328.png)
![](http://image.moshimo.com/af-img/1762/000000038398.png)
Chromebook おすすめアプリ
ChromebookはWebブラウザで起動するWebアプリケーション、大体のAndroidアプリケーション、そしてLinuxアプリケーションを使用することが出来ます。
これらを使いこなすことで快適にChromebookで作業することが出来ます。
このブログでは、Chromebookでおすすめのアプリケーションの以下のブログ記事を書いていますので、参考にして頂けたら幸いです。
Chromebook お役立ち
このブログでは、Chromebookでお役に立つ記事を書いていますので、参考にして頂けたら幸いです。
![](http://image.moshimo.com/af-img/2262/000000036328.png)
コメント