【Chromebook おすすめアプリ】ChromebookでHTML/CSS/JavaScriptを書くならVSCode

※当サイトは Google Adsense、Amazon アソシエイト等 アフィリエイト広告を利用して収益を得ています。

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環境を導入する方法は以下のサイトに書いてあります。

Chromebook で Linux をセットアップする - Chromebook ヘルプ
Linux は、Chromebook を使用してソフトウェアを開発できる機能です。Linux のコマンドライン ツール、コードエディタ、IDE(統合開発環境)を Chromebook にインストールして、コーディングやアプリの開発などを行うことができます。Linux を使用できるデバイスをご確認ください。 重要:

導入自体は非常に簡単です。

今回は、Linux環境を導入したChromebookにVSCodeをインストールする方法をご説明します。

のChromebookのLenovo IdeaPad Duet Chromebookに、Bluetoothのマウスをペアリングして、作業を行いました。

ChromebookのLinux環境でVSCodeをインストールする方法

①VSCodeのダウンロードのページを開く

VSCodeのダウンロードのホームページを開きます。

Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edit...

ここからChromebookにインストールするVSCodeをダウンロードします。

②ダウンロードすべきVSCodeのパッケージを調べる

Chromebookに使用されているCPUはいろいろあります。

CPUによってVSCodeのダウンロードのパッケージが異なるので、それを調べる必要があります。

調べる方法ですが、ランチャーでLinux アプリをクリックし、ターミナルを起動します。

ターミナルに以下のコマンドを入力します。

dpkg --print-architecture

amd64と表示された場合は「64bit」を、rm64と表示されたら「ARM64」をダウンロードすることになります。

③VSCodeをダウンロードする

自分のダウンロードすべきパッケージをクリックしてダウンロードします。

④ChromebookにVSCodeをインストールする

ファイルからダウンロードを選択し、VSCodeのファイルをダブルクリックします。

すると以下の画面になりますので、インストールをクリックします。

すると、インストールが出来ない場合があります。

そんな時は、何度も同じことを繰り返して下さい。

するとインストール出来ます。

インストールが出来ると、ランチャーのLinux アプリをクリックするとVSCodeが表示されます。

⑤VSCodeを日本語化する

インストールしたVSCodeは表示が日本語になっていません。

それを日本語にします。

拡張機能を選択し、検索窓にjapanと入力します。

すると日本語化のパッケージが出てきます。

それを選択しインストールボタンします。

▲この画面はすでに日本語化のパッケージをインストールしてある画面なのでインストールボタンはありません。
インストールをしていない場合は、インストールボタンが表示されますので、それをクリックして下さい。

その後、VSCodeを再起動すると日本語の表示になります。

⑥VSCodeに日本語を入力できるようにする

今のままだとVSCodeの入力が出来ません。

それを出来るようにします。

なおChromebookのLinux環境ですが、ただ導入するだけだと日本語入力は出来ません。

出来るようにする方法は、以下のサイトに載っていますので、それを見て日本語入力出来るようにして下さい。

Chromebook の Linux環境 (日本語)セットアップ
ChromebookのLinux環境設定は知識なしには難易度が高いです。マネするだけで簡単に日本語設定できる方法を説明します。
初期設定&日本語入力を使えるようにする方法|ChromebookでLinux
ChromeOSではLinuxが公式にサポートされています!(Crostini) ほぼコピペだけの簡単セットアップ♪ 基本情報 ディストリビューションは"Debian"。ChromeOS 96以降のデフォルトバージョンは

ランチャーのLinux アプリのFcitxをクリックします。

アイコンはクルクル回っていますが、それを気にしないで、ターミナルに以下のコマンドを入力します。

fcitx-configtool

現れた画面の一覧にあるKeyboard – English(US)を、下にあるーマークをクリックして削除します。

すると以下の画面になります。

+マークをクリックして、mozcを選択してOKボタンをクリックします。

VSCodeを再起動します。

これでVSCodeに日本語入力が出来るようになります。

VSCodeは、HTML/CSS/JavaScript以外の言語を書くが出来ます。

Chromebookは、代表的なプログラミング言語であるJava、Python、Ruby、PHPが使用可能なので、VSCodeを使ってプログラミングが出来ます。

HTML/CSS/JavaScriptだけでなく、プログラミングをChromebookで行いたい方にもオススメできるのがVSCodeです。

ChromebookのLinux環境でVSCodeをインストールする方法 解説動画

このブログ記事の解説動画を作成していますので、参考にご覧いただけたら幸いです。

【Chromebookユーザー必見!Linuxとアプリの活用術】ChromebookにコードエディタのVSCodeをインストールする方法

Chromebook おすすめアプリ

ChromebookはWebブラウザで起動するWebアプリケーション、大体のAndroidアプリケーション、そしてLinuxアプリケーションを使用することが出来ます。

これらを使いこなすことで快適にChromebookで作業することが出来ます。

このブログでは、Chromebookでおすすめのアプリケーションの以下のブログ記事を書いていますので、参考にして頂けたら幸いです。

Chromebook お役立ち

このブログでは、Chromebookでお役に立つ記事を書いていますので、参考にして頂けたら幸いです。

コメント

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