2019-03-04 / #使ってみるシリーズ #Coder

ブラウザでVS Codeが使える！「Coder」を試してみる

はじめに

私は普段の業務でもプライベートの開発でもVisual Studio Code(VS Code)を使っています。
朝の時間が一番集中できるので、朝早起きして開発をしたりもするのですが、１ヶ月ほど前、出社が遅いことを上司に指摘されたため、しぶしぶ早めに朝出社することにしたのですが、中途半端に作業に切りをつけるのが嫌で、いっそのことめちゃくちゃ早く出社して開発しようと思いました。

そこで問題となったのが自宅と同等の開発環境を職場のPCにも用意する必要があるということなのですが、構築もめんどくさいですし、むやみに色々入れるとそれはそれで何か言われそうなので、どうしたものかなーって思っていました。

そこで白羽の矢を立ったのがクラウドIDEで、その時はCodeanywhereというクラウドIDEで、１週間ほど使っていたのですが、やはりVS Codeとの違いが気になり、そのうち使わなくなってしまいました。
その後は朝の時間は読書にあてていて、それはそれで捗ったのですが、Coopet(私が開発しているSNS)の開発も考えると、朝の時間をコーディングにあてたいと思うようになりました。
そこで少し調べてみたところ、Coderを見つけたという流れです。

今日は使ってみるシリーズ第4弾ということで(Elmは勉強中です)、クラウドIDE「Coder」を使ってみようと思います。

クラウドIDEとは

そもそもクラウドIDEとは何かというところから、お話したいと思います。
クラウドIDEはその名の通り、「クラウド上に構築されたブラウザからアクセスできる開発環境」を指します。
普段皆さんが開発する時はもちろん皆さん自身のパソコンの中にパッケージ管理ツールを入れたり、エディタを入れたり、データベースサーバーを立てたりして、開発環境を構築すると思います。
クラウドIDEではそういった環境構築を、皆さんのパソコンの中でするのではなく、クラウド上で行い、そして皆さんのパソコンからブラウザを通して、クラウド上の開発環境にアクセスすることになります。

クラウドIDEには以下のようなメリットがあります。

・開発環境のプリセットが用意されており、それを選ぶだけで容易に開発環境を構築できる

・ソースのビルドやサーバーの起動は自分のパソコンでなく、クラウド上で行われるため、自分のパソコンのリソースの消費を抑えて開発が可能。

・開発端末が変わっても環境構築をやり直す必要がない

特に1点目は初学者の1つ目の壁である環境構築を格段にやりやすくしてくれる点なので、クラウドIDEは初学者にもおすすめのサービスとなっています。

Coderとは

Coderは端的に言えば「(ほぼ)VS Codeが使えるクラウドIDEサービス」です。現在はアルファ版として公開されています。
実はVS CodeライクなクラウドIDEは他にもあるのですが、Coderが優れているのは、大半のVS Code拡張機能が使用できる点にあります。

言語サポートはこんな感じになっています。

よく目にするようなものは揃っている印象ですね。
とりあえず私の用途では困らなさそうです。
プロジェクトはDockerコンテナ内に作成されるので、ある程度融通も効きそうですしね。
バージョンもボタン一つで切り替えられるとのこと

また、「Fast Time」という機能を使うと時間制ですが、96CPUコア(!)、メモリ16GBが利用可能になるとのこと。
今回は使いませんが、重いビルドなどするときには試してみたいですね。

登録してみる

それでは早速使ってみましょう。

公式ページにアクセスします。

サインアップにはGithub、Google、Emailが選べるみたいですね。
今回はGithubでサインアップしようと思います。

ログインを求められるので、ユーザー情報を入力してログインします。

するとCoderとGitHub連携の認証を求められるので「Authorize codercom」をクリックして認証します。

認証が完了するとCoder側に戻ってきて、ユーザー名と電話番号の入力を求められます。
SMS認証が必要なのは予想外でした。
複数アカウント防止用でしょうか。
入力して「Complete Sign Up」をクリックします。

これにて登録完了です！

使ってみる

プロジェクトを作成する

まずはプロジェクトを作成してみましょう。
左上にある「+ Create Project」をクリックします。
するとプロジェクト名の入力を求められるので、入力します。
私は「Coopet」と入力しました。

するとプロジェクト行が追加されるので、「Open in VSCode」をクリックします。

すると…

おおー！
これはまさにVS Code!
ここまで再現されているとは…

「Ctrl+@」でターミナルもちゃんと開きます。

Emmetも…

使えますね！

GitHubからソースコードを取得する

さて、それではGitHubで管理しているCoopetのソースコードを取得してみましょう。
現状GUIで取得する機能はないようで、統合ターミナルにコマンドを入力して取得します。
以下のコマンドを発行して取得しました。

1git init
2git remote add origin https://github.com/RinGoku/coopet.git
3git fetch origin
4git merge origin/development

無事取得できました！次にnpmで関連パッケージをインストールします。
そのままですと、npmコマンドが使えないので、Node.js環境を使えるようにします。
「Ctrl+Shift+P」を押下して、コマンド入力バーを開き、「mount」と入力すると「Mount Volume」が候補に出てくるので選択します。

するとマウント可能な一覧が表示されます。

JavaやGoの姿も見えますね。
今回はnode/11.0.0を選びました。

これでnpmコマンドが使えるようになるので、早速npm installすると…

インストール完了ですね！

それでは、ionic serveコマンドでサーバーを起動してみます。
(Ionicコマンドを使えるようにするために、「npm i ionic -g」を実行しました)

起動しましたね。
しかしこのままでは私の端末から、このCoder上のサーバーには接続できません。
この開発環境の「localhost」に外部からアクセスすることができないからです

なので「ngrok」というサービスを使用します。
簡単に言えば、ローカルPC上(localhost)で稼働しているネットワークサービスを外部に公開できるサービスです。
今回はこのCoder環境に導入することで、私の端末からアクセスできるようにします。
以下のコマンドを実行します。

1npm install serve ngrok
2npx ngrok http 8100

成功すればこんな感じの画面が表示されます。

この「http://269f45fa.ngrok.io 」というURLにアクセスすると、このCoder上の「http://localhost:8100 」にアクセスしたことと同義になります(URLはngrokの実行ごとに変わります)。

さて早速アクセスしてみましょう…といいたいところですが、この方法でアクセスするためには起動コマンドを以下のように変える必要があります。

1ionic serve -- --disable-host-check

詳しくは説明しませんが、このオプションを付けないと、真っ白な画面に「Invalid Host header」という文字が表示されるだけで、実際のアプリケーションを表示することができません。
この起動コマンドでサーバーを起動し、「http://269f45fa.ngrok.io 」にアクセスしてみると…

やりました！

おわりに

今回はクラウドIDE「Coder」を使ってみる過程を解説しました。

正直、ブラウザ上でいじっていることを忘れるくらいにはVS Codeそのものなので、Codeanywhereで感じていた違和感がかなり払拭できそうです。

さらっと流しましたが、「ngrok」もなかなかすごいサービスですので、皆さん使ってみてください。

まだCoderの肝となる拡張機能に関しては試せていないので、実際に開発した使用感も含めて、また記事にできたらなと思います。

それでは今回はこの辺で。ここまで読んでいただきありがとうございました！

感想やご意見・質問等ございましたら、私のTwitterまでお気軽にどうぞ。