静岡産業技術専門学校 情報技術部

静岡産業技術専門学校にある情報技術を深く勉強するための部活

投稿機能作成&bootstrap導入!

初めまして。今回記事を書くhibiking-0422です。

春休みに「webアプリケーション作ってみたいな~」的なことを思い立って色々やっていました。そんな中、偶然にも技術部(仮)でrailsをやることになりました。2019年に入ってからかなり良い流れがきていると感じます!

 それとこれは全く記事に関係のない話になりますが、記事を書いている現在、昼間に食べたドミノのチーズ1kgピザのせいで少し気持ち悪いです。(あとで写真はる)

f:id:hibiking-0422:20190620180455j:plain

ピザ

この記事を載せるころにはもう販売していませんが、そのうちまた別の形で似たようなピザがでると思いますので、その時はぜひ挑戦してみてください!2ピースまではめちゃくちゃおいしいです。

 

さて、適当な前振りはここまでにして今日の活動内容に入っていきましょう! 

今回の活動では投稿機能作成&bootstrapの導入をしました。

投稿機能とbootstrapによりrailsで簡単な掲示板を作ることができました。

どのように掲示板を作ったのか簡単に書いていきます。

 投稿機能作成

まずは投稿機能の作成方法から。

初めに作成の大まかの流れを説明すると、

  1. createアクションをpostcontrollerに追加
  2. ビュー(create.html.erb)を作成 
  3. ルーティングを設定

の3ステップになります。

作成しているときは「複雑でめんどくさいな」と思っていましたけど、書いてみると結構シンプルですね。

 

このまま上の3ステップの内容を書きたいところですが、railsMVC(Model-View-Controller)の動きをいったんここで復習をしましょう!

復習

f:id:hibiking-0422:20190620203427p:plain

MVCアーキテクチャのイメージ

 

①ブラウザから「/post/index」というURLのリクエストをサーバに送信する。

f:id:hibiking-0422:20190620204421p:plain

②「/index/post」リクエストは、ルータによってpostsコントローラーのindexアクションに割り当てられる。

f:id:hibiking-0422:20190620204729p:plain

③indexアクションが実行され、postモデルに「すべてのpostデータを取り出せ」(Post.all)と命令する。

f:id:hibiking-0422:20190620204833p:plain

Post.allをモデルへ(右のやつ)

④データベースからpostデータを取り出す

⑤postデータをコントローラーに返す

⑥ コントローラーは、@posts変数(インスタンス変数)に保存して、indexビューに渡す。

f:id:hibiking-0422:20190620204833p:plain

@postsをビューへ(左のやつ)

⑦indexビューが起動してERB(埋め込みRuby)が起動し、HTMLを作成する。

⑧コントローラーは、ビューで生成されたHTMLを受け取り、ブラウザへ返す。

(結果)

f:id:hibiking-0422:20190620213618p:plain

最終的に帰ってくるビューの表示結果

 

 

 だいたいこんな感じです。

 

createアクションの追加

復習も終わったので、本題に入っていきます。

 

createアクションはフォームから受け取った投稿データを保存するために作成します。

f:id:hibiking-0422:20190620214901p:plain

ここに書いたものをデータベースに保存するためにcreateアクションを作る!

実際のコードがこちらです。

f:id:hibiking-0422:20190620215247p:plain

def create ~ endのところ

部活中では時間的にコードの内容をあまり触れることができなかったので、ここは少し見てみましょう! 

 

f:id:hibiking-0422:20190620220854p:plain

 paramsはビューから送信されてきたフォームの内容を受け取ります。

つまり、paramsに投稿した内容(名前・コメント)が入っています。

 

f:id:hibiking-0422:20190620221623p:plain

newメソッドでPostモデルのインスタンス(post)を作成。

nameカラムにはparams[:name](投稿の名前)

contentカラムにはparams[:content](投稿の内容)

が入ります。

 

f:id:hibiking-0422:20190620222300p:plain

 この部分ではpostオブジェクトにsaveメソッドを用いてpostの内容をデータベースに保存します。

保存に成功した場合は、redirect_toメソッドによりindexビューにリダイレクトします。(この時indexアクションも実行されます。)

保存に失敗した場合はエラーとなります。

 

上の内容を簡単にまとめると

・投稿内容を受け取る。

・受け取った内容をpostに入れる。

・postをデータベースに保存する。

 

一見したら複雑にみえるコードも、一つ一つ見ていくとそんなに難しいコードではありませんでしたね。

 

ビューの作成

次にビューを作成していきます。

といっても、viewフォルダに内にcreate.html.erbを作成して、

f:id:hibiking-0422:20190621182036p:plain

<%=@param%>

と、記述するだけで終わりです。

この@paramsは先ほど記述したのと同じで、投稿内容が入ります。

※ここでindex.html.erbの内容も少し変更しますが、それは後のbootstrapと一緒に書きます。

 

ルーティングの設定

これが最後のステップとなります。

f:id:hibiking-0422:20190621185539p:plain

ルーティングを記述したことにより、post/createとURLを受け取ったらcreateアクションが呼ばれます。この時、アクション名と同じビューファイルも呼ばれます。この場合はcreate.html.erbです。

 

 結果

 

f:id:hibiking-0422:20190621190621p:plain

・フォームを送信

 

f:id:hibiking-0422:20190621190649p:plain

掲示板風に表示される!

 

 

 Bootstrapの導入

BootstrapはTwitter社が作ったフレームワークです。

これにより、どの端末でアプリケーションを作成しても、見栄えをよくすることができます。

 

では早速Bootstrapの導入をしていこう!

 

 

 

 

 

 

 

 

 

 

 

......と言いたいところですが、この記事を書いている本人もなんとなくでしか導入方法を理解していないので、導入についての解説は割愛せてていただきます。(一応下の方に導入の手順だけは書いておきます)

そのかわりにBootstrapがどのように作用しているのか、を説明させていただきます!

 

bootstrapの解説

bootstrapはcssフレームワークです。

テンプレートを適用するだけなのでとても簡単にwebデザインを行うことができます。

 

f:id:hibiking-0422:20190622093548p:plain

こちらはindex.html.erbです。

これには大まかに3種類が作用しています。

  1. container・row・col-
  2. card・card-header・card-body
  3. form-group・form-control

となります。

container・row・col-

まずは「container・row・col-」について説明していきます。

これらはbootstrapのグリッドシステムを実現するためのcssとなります。

グリッドシステムとは表示物をグリッドに沿って配置することによって、どのような画面幅にも対応できるようにする機能です。

グリッドシステムを利用すれば簡単にレスポンシブデザインに対応することができます。

f:id:hibiking-0422:20190622101621p:plain

このように表示物を画面に対応させます。

 

crad・card-header・card-body

cardコンポーネントでは属性ごとに情報をわけて表示できます。

f:id:hibiking-0422:20190622103152p:plain

f:id:hibiking-0422:20190622103240p:plain

表示結果
form-group・form-control

formコンポーネントはフォームに適用されます。

f:id:hibiking-0422:20190622105346p:plain

f:id:hibiking-0422:20190622105441p:plain

表示結果

最後に

これで投稿機能作成とbootstrap導入は終わりです。

今回は自分の復習もかねて書いたのでかなり長くなってしまいました笑

もっと知識と技術を高めていきたいです!