DIVE INTO CODE

人材紹介会社と連携した本気のカリキュラムと手厚いサポートを提供するプログラミングスクール。
最短わずか6ヶ月でRailsエンジニアとしての独立・転職を支援します。

Rails00_Codeanywhere版

CodeAnywhereを使うメリットとこれから行う作業について

メリット
- PCへのインストール作業が不要、ネットがつながればどのPCからも作業ができる
- クレジットカードの登録が不要、誰でも利用することができる

これから行う作業
- Codeanywhereを開発環境として使うためには、OSや開発言語、データベース管理システムやツールを自分で選択したり、インストールする必要があります。
- Ruby on Railsアプリケーションを開発するために必要な作業を行います。

Codeanywhereにユーザ登録

【手順】 Codeanywhereのサイト( https://codeanywhere.com/ ) にアクセスして Sign Up をクリックする

https://diveintocode.gyazo.com/e355c0245726c931706b2f4301b42163

ユーザ登録が完了している場合は、Loginからログインしてください。

ユーザ登録する

【手順】メールアドレスを入力し、「私はロボットではありません」のチェックを入れて Register をクリックする

https://diveintocode.gyazo.com/ac04b7f7e234e66aaf2dd9f1cd49bfed

【手順】以下の画面が表示されたこと(=アカウントが登録できた)を確認し here をクリックする

右下の「hereリンク」をクリックしてください。

https://diveintocode.gyazo.com/dd1e55f7c031ce324c284c7dd6649357

【手順】Editor画面が表示されたことを確認する

https://diveintocode.gyazo.com/443ebc637bfa0040249dd10f177afd12

初期設定

Containerを作成する

【手順】Connection Wizard画面を確認する

この画面上でどのようなOSや開発言語をインストールするのか設定をします。

https://diveintocode.gyazo.com/0a8f5d6f0fde195f42babc23222dae32

【手順】Nameに「 code 」、検索欄に「 ruby 」と入力し、表示された下の欄からRubyのUbuntuを選択して create をクリックする

https://diveintocode.gyazo.com/438d2efcbe8e2197f5e7a834e8bb6489

【手順】処理が完了するまでしばらく待つ

https://diveintocode.gyazo.com/2e075c96720d9631362e8efe9fc2d3a1

この画面になれば完成です。

https://diveintocode.gyazo.com/38b185480b1c85540acc524e3a8c2f05
この時点で、Codeanywhere内のコンテナ(コンピュータ)には、OSとしてUbuntu、開発言語Ruby、WebアプリケーションフレームワークRuby on Railsがインストールされています。

IDE画面確認

Codeanywhereの画面構造を確認する

【手順】 画面をざっと確認する

https://diveintocode.gyazo.com/38b185480b1c85540acc524e3a8c2f05

左ペイン:フォルダ構造(Codeanywhere内に配置されています) 。中央ペイン:コマンド実行やファイルの編集を行えます。
この画面上に表示されているURLは後で使います。誤ってこのファイルを閉じてしまわなように注意しましょう。

ターミナルを表示する

【手順】 左側のタブ「code」を選択する

https://diveintocode.gyazo.com/a54ad6e80bcdb07356c5405653d2c9bb

「~/workspace $」という表示がされていれば、コマンド(命令)を実行できる状態です。
ここに文字列でコンピュータに対する命令文を打ち込み、開発作業を進めます。

PostgreSQL、Heroku Toolbeltをインストールする

【手順】 パッケージ管理システムをアップグレードするコマンドを実行する

PostgreSQLやHeroku Toolbeltをインストールする前にパッケージ管理システムを最新版に更新します。パッケージ管理システムは、インストールするツール群を管理しており、最新版にしておかないと正しくインストールできないことがあるためです。

sudo apt-get update

https://diveintocode.gyazo.com/a81f5083b6aca9c0aad6aa83257a83b6

【手順】処理が完了するまでしばらく待つ

https://diveintocode.gyazo.com/c5d16d1b79c2ab582306c159dc1f872d

「~/workspace $」という表示がされていれば、処理が完了して次のコマンドを実行できる状態です。

PostgreSQLをインストールする

sudo apt-get install libpq-dev postgresql

https://diveintocode.gyazo.com/b3930e1e5e47c39f990c3ee78b0283c3

【手順】 [Y/n] と表示が出たら Y と入力してエンターキーを押す

Y

処理が先に進みます。

https://diveintocode.gyazo.com/89b1241c62817b980c4be680a081a6ed

【手順】処理が完了するまでしばらく待つ

https://diveintocode.gyazo.com/2ea3fd2dc30932e4be0bb193bcd50a2c

「~/workspace $」という表示がされていれば、処理が完了して次のコマンドを実行できる状態です。

【手順】PostgreSQL実行モードにする

PostgreSQLに初期設定をするためにモードを切り替えます。

sudo su postgres -c psql

https://diveintocode.gyazo.com/9d5ad36a9f45c9a2b5d66632de00deb2

【手順】PostgreSQLに自動アクセスするためのPostgreSQLユーザを作成する

PostgreSQLは、Railsアプリケーションから接続する際に、そのコンピュータのOSユーザと同名のPostgreSQLユーザ名で接続する、という標準の仕様があります。そのため、今回は「cabox」というターミナルに表示されているOSユーザ名と同名のPostgreSQLユーザを作成します。

CREATE ROLE cabox SUPERUSER LOGIN PASSWORD 'diveintocode'; 

https://diveintocode.gyazo.com/3df8bca1d066af32c3d9ebc31f7caa8d

【手順】PostgreSQLモードから抜け出る

バックスラッシュとqを打ち込むことで抜け出る(quit)することができます。

\q

Heroku Toolbeltをインストールする

【手順】 Heroku Toolbeltをインストールするコマンドを実行する

sudo wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

https://diveintocode.gyazo.com/51e89a2ceb677b00eee996a99b51cbc5

【手順】処理が完了するまでしばらく待つ

https://diveintocode.gyazo.com/9c793e32a8371497b7baccc6b42547fc

「~/workspace $」という表示がされていれば、処理が完了して次のコマンドを実行できる状態です。

開発作業上の注意点

  • 左ペインのフォルダやファイルの表示は ファイルを作成する都度リフレッシュ してください。
  • ターミナルを新たに表示したい場合は code → 右クリック → SSH Terminal
  • 開発したRailsアプリケーションの動作確認は初期画面に表示された

ファイルを作成する都度リフレッシュする

【手順】左ペインの「code」にマウスカーソルを合わせて右クリック → Refresh

https://diveintocode.gyazo.com/a72587da7abbb93ee85b0bbf619178cf

ターミナルを新たに表示する

【手順】左ペインの「code」にマウスカーソルを合わせて右クリック → SSH Terminal

https://diveintocode.gyazo.com/7b83d21307578e4eb01804bf848bbaae

Railsアプリケーションの動作確認をする

【手順】code Containerファイルに記載されたHTTPSのURLリンクをクリックする

「To access your application over HTTPS, make sure your application is running on port 3000 and use the following link:」として最初からファイルに記載されています。後から探すのは手間なため、誤ってファイルを閉じてしまっても辿れるように、控えておいてください。

https://diveintocode.gyazo.com/24a4d756c45d3a2278c75f707a16e84d

※Railsアプリケーションを動作させていないときは、以下のようなCodeanywhere標準の画面が表示されます。

https://diveintocode.gyazo.com/f776cb7d0392d200df04208328b1d277

次のステップへ

CodeAnywhere版お試しアプリケーションの開発

DIVE INTO CODEの無料説明会を開催中

ハイレベルなプログラミングに入門したい方、フリーランスエンジニアになりたい方、
つくりたいアプリがある方、一歩前へ踏み出すお手伝いいたします。

無料説明会はこちら