たねやつの木

Photos and Programming

Chromebook C101PAでVSCodeを使う。(Crostini使用)

こんばんは、たねやつです。 ついにこのときが来たかという感じで記事を書いている今でも興奮冷めやらぬという感じです!!

題名の通りVSCodeをchromebookでまともに使うことができるようになりました! いろんな先人たちの知恵をお借りして「なんか出来ちゃった」感はありますが、布教も兼ねて記事にしてみます。(´∀`)

手順

Linuxを使用可能にする

Chrome OS 69から正式版チャンネルでもLinux環境を導入することができます。詳しい手順などは他の方の記事などを参照してください。現在ではStableチャンネルの状態からほんの数クリックで有効化できるようになり、裏技感はだいぶなくなりましたね!

各種更新実行

導入が完了したら、「コンソール」というアプリ(>_みたいなアイコン)を起動して各種Linuxのパッケージ更新を行います。通信環境やサーバーの状態によるかもしれませんが、20-30分ほどかかります。

以下のコマンドを実行して最新のパッケージリストを取得、更新を実行します。($の入力は不要で、一行入力するたびにエンターキーを押してください。)

$ sudo apt-get update
$ sudo apt-get -y upgrade

fcitx-mozcをインストールする

入力メソッドにはfcitxを使用します。日本語入力システムにはmozcを使用します。mozcはGoogleが開発してGoogle日本語入力としても使用されています。というかGoogle日本語入力のOSS版だったかもともとのプロダクト名がmozcというだったような?

https://wiki.archlinux.jp/index.php/Fcitx

fcitxがいないと、Linux上で実行しているアプリで日本語入力ができなくなります。 最初に私がCrostiniでVSCodeをインストールしたときにはこいつに関してすっかり考慮していなかったため日本語入力が一切できないという状態で諦めていました。

ChromeOS上にも同じような入力メソッドフレームワークが動作しているので問題なく日本語入力できているのだと思いますが、それとは切り離されたLinux上の世界でも同じく必要なのだと思います。

fcitxはPixelbookやamd64という形式のCPUを積んでいるchromebookではそのままapt-getというコマンドで導入できるのですが、あいにくC101PAのCPUはarm64という形式です。arm64用の入力メソッドの安定版はfcitxibusも現在は存在してないです。

ですので、テスト版として公開されているDebian Buster(Debian Stretchの次のバージョン)用のarm64向けのfcitxをインストールすることにします。

https://packages.debian.org/buster/fcitx-mozc

このページからdebファイルを取得してインストールすることもできますが、動作に必要なファイル(依存関係にあるファイル)も一緒にインストールする必要があるので、apt-getからインストールできるようにします。

ちなみにテスト版と言いつつも次バージョンのDebian 10(Buster)では実装されるっぽいので、これもそのうち(testing)ではなくなると思います。正式版のリリースは2019年中頃だそうです。

Debian Buster(testing)用のリポジトリを追加

以下の内容を/etc/apt/sources.listというファイルに追加します。

deb http://ftp.jaist.ac.jp/debian buster main

コマンドとしては、sudo vim /etc/apt/sources.listで開いたファイルの末尾に上記の一行を追加する感じですが、、、vimというLinuxのテキストエディタがあるのですがこれが初めて触る人にとっては拷問に等しい使い心地です。。。

以下の記事に目を通してファイルの開き方、文字入力の仕方、保存の仕方を理解しておかないとおそらく何もできないかと思いますorz

ですのでここはもうちょっと簡単な方法を取ります。以下のコマンドを実行してください!

$ sudo -s
# echo "deb http://ftp.jaist.ac.jp/debian buster main" >> /etc/apt/sources.list
# exit
$ view /etc/apt/sources.list
deb http://deb.debian.org/debian stretch main
deb http://security.debian.org/debian-security stretch/updates main
deb http://ftp.jaist.ac.jp/debian buster main

sudo -sを実行すると、文字の色が変わり、文字を入力する前の部分が#になっているのがわかると思います。この状態ではスーパーユーザー状態となりありとあらゆるコマンドを実行できます。Windowsでいう管理者権限で実行と同じような感じです。exitでもとの状態($)に戻ります。

sources.listというファイルへの書き込みはスーパーユーザー(rootユーザーとも)からしか許可されていませんのでこのように権限を昇格させています。

そこで実行しているecho ...というコマンドは「文字列を表示させて、その文字列をsources.listの末尾に追加する」という感じです。これでテキストエディタを使わなくともファイルに文を追加できます。こういう動作がLinuxの面白いとこですよね。

注意すべき点として、必ず>>と入力されていることを確認してからエンターキーを押してください。もし>となっているともとからある内容がすべて消えてしまいますので注意してください。

viewというコマンドで指定したファイルの中身を見ることができます。これでちゃんと追記できているか確認できます。同じようにlesscattailというコマンドでもファイルの中身を確認することができます。

ここに書いてある内容に従ってapt-get update実行時にパッケージリストを取得して、apt-get install ....でインストールすることができるようになります。

追記が完了したら再度sudo apt-get updateを実行して新しいパッケージリストを取得しましょう!(^o^) ちょっとだけ時間がかかるかもしれません。。

多分の話なのですがこの状態でapt-get dist-upgradeを実行するとDebian自体のバージョンが上がってしまうと思いますのでお気をつけて^^;

本当はibus-mozcの方を導入したかったのですが、2回試して2回ともLinuxの内部ファイルを破壊 -> Powerwashしてしまいましたorz 逆に言えばChromebookだと端末の初期化とLinuxの有効化が超簡単なのでお勉強には最適かもしれませんね^^;

インストール実行

あとはapt-get installを実行するだけです。以下のコマンドを参考にしてください。

$ sudo apt-get install -y fcitx-mozc

これまた10分ほど時間がかかるかもしれませんが、辛抱強く待ちましょう。。( ^^) _旦~~

導入が完了したら、以下のバージョン確認コマンドで一応確認しておきましょう。

$ fcitx -v
fcitx version: 4.2.9.6
フォントを追加

入力メソッドと日本語用のモジュールも導入しましたが肝心の日本語用フォントがありません!ので追加します。他の方の記事をみてパッケージリストに追加されていることを知りました。

$ sudo apt-get install fonts-noto

これでNoto Sans CJK JPNoto Sans Mono CJK JPが使えるようになります。テキストエディタには等幅フォントは必須ですよね。NotoフォントなのでChromebookとの統一感も出ます(´∀`)

