はじめに

クラウド型IDEというものの存在を恥ずかしながら本日知りまして、これいいなって思ったのがきっかけです。
なんでかっていうとですね、最近出社が遅いと会社の上司から言われまして（始業２０分前出社なら許されると思うんですが）。
出社が遅くなったのは普段朝の勉強をしていているからなんですが、プライベート端末を会社に持ち込むことはできず、そうすると家の開発環境とは別に会社用の開発環境を整えないといけなくて面倒だなーって思ってたんですね。
クラウド型IDEはこれを解消してくれるんじゃないかなーっと思ったのが、モチベーションとなって試してみることにしました。

選択肢

クラウド型IDEにもいくつかサービスがあるようです
　・Codeanywhere
　・AWS Cloud9
　・Codenvy　...etc
今回はタイトル通りCodeanywhereを使ってみたんですけど、特に明確な理由があって選んだわけではないです。
（このサイトとかは参考にさせていただきましたが「https://blog.h2o-space.com/2017/11/1288/」)
とりあえずクラウド型IDEとやらを体験してみたかったので吟味は後回しって感じですね。

会員登録

早速Codeanywhereを使ってみましょう。
https://codeanywhere.com/

※ひと通りやることやってからQiitaにまとめているので、画像は作業当時のものではないです

会員登録を求められますが、githubアカウントと連携が可能でしたのでそうしました。
あとはダッシュボード画面でいろいろ情報を入力したり、他サービスとの連携を行いました。

Githubの他にも、
　・Bitbucket
　・Google
　・Facebook(何に使うんだろう...)
　・Digital Ocean
　・One Drive
に連携できるみたいです。
あとはGithubで登録しているメールアドレスにアカウント有効化用のメールが届きますので、メール本文のリンクを踏めば登録完了です！

実践

エディタ画面を開いてみます。

おおー、VSCodeみたいな画面が出てきましたね。
File→New Connection→Containerと選ぶと

こんな画面が出てきます。
GitHubにコミットしたプロジェクトに連携したり、Google DriveやAmazon S3にアップロードしたファイルを編集したりできるみたいですね！
開発サーバーも起動することができて、Enable Always Onを選ぶとそのまま公開することもできるとか（時間制で課金される？）。
今回はGithubにあげているAngular製のポートフォリオサイトのソースコードに連携してみました。
（開発サーバーはHTML用のCentOSにしました）

連携するとこんな感じでソースコードを参照することができます。
またプロジェクト名を右クリック→SSH Terminalで開発サーバーにSSH接続することができます。
接続するとプロジェクトフォルダのルートに移動済みです。

このままng serveで起動したいと思います。
とりあえず、npm installしてnpm install angular/cli@latest -gしてng serveコマンドを実行しました。

@angular/cliのバージョンの食い違いで警告が出てますが、問題なく起動できました。
しかし、そりゃそうなのですが、この状態でローカルのブラウザに「http://localhost:4200/ 」と打ち込んでもアクセスすることはできないです。
これを解決するためにはこのサーバーのホスト名を知る必要があります。
プロジェクト名を右クリック→Infoを選択すると

こんな画面が出てきて、ホスト名を確認することができます。
よーしということで、
「http://portfolio-ユーザー名.codeanyapp.com:4200/ 」にアクセスしたところ、

こんな画面が出てきてアクセスすることができませんでした。
少し調べた結果、こんな情報(https://stackoverflow.com/questions/45026674/build-angularjs-2-with-angularjs-cli-on-codeanywhere )が見つかったので、これを踏まえてサーバー起動コマンドを以下のように変更しました。

ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true

(ポート番号は変更しなくてもいけるかな)
サーバー起動後、
「http://portfolio-ユーザー名.codeanyapp.com:8080/ 」
にアクセスしてみると...

やりました!

雑感

・ローカルの開発環境に比べれば多少のもっさり感はあるが、個人的には耐えられるレベル
・簡単なWebアプリの作成ぐらいなら問題なくできそう
・Githubなどと連携して開発できるの便利
・iPadからでも開発できるようになる？
・無料だとConnection数に制限があるので、本格的に使うなら要課金。＄2～だが、＄7のプランが良さそう

おわりに

これで会社での勉強が捗りますなー（棒）
ちなみに作りかけですがポートフォリオサイトはこちらです
https://ringoku.github.io