【スキルハックス】Railsでおみくじを作ってみる！

今回はRailsで簡単なおみくじをつくって、今までの復習をしながら学んでいきます。

まずはRailsのインストール。omikujiフォルダを作成します。

omikujiフォルダに移動して、サーバを起動します。

エラーが出ましたので、Gemfileのsqlite3のバージョンを書きます。

bundle updateをします。

再度サーバを起動します。

omikujisコントローラーを作成します。

omikujisコントローラーにindexアクションを書きます。

routes.rbを開きます。

コメントを消して、/omikujiにアクセスしたときに、omikujisコントローラーのindexアクションが実行されるようにします。

『おみくじ』と表示するようにrender plainを書きます。

/omikujiにアクセスしたときに『おみくじ』と表示することができました。

omikujisコントローラーのindexアクションをビューから呼び出すようにします。

ビューズの中のomikujisフォルダに『index.html.erb』ファイルを作成します。

『index.html.erb』にh1タグを作成します。

/omikujiにアクセスしたときにh1タグの『おみくじ』を表示できました。

@と付けた変数はビューに受け渡すことができます。

『.sample』で配列の中からランダムで取り出してくれます。

中吉。

大吉。

デザインが寂しいのでCSSでデザインを入れていきます。

ユニバーサルセレクタで全体を真ん中にします。

真ん中になりました。

pタグにclassを付けます。

上記のようにデザインを入れてみます。

デザインは入りましたが、左端になってしまったので真ん中にします。

上下は30pxで左右はオートで均等に配置してくれるようにmarginを指定しました。

真ん中に簡単なおみくじができました。最後は大吉で良い締めになりました。