Myricaとかも試しては見たのですが、なぜか線が細すぎて見づらくなってしまい断念。独自のフォントを導入したい場合はotfttf形式のフォントファイルを/usr/share/fonts/内において再起動してあげると反映されます。

fcitxの設定(必須)

以下のコマンドでfcitxの設定を呼び出すことができます。

$ fcitx-configtool

まずはInput Methodを追加します。

  1. 左下の方の+ボタンを押して表示されたポップアップの、Only Show Current Language のチェックボックスを外します。
  2. その次にSearch Input Methodをクリックして、mozcと入力します。
  3. 上に表示されたmozcをクリックして追加完了です。

次にフォントを設定します。

  1. 画面上部のAppearanceタブを選択します。
  2. fontのところに表示されているフォント名をクリックします。(デフォルトに何が表示されているのかメモし忘れました。。)
  3. search font nameをクリックしてNoto Sans CJK JPと入力します。
  4. 表示されているNoto Sans CJP JP Regularを選択して完了。
  5. Menu fontの方でも同じように設定する。

これで必要最低限の設定は完了です。お好みでGlobal ConfigTrigger Input Methodの項目で入力言語変換のショートカットキーを変更できます。私はChromeOS側との統一性を保つためにCtrl + Spaceから変更していません。

Appearanceのところから変換候補ウィンドウのスキンを変更できるようなのですが何故か何を設定しても反映されず。

mozcの設定(必須ではない)

以下のコマンドでmozcの設定画面を起動することができます。ほぼ同じ画面をchrome OS用のGoogle日本語入力の言語設定からも呼び出すことができますね!

$ /usr/lib/mozc/mozc_tool --mode=config_dialog

