ChromebookでWeb開発環境を整えるのに意外と手間取ったので共有します。エディタはEmacsを使いますが、その手前までは誰にでも有用かなと。間違っている部分があれば、ご指摘をお願い致します。

手順としては

Linux (Beta) の有効化
Linuxリポジトリ追加
Emacsとmozcインストール
init.el設定

がざっくりした流れです。

なぜChromebookなのか？

ChromebookってChromeしか使えないし、ローカルデータ無くて使いづらそう…みたいな声もあると思います。でも、ノマド的な開発がしたい時におすすめできる存在です。

Chromebookは持ち運びにおいて優れています。まず、起動とシャットダウンが爆速。起動するのに5秒、終了に2秒と言われています。いつでもどこでも開発したい気持ちに応えてくれるのです。カフェとか外で開発したい人におすすめ。他にも色々なメリットがあります。

ローカル依存性が低い

最大の特徴はChromeOSです。Windows、Mac、Linuxなど他のOSとは異なり、ChromeOSで扱えるアプリケーションはGoogle Chromeのみです。必然的にGoogleアカウントに依存するのですが、逆にどの端末からも同じ環境が揃うという強みになります。

軽い動作、長持ちバッテリー、リーズナブルな価格

これらはChromeOSの貢献が大きいと思います。アプリが一種類のみなので余分なアプリが無くて動作は軽く、電力消費も少ない。ハードの性能も要求されないので安く済む。持ち運びの際にも余計なACコードなどを携帯しなくて良いので身軽になれす。

1. Linux (Beta) の有効化

設定からLinux (Beta)のオプションをオンに変更することでLinuxのインストールが行われます。所要時間は20分程と重い処理をしていて、ChromeOSのシェルに仮想環境としてLinux OSを追加しています。

設定 -> 🔎[Linux] -> Linux (ベータ版)を有効にする
で有効化できます。

面白いのがファイルエクスプローラ(Shift + Alt +m)からLinuxのローカルファイルにアクセスできることです。ChromeOS上に仮想環境を作っているので上位のOSからは自由にアクセスできるんですね。

2. Linuxリポジトリ追加

LinuxがインストールできたのでEmacsとmozcをインストールしようとしたんですが、なぜかmozcだけがインストールできませんでした。そもそも見つからないよ、というエラー(E: Unable to locate package emacs-mozc)だったので、この場合のLinuxリポジトリにemacs-mozcが入っていないだけっぽい。

なのでemacs-mozcのあるリポジトリを持ってくれば良い。
これは割と時間がかかる。

deb http://deb.debian.org/debian buster main  # リポジトリの追加
sudo apt update
apt-cache search mozc                         # mozcの追加を確認
  > ... emacs-mozc emacs-mozc-bin ...
apt install fcitx-mozc -t buster              # mozcのインストール
sudo apt update
sudo apt upgrade

参考：Debian, Ubuntu で上流のパッケージを借りてくる – matoken's meme

3. Emacsとmozcインストール

リポジトリを追加したら後はやるだけ。

Emacsのインストール
sudo apt-get install emacs

mozcのインストール
sudo apt-get install emacs-mozc emacs-mozc-bin

4. init.el設定

初期設定用のファイルをクローン。
git clone https://github.com/wakadorimk2/EditorEnvironment/ ~/.emacs.d/

githubに上げていますが、重要な所を説明します。

パッケージ管理

Emacsにはパッケージマネージャが備え付けられています。任意のパッケージをM-x package-install<RET>の後にパッケージ名を入力して<RET>でインストールできます。パッケージ名が分からない時は入力途中に<TAB>でサジェストが検索できますし、M-x list-packagesで一覧をズラッと並べて探すこともできます。

また、そのパッケージの選択肢を増やすために色々なリポジトリを取り込んでおきます。

オープンソース∩(・ω・)∩ばんじゃーい

;; package管理 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(package-initialize)
(setq package-archives
      '(("gnu" . "http://elpa.gnu.org/packages/")
        ("melpa" . "http://melpa.org/packages/")
        ("org" . "http://orgmode.org/elpa/")))

ホームポジションから離れない日本語切替

