DIVE INTO CODE

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

Rails01_Codeanywhere版

CodeAnywhere にログイン

CodeAnywhere にログインしてダッシュボードを開く

※ CodeAnywhere からログアウトしていた場合のみ行ってください。

【手順】 CodeAnywhere にログインして Editor を表示させる

ログインした状態で、トップページの Editor ボタンをクリックする。

https://diveintocode.gyazo.com/118cc5aa39b8c917b71c9d54926da319

Editor 画面が起動する

https://diveintocode.gyazo.com/f87aae155a05e88fa57d7c34b6625544

ターミナルを起動して表示させる

開発作業は「ターミナル」を使います。表示させるためには、左ペインの code をクリックします。

【作業】左ペインの code をクリックする

https://diveintocode.gyazo.com/eeec930663bef50d3d4e76d480c091b7

【作業】code 上で右クリックをして、 SSH Terminal をクリックする

https://diveintocode.gyazo.com/18072c87ef5faeb78a10a56213bb3d9a

code という名前のタブが表示されたことを確認したら、その画面上に cabox@box-codeanywhere:~/workspace$ と表示されていることを確認しましょう。

https://diveintocode.gyazo.com/7235ea849606630062fca619e391f7c6

カーソルを合わせて選択状態になっていることを確認しましょう。

フレームワーク作成

Webプリケーションのフレームワークを作成する

【手順】新規アプリケーショ用の基礎土台=フレームワークを作成する。

【コマンド】

rails new achieve -d postgresql

ターミナル上へコピー&ペーストをしてエンターキーをクリックしてください。

https://diveintocode.gyazo.com/702c1c8b1492eef357ae695e8619c1f5

rails new 〜というコマンドは「作るアプリ毎に最初の1回のみ」行います。Ruby on Railsのフレームワーク構造を自動生成するコマンドです。achieveというアプリケーションを作ります。

【手順】bundle installで画面が止まるため、処理が完了するまで約1分見守る

https://diveintocode.gyazo.com/84fdf8a67f9898badef63da61cd1ab2e

bundle installは、裏側で処理を実行しています。

【手順】プロンプトが表示され、コマンドが終了したことを確認する

https://diveintocode.gyazo.com/96b6556abdb2052ecae35defbf5b1bd0

再びプロンプトが表示されたら処理が完了しています。コマンドが完了すると対話が戻って「命令してください」と聞いてくるイメージです。

【手順】フォルダビューワ内の code 上で右クリックをして、 Refresh をクリックする

Refresh をしないと最新の状態が表示されないため、この操作はファイル等を作成した都度行います。

https://diveintocode.gyazo.com/cd3ed4dc2f35646e1d6dd114a202f2a3

【手順】フォルダビューワ内の achieve ディレクトリを開き、中にフレームワークの構造に沿ったディレクトリが作成されたことを確認する

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

このディレクトリ構造がRuby on Railsのフレームワークそのものです。コマンドを実行することで自動で生成することができます。

PostgreSQL接続用Gemのバージョン指定

Gemを正常に動作させることができるようにGemfile内の gem pg のバージョンを指定する

Gemfileを開き、下記の before の内容が書かれた行を after に書き換えてから、上書き保存してください。

before

gem 'pg'

after

gem 'pg', '~> 0.11'

ディレクトリ移動

作成したアプリケーションのディレクトリへ移動する

【手順】作成した achieve ディレクトリ内にアプリケーションの中身を作成するために、achieveディレクトリに移動する

[コマンド]

cd achieve

https://diveintocode.gyazo.com/2389595a1bde16e487e3060e20a212a9

原則的にRuby on Railsで開発をする際は、rails new 〜で入力した名前のディレクトリに移動してから作業を行います。お作法として覚えてください。

【手順】achieve ディレクトリに移動できたことを確認する

https://diveintocode.gyazo.com/506ec37901202dbe0c1a17e22038e3d7

バージョン指定を反映させる

Gemfileを書き換えたら、必ず ファイルの保存bundle install を行ってください。

bundle install

blog 画面作成

Webアプリケーションの中身を作成する

【手順】”blog という URL でアクセスできる title と content という入力欄がある画面一式”を作る

[コマンド] 手入力をする際は、打ち間違いに気をつけましょう

rails g scaffold Blog title:string content:text

コマンドを実行後にしばらく時間がかかることがあります。お待ちください。

【手順】プロンプトが表示され、処理が完了したことを確認する

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

作成されたファイルを目視確認する

【手順】 画像を参考に 「 rails g scaffold blog title:string content:text 」 によって作成されたファイル一式をフォルダビューワからachieve/appディレクトリなどを辿り、目視確認する(あることを見るだけでOK)

https://diveintocode.gyazo.com/a3eb34d9f72c0731c60236ef9022432d

作成されたこれらのファイルがお試しアプリケーションとして後に確認できる画面の元となっています。

DB&テーブル作成

PostgreSQLのサービスを起動

【手順】最初からインストールされているPostgreSQLサービスを「起動」する

[コマンド]

sudo service postgresql start