私の場合は、日本語入力の場合でもスペースは絶対に半角にしたいのでこの画面から設定しました。Space input stylehalfwidthにすると設定できます。これで全角半角のゆらぎを撲滅できますね(^o^)

https://wiki.archlinux.jp/index.php/Mozc#Fcitx

VSCode(oss-code)をインストールする

本命のVSCodeのインストールです。以下のリンクからarm64用にビルドされたVSCodeのパッケージを取得できます。

見出しのarm64 > pre-built deb packageの下のlatestにあるリンクをクリックするとdebファイルという、Windowsでいうexeファイルを取得できます。そのファイルをLinux用のフォルダ(ペンギンマーク)の中に保存します。このフォルダ(というかディレクトリ)はコンソールを起動したときに一番最初にいるディレクトリと同じです。

ダウンロードが完了したら続けて以下のコマンドを実行します。コマンドのあとの#以降はコメントですので、入力は不要です。

$ cd        # ホームディレクトリに移動
$ sudo apt -y install ./[ダウンロードしたファイル名]

でOKです。ファイル名を入力するときは、先頭の数文字を入力してtabキーを押すと自動で補完してくれます。

これも依存関係にあるファイルを取得するため数分時間がかかります。完了するとoss-codeという名前でChromeOSの方でアイコンが追加されているはずです。そのまま起動してもいいかもしれませんが、とりあえずこのへんでchromebookを一回再起動しておきましょう!




以下私の失敗談なのですが、aptでインストールする代わりにdpkg -iを使用して依存関係を解決できずにインストール失敗になりました。一度この状態になるとその依存関係が解決されるまでインストールが保留された状態になります。

依存関係を解決するためにはsudo apt --fix-broken installを実行しました。このコマンドで依存関係ファイルのインストールと、oss-codeのインストールまで一発でした。

起動時に行うこと

ChromeOSおよびLinuxの起動時にはfcitxは自動では起動してくれませんので手動で起動する必要があります。以下のコマンドをターミナルで実行してください。

$ fcitx-autostart
...
(INFO-3235 addon.c:151) Load Addon Config File:fcitx-notificationitem.conf
(ERROR-3235 ime.c:432) fcitx-keyboard-cm-mmuock already exists
(WARN-3235 xim.c:161) Please set XMODIFIERS.

エラーと環境変数に値がセットされていない的な警告が表示されていますがとりあえず動いてるので一旦放置します。面倒なので~/.bashrcに以下の一行を追加しておきます。そうすることによってターミナル起動時に自動でコマンドを実行してくれます。

$ cd                # ホームへ移動
$ echo "fcitx > /dev/null 2>&1" >> .bashrc

先ほどと同じくechoコマンドで追記します。今度は.bashrcというファイルはスーパーユーザー権限がなくても編集できるのでsudoは行いません。これで起動時にfcitx > /dev/null 2>&1が実行されます。>以降の内容はコマンド実行時の出力内容をすべて闇に葬り去るという感じです。

(ちなみにArch Linuxのページでは.bashrcに起動コマンドを書くことは推奨されていませんが、動けばいいの精神でここに追記しています。。)

VSCodeのエディタのフォント設定

再起動が完了したらアイコンから起動してみましょう。2-3秒ですんなりと立ち上がるはずです。この立ち上がりの速さもVSCodeの魅力ですよね!atomもこれぐらい早く起動するようになったのでしょうか?

このまま日本語入力をしても変な□□□が表示されるだけだだと思いますので、日本語フォントを指定してあげる必要があります。

画面右下の歯車マークを押してSettingsを選択するかCtrl + ,で設定画面(GUI)を開くことができます。ちょっと前のバージョンまではデフォルトではjson形式のファイルが開かれていたのですが、今はGUIで表示されるのですね。

4つ目ぐらいの項目にFont Familyとありますのでそこを修正します。もともと以下のようになっているのを、

'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'

'Noto Sans Mono CJK JP', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'

と変更します。等幅フォントが嫌いという方は'Noto Sans CJK JP'としてください。テキストエディタとして使用するのであれば等幅フォントが断然おすすめです。

