Webサービスの作り方を実例のRailsでイチから学ぶ【レイアウト作成】part1

  • 2015/8/29
  • Webサービスの作り方を実例のRailsでイチから学ぶ【レイアウト作成】part1 はコメントを受け付けていません。

これからお伝えするのは、本番環境での作成手順です。
アイデアが固まってから、作成に移るというのは
ある程度経験値のある方ができることだと私は考えます。
 

初学者は、とにかく手を動かすことで、
こんなことができるなら、こんなサービスがあったら面白いのではと
作成過程の中での、ひらめきを形にする方がお勧めです。
 

開発環境で作成するよりも、実際に本番環境に上げて練習した方が面白いです。
いち早く、本番環境での作成を私はお勧めします。
学習意欲のモチベーション維持になりよりも役立ちますから。

 


※「完成イメージ図」=上中下3つのパーツをクリックすると拡大図になります。
sam01
sam02
sam03


それでは早速、作成に移ります。
第1回目は「レイアウト作成-part1」です。

長編になりますので、記事は回数を分けて投稿します。
そしてrailsが全く分からない方はまずは当ブログの
Ruby on Rails活用講座」を学んでから作成をお願いします。

 
※「参考教材」
Bootstrap & Ruby on Rails – Part 1
Bootstrapで動きのある1カラムレイアウト作成方法
 


1.新規プロジェクト作成

$ rails new basic_website


2.gemfileに追記

gem ‘bootstrap-sass’
gem ‘autoprefixer-rails’

$ bundle install


3.app/assets/stylesheets/application.cssを
 application.css.scssに変更

中身を全て消してから

@import “bootstrap-sprockets”;
@import “bootstrap”;


4.app/assets/javascripts/application.jsに追記
※//= require bootstrap-sprocketsを挿入

//= require bootstrap-sprockets
//= require_tree .


5.ページの作成コマンド

$ rails g controller Pages home about contact

$ sudo service httpd restart

http://localhost:3000/pages/home
ここでページが表示されることを確認
pages1


6.レイアウトページ[navbar]の作成
views/layouts/application.html.erb
※<%= render 'shared/navbar' %>を挿入

<!DOCTYPE html>
<html>
<head>
  <title>BasicWebsite</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= render 'shared/navbar' %>
<%= yield %>

</body>
</html>

新規フォルダと新規ファイルの作成
views→ new folder→ shared
shared→ new file→ _navbar.html.erb

app/views/shared/_navbar.html.erbを作成
※下記コードはBootstrapのComponentsおよび、
Jumbotronを参照に作成しております。

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "Home", root_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>

<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>

</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

$ rake db:migrate RAILS_ENV=production

$ bundle exec rake assets:precompile RAILS_ENV=production

$ sudo service httpd restart

スクリーンショット 2015-08-30 10.03.30

今回はここまで。
次回はホーム画面の作成に移ります。

次のページ
Webサービスの作り方を実例のRailsでイチから学ぶ【レイアウト作成】part2

  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る