12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Codeanyware(Cloud9のようなCloud IDE)で無料でさくっとRuby on Rails開発を始めよう

Posted at

Codeanyware

Cloud9に代表されるCloud IDEの一つです。
https://codeanywhere.com/

以下の特徴があります。

  • ブラウザ上で開発ができる
  • 無料で始められる(クレジットカードの登録不要)
  • 言語やWEBフレームワークごとのコンテナが用意されており環境構築の手間が省ける
  • 他のユーザーとリアルタイムで一つのソースコードを編集できる(オンラインでのペアプロ)
  • スマートフォンアプリが用意されていてどこでも開発できる
  • ターミナルを使えるためyumやaptでミドルウェアをインストールできる
  • コンテナをそのまま独自ドメインで公開できる
  • 有料プランの内容にあわせてサービス内容やコンテナスペックをパワーアップさせられる
    などなど...

以下のような方にはもってこいの環境ではないでしょうか。

  • とりあえずプログラミングを始めてみたい(環境構築簡単)
  • オンラインでプログラミングを教えたい・教わりたい
  • Herokuのような環境+IDEがほしい

Ruby on Rails環境構築

Rubyのコンテナ作成

初回起動時はどのコンテナを起動するかの選択肢が表示されます。

Rubyというコンテナを選択すると、Ruby on Railsが導入済みのコンテナを作成することができます。
今回はCentOSバージョンを選択しました。

PHPの場合はLaravelやCakePHPなども選択可能です。

image.png

Createボタンを押すと、コンテナが作成され、起動し始めます。

image.png

起動し終わると以下のような画面になります。

image.png

ここで、歯車マークの隣りにある再生ボタンを押してみましょう。
別タブが開き、RailsのWelcomeメッセージが表示されます。

image.png

ブラウザによってはポップアップブロックで引っかかるので、解除しましょう。

popupblock.png

画面左側がファイルエクスプローラーになっています。
コンテナ起動直後はファイルが表示されていないかもしれませんが、再生ボタンを一度押した後、Connectionsの下にあるプロジェクト名部分を右クリックしてRefreshするとファイルが表示されるようになります。

image.png

ファイルが表示されたかと思います。

image.png

ターミナルはファイルエクスプローラー上でプロジェクト名を右クリックしSSH Termnalを選択します。
ターミナルが起動しました。

image.png

アプリケーション開発

DBへのアクセスが可能かどうかを確認してみたいと思います。
titleとdetailというフィールドを持つTaskというデータにアクセスできるようにしてみます。

rails generate scaffold tasks title detail

image.png

rake db:createを実行するとすでに存在すると言われます。
デフォルトではsqliteを利用するようです。

image.png

続いて以下のコマンドを叩いてみます。

rake db:migrate

image.png

tasksテーブルの生成に成功したようです。

歯車マークの隣の停止ボタンを押し、改めて再生ボタンを押してみましょう。

ブラウザの別タブが開くので、そのタブのURLの末尾に/tasksを追加すると、以下のような画面が表示されます。
New Taskのリンクからレコードを追加できるか試してみてください。

image.png

入力画面で値を適当に入れ、Craete Taskボタンを押します。

image.png

成功メッセージが表示されます。
Backのリンクを押します。

image.png

一覧に先程入力した値が表示されれば動作確認OKです。

image.png

ミドルウェア導入

yumやaptが使えるため自由に導入可能です。
例えばCentOSにmysqlを導入してみましょう。

sudo yum install mysql

image.png

Is this ok [y/N]:と聞かれるのでyを入力するとインストールが継続されます。

image.png

無事インストールできました。

ペアプロ環境のセットアップ

メニューバーの中に三角のマークがあります。

image.png

これをクリックすると、共有相手を指定するダイアログが表示されます。
メールアドレスを指定して、プロジェクトに招待することが可能です。
また、招待URLを生成することも可能です。

image.png

共有を受けた側は、Codeanywareのダッシュボード上から共有を受けているプロジェクトを参照できます。

https://codeanywhere.com/dashboard/#sharedwithme
image.png

編集権限で共有を受けている場合はソースコードを編集可能です。
Cloud9はリアルタイムでソースコードの変更が共有されますが、Codeanywareは即時反映ではないようで、誰かが編集した内容は、ファイルを開き直したときに反映されているようでした。

最後にCloud9との違いをゆるく記述

Cloud SDKではCloud9が有名ですが、AWSに統合されてからは使い始めるまでの手順が増え(AWSのアカウントが必要など)、Amazonに買収される前と比較して気軽に始めるにはハードルが高くなったと感じます。

その点、CodeanywareはSNSアカウントでアカウント作成し、カード登録もせずにコードを書き始められるなど、非常に手軽に始めることができました。
また、スマホアプリもあるというのも、Cloud9にない特徴かなと思いました。

使い倒していく上では、それ以外の細かい点での好き・嫌いがあると思いますし、有料プランで出来る内容も違うと思うので、両方使って比較するのが良いかなと思いました。
ペアプロするにはCloud9のリアルタイムでの更新の反映が非常にパワフルなので、Cloud9の方がオススメできるかなと思いました。

12
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?