Logo a0de449bfc794a45333c1bf4f16f82b382942b7bfe1fa9e70ba67900e2306bd7

DIVE INTO CODE

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

Rails01

2017.02.20

【STEP1】お試しアプリケーション開発

ログイン

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

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

【手順】 Cloud9にログイン後に作成したワークスペースをクリックして、OPENボタンをクリックする

https://diveintocode.gyazo.com/1a4ec3aef101c2fdf5b7509165fba262

IDE(統合開発環境)画面が起動する

IDEとは、Integrated Development Environmentの略語です。ソフトウェアの開発環境のことを指します。開発作業は主に下ペインの「ターミナル」を使います。カーソルを合わせて選択状態になっていることを確認しましょう。

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

フレームワーク作成

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

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

【コマンド】

rails new achieve -d postgresql

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

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

※ここでエラーになってしまう場合は、

[コマンド]

gem install rails

を実行してからやり直してください。

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

https://diveintocode.gyazo.com/98aa75629deaba4e169155eb59751417

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

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

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

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

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

https://diveintocode.gyazo.com/a46df7a2de629cd428d0148dbe6af1bd

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

ディレクトリ移動

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

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

[コマンド]

cd achieve

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

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

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

https://diveintocode.gyazo.com/550b05c1837505a5de332680fe371aed

blog画面作成

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

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

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

rails g scaffold Blog title:string content:text

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

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

https://diveintocode.gyazo.com/dab52c12efadd0ed38a02d8e17103295

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

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

https://diveintocode.gyazo.com/7089ad6e539cddc7c43fa05accdf4536

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

DB&テーブル作成

PostgreSQLのサービスを起動

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

[コマンド]

sudo service postgresql start

https://diveintocode.gyazo.com/e2a19793340fe6b9eed6fa902cf68c25

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

https://diveintocode.gyazo.com/f5d1c9bc8c82f438135875f2214c82b7

PostgreSQLのデータベースユーザを登録

【手順】PostgreSQLにフル権限ユーザとしてSQL実行モードで接続する

[コマンド]

sudo sudo -u postgres psql

https://diveintocode.gyazo.com/4641cd207795392b7878156326ef3f54

実行後に以下のようにpostgres=# と表示されればOKです。

https://diveintocode.gyazo.com/36a723818d5b0630e6a6d8178e18dc15

【手順】PostgreSQLにubuntuユーザを作成する

[コマンド]

CREATE USER ubuntu SUPERUSER;

※ERROR: role "ubuntu" already exists と表示されても大丈夫です。既にユーザが作成されていただけです。この手順は、OSのユーザ名と同名のユーザを作成することでパスワードなしでPostgreSQLに接続できるようにするためのものです。万一ユーザが作成されていないと後の手順でエラーとなるため、行っています。

https://diveintocode.gyazo.com/98b20b5dc3417dcc519ec78b0f31d52c

【手順】PostgreSQLのSQL実行モードから脱出する

[コマンド] ※ ¥マークはバックスラッシュ「\」の半角です
\q

https://diveintocode.gyazo.com/acf8c5a779e10c05f7b9b6ca8db600e7

~/workspace/achieve と再び表示されればOKです。

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

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

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

https://diveintocode.gyazo.com/f5ede60f7c5e5241994a628ae781550e

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

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

template: template0

https://diveintocode.gyazo.com/4f203e8c7b58c74de83b369b022db94d

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

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

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

https://diveintocode.gyazo.com/c821d7259819d096f556b990d5fc0a55

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

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

[コマンド]

rake db:create db:migrate

https://diveintocode.gyazo.com/a3a867cc767c9cb2f21ab2ef31b7ffe3

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

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

https://diveintocode.gyazo.com/c51de4ca5a018102a8df9c556d4d516d

HTTPServer起動

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

【手順】 HTTPServerを起動する

【コマンド】

rails s -b $IP -p $PORT

※Cloud9以外での作業時は -b 以降は記述せず rails s のみを実行してください。

rails s

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

https://diveintocode.gyazo.com/002a9f49a4f0079e1321faaa0e00612a

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

プレビュー画面を表示する

【手順】最上段の Previewを押下し、PrevewRunningAppricationをクリックする

https://diveintocode.gyazo.com/93905e3d0e2d952ed04688482cbe6a49

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

https://diveintocode.gyazo.com/fdd419242b21942546318db797320352

【手順】Yay! You’re on Rails! が表示されている画面のURLをコピーする

https://diveintocode.gyazo.com/bb9b8e9674abdf078ed6f6f08cda4110

【手順】ブラウザの新しいタブを開き、コピーしたURLを貼り付けて実行する

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

これで、大きな画面でプレビューを確認することができます。

https://diveintocode.gyazo.com/4643a9bf4fc4687f4912592e93a5bc2c

動作確認

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

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

[追記するURL]
/blogs

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

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

https://diveintocode.gyazo.com/11ee62c2d84e2b1b2e7c4d9cafc56727

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

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

https://diveintocode.gyazo.com/5f524c572947bb984c19478c21250fa2

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

https://diveintocode.gyazo.com/27b26ff4a4d32c8bd7d5bbb9a7f5c413

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

https://diveintocode.gyazo.com/ecc4f7abe2d4c2b39be64a14e93765e7

HTTPServer停止

お試しアプリケーションのHTTPServerを停止させる

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

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

「Exiting」と表示されるのは、HTTP Serverがシャットダウン(停止)されたからです。

停止確認

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

【手順】 Preview>Preview Running Application 画面でお試しアプリケーションの確認ができなくなったことを確認する

https://diveintocode.gyazo.com/b17f80d8d1dd3c474e165bcd49fa2dd1

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

次のステップへ

Gitでバージョン管理

  • 目次

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

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

無料説明会はこちら