Chromebookをぼちぼちと使っていますが、開発というレベルのことではなくちょっと空いたときに文書をmarkdown形式で書くことが多いので、Visual Studio Codeは消してしまっていました（Linuxコンテナのサイズを考えたらこっちのほうが小さいはずなんだけど）。ということで、文書はhackmd.ioのサイトで書いています。
ネットワーク環境さえあれば自動で保存もされますし、HTML化して共有することもできるのでこれでほとんどのことが事足ります。ただ、コーディングというわけにも行かないので、そのあたりは割り切る必要はあります。
と入ってもたまにコーディングもしたくなるものです。ということで最近のVisual Studio Codeの状況も大きく変わったと思うので、ここらで手持ちのASUS Chromebook Flip C101PAにインストールをしてみようと思います。ARMベースの対応もかなり進んだようです。
過去エントリー参考 uepon.hatenadiary.com
Visual Studio Codeのインストールと日本語表示
公式のサイトで以下の様なエントリーがでていました。これを見ながらやっていけばほぼ大丈夫です。もう少し手順があったかなと思いましたが、現在では必要なパッケージを1つと本体をChromebook側からダブルクリックするだけで終わります。
作業を要約すると
- Linuxコンテナの有効化
- 依存パッケージのインストール
- 処理系チェック（事前にわかっていれば作業は不要）
Visual Studio Code本体のダウンロードとインストール
という作業を行うことになると思います。では、早速作業を行っていきます。
Linuxコンテナの有効化
まずはLinuxコンテナの有効化を行う必要があるので、以下を参考に事前に行っておいてください。
依存パッケージのインストール
あと必要な作業としてはインストールに必要なパッケージがあるので、それを以下のようにインストールします。このパッケージがないと後続のインストール作業が進まないので注意が必要です。
$ sudo apt update
$ sudo apt install -y gnome-keyring
処理系のチェック
ここまでくるともうVisual Studio Codeのインストール作業の一歩手前まで終わっています。あとはダウンロードを行うVisual Studio Codeパッケージの選択になるのですが、すぐに分かるChromebookもあれば、そうでないものもあると思います。
Intel系であればAMD64のパッケージをダウンロードすれば問題ないと思いますが、自分の使っているChromebookはOSは32bit、Linuxコンテナは64bitという環境なので、できるだけちゃんと情報を見ておいたほうがいいと思ってチェックをしています。
この判別方法が存在します。LinuxのCLIで以下を実行して、Visual Studio Codeでダウンロードするファイルの判定を行います。もう少しこの方法を早く知っていれば良かったです。
$ dpkg --print-architecture
案の定、Chromebook Flip C101PAではarm64系の処理系という表示がでました。これをもとにダウンロードするファイルが決定します。
このコマンドを使用しない場合にはunameコマンドなど判別のヒントになる情報からどれを選ぶかを決定することになります。
パッケージファイルのダウンロード
先程の結果から処理系の情報が手に入ったので、VisualStudioCodeのパッケージのダウンロードを行います。 今回はLinuxのarm64のパッケージファイルをダウンロードします。
ダウンロードしたらChromebook側のファイルアプリ内でダブルクリックをすればインストールが行われます。
LinuxのCLIからdebパッケージのインストールを行う必要はありません。
ダブルクリックするとLinuxアプリのインストール確認ダイアログが表示されます。ここで【インストール】ボタンをクリックすると、処理が開始されます。
開始されると画面右下にプログレスバーが表示されます。
完了したらダイアログの【OK】ボタンをクリックするとインストール作業は完了です。
インストールが完了すると、すでにVisual Studio Codeが使用可能になっています。
ファインダーの中にLinuxアプリの項目があり、更にその中にVisual Studio Codeのアイコンがあるのでクリックすれば起動可能です。
起動すると問題なく動作します。ただ、Linuxのコンソール経由で動作しているので、コンソール起動を行っていない場合には初回の起動に少し時間がかかるので注意は必要です。
あとは拡張機能でLanguage対応をさせれば、メニューなどのUIは日本語環境になります。
拡張でJapnese Language Pack for Visual Studio Codeをインストールすれば…
ちゃんとUIも日本語化されるようになります。
ちなみにLinuxのCLI上からの起動も問題なく行うことができます。その場合には
$ code
とすれば良いようです。バージョンを表示させてみると2012.01.04現在以下のようになっていました。
ほとんどやること無く終わった感じです。簡単になりましたね。 ただ、このままでは日本語表示は行えるのですが、日本語入力を行うことはできません。その後の対応が以降になります。
日本語入力対応
日本語化に関しては自分はあまり得意ではありませんので、以下を参考にさせていただきました。ありがとうございます。
参考
作業手順は以下の流れになります。
- フォントのインストール
- フォントキャッシュの更新
- fcitx-mozcのインストール
- fcitx-mozcの設定
- 自動起動設定
- Visual Studio Codeのフォント設定
続けてやっていきましょう。
フォントのインストール
今回は参考にしたエントリと同じように行っていくため、IPAフォントとMyricaフォントを使用することにします。
Myricaフォント
フォントのインストール
$ 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】を起動します。 ※この処理を忘れがちなので注意です。
fctixの起動をするとツールバー上でロードしているような動きをしますが、起動はすぐ完了します。待っていても表示がかわらないので、次のステップに進んでください。
続いてはfctixを設定していきます。以下のコマンドで設定ツールを起動します。
$ fcitx-configtool
設定ツールを起動すると以下のような画面になります。初期状態では【Input Method】タブが表示され、英語の設定のみが入っています。ここに日本語の設定を追加していきます。※設定に関しては、変更すると自動保存・反映されるのでそのまま閉じて大丈夫です。
画面したにある【＋】ボタンをクリックして
追加する言語の操作ダイアログが開きます。まず、中程にある【Only Show Current Language】のチェックボックスのチェックを外します。そうしないと新しい言語設定が表示されません。
そして下に方にある入力ボックスにMozcと入力して検索を行います。（自動で絞り込みされていきます）
あとは【OK】をクリックすれば設定の追加は完了です。
ダイアログが閉じたあとにMozcがリストに追加されているのを確認しましょう。
あとは、日本語入力の開始トリガーの設定をしておきます。これは必要ないかもしれませんが、個人好みでお願いします。【Global Config】を選択して、1番上にある【Triger Input Method】の項目の隣にある【Ctrl＋Space】ボタンをクリックします。デフォルトはCtrl＋Spaceが起動トリガーになっているので、変更しない場合にはこの設定は不要です。
するとトリガーキーとなる、キーの入力待ちのダイアログが開きます。
私は【かな↔英数】（【全角/半角】）キーを割り当てるのが好きなので、それを押すと表示が以下のように変更します。認識されるキーであればどれでも使用可能のようです。
設定に関しては、変更すると自動保存・反映されるのでそのまま閉じて大丈夫です。 これで、日本語入力もうまくいくようになりました。
自動起動設定
あとはfcitxを事前に起動しておかないと日本語入力が行えないのですが、以下のコマンドで設定ができるそうです。
$ fcitx-autostart
と、これで再起動しても、Linuxコンテナ起動時に自動起動されると思ったのですがうまく行きませんでした。
そこで以下のように.profileファイルの末尾に以下の様にしてfcixを実行する設定を追加しました。
$ echo "fcitx > /dev/null 2>&1" >> ~/.profile
Visual Studio Codeのフォント設定
あとは、好みの話ですが、せっかくフォントをインストールしたのでVisual Studio Codeのフォント設定を変更しておきます。
フォントの変更をVisual Studio Codeの【設定】で行っていきます。
Font FamilyにMyrica Mを追加
Editor: Render Whitespaceをnoneに変更。（空白文字表示の部分で全角スペースと半角スペースが同じ表示になるために変更しています）
おわりに
以前に比べると格段に作業が楽になりました。以前やったときには、設定のダイアログ操作がうまくいかないこともありましたが、もうそんなことはありません。動きもChromebook Flip C101PAにしてはスムーズに動いているので安心してしようできると思います。
あとはpythonとか、Node.jsの環境を整えるとかなり使えるようになりますね。
自分はたまにしかコーディングはしませんが、タイミングを見つけて使用していこうかなと思っています。
参考
