クラウドIDEをもっと自由に
Google Cloud ShellではデフォルトでCloud Shell EditorというIDEが利用可能になっています。
これは現在、最もスタンダードなコードエディタであるVisual Studio codeをWEBアプリで実装したEclipse Theia（以下Theia）をベースにカスタマイズされたもので、コードエディタとしてかなり高性能といえます。
数年前に使ってみたときにはバージョンも古く、機能も物足りないものでしたが、現在はバージョンも新しくなり、多機能に進化しています。
こちらだったら、以前代わりに使っていたIBM CloudのEclipse Orionよりもずっと快適ですね。
特にGoogle Cloudのサービスによる開発の際には、専用のプラグインが追加されているので、クラウドとの連携が容易となり、より便利です。
しかしながら、組み込みあるがゆえに、カスタマイズできる範囲は限られたものになってしまうところもあるため、自分でビルドしたTheiaを使えるようにしてみたいと思いました。
自作することにより下記のようなメリットが考えられます。
Cloud Shell Editorとは違うバージョンのTheiaを利用することが出来る。
必要なプラグインを追加して機能を強化したり、逆に不要なプラグインを削除して軽量化したり出来る。
言語パックを導入し、インターフェースを日本語化することが出来る。
以上の項目が実現できることを念頭に、インストール作業を実施していきます。
Node.js環境でのビルド作業
公式サイトのドキュメントを参考に、Node.jsのプロジェクトを設定するためのファイルpackage.jsonを作成します。
置き換えも可能となるように、Cloud Shell Editorと同様の機能を引き継ぐこととし、また日本語パックと[Open VSX](Cloud Shell Editor)で目に付いたものをいくつか追加しました。
そうするとファイルのサイズが大きくなったたのでGitHubに掲載しておくことにしましたので、ここでは内容は割愛します。
インストール作業には、ディスクの空き容量が2GB弱が必要になるので、不要なプラグインを削除して消費サイズを削減してもよいと思います。
今回はインストールするディレクトリとして、ホームディレクトリ直下にtheiaという名前のディレクトリを作成し、ここにpackage.jsonを配置します。
$ curl --create-dirs https://raw.githubusercontent.com/singularity-effect/theia-custom/master/package.json -o ~/theia/package.json
次にカレントディレクトリをtheiaに移動して、yarnコマンドを実行します。
$ cd ~/theia
$ yarn
これだけでprepareというスクリプトが起動され、yarn run clean、yarn build、 yarn run download:pluginsという3つのスクリプトが順次に実行されますので、途中にエラーで中断されなければ、インストール作業はすべて完了です。
作業に伴いyarnにより400MB以上の一時ファイルが作成されるので、すぐに削除してディスクの空き容量を確保したほうが良いです。下記コマンドで出来ます。
$ yarn cache clean
最終的にトータル1.4GBほどのサイズを使用することになります。
Theiaの初回起動と日本語化
デフォルトの3000番ポートはCloud Shell Editorで使用されているので、そのほかのポート番号を指定します。8080番を指定して起動する例を示します。
$ yarn --cwd=${HOME}/theia start --port=8080 &
起動後に右上のウェブでプレビューボタンにより、ポート8080でプレビューします。
英語のインターフェースで起動するので、日本語言語パックを有効化します。まずViewメニューからCommand Pallette...を選択します。
入力バーが出現するので、Configure Display Languageを入力して実行します。入力中にリストアップされる候補から選んでも構いません。
次にenとjaで選択肢が出ればjaを選びます。
下記のアラートがポップアップされるのでRestartボタンをクリックします。
すると、日本語のインターフェースで画面が再表示されます。
その他の
少しでも時間や手間を省けるように、既にビルドしたものを1つのZIPファイルに圧縮してGitHubに登録しておきましたので、こちらをダウンロードした上で展開することでも利用可能です。
また、起動および終了するためのスクリプトのサンプルも掲載しましたので、ダウンロードして利用することもできます。
$ wget https://raw.githubusercontent.com/singularity-effect/theia-custom/master/theia-start.sh
$ wget https://raw.githubusercontent.com/singularity-effect/theia-custom/master/theia-stop.sh
$ chmod +x theia-start.sh theia-stop.sh
ホームディレクトリ直下のtheiaというディレクトリにインストールし、ポート番号8080で利用することが前提です。違う条件であれば、適宜変更をお願いします。
↧