Help us understand the problem. What is going on with this article?

ブラウザでVS codeが使えるクラウド IDEの大本命「Coder」

More than 1 year has passed since last update.

TL;DR

  • ブラウザ上でほぼVS codeが使えるクラウドIDEサービス「Coder」
  • 他のVS codeライクのクラウドIDEと異なるのは「拡張機能がそのまま使える」。大半の拡張機能を利用可能
  • 現在はアルファ版
  • ChromebookやiPadでの利用も想定している
  • Dockerコンテナにプロジェクトを作成するので自由度が高い
  • 無料プランでも十分に使える。他のクラウドIDEと比べて月額費用が安い
  • Fast Time機能を使うと時間制で96CPUコア、メモリ16GBが利用可能(課金で殴る開発駆動)
  • コラボ機能で1つのプロジェクトで複数ユーザでペアプログラミングができる(未確認)

CODER.PNG

きっかけ

2019年2月28日の夜、「あれ、VS codeライクなクラウドIDEってなんて名前だっけ?」という疑問から

「Cloud IDE vs code」

でググったところ以下の検索結果が表示。
search.png

ここで目的である「StackBlitz」を発見してメデタシメデタシのはずでした。

Coderとの遭遇

StackBlitzの上位にきてる「Coder」が気になりサイトを見て驚愕

「VS codeがブラウザで動いている!?」

1_coder.com_(FHD).png

これはもう試すしかありません。

サインアップ

  • サインアップはGitHub、Google、メールのいずれかで可能
  • サインアップ後、SMSでの認証が必要なので携帯電話番号を入力してSMSを受信して承認する

2_coder.com_login(FHD).png

プロジェクト作成

ログイン後左メニューから「Projects」を選択。「+Create Projects」を押下すると新規プロジェクトが作成されます。
ここでは、既存のGitgubリポジトリに合わせて「2018-04-22-parcel-sample」と入力して作成。

3_coder.com_projects(FHD).png

4_coder.com_projects(FHD).png

VS codeの起動

プロジェクトの右にある「Open in VScode」ボタンをクリック。暫く待つとブラウザ上にVS codeが起動します。

5_coder.com_MegaBlackLabel_2018-04-22-parcel-sample(FHD).png

ターミナルの起動

ブラウザ上で「Ctrl+`」もしくはアクティビティバーのターミナルアイコンをクリックすると右下にターミナルが開きます。

6_coder.com_MegaBlackLabel_2018-04-22-parcel-sample(FHD).png

マウントされている言語の確認

Coderはコンテナに必要に応じて言語をマウントすることができます。ターミナルでマウントされている言語を確認します。

7_coder.com_MegaBlackLabel_2018-04-22-parcel-sample(FHD).png

マウント方法

「Ctrl+Shift+P」でコマンド入力ができるので「mount」と入力すると「mount Value」が表示されるので選択します。
マウントできる言語は以下の通り(言語によってはバージョン選択可能)

  • clang
  • gcc
  • go
  • java
  • node
  • php
  • Python
  • ruby
  • rust

yarnのインストール

残念ながらyarnがマウントできる言語に入ってませんでした。なので、自力でインストールします。
rootユーザなのでsudoは不要です。

terminal
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
apt-get update
apt-get install apt-transport-https
apt-get update && apt-get install yarn
yarn --version

GitHubからリポジトリの追加

現状ではgit cloneでリポジトリの追加ができなかったので、以下の方法で既存のリモートリポジトリを追加します。ここではsshの登録をしていないのでhttpでアクセスしています。

terminal
git init
git remote add origin https://github.com/MegaBlackLabel/2018-04-22-parcel-sample.git
git fetch origin
git merge origin/master

拡張機能

アクティビティバーの拡張機能を選択するとインストール済みの拡張機能一覧が表示されます。現状では別のプロジェクトで拡張機能をインストールした場合、新規作成したプロジェクトにも適用されます。
インストールできなかった拡張機能は以下の通り(VS codeのバージョンをチェックしている拡張機能はNGっぽいです)

  • 日本語パック
  • Gitlens(v0.3.0でインストール可能)
  • Setting Sync

10_coder.com_MegaBlackLabel_2018-04-22-parcel-sample(FHD).png

CDRによるローカルサーバへの接続

コンテナで起動したローカルサーバについてhostが「0.0.0.0」、portが「80 3000 3001 8000 8080 9000 9001」いずれかで起動したあとに、アクティビティバーのCDRアイコンを選択するとリンクが表示されます。画面ではターミナルでローカルサーバ起動時にCDR機能にURLが表示されており、クリックすると別ウインドウが開きアクセスできるようになります。

13_coder.com_MegaBlackLabel_2018-04-22-parcel-sample(FHD).png

利用料金

利用料金は現在ではフリープランからQuantumの4種類で0ドル/月から14.99ドル/月。これでも少ないという要望が出ていて、今後増える可能性があるそうです。

store_coder.com_store(FHD).png

Fast Time

Coder目玉の機能です。普段はCPUは動的、メモリは1GBが割り当てられていますが、Fast TimeをONにするとCPUが96コア、メモリが16GB確保されます。重いビルド時にONすると劇的に早くなるので、切り替えて使うのがいいと思います。Fast Timeの利用時間が切れてもCoder自体は使うことができます。

fasttime_coder.com_docs_fast%20time(FHD).png

まとめ

Coderについて、サインアップからnodeプロジェクトの起動までを一通り行ってみました。
去年の11月にVS codeに対応して現在はアルファ版とのことなので、これからの機能アップに期待してます。

バグ報告や要望についてはGitHubでリポジトリがあるので、こちらを利用するといいと思います。

codercom/bugs

codercom/features

(2019年3月2日追記)補足

ツイッターなどで出ている問題点について、わかる限りで補足していこうと思います。

Q.iPadで本当に動くの?
A.表示は問題ないですが入力周りはcommand+sが使えないなどの問題あり。公式でも認識していて対応が進んでいます

Q.Chromebookだとどうなん?
A.CTOがFast TimeのプレゼンをChromebookでやるくらいなので、対応は良いと思います

Q.いい事だらけに見えるけど問題ないの?
A.アルファ版なのでそれなりにあります。個人的には重いファイルを開いたときに、展開が遅いなどのキャッシュが効いて無くてレスポンスが悪いのが人によっては厳しいと思っています。まずは「ローカルIDEでサーバコンテナを使えるようにする」という形で対応がされる予定です(現状、Comming Soon)

Q.Vim拡張機能は使えるの?
A.拡張機能はインストールできますが、キーバインド周りで不具合が出ているようです。Discordでも話題になっているので、早い段階で対応されると思っています

Q.なんでSMS認証するの?
A.大量にアカウント作られてマイニングされない対策のようです

Q.SMS認証ができないんだけど?
A.海外SMSが受信できないとアウトのようです

Q.コンテナのUbuntuのバージョンは?
A.Ubuntu 16.04 LTS。古いですね。いずれアップグレードする記事を書きたいと思っております

Q.コンテナでapt-getで新しいパッケージ取得できないんだけど?
A.「apt-get install apt-transport-https」でapt-transport-httpsをインストールしてみてください

Q.MS公式がVS codeのWeb版出したらおしまいでしょ?
A.それを言っちゃあお終いよ。ただ、MSはこれだけクラウド全盛なのにVS codeをクラウドIDEにして商売をしていないので、今動くサービスを使って、MSがやる気が出たら後々乗り換えればいいと思います

Q.公式情報が少ないんだけど?
A.CoderはサポートなどをDiscordに集約しているので参加しましょう

Q.Coderからお金もらって記事書いているの?
A.正気を失っているだけです

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした