Chromebook Flip C101PAにVisual Studio Codeをインストールするのが簡単になっていた

Chromebookをぼちぼちと使っていますが、開発というレベルのことではなくちょっと空いたときに文書をmarkdown形式で書くことが多いので、Visual Studio Codeは消してしまっていました(Linuxコンテナのサイズを考えたらこっちのほうが小さいはずなんだけど)。ということで、文書はhackmd.ioのサイトで書いています。 ネットワーク環境さえあれば自動で保存もされますし、HTML化して共有することもできるのでこれでほとんどのことが事足ります。ただ、コーディングというわけにも行かないので、そのあたりは割り切る必要はあります。

hackmd.io

と入ってもたまにコーディングもしたくなるものです。ということで最近のVisual Studio Codeの状況も大きく変わったと思うので、ここらで手持ちのASUS Chromebook Flip C101PAにインストールをしてみようと思います。ARMベースの対応もかなり進んだようです。

過去エントリー参考 uepon.hatenadiary.com

Visual Studio Codeのインストールと日本語表示

公式のサイトで以下の様なエントリーがでていました。これを見ながらやっていけばほぼ大丈夫です。もう少し手順があったかなと思いましたが、現在では必要なパッケージを1つと本体をChromebook側からダブルクリックするだけで終わります。

code.visualstudio.com

作業を要約すると

  1. Linuxコンテナの有効化
  2. 依存パッケージのインストール
  3. 処理系チェック(事前にわかっていれば作業は不要)
  4. Visual Studio Code本体のダウンロードとインストール

という作業を行うことになると思います。では、早速作業を行っていきます。

Linuxコンテナの有効化

まずはLinuxコンテナの有効化を行う必要があるので、以下を参考に事前に行っておいてください。

参考 support.google.com

依存パッケージのインストール

あと必要な作業としてはインストールに必要なパッケージがあるので、それを以下のようにインストールします。このパッケージがないと後続のインストール作業が進まないので注意が必要です。

$ sudo apt update
$ sudo apt install -y gnome-keyring

f:id:ueponx:20210104010129p:plain

処理系のチェック

ここまでくるともうVisual Studio Codeのインストール作業の一歩手前まで終わっています。あとはダウンロードを行うVisual Studio Codeパッケージの選択になるのですが、すぐに分かるChromebookもあれば、そうでないものもあると思います。

Intel系であればAMD64のパッケージをダウンロードすれば問題ないと思いますが、自分の使っているChromebookはOSは32bit、Linuxコンテナは64bitという環境なので、できるだけちゃんと情報を見ておいたほうがいいと思ってチェックをしています。 この判別方法が存在します。LinuxCLIで以下を実行して、Visual Studio Codeでダウンロードするファイルの判定を行います。もう少しこの方法を早く知っていれば良かったです。

$ dpkg --print-architecture

f:id:ueponx:20210104010133p:plain

案の定、Chromebook Flip C101PAではarm64系の処理系という表示がでました。これをもとにダウンロードするファイルが決定します。 このコマンドを使用しない場合にはunameコマンドなど判別のヒントになる情報からどれを選ぶかを決定することになります。

パッケージファイルのダウンロード

先程の結果から処理系の情報が手に入ったので、VisualStudioCodeのパッケージのダウンロードを行います。 今回はLinuxのarm64のパッケージファイルをダウンロードします。

f:id:ueponx:20210104010135p:plain

ダウンロードしたらChromebook側のファイルアプリ内でダブルクリックをすればインストールが行われます。 LinuxCLIからdebパッケージのインストールを行う必要はありません。

f:id:ueponx:20210104010139p:plain

ダブルクリックするとLinuxアプリのインストール確認ダイアログが表示されます。ここで【インストール】ボタンをクリックすると、処理が開始されます。

f:id:ueponx:20210104010142p:plain

開始されると画面右下にプログレスバーが表示されます。

f:id:ueponx:20210104010145p:plain

完了したらダイアログの【OK】ボタンをクリックするとインストール作業は完了です。

f:id:ueponx:20210104010149p:plain

インストールが完了すると、すでにVisual Studio Codeが使用可能になっています。 ファインダーの中にLinuxアプリの項目があり、更にその中にVisual Studio Codeのアイコンがあるのでクリックすれば起動可能です。

f:id:ueponx:20210104010152p:plain

起動すると問題なく動作します。ただ、Linuxのコンソール経由で動作しているので、コンソール起動を行っていない場合には初回の起動に少し時間がかかるので注意は必要です。

f:id:ueponx:20210104010157p:plain

あとは拡張機能でLanguage対応をさせれば、メニューなどのUIは日本語環境になります。 拡張でJapnese Language Pack for Visual Studio Codeをインストールすれば…

f:id:ueponx:20210104010200p:plain

ちゃんとUIも日本語化されるようになります。

f:id:ueponx:20210104010205p:plain

ちなみにLinuxCLI上からの起動も問題なく行うことができます。その場合には

$ code

とすれば良いようです。バージョンを表示させてみると2012.01.04現在以下のようになっていました。

f:id:ueponx:20210104010209p:plain

ほとんどやること無く終わった感じです。簡単になりましたね。 ただ、このままでは日本語表示は行えるのですが、日本語入力を行うことはできません。その後の対応が以降になります。

日本語入力対応

