「scaffold」を使わずにアンケートフォームを作ってみる〜前編〜

1. 初心者向けプログラミング講座
第3回目
「scaffold」を使わずにアンケートフォームを作ってみる
〜前編〜

2. はじめに
ハンズオンのはじめかた
・コマンドやコードについてはslackのチャンネルでも共有しますが
慣れてもらうためにも基本的にはキーボードでの入力をしてください
※長文のコードの場合はコピペしてください。その際は案内します。
・わからない箇所が出てきた場合はすぐに呼んでください
無闇にコマンド入力するなどすると対処できなくなる場合があります。
・ハンズオンで進めることを前提とするので、
時間の関係上、コードの役割など詳細については割愛します。
別途slackで質問していただければ答えることは可能です。
・コマンドおよびコードについては “”囲みで記載しますが
“”については無視してください

3. 開発環境構築
Cloud9で環境作成~その1~
Create environmentをクリック

4. 開発環境構築
Cloud9で環境作成~その2~
任意の名前を入力(ここではsample_qにした)
Descriptionは記入しなくても大丈夫なので
Next stepをクリック

5. Cloud9で環境作成~その3~
開発環境構築
Configure setting(構成設定)はデフォルトのままでOK

6. Cloud9で環境作成~その4~
開発環境構築
Review画面で設定が確認できれば
Create environmentをクリック

7. Cloud9で環境作成~その5~
開発環境構築
後は自動で環境を作成してくれるのでそのまま放置

8. Cloud9で環境作成~その5~
開発環境構築
cloud9はRailsはサポートされているがプリインストールされてないので
ここ

9. Cloud9で環境作成~その5~
開発環境構築
コマンドが入力できるようになるまで放置すると
Railsが使用できるようになる

10. ソフトタブを4から2に変更
※タブキーを押した時に半角2文字分の
スペースになるので見やすくなる
少し設定変更

11. プロジェクトの作成
新規プロジェクトを作成するために
“$ rails new sample_q”
とターミナルに入力

12. プロジェクトの作成
自動的にプロジェクトの
ディレクトリが作成される
コマンド入力後、必要なファイルを自動生成して
gemのインストールを実行してくれる
“$ rails new sample_q” 後

13. $ cd sample_q と入力し
ディレクトリを移動
作成したプロジェクトに移動する
プロジェクトの作成

14. ランディングページを作成
sample_qのディレクトリに移動したら以下のようにコマンドを入力
railsのあとの”g”はgenerate(生成)の意味で
もちろんそのまま”generate”と入力してもいいが
一文字で済むのでこちらの方がいいかも
“pages”でディレクトリを作成し、その中に”index”のファイルを生成する

15. コマンド入力後以下のようにファイルが自動生成される
ランディングページを作成
このファイルが
ランディングページになる
URLのリンク先を参照している

16. ランディングページを確認
一度サーバーを起動してページを確認する
“s”は”server”の略
どちらでもコマンドは使用可能
上記のように”Use Ctrl-C to stop”と表示されれば
サーバーが起動している

17. ランディングページを確認
画面上部にある”Preview”をクリックし、
“Preview Running Application”を選択

18. ランディングページを確認
ターミナルの右側に新しくタブが開かれるが
この状態ではわからないので “Browser”右にあるアイコンをクリック

19. 別タブにて画面が開かれて以下のようなページになるが
この状態でURLの末に”/pages/index”を追加
ランディングページを確認
URLはユニークな
文字列になるので各人で違う

20. ランディングページを確認
URL末に”/pages/index“を追加して遷移した画面
ファイルを加工してないので以下のようになるはず

21. ランディングページに変更する
画面左のディレクトリツリーから”sample_q/config/routes.rb”を開き
以下のようにコードを変更する
“get ‘pages/index’”から
”root to: ‘pages#index’”に
変更する
変更内容を保存するために
windowsの場合はCtrl+S
macの場合はCommand+S
※これ以降保存する場合は同じようにしてください

22. ランディングページに変更する
ターミナルでサーバーを再起動させ、再度”/pages/index”を開こうとすると
ルーティングエラーが発生し、正常に画面表示されないことが確認できる
“pages/index”のURLが
get(取得)できなかったことを指している

23. ランディングページに変更する
URLの”pages/index”を削除し”〜.amazonaws.com”のようにすると
先ほど確認したページが表示されたのが確認できる
これでわざわざ手入力しなくとも初期画面で”pages/index”の内容を開いてくれる

24. ユーザモデルを作成する
ユーザモデルを生成するために
”$ rails g model User name:string email:string age:integer area:string
job:string form1:text form2:text form3:text”と
ターミナルで入力
コマンドが折り返されているが一行で入力しないといけないので注意
途中でエンターするとそれまでの項目で属性が付与されてしまう。
※上の場合、job:stringでエンターするとform1以降の属性が
ユーザにつかなくなる

25. ユーザモデルを作成する
タイムスタンプ(生成された日時)がついたマイグレーションファイルを確認すると
コマンド入力した属性が当てられてるのがわかる
sample_q/db/migrate/2018~_create_users.rb

26. ユーザモデルを作成する
ただ、生成しただけではデータベースに反映されないので
紐づける必要がある。
そのために”$ rake db:migrate”と入力し
自動でデータベースに紐付けしていく
これでユーザモデルの生成は完了したので
コントローラとビューページを作成していく

27. ユーザコントローラを作成する
indexファイルを生成したように
“$ rails g controller user new”として
userの新規作成ページのファイルを生成する

28. ルーティングの修正
routes.rbファイルを開いて中身を確認すると
“get ‘user/new’”が加わっているが、
このままだとランディングページを正常に読み込まないので
“root to: ‘pages/index’”が一番上になるように変更する。
変更したらCtrl＋Sで保存するのを忘れないように
ついでにリンクのURLもわかりやすいように変更しておく

29. ランディングページからアンケートフォームへのリンク作成
ランディングページのファイル”pages/index.html.erb”を開き
以下のように内容を修正する

30. サーバーを起動し、ブラウザを展開してランディングページから
アンケートフォームへリンクできるかを確認する
ランディングページからアンケートフォームへのリンク確認
URLが省略化されていることもついでに確認
まだアンケートフォームについては
ファイルにコードを書いてないのでそのままの状態

31. ランディングページの見た目を整える
ディレクトリツリーからGemfileを開き
“group :development~”の上に
“gem ‘bootstrap-sass”を追加する
ファイルの内容を変更したら保存

32. ランディングページの見た目を整える
ファイルを保存したらターミナルで”$ bundle install”とコマンド入力し
Bootstrap-sassをインストールする
インストールが完了したらOK

33. ランディングページの見た目を整える
”app/assets/stylesheets”に新しいファイルとして
“custom.scss”を作成し、以下のようにコードを記述する

34. ランディングページの見た目を整える
サーバーを再起動し、ブラウザを確認すると
以下のような見た目になる
今回はここまで。
次回でフォームの作成をやっていきます