https://diveintocode.gyazo.com/f5e3e15b3928758b6fadae827d078784

$ マークが表示され、achieveディレクトリに表示が戻れば完了です。

接続先データベースの設定

【手順】config/database.ymlファイルを見つけ、クリックして開く

https://diveintocode.gyazo.com/61a26f5a97ed45775462ee9dd7fa6731

【手順】23行目に ` template: template0` を追記する

[コード] 必ず先頭に 半角スペースを2つ 入れてください

1
template: template0

https://diveintocode.gyazo.com/ab054a12be95dca2849b51d97ca66ce7

database.ymlはYAML形式で記述する必要があるファイルです。YAML形式とは、半角スペース2つを先頭に記述することで情報の構造化を表すことができる書き方です。今回の場合は、 default の構造の中に template の設定を追記するという意味になります。

[手順]ファイルを編集した内容を保存する
Mac端末の場合 :command + S キー
Windows端末 :Ctrl + S キー

保存に成功するとファイル名の右横の ● 印が、× 印に変化します。

https://diveintocode.gyazo.com/f0e366ac4344839af90a5d9cc2d8066c

データベース管理システム「PostgreSQL」内にデータの格納場所を作成する

【手順】PostgreSQL内に格納場所(DB)とその引き出し(テーブル)を作成する

[コマンド]

rake db:create db:migrate

https://diveintocode.gyazo.com/47843b28fabdb358d9f57d2362030fe0

前の手順で作成されたdatabase.ymlファイルをもとにデータベースを、マイグレーションファイルを元にテーブルを作成するコマンドです。

【手順】プロンプトが表示され、処理が完了したことを確認する

https://diveintocode.gyazo.com/8ae5b2cdb195ba26bceef65df0465d18

HTTPServer起動

achieveにアクセスできるようにHTTPServerを起動する

【手順】 HTTPServerを起動する

【コマンド】

rails s

【手順】=> Booting WEBrick と表示され、起動したことを確認する

https://diveintocode.gyazo.com/0245318be6a47e56f0409642917c1a2b

HTTPServerを起動するとターミナルはその対応で手一杯になります。別のコマンドを実行させたい場合は、 「Ctrl + C」キーでHTTPServerを
停止してから実行させてください。

プレビュー画面のURLを調べ、プレビューを表示する

【手順】フォルダビューワの code を右クリックし、 info をクリックする

https://diveintocode.gyazo.com/c5965f7640b9656d38c40a9db599f8dc

【手順】表示された内容からポート3000番で動作しているアプリケーションを確認するURLを見つける

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

To access your application over HTTPS, make sure your application is running on port 3000 and use the following link:
という説明の下に記載されているURLです。

【手順】URLをクリックする

https://diveintocode.gyazo.com/53bc09c98bd85ce824cfbe14fed8652d

Webブラウザ上に自動的に新規タブが表示され、アプリケーションの動作を目視確認できようになります。

https://diveintocode.gyazo.com/b84175da3dbd589bd430cd4317d33836

動作確認

作成したWebアプリケーションを表示する

【手順】URL末尾に /blogs と”追記”してエンターキーを押下する

[追記するURL]
/blogs

https://diveintocode.gyazo.com/8154c59ad87aeb156071b6627770c2fe

https://diveintocode.gyazo.com/918f8037d02e7020f68fe43486f7b0f2

【手順】画面が表示されたことを確認して、New Blogをクリックする

https://diveintocode.gyazo.com/331dfb4ba143c71fd2b6f5f2122ef3d8

開発した手順が漏れていたり間違っていると、ここで赤いエラー画面が表示されます。

【手順】titleとcontent欄に任意の文字列を入力してCreate Blogをクリックする

https://diveintocode.gyazo.com/74b0b074832d463b4a8ae2d1ff59f57f

【手順】 Blog was successfully created.と表示され、登録できたことを確認して、Backをクリックする

https://diveintocode.gyazo.com/225f53ec0fdab99f5ac6ecc15a962935

【手順】 Listing Blogs画面でShowやEdit、Destroy、New Blog等の操作を一通り試してみる

https://diveintocode.gyazo.com/d35204e419a2c4f8a037dacf1c07708a

HTTPServer停止

HTTPServerを停止させる

【手順】CodeAnywhereのターミナル画面をクリックして、ctrlキー + cキー でHTTPServerを停止させる

https://diveintocode.gyazo.com/cf7ada63b81245acc5cd182054e18b9b

「Exiting」と表示されるのは、HTTP Serverが停止されたからです。

停止確認

アプリケーションにアクセスできなくなったことを確認する

【手順】 プレビュー用URL上でアプリケーションの動作確認ができなくなったことを確認する

https://diveintocode.gyazo.com/b17f80d8d1dd3c474e165bcd49fa2dd1

HTTPServerが停止した状態では、http通信ができなくなり、アプリケーションにアクセスできなくなります。再度アクセスしたい場合は rails s でHTTPServerを起動させてください。

次のステップへ

CodeAnywhere版Gitでバージョン管理

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

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

無料説明会はこちら