DIVE INTO CODE

プロのエンジニアになるために挑戦する人が、チャンスをつかめる場をつくる。

Rails04

Bootstrapを組み込む

【手順】Cloud9画面左上にあるファイルビュワーからGemfileをダブルクリックする

https://diveintocode.gyazo.com/ce8af94a3918ba8487697b9f3249b684

【手順】gemfileの2行目に以下を追記して、ファイルを保存する

[コマンド]

1
gem 'twitter-bootstrap-rails'

※gemとはライブラリのことで、便利な機能を追加できます。 bootstrapはデザインをするときに大いに役立ちます。

https://diveintocode.gyazo.com/96771d1fcba573efabcdc830a7c34c49

【手順】Gemfileの変更分をアプリケーション内に反映させる

[コマンド]

bundle install

先ほど入力したgemをインストールするコマンドです。

https://diveintocode.gyazo.com/7373f21a16e7df9fdd59d2bc6c2c1dc5

CSSファイル一式をインストールする

【手順】Bootstrap用のCSSファイル一式をインストールする

[コマンド]

rails g bootstrap:install static

このコマンドを実行することで、CSSのスタイルシートをインストールすることができます。

https://diveintocode.gyazo.com/914603a349a0ca60905ccaf7f011975f

HTMLを編集する

ERBテンプレートを編集する

【手順】achieve/app/views/blogs/index.html.erbファイルを開く

https://diveintocode.gyazo.com/a23f80ae5e9d38cca4dfb4144819c391

【手順】中身をすべて削除する

macの人は ⌘ + A (全選択)windowsの人は ctrl + A してから削除すると簡単です。

https://diveintocode.gyazo.com/92f80b1f643f1b5a836c6d6be5c2a366

見本ソースコードをコピーする

【手順】リンク先のファイルのソースコードをすべてコピーする

https://github.com/DiveintoCode-corp/achieve-blogs-seminar/blob/master/app/views/blogs/index.html.erb

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

【手順】コピーしたソースコードを index.html.erb ファイル内に貼り付ける

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

ソースコードを貼り付けることができたら保存しましょう。

レイアウトファイルを編集する

【手順】app/views/layout/applicaiton.html.erbを開く

https://diveintocode.gyazo.com/988c41672abcf5b5f25db0f6e2965fa2

【手順】中身をすべて削除する

⌘ + A (全選択) windowsの人は ctrl + A してから削除すると簡単です。

https://diveintocode.gyazo.com/023028df1132f4150a18103d47ed781e

【手順】ソースコードをgithubからコピーする

リンク先のファイルのソースコードをすべてコピーしてください
https://github.com/DiveintoCode-corp/achieve-blogs-seminar/blob/master/app/views/layouts/application.html.erb

https://diveintocode.gyazo.com/174cc8059f6bcd9f1aa9436aa68f6d45

【手順】コピーしたソースコードをapplication.html.erbに貼り付ける

https://diveintocode.gyazo.com/680db01bf7f7ad36faae0a73dd560ed3

貼り付けたら保存しましょう。

画像ファイルを配置する

【手順】画像を入手するため、リンク先に移動する

https://github.com/DiveintoCode-corp/achieve-blogs-seminar/blob/master/app/assets/images/home-bg.jpg

https://diveintocode.gyazo.com/a062071eef6006ce81bd8ba719dd8e74

【手順】画像を右クリックして手元の端末に保存する

https://diveintocode.gyazo.com/dd5376b946c084ddb171d2bb1ad86ac4

画像を保存できたら次に移ります。

【手順】app/asset/imagesをクリックする

https://diveintocode.gyazo.com/acb08e90c62e5c53b9ab40f480dc9e92

【手順】上の見出しからfile/Upload Local Fileをクリックする

https://diveintocode.gyazo.com/43732d444d1c7487006128b006b9a5fe

【手順】画像をアップロードする(ドラッグアンドドロップ、ファイルを選択、どちらでもできます)

https://diveintocode.gyazo.com/9799f88d73221a414747f18dbb53e928

【手順】imagesディレクトリにアップロードされていることを目視確認する

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

CSSファイルを編集する

【手順】app/asset/stylesheetsを右クリックして、New Fileをクリックする

https://diveintocode.gyazo.com/d3aed41a915942ff8444a348e657a4a8

【手順】File名を編集する [File名]

※ファイル名の末尾に半角スペースが入らないように注意してください。

[ファイル名]

clean-blog.css

[補足]
間違えたり入力できなかったら右クリックをおしてrenameから変更ができます。

https://diveintocode.gyazo.com/50ca71da004a664327594e7bde6e720a

【手順】リンク先に移動してソースコードをコピーする

https://github.com/DiveintoCode-corp/achieve-blogs-seminar/blob/master/app/assets/stylesheets/clean-blog.css

【手順】ソースコードを作成したclean-blog.cssに貼り付けて保存する

https://diveintocode.gyazo.com/eb0d824054ffe5fcaab158667df13018

ワーニングが表示されますが、ここでは無視してください。

起動確認する

【手順】お試しアプリケーションにアクセスできるようにHTTPサーバを起動する**

【コマンド】

rails s -b $IP -p $PORT

https://diveintocode.gyazo.com/17b83a26b48149563bf3dade8c763117

【手順】プレビューを見るために「preview > preview running application」をクリックする

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

【手順】URLの末尾に/blogsを付け加えてブログ画面を表示させる

https://diveintocode.gyazo.com/c1d8811bfdf2917a6f43ed7a7934595e

次のステップへ

Herokuでネット公開(更新)

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

プロのエンジニアになるために挑戦する人を応援します.

無料説明会はこちら