2016.06.09

cloud9とbootstrapで作成したRuby on Railsアプリをデザインしよう!

難易度
2
カテゴリー
やってみよう!
タグ
Web開発
プログラミング

160620_ruby_scr01_p4

 

【STEP4】

Dive into Herokuでネット公開

先ほどつくったブログを実際と同じような見た目に変更しましょう!

160609_rails_01

Ⅰ.Bootstrapを組み込む

Gemfile を開く

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

160609_rails_02

Bootstrap用のgemを追記する

【手順】gemfileの31行目に gem 'twitter-bootstrap-rails' を追記して、保存する

160609_rails_03

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

Gemfileの編集分を反映させる

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

[コマンド]

bundle install

160609_rails_04

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

 


Ⅱ.Bootstrap用にCSSをインストールする

Bootstrap用にCSSをインストールする

次にコンソールに次のコマンドを入力し、エンターを押します。

[コマンド]

rails generate bootstrap:install static

160609_rails_05

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

【確認】下記の内容が表示されたらCSSスタイルシートが正しくインストールされています。

160609_rails_06


Ⅲ.Bootstrap用にHTMLを編集する

erbテンプレートを編集する
achieve/app/views/blogs/index.html.erbを開く

160609_rails_07

中身をすべて削除する

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

160609_rails_08

ソースコードをすべてコピーする

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

160609_rails_09

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

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

160609_rails_11
レイアウトファイルを編集する
app/views/layout/applicaiton.html.erbを開く

160609_rails_12

中身を削除する

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

160609_rails_13

ソースコードをgithubからコピーする

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

160609_rails_14

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

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

160609_rails_15


Ⅳ.画像ファイルを配置する

画像ページを開きましょう

リンク先に移動してください。
https://github.com/Timeshift-corp/day1/blob/master/app/assets/images/home-bg.jpg

160609_rails_16

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

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

160609_rails_17
app/asset/imagesをクリックする

160609_rails_18

file/Upload Local Fileをクリックする

160609_rails_19

画像をアップロードする

オレンジの枠の中がupload to folder app/assets/imagesになっているのを確認して、Select filesをクリックする

160609_rails_20
保存した画像をアップロードする

フォルダから先ほどの画像(home-bg.jpg)を探し、「開く」をクリックして、アップロードが終わったら「close」をクリックする。

[補足]
設定によって表示される画面が異なります。

160609_rails_21


Ⅴ.CSSファイルを編集する

CSSファイルを編集する
app/asset/stylesheetsを右クリックする

New Fileをクリックする。

160609_rails_22

File名を編集する

[File名] ※ファイル名の末尾に半角スペースが入らないように注意してください。
clean-blog.css

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

160609_rails_23

リンク先に移動してソースコードをコピーする
https://github.com/Timeshift-corp/day1/blob/master/app/assets/stylesheets/clean-blog.css
ソースコードを作成したclean-blog.cssに貼り付ける

【手順】貼り付けることができたら保存しましょう。

160609_rails_24


Ⅵ.起動確認する

【手順】お試しアプリケーションにアクセスできるように、rails server -b $IP -p $PORTを入力する。

【コマンド】

rails server -b $IP -p $PORT

160609_rails_25

preview→preview running applicationをクリックして確認しましょう。

URLの末尾に/blogsを付け加えないとブログは表示されません。

 

完了「お疲れ様でした!」

いかがでしたか?

160609_rails_26

次のステップへ進みましょう!

【連載第6回】 ALTUSサーバーへ差分デプロイ(更新)

 

 

Dive into Code で経験ゼロからWebエンジニアになる!

・Dive into Code公式Facebookページ

・経験ゼロから実務経験を得られるプログラミングスクール【Dive into Code】

 

以下の facebook ページに”いいね”を押していただいた後に、メッセージ宛に「オンラインサポート用 facebook グループへの招待を希望」の旨、ご一報ください。

https://www.facebook.com/DiveintoCode.RubyonRails/

この記事を書いた人

株式会社Dive into Code 平井真司&宮岡聖也

【平井真司】
株式会社Dive into Code
Sales&Marketing Team Leader

起業と清算双方を経験した起業家たまごエンジニア
U30で起業と清算の双方を経験。これからの起業には、Webアプリケーション開発スキルが欠かせないとことを起業体験の中でのエンジニアメンバーとのやりとりで痛感し、独学とスクール通学でたまごエンジニアになる。
同じ轍を踏まない様に、同様の課題を抱える起業家たちへプログラミングスキルの必要性と最短経路での学習方法の普及に務める。

【宮岡聖也】
愛媛から上京してプログラミングを学習し、Dive into Codeでスクール講師をしながら受託開発チーム「Second Team」のリーダーを務める。
スキルを習得し、エンジニアとして型に縛られない新しい働き方を模索中。故郷の廃校した小学校でコワーキングスペースを開放するのが目標。

【株式会社Dive into Code】
「すべての人が、テクノロジーを武器にして活躍できる社会をつくる」 をミッションに掲げ、プログラミング経験ゼロから実務経験のあるエンジニア人材へ育成を行う【Dive into Code】と成長した受講生が実経経験を得られる【Second Team】を運営しております。

GMOクラウドアカデミーYouTubeチャンネルはこちらから

アカデミー用バナー

メルマガ会員募集中!

アカデミーの最新情報や会員限定のお得な情報をお届けします。

メルマガ登録はこちら