日本語化に関しては自分はあまり得意ではありませんので、以下を参考にさせていただきました。ありがとうございます。

参考

qiita.com

作業手順は以下の流れになります。

  1. フォントのインストール
  2. フォントキャッシュの更新
  3. fcitx-mozcのインストール
  4. fcitx-mozcの設定
  5. 自動起動設定
  6. Visual Studio Codeのフォント設定

続けてやっていきましょう。

フォントのインストール

今回は参考にしたエントリと同じように行っていくため、IPAフォントMyricaフォントを使用することにします。

IPAフォント

moji.or.jp

Myricaフォント

myrica.estable.jp

フォントのインストール

$ sudo apt install -y fonts-ipafont fonts-ipaexfont

$ mkdir /tmp/fonts; cd $_
$ wget https://github.com/tomokuni/Myrica/raw/master/product/Myrica.zip
$ unzip Myrica.zip
$ mv ./Myrica.TTC ~/.fonts/

これで上記2つのインストールは完了しました。

フォントキャッシュの更新

フォントを入れるだけでは使用できないので、フォントキャッシュを更新します。以下のコマンドでOKです。

$ fc-cache --force --verbose

オプションは短縮版の-fvでも問題ないと思います。

fcitx-mozcのインストール

あとは日本語入力に必要なfcitx-mozcパッケージをインストールしていきます。

$ sudo apt install -y fcitx-mozc

fcitx-mozcの設定

設定のためにChromeのシェルフ(虫眼鏡ボタン)から【Linuxアプリ】の中から【Fcitx】を起動します。 ※この処理を忘れがちなので注意です。

f:id:ueponx:20210104010212p:plain

fctixの起動をするとツールバー上でロードしているような動きをしますが、起動はすぐ完了します。待っていても表示がかわらないので、次のステップに進んでください。

続いてはfctixを設定していきます。以下のコマンドで設定ツールを起動します。

$ fcitx-configtool

設定ツールを起動すると以下のような画面になります。初期状態では【Input Method】タブが表示され、英語の設定のみが入っています。ここに日本語の設定を追加していきます。※設定に関しては、変更すると自動保存・反映されるのでそのまま閉じて大丈夫です。

f:id:ueponx:20210104010215p:plain

画面したにある【+】ボタンをクリックして

f:id:ueponx:20210104010219p:plain

追加する言語の操作ダイアログが開きます。まず、中程にある【Only Show Current Language】のチェックボックスのチェックを外します。そうしないと新しい言語設定が表示されません。

f:id:ueponx:20210104010223p:plain

そして下に方にある入力ボックスにMozcと入力して検索を行います。(自動で絞り込みされていきます)

f:id:ueponx:20210104010226p:plain

あとは【OK】をクリックすれば設定の追加は完了です。

f:id:ueponx:20210104103700p:plain

ダイアログが閉じたあとにMozcがリストに追加されているのを確認しましょう。

f:id:ueponx:20210104103706p:plain

あとは、日本語入力の開始トリガーの設定をしておきます。これは必要ないかもしれませんが、個人好みでお願いします。【Global Config】を選択して、1番上にある【Triger Input Method】の項目の隣にある【Ctrl+Space】ボタンをクリックします。デフォルトはCtrl+Spaceが起動トリガーになっているので、変更しない場合にはこの設定は不要です。

f:id:ueponx:20210104010230p:plain

するとトリガーキーとなる、キーの入力待ちのダイアログが開きます。

f:id:ueponx:20210104010233p:plain

私は【かな↔英数】(【全角/半角】)キーを割り当てるのが好きなので、それを押すと表示が以下のように変更します。認識されるキーであればどれでも使用可能のようです。

f:id:ueponx:20210104010235p:plain

設定に関しては、変更すると自動保存・反映されるのでそのまま閉じて大丈夫です。 これで、日本語入力もうまくいくようになりました。

f:id:ueponx:20210104010238p:plain

自動起動設定

あとはfcitxを事前に起動しておかないと日本語入力が行えないのですが、以下のコマンドで設定ができるそうです。

$ fcitx-autostart

と、これで再起動しても、Linuxコンテナ起動時に自動起動されると思ったのですがうまく行きませんでした。 そこで以下のように.profileファイルの末尾に以下の様にしてfcixを実行する設定を追加しました。

$ echo "fcitx > /dev/null 2>&1" >> ~/.profile

Visual Studio Codeのフォント設定

あとは、好みの話ですが、せっかくフォントをインストールしたのでVisual Studio Codeのフォント設定を変更しておきます。

フォントの変更をVisual Studio Codeの【設定】で行っていきます。

Font FamilyMyrica Mを追加

f:id:ueponx:20210104010242p:plain

Editor: Render Whitespacenoneに変更。(空白文字表示の部分で全角スペースと半角スペースが同じ表示になるために変更しています)

f:id:ueponx:20210104010245p:plain

qiita.com

おわりに

以前に比べると格段に作業が楽になりました。以前やったときには、設定のダイアログ操作がうまくいかないこともありましたが、もうそんなことはありません。動きもChromebook Flip C101PAにしてはスムーズに動いているので安心してしようできると思います。

あとはpythonとか、Node.jsの環境を整えるとかなり使えるようになりますね。

自分はたまにしかコーディングはしませんが、タイミングを見つけて使用していこうかなと思っています。

参考

uepon.hatenadiary.com

qiita.com