ついでにFont Size17ぐらいに変更しておきましょう。デフォルトではC101PAには小さぎます(笑)

保存とかはなく即時変更が反映されますので完了したらタブを閉じましょう。

入力してみる

Ctrl + nで新規ファイルを開き入力してみましょう。重要なことですが、VSCodeのウィンドウ選択する前にchromeなどからchromeOS側での入力モードを英数字に切り替えて置く必要があります。日本語入力の状態でVSCodeに文字を入力しようとすると、Ctrlがおされっぱなしの状態で文字入力されるようです。挙動が変だと感じた場合はまずはここを疑ってみてください。

英数字は問題なく最初から入力できるのですが、日本語入力状態にして文字を入力してみてください。どうでしょうか?

f:id:ibuquicallig:20181105232311p:plain

無事に日本語が入力・表示されていれば成功です!お疲れ様でした(^o^) そして超軽量・超電池持ちのいいテキストエディタ環境をゲットとなります(´∀`)

プログラミングも出先で書いて、コミットして家に戻ってから単体動作テストと割り切れば案外運用できるかもしれません。ApacheNode.jsも頑張れば動かせるのかもしれません。

Extension Gallaryを有効にする

デフォルトの状態だと拡張機能の追加ができない状態なので設定ファイルに追記します。とりあえずエディタとして使えればOKという人は不要かもしれませんが、拡張機能を入れてこそのVSCodeと思いますので導入をおすすめします。

$ sudo vim /usr/share/code-oss/resources/app/product.json

でエディタ画面を開き、一番最後の}の一行上に以下の内容を追加します。

"extensionsGallery": {
    "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
    "cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
    "itemUrl": "https://marketplace.visualstudio.com/items"
}

ファイルの最後の方はこんな感じになります。

    "commit": "",
    "date": "2018-08-18T07:31:30.111Z",
    "checksums": {
        ...
    },
    "extensionsGallery": {
        "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
        "cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
        "itemUrl": "https://marketplace.visualstudio.com/items"
    }
}

"extensionsGallery"の上の},}となってしまっている場合は、,を追加してください。

vimコマンドの基本的な使い方に関しては以下を参考にしてください。どうでしょうか?普通のWindowsのメモ帳が超親切に思えてきますよね(笑)

※HelloVim!の章までで入力モードの切り替え、保存方法などが書いてあります。(それ以降は今回は読む必要特になし)

なれてしまえば結構使いやすかったりしますが、私は全然なれません。。

使ってみた感じ

まだmarkdownでこの記事を作成するぐらいしか行っていませんが、Windows版と遜色なく使えています。

↓キー押しっぱなしでスクロールすると数ミリ秒カクつくこともありますが許容範囲という感じです。 あとはC101PAの画面がちっちゃいから分割表示が微妙という半ばとばっちりのようなつかいにくさぐらいしか感じませんね(笑)

突然変換できなくなった場合

fcitxの設定ファイルを弄っているときなんかによく発生するのですが、Ctrl + spaceで入力メソッドの変更が効かなくなることがあります。そんなときにはfcitxを再起動すればいいのですが再起動用のコマンドとかが見つからないのでいつもkillコマンドを実行してしまっています。。(笑)

以下の方法で再起動はできるのですがなにかいい方法はないでしょうか?

$ pgrep fcitx   # fcitxのPIDを調べる
3235            # これが親プロセス(多分)
3246            # 子プロセス(多分)
$ kill 3235
$ fcitx-autostart   # 起動

最後に

Chromebookはたいへん気に入っていたのですが、使い慣れたエディタを使えることによってますます便利になりました!

CrostiniもChromeOS正式版で使えるようになったので裏技感は一切なくなって人にも勧めやすくなりました(笑) これを気に周りのChromebookers(C101PAers?)にVSCodeを布教していけたらな、と思います(´∀`)

ご不明点、わかりにくい点や間違っている点があればぜひコメントお願いいたしますm(__)m

大いに参考にした記事

大変感謝です。。(^^)

https://matoken.org/blog/2018/10/23/debian-ubuntu-borrows-the-upstream-package/