はじめに

Theiaとは

まずは読み方ですが『テイア』と読むようです。

Theiaとは公式ページの説明を借りれば

Eclipse Theia is an extensible platform to develop multi-language Cloud & Desktop IDEs with state-of-the-art web technologies.

Eclipse Theiaは、最先端のWebテクノロジーを使用して多言語のクラウドおよびデスクトップIDEを開発するための拡張可能なプラットフォームです。

だからなに？

我々一般ユーザーにとって見れば、このスクリーンショットのような開発環境が提供されるってことです。

つまりは？

こちらの記事で紹介されていますが、デスクトップ版とブラウザ版が想定されていて、どちらでも同じソースコードで開発環境が提供されることになります。

Visual Studio Codeの代替を狙う統合開発環境「Eclipse Theia 1.0」リリース。VS Codeの拡張機能を利用可能、デスクトップ版とWebブラウザ版に両対応

Eclipse Theiaは、「真のオープンソースによるVisual Studio Codeの代替」（a true open source alternative to Microsoft’s popular Visual Studio Code (VS Code) software）だとEclipse Foundationは紹介しており、デスクトップアプリケーションだけでなくWebブラウザからも同一機能が利用できるWebアプリケーション版も提供されています。

Theiaとは？

仕切り直しますね。Theia とはVS Code(Vidual Studio Code)そっくりなんですが、それがブラウザの中で(も)動きます。先に書いた通りデスクトップ版もありますが、デスクトップ版というのはElectronでパッケージングしたものになるので、それってそのまんまVS Codeじゃんってことですね。

脱線: ElectronとはNode.jsのアプリ(サーバーサイド)とChromium(ブラウザ)を一塊にすることでデスクトップ・アプリケーションにするフレームワークです。

この投稿を読んでいる方がVS Codeを聞いたことがないとは思えないですが、念のため簡単に触れておくと、Microsoftが開発しているElectronベースのソースコードエディタです。 ソースコードエディタって微妙な表現ですが、MicrosoftはVisual Studioという統合開発環境をもっていてそのエディタ部分だけを切り出したというイメージなので、VS Code自身はソースコードエディタという説明に。 ただご承知の通り、だれもソースコードエディタとしての使用にとどまっている人はおらず、豊富な拡張機能を 拡張機能(プラグイン) をガシガシインストールして統合開発環境として使用している訳です。

一方で、TheiaはEclipseが開発しているので別物ではあります。ですが、TheiaはVS Codeそっくりなだけでなく VS Codeの拡張機能(プラグイン) が使えます。いよいよヤバイ感じですね。 はっきり言って、第一印象は丸パクリ状態です。

Theiaを使ってみる

マニュアル

Theiaについてのドキュメントはこちらですが、このあと使うGitpodについてはこちらを参照してください。

ひとまず読むのは後者の方が多かった印象です。

Gitpodで使ってみる

まず真っ先に試してみるべきは、ブラウザで動作するこちらです。 公式ページのTry in Gitpodを利用します。

Gitpodへ移動すると、 Login with Github & Launch Workspace をクリックします。

Githubのアカウントで認証します。

拡張機能のインストールの案内が出てくるはずです。 Get Chrome Extension をクリックします。

すでにインストールしてしまった状態で画面をキャプチャしたので、ボタンが削除になっているのは許してください。

そして、いよいよ…いよいよ…　ええ、Dockerですのでしばらくお待ちください。 こんな状態になっていると思います。

これが、GitpodによるTheiaです。 Theia自身の開発をしたい人はこのままで良いかと思いますが、多分そんな人はほとんどいないと思いますので一旦閉じます。

右上のアイコンをクリックするとメニューが表示されるので、 Stop Workspace をクリックします。

Workspaces をクリックします。

ワークスペースのリストが表示されていることと思います。

この画面は何度か訪れることになりますが、今は自分の環境を手に入れることが目的なので、一旦放置します。 Githubの自分のリポジトリにブラウザでアクセスします。

Gitpod ボタンがあるはずなのでクリックしてください。

これで自分自身は、 拡張機能 を導入していないですが、VS Codeでプロジェクトを開いた相当の環境が手に入りました。

拡張機能をインストールしてみる

さて、先ほどから何度となくVS Codeの拡張が使えると言ってきました。 いくつかの拡張がすでにインストールされているようですが、やはり自分のお好みのものをインストールしたいと思うでしょう。

ですが、拡張機能をインストールしようとしてみても、検索なんて出来ません。

これは、VS Codeの拡張機能には制限があるためです。正確には拡張自身ではなくてそのカタログ表示の部分です。

Microsoftは、Visual Studio Marketplaceを他のソフトウェアによって直接使用することを禁止しているのです。 拡張機能事態はそのほとんどがオープンソースで、Microsoftが開発したり保守したりしていませんが、マーケットプレイスへのアクセスは制限されています。

ということで、マーケットプレイスにアクセスして、直接ファイルを手に入れてTheiaにインストールするという流れを取ります。 また多くの拡張がGithubを利用しているのでそちらで手に入れても構いません。

早速ですがvscode-iconsを例にインストールしてみたいと思います。

vsixファイルをダウンロードするためのリンクが用意されていますので、それをクリックします。

手元にダウンロードしたファイルを、TheiaにDrag & Dropするとインストールできます。 (っていうか、リンク教えたらそっちで勝手にやってよって感じですが・・・)

右下にダイアログが表示されるので、有効化をクリックします。

この例だとインストール前とそれほど変わってませんが、一応有効になったようです。

ただ、色々試してみて分かったのですが、全部が全部手放しで喜べるほど甘くはなさそうです。

たとえばこの記事は、Markdownで書き殴っているのですが、スクリーンショットはPaste Imageを使ってベタペタ貼り付けています。

ですが、これをTheiaにインストールしてみたらxclipコマンドが必要だと言われました。 Dockerfileを作ってインストールしてみたら、今度は「There is not a image in clipboard.」と言われました。 そうですね、そっちからだと思います。

ということで、課題のありそうなもの、動かないモノなどがありそうです。

Gitpod環境のセットアップ

Docker含め環境の設定方法はこちらに纏めました

今更ですが、無料なのか？

今更ですが、これタダなの？と。

Gitpodにお値段表があります。 ここまでの手順で来た方は、50時間までは無料という形でFreeアカウントになっているはずです。

個人でお金払ってまでブラウザ越しに開発したいかというと微妙な気がしますが、とにかくそういうことです。

日頃忙しく働いている傍ら、隙間時間を使って開発を進めている人とかであれば、日々の隙間時間や移動中、出張中とかで個人用のPCがなくても、ブラウザさえ手に入れば開発が継続できるというのはありがたいのかも知れません。

ひとつ注意事項としては、止めるの忘れて放置しても適当なところでタイムアウトはしてくれるのですが、それでも50時間の1割、2割は浪費する構図になりますので、ご利用は計画的にということで。

Theiaを使ってみる その2

Electron版つまりは、デスクトップ版はについては、また改めて記載したいと思います。