DIVE INTO CODE

プロのエンジニアになるために挑戦する人が、チャンスをつかめる場をつくる。

Rails00_Codeanywhere版

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

メリット

  • PCへのインストール作業が不要、ネットがつながればどのPCからも作業ができる
  • クレジットカードの登録が不要、誰でも利用することができる
  • Rubyのファイルを作成し、そこにコードを入力し、保存する事で、ファイルに書かれたRubyのコードが正常に動いているかを確認することができる。

デメリット

  • 無料枠の場合、一日二時間しか使えない
  • 英語のサービスなので、説明などがわかりづらい

これから行う作業

  • Codeanywhereを開発環境として使うためには、OSや開発言語、データベース管理システムやツールを自分で選択したり、インストールする必要があります。
  • Rubyのコードがちゃんと動いているかどうかの確認や、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

初期設定

ユーザ登録のメール認証をする

この段階でCodeanywhereを登録した際に使用したメールアドレスに認証メールが送信されています。そのメールに記述されているURLをクリックして、ユーザ登録を認証してください。
この操作が完了しないとこの次の手順を先に進めることができません。

Image from Gyazo

上記のようなメールが届くはずですので、メールの指示通りにリンクをクリックしましょう。
(上記のメールは日本語翻訳されていますが、実際には英語のメールが届きます)

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 $」という表示がされていれば、コマンド(命令)を実行できる状態です。
ここに文字列でコンピュータに対する命令文を打ち込む事で、その命令が実行されます。
(「指定のRubyファイルを実行してほしい」という命令もここに打ち込む事で実行されます)

Image from Gyazo

Ruby をインストールする

【手順】 RubyをRVM経由でインストールする

最初からインストールされている Ruby のバージョンが2.1と古いため、比較的新しいバージョン2.5をインストールし直します。

[コマンド]

rvm install ruby-2.5.1

https://diveintocode.gyazo.com/9444475d8f2922e7802e0151718cb0f4

【手順】 Ruby2.5を標準で使うバージョンにする

[コマンド]

rvm --default use 2.5.1

https://diveintocode.gyazo.com/c70420cf9ba8e21d57cc2584ebc19fd3

【手順】 標準で使うRubyが2.5になっているか確認する

[コマンド]

ruby -v

https://diveintocode.gyazo.com/13c42b7cfa4b8145dffcc84f1c77037b

Rubyのファイルを実行する

ターミナルの準備とRubyのインストールが完了しましたら、試しに、Rubyのファイルを作成、実行してみましょう。

ターミナル

先ほど少し話題に出した ターミナル とは、プログラムでコンピュータに対して、命令を出す場所のことを指します。

Rubyで書いたプログラムは、ターミナルで指定のコマンドを実行することで動作します。

ターミナルにコマンドを記述して実行することで、下記の画像の例のように、コンピュータに様々な処理を命令できます。

https://diveintocode.gyazo.com/335f434e0ee285626f7578b0c66b2bd8

このターミナルを使用して、Rubyを実行します。

Rubyファイルを作成する

Rubyを実行するために、まずは、Rubyのスクリプト(コード)が書かれたファイル(blog.rb)を作成します。(.rb はrubyのファイルにつく拡張子です)

Image from Gyazo

「Code」の文字の部分を右クリックすると、上記の画像のように、タブが出現しますので、Create Fileをクリックしてください。

Image from Gyazo

その後の画面でblog.rbと書いて、OKを押しましょう。
これでblog.rbファイルが作成されます。

文字を表示する。

Rubyのコードを実行して、Hello Worldというメッセージを、ターミナルに出力してみましょう!

ファイルを作成すると、blog.rbファイルが自動で開きますので、そこに以下のRubyのコードを記述し、command + Sで記述した内容をセーブして下さい。

1
puts 'Hello World'

Image from Gyazo

Rubyを実行する

自分の考えた処理が記述されたRubyのファイルが作成できましたら、早速ターミナルで、自分の作成したRubyのファイル(プログラム)を実行して、自分の書いたコードが正しく動いているかどうかを確認しましょう。

現在のターミナルには、自分のID:~/workspace $ のような文字列が表示されています。  

  • ~/workspaceは、現在作業を行っているフォルダを表しています。
  • $はプロンプトと呼ばれるもので、このプロンプトの次に命令を打ち込んでいくことになります。

注意
現在作業を行っているフォルダが ~/workspaceではない場合$ cd ~/workspaceを実行しましょう。

Rubyプログラムは、以下のコマンドをターミナルに入力し、Enterキーを押すことで処理を実行できます。

1
ruby '実行したいファイル名'

それでは、ターミナルに、ruby blog.rbと入力して、blog.rbを実行しましょう。

Image from Gyazo

このようにRubyのファイルを作成し、それをターミナルで実行することによって、ファイルに書かれたコードが正しく動いているかどうかをターミナルで確認することができます。

おまけ puts解説

putsメソッドを使用すると、putsメソッドに渡した値を
ターミナルに出力します。

(注) #=> は実際にターミナル上に出力されたものを表しています。

1
2
puts 'あああ' #=> あああ
puts 23    #=> 23

Rails をインストールする

Rubyのファイルがしっかり実行できることが確認できましたら、次はRailsの使用する準備をしていきましょう。

最初からインストールされている Rails のバージョンが4.2と古いため、比較的新しいバージョン5.2をインストールします。

[コマンド]

gem install rails

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

インストール完了まで約5〜10分かかります。気長に待ちましょう。

https://diveintocode.gyazo.com/6b3bd5f5eceba418f23ee0ba20defff7

Parsing documentation for mail-2.7.0 で3分ほど時間がかかります。

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

【手順】 標準で使うRailsが5.2になっているか確認する

[コマンド]

rails -v

https://diveintocode.gyazo.com/d7bc12e51f4a004d94c73ba1f6e3dee9

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/38670bef66d5faf1b496d04ec6336ba7

処理が先に進みます。

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

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

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

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

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

次のステップへ

下記の文字をクリックすれば、新しいテキストが開きます。

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

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

プロのエンジニアになるために挑戦する人を応援します.

無料説明会はこちら