私のPCの使いみちの中で大きいのが、主にWeb系のコーディングです。その昔であればメモ帳とブラウザだけあればWebページを作ることができる…という話でしたが、現在のWeb系はフロントエンドもツールやフレームワークが充実し、開発環境をしっかり構築しないといけなくなりました。

というわけで今回はブラウザからいい感じの開発環境にアクセスできるようWeb上のエディタとして「Eclipse Theia」を構築してみようと思います。今回はこれをVPS(ConoHa)上に構築することで、どの端末からも同じ環境にアクセスできるようにしてみます。

Docker環境準備

まずはDocker環境の準備です。Docker環境の構築は以前記事にしていますので、まだDocker環境を作っていない方はこちらを参考にしていただけると幸いです。

ConoHa にDocker(+docker-compose) をインストールしました。

ConoHaのサーバ(CentOS)にDocker (+docker-compose)をサクッと入れていきたいと思います。

$ docker --version
Docker version 19.03.13, build 4484c46d9d
$ docker-compose --version
docker-compose version 1.25.5, build 8a1c60f6

今回はVPS(ConoHa)で作業しましたが、中身は普通のCentOSなので普通にDocker(とdocker-compose)環境が作成できれば大丈夫だと思います。

リバースプロキシの準備

次はProxyの用意です。こちらは必須の作業ではありませんが、同じVPS上で動作させているのであれば、簡単に複数サイト/ツールで使用できSSL設定も自動で行ってくれるようになるため使用するのをおすすめしておきます。こちらも以前記事にしていますので参考にしてみてください。

NGINXリバースプロキシでVPS上のDockerの複数サイトを運営しますよ

今回はサイト達のコンテナの前段としてNGINXで構築したリバースプロキシを通すことでマルチサイトを構築する方法を書きます。

今回はVPS上に設置する事、加えてすでにほかのツールを設置していることやそれぞれのツールにドメインで簡単にアクセスできるようにしたかったのでプロキシの設定が必須でしたが、ローカルで動かす場合やテストで動かしたいだけであれば設定は不要です。

Eclipse Theia環境を作る

docker-compose.ymlを用意

さて、周辺環境の構築ができましたので、いよいよ本題、「Eclipse Theia」の構築をやっていきます。とはいえDocker上に構築していくので、動かすだけであれば操作自体はとっても単純です。

version: '3'