これはemacserにはありがち(?)なんですが、emacsを使う大きなメリットが「ホームポジションから手を動かさなくて済む」なんですよね。逆に言えばこれを侵害するようなキー操作っていうのは死にものぐるいで排除するべきなんです。

その一例が「かな英数切替キー」です。英語と日本語の切替の度にホームポジションを離れて押していたので、ひどくストレスでした。ある日気づいたのは「Macスタイル」の切替ならば、ホームポジションから離れなくて済むのです！

ChromeOSでは元々Macスタイルの英数切替なんですが、Emacs on Linux on 仮想環境だと元々は日本語環境に親切ではなく、英数切替も自前で用意しなければなりません。

脱線しますが少し興味深い記事を見つけました(外付けの英数キーー・かなキー!!!)。USキーボードだけで仕事をしていた状況で、生産性を上げるために2つのキーに分割した経緯があるようです。こういったガジェットが自然とキーボードに取り込まれていったのでしょうね。

Emacsだとキーバインドを変更することで、かな英数キーから、英数キー・かなキーを使ったスタイルに変更できます。英数キーでmozcをオフにし、かなキーでmozcをオンにすることによって快適な日本語入力ができるようになります。

; mozcの設定
(require 'mozc)
(set-language-environment "Japanese")
(setq default-input-method "japanese-mozc")
; 全角半角キーで on/off
(global-set-key [zenkaku-hankaku] 'toggle-input-method)
; 変換キーでon
(global-set-key [henkan]
        (lambda () (interactive)
          (when (null current-input-method) (toggle-input-method))))
; 無変換キーでon
(global-set-key [muhenkan]
        (lambda () (interactive)
          (inactivate-input-method)))
; 全角半角キーと無変換キーのキーイベントを横取りする
(defadvice mozc-handle-event (around intercept-keys (event))
  "Intercept keys muhenkan and zenkaku-hankaku, before passing keys
to mozc-server (which the function mozc-handle-event does), to
properly disable mozc-mode."
  (if (member event (list 'zenkaku-hankaku 'muhenkan))
      (progn
    (mozc-clean-up-session)
    (toggle-input-method))
    (progn ;(message "%s" event) ;debug
      ad-do-it)))
(ad-activate 'mozc-handle-event)

参考：変換/無変換キーで mozc.el を on/off する - pyopyopyo - Linuxとかプログラミングの覚え書き -

アクティブウィンドウの拡大

ラップトップであることを考慮すると、Emacsのウィンドウ分割はあまり使いたくありません。ただでさえ小さい画面なのに2分割、4分割…なんてしてしまうと文字を読むのにストレスが有りかねません。

golden ratioは複数ウィンドウがある状況でも、アクティブなものの領域を広げてくれるパッケージです。2つのコードを同時に見る状況はレアだと思うので、こういったパッケージは非常に助かります。

;; golden ratio
(golden-ratio-mode 1)
(add-to-list 'golden-ratio-exclude-buffer-names " *NeoTree*")

参考：roman/golden-ratio.el: Automatic resizing of Emacs windows to the golden ratio

git連携

Emacsに慣れてしまうと、もうなんかEmacsで全てを完結させたい気持ちになるんですが(?)、gitに関しても同様です。

git-gutterはEmacs内でリモートとローカルのdiffを表示してくれる機能です。行ごとに+、=、-みたいな記号が付くので、とても分かりやすい。

;; git-gutter-fringe
(global-git-gutter-mode 1)

参考：git-gutter.elの紹介 - Qiita

また、emacsから直接commitやbranch操作ができるmagitもあるようです。チュートリアルを貼っておきます。

お疲れ様です🎉

おまけ：Emacsのおすすめコマンド

言語モードの切り替え
Emacsを開くと自動的に適した言語モードが起動するのですが、手動で変更したい時はM-x html-modeとかM-x javascript-modeとかいったコマンドでできます。

また、次はJavascriptによるSPA本を一通り身につけたら記事にしようと思います。

環境

マシン：ASUS Chromebook Flip C101PA
OS：Linux (Beta) on ChromeOS

参考

Emacs初心者だがオススメ設定を晒させてくれ - Qiita

How to install Emacs on your Chromebook!!!