Codeanywhereを使ってスマホでプログラミングをしよう！

# 前置き
こんにちは

通勤時間などのスキマ時間で、スマホでプログラミングの勉強が出来ないかと思いcodeanywhereというアプリを使ってみました。
課金が前提となりますが、結論としては**かなり使えます**

codeanywhereは、いわゆるクラウドIDEというもので、**ブラウザさえあればどんなマシンでもプログラミングができますよ**という代物です。
似たような製品にAWSのCloud9がありますが現時点でそちらはスマホ対応してないみたいです。

今回は、codeanywhereを使ってスマホのみでRubyのハロワをする手順を解説します。
(ちなみに、このQiitaの記事自体スマホから投稿してます。)

なおcodeanywhereのプランには無料のプランもあるのですが、7日間しか使えないので諦めて課金しましょう。
有料プランにも複数ありますが、僕はFreelancerを選択しました。
月単位の課金で、一月あたり10ドルとの事ですが、日本円だと2019/12時点で1,116円でした。
<img width="375" alt="BE560AD4-5052-4265-8858-189772492EB7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/bc18cdfe-318a-20b5-24b1-7bbf595fdc1c.png">


#手順
まずは、プロジェクトを作成します。

<img width="375" alt="0561B85F-785D-4ACB-8180-A4878CB3393E.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/9578fb64-9bba-e76b-a5d5-69a835bba7a9.jpeg">

作成したプロジェクトの画面の右下の+ボタンを押します。
<img width="375" alt="C6C2CBE2-1871-4C0F-9041-290C55B0EB40.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/76a94bfc-3b8a-8fe4-0100-f6083253a19b.jpeg">


New connectionを選択
<img width="375" alt="BD954288-7CA2-47BF-8B71-6E9B9F1C3380.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/fa8fd27f-8f85-43fa-e98d-b5e2a61e04fa.jpeg">

countainerを選択します。
余談ですがcloud9だと環境がEC2インスタンスだったのですが、こちらではコンテナとなります。
<img width="375" alt="FBCE1048-371A-446C-9CB9-EF391202AAC6.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/470bc6ea-e139-d199-67ec-474a4846843c.jpeg">


今回はRubyのコードを書きたいのでRubyのコンテナを選択します。
とりあえずUbuntuを選択します。(CentOSでも、お好みで。)
<img width="375" alt="D876DD9B-225D-4854-A2B3-9BD1150FB8BF.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/bb3e21d2-b49c-997a-b830-e6dfbfcaee95.jpeg">

適当に名前をつけてCreateを押します。
<img width="375" alt="81DF48C6-81D7-4A13-95EA-8683930E448F.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7396f540-578f-447b-f366-557ae8b46dc6.jpeg">



Deploying containerと表示されます。
しばらく待ちましょう。
<img width="375" alt="74D53C92-382B-460B-8E77-FB6BEB9ABA76.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/6fae58c1-4e18-c552-65e5-2fa7f32c306f.jpeg">



コンテナが出来たら、こんな風に詳細が表示されます。
RVMもRuby on Railsも最初から入ってるみたいです。
<img width="375" alt="572125B0-89A7-4B10-B17D-AACE793C4198.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/fcc1c17c-d0db-e66c-5554-48b42a4cc27c.jpeg">


作成したコンテナをターミナルで操作してみましょう。
コンテナの画面の右にある、縦に並んだ・をクリックしてメニューを表示します。
SSH Terminalを選択します。
<img width="375" alt="0AAC8E41-4158-4C65-B4AC-5AE6A157CBF7.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/66f84a53-2201-d96b-32ee-f51e54b4e1ae.jpeg">


↓このようにターミナルが操作出来ます。
rubyやrailsのコマンドも、ちゃんと通る事を確認できます。

```
ruby -v
```

<img width="375" alt="C37DBC21-1665-4F79-BFE7-E494A2237B6F.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/f9c193aa-27dd-e0df-7288-973d29bdf647.jpeg">

rvm list knownで、使えるRuby version の確認もできますね。
<img width="375" alt="B1CC9957-268B-4FBD-9DB5-C3BE5CE178B3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/dca90981-4b30-fe89-cf53-df6dbdb174ad.png">


さて、コンテナの名前をタップして中身を確認します。
<img width="375" alt="6782D8B1-5CBC-4682-8A19-8AACB1B9BA80.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/4967a9c6-c8ee-c591-f921-1318606b06f7.jpeg">


まだ何も作って無いので、空ですね。
<img width="375" alt="7D35CD69-9E1F-42AF-AC93-472D14E6A307.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/afeb7344-db3e-4c00-dc35-ac887e0529b6.png">


~~Codeanywhereの画面からrubyファイルを作れないか試したのですが、ちょっとやり方がわからなかったので↓のようにターミナルから作成します。~~

```
touch index.rb
```

<img width="375" alt="6F38A3FE-7D4B-45C8-94E3-33AEB525FDBD.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/f44b0678-1e2e-9748-9d5d-938737c214c4.png">



↓の通り、普通に作成出来ました。
<img width="375" alt="26B748DF-1C1E-4375-B2CC-C6B9C6E30330.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/181ae2e5-b0d0-7a08-617b-2ce96ad32a15.png">

↑でも出来るのですが、メニューからも作成可能です。
画面上のロケットのマークをタップします。
<img width="375" alt="E74B5A10-3131-4D68-88DC-901B5BB0DA6F.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/2bc99f55-cb45-eb33-f475-0d8afba3b3a7.jpeg">

New fileをタップします。
<img width="375" alt="35149D24-BD31-44EB-90A3-774FAC36E6A3.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/86a1d641-e9ac-972a-b0a6-e54fb2c1d74a.jpeg">




ハロワを入力してあげます。

```
puts “Hello world”
```

<img width="375" alt="C7C4D88F-C53E-4DC2-928C-FAFDD2BA1CE8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/dfc9f325-8e79-77d4-edb8-c3187b7e77a4.png">


右上の・でメニューを開いて、保存しましょう。
<img width="375" alt="179B932F-B5ED-43D1-B491-F5177A326D3E.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7967bc18-446f-2e3e-a146-b848e202d0bb.jpeg">


右上の番号のついた□で、タブを移動できます。
ターミナルのタブに移動して、↓の通りRubyファイルを実行します。

```
ruby index.rb
```

<img width="375" alt="3B584648-0579-46E5-896F-3AFF3DDBFADE.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/72ee6149-4e71-6ef1-33b0-0ce099688583.jpeg">


↑の通り、普通に実行できましたね。

以上