services:
  eclipse-theia:
    restart: always
    image: theiaide/theia-full # 全部入りイメージ
    ports:
      - 50000:3000
    volumes:
      - /path/to/workspace:/home/project/:cached
    environment:
      - VIRTUAL_HOST=[ドメイン (プロキシ用)]
      - LETSENCRYPT_HOST=[ドメイン (Let's用)]
      - LETSENCRYPT_EMAIL=[メアド (Let's用)]
                                
networks:
  default:
    external:
      name: common_link

はい。今回はdocker-composeを使って環境を構築していくので、上記の内容でおなじみのdocker-compose.ymlを作成してください。修正するのはvolumesのワークスペースディレクトリ部分とenviromentのドメイン設定部分だけです。

ちなみに、ディレクトリ設定の方は設定したディレクトリ以下であればその部分だけ表示することができるため、ワークスペースのルートディレクトリを設定してあげるといいと思います。また、プロキシを利用しない場合はenviromentとnetworksの設定は削除してもらって大丈夫です。

BASIC認証の用意

今回は外部からアクセスできる場所に設置するため一応アクセス制限用の設定をします。今回は簡単にBASIN認証でお茶を濁そうと思います。やり方は上記のリバースプロキシ設置時の記事に書いてありますので参考にしてみてください。

$ htpasswd -c /path/to/[ドメイン] [BASIC認証 ID]
New password: [BASIC認証 PASSWORD]
Re-type new password: [もう一度]

基本的に対応したパスワードファイルを読み込んであげるだけですが、ファイル名をドメインと同じにするのを忘れないようにしてください。

エディタのインストール

最後にオマケとしてCUIにエディタ(micro)を入れておきたいと思います。基本的には完全に無駄な作業です。Eclipse Theiaのコンテナは基本的にUbuntuで動いているらしく、エディタ内にターミナルの機能もあります。このターミナル機能を使うことでSSHで別のサーバにアクセスすることもできます。

しかしSSH先でvimなんぞを使ってしまうとESCキーがエディタ側に吸われてしまうため、vimで入力モードから脱出することができません。そこで(SSH先のサーバに)別のエディタを入れておきます。

curl https://getmic.ro | bash

というわけでmicroというエディタを入れておきました。こちらはCUIのソフトながら使い勝手はGUIにも匹敵するエディタで、少し前におすすめされたいたので入れてみました。まあ、こちらは完全にオマケなのでご自身の使い道に合わせて必要があれば入れてみてください。

実行してみる

準備ができたらいつも通りdocker-composeコマンドで実行して作業完了です。

$ cd /path/to/[docker-compose.ymlディレクトリ]
$ docker-compose up --build -d

実行できたらブラウザからアクセスしてみます。

(DNS or hostsの設定が完了していれば) 先ほど設定したドメインでアクセスするとワークスペースのディレクトリでVSCodeを起動したような画面が出てきます。これにて作業完了です。

終わりに

さて簡単に書いてきました。これのおかげで私のChromeBook君の使い道が爆発的に増えました。コーディング環境ができたのはもちろんですが、一緒に構築できたターミナル環境が思っているよりも便利でした。今後もChromeBookの使い道を増やしていけるよう探索を続けていきたいと思います。

私の用途としては外出時にちょっとした作業やブログ更新ができるくらいで、求めるのはスペックよりも持ち運びがメインです。そんな中ASUSから2021/03に発売され私の要望に答えてくれたのが、今回紹介する「ASUS Chromebook Detachable CM3 (以降 CM3)」です。今回は初めてChromeBookを手にした初心者が、その使い心地とCM3のレビュー的な何かを書いていきたいと思います。

購入理由

冒頭でも「持ち運びがメイン」と書きましたが、改めてこの端末をどう使おうと思ったかを書いておこうと思います。

ズバリ、私は外出先でちょっとした作業、とくにSNSやブラウジング, サーバー接続しての作業やブログ更新をするためにCM3を購入してみました。つまりゲームや動画編集など高負荷な作業はしない方針ということですね。

これまでに同目的でDynaBookやMacBookなどのノートPCやiPad、スマホなどを試してきましたが、どれも要望を満たしてはくれませんでした。というのも、ノートPCはやりたいことが全部できる反面「軽量」を売りにしている商品でも、やはり重荷に感じてしまう (本当に軽量なものはお値段が…)。より軽量なiPadでも軽快な入力には別途キーボードが必要になり、結局かさばるうえ、ブラウザの挙動がPCと異なり、ちょっとしたことがストレスになります。スマホは携帯性だけで、入力もやりたいこともできない…とどれも需要を満たしてはくれませんでした。

そこで目に止まったのがCM3です。お値段の割に携帯性が高く、キーボードも付属、ブラウザの挙動や拡張機能もほぼほぼPCと同じように使用できると事前情報では私の需要を十分に満たしてくれています。まぁ最終的に手が出た理由は仕事が忙しすぎて購買意欲が爆発していたせい。加えて割引価格だったから…つまりは衝動買いです。

というわけで、今回は衝動買いした初めてのChromeBookを使ってみての感想を書いていきます。

本体の感想

では早速開封してみます。中身は本体と説明書などの書類、そして充電器とだいぶシンプルでした。詳しい仕様については公式Storeページやすでに紹介してくださっている方がたくさんいるので省略しますが、ケースや端子など割とシンプルにまとまっている印象です。この本体にキーボード、スタンド、ペンまで内蔵しているので「これだけ」を持っていけば作業できるのが嬉しいです。

では起動してみます。画面はきれいです(普段使っているモニターが古いからなおさらそう感じます)。見た目の印象ではタッチパッドはかなり狭いですが、でもカーソルはスススっと動き本体画面サイズ的にそれで問題にはならなそうです。押し込むとクリック感がありますがクリックだけであれば軽く触れるだけも反応してくれます。また、2本指でスクロールや「戻る」、3本指でタブ切り替えやウインドウ変更などジェスチャー機能もしっかり対応していて意外と使い勝手がいいです。

キーボードは噂通り薄い(やわい)です。簡単か短期間な操作なら問題ないけど長文を書くとなるとおそら疲れてきそうです。キー幅は狭めですが、比較的小さい私の手にはそこまで問題にはならなそうです。キー音自体はそこまで大きくないのですがキーボード全体がしなる? 音がするのでちょっと気になる方もいるかもしれません。気になる場合は下に布を引くと軽減されます。

また特徴的な部分としては背面のスタンドにより縦にも横にも立てることができるという点があります。ただ私の使い方では縦置きはあまりしなさそうなのであくまでおまけ的な機能に収まっています。スタンドは磁石でくっついて簡単に外すことができますが、縦かかけて使用しているときには外れなさそうなちょうどいい強さでくっついています。

OS面の感想

ハード面の感想が終わったので、次はソフト面です (上でもところどころ混じってましたが)。こちらは他のChromeBookと変わらないと思いますので、初めてChromeOSを触った人の戯言という感じで読んでもらえるとです。

ChromeOSを使い始めて、まず最初にびっくりしたのが、「いつもの」Chromeが使えるということでした。

今回CM3の初期設定時に紐付けたGoogleアカウントは、普段PCのChromeで使用しているものを使用したのですが、初回起動時にログインして、端末の準備が完了するともう「いつもの」Chromeがそこにいました。スマホ版やタブレット版のChromeではブックマークなどの同期はしてくれますが、そもそも拡張機能が使用できず、PC版で使い慣れた操作感を再現することができません。その点ChromeOSではいつも使っている拡張機能がそのまま使えるので「いつもの」Chromeを持ち出すことができます。

またキーボードでの入力面でも、(当然かもしれませんが) コピペだったりウインドウ切り替えだったり文字入力時の半角全角変換(F6,F7とか)だったり使い慣れているPC操作がそのまま使えるのが嬉しかったです。また「かな-英数」の切り替えがスペース横キーでできるのが地味に嬉しかったです。私はWindowsでも設定をいじってスペース横のキーで切り替えするようにしているので…。

あとは各アプリケーションがウインドウで表示されることが地味に嬉しいです。ほとんどのスマホ/タブレットでは2分割+ピクトインピクチャしかできません。一方ChromeOSはWindowsやMacOSのようにウインドウで位置や大きさを変更できるため自由な配置で作業することができます。また地味ですがYouTubeのピクトインピクチャ(右クリック二回目のメニューで選択できるやつ)にも対応しているため、ながら作業もはかどります。

色々と地味な感想を書いてしまいましたが最近のChromeOSは頻繁に大きなアップデートが実施されているので、今後の進化にも期待していきたいと思います。

余談

レビューとは全く関係ないですが、CM3購入時にアクシデント…ではないですが怖かったことがあるので共有しておきます。

今回公式ストアで予約購入したのですが、その際Kyashを使用したところ2重請求になってしまいました。私の場合だと商品が届いた日に改めて請求があったためびっくりしたのですが、これはKyash側の仕様で枠の確認のために請求されたものと思います。実際に購入に当てられなかった分はアプリ内での返却になるそうなので注意が必要です。

また、公式ストアで購入すると特典としてtype-cイヤホンジャックのアダプタが付属するという話だったのですが、CM3とは別の日に到着しました。アダプタが来ていない方はもう少し待つとそのうち届くかもしれないです。

最後に

こんなご時世なので、まだまだ外では使う機会は無いですが、家の中でもちょっとした気分転換でいろんな場所に移動しつつ使ってみようと思います。また、より使いやすくなるアプリや他端末との連携など使い倒してみていい知見が得られたらまた紹介していこうと思います。

総評