Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Ruby on Rails Tutorial Bootstrap3とAngularJSを使ってナビゲーションメニューを作成

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、Railsアプリを作成し、ナビゲーションメニューを作成します。

(1)インストール、初期設定

1)sample_angという名前のアプリを作成

$ cd ~/rails_projects
$ rails new sample_ang

2)Gemfileを修正

・多くの機能がAngularJSと重複するようなので、ここではTurbolinksを無効にします。

・AngularJSとBootstrapのGemを指定します。

$ cd sample_ang
$ vi Gemfile

ruby '2.0.0'
gem 'therubyracer', platforms: :ruby
#gem 'turbolinks'

gem 'bootstrap-sass', '3.3.5'
gem 'autoprefixer-rails'
gem 'angularjs-rails', '1.4.0'
gem 'angular-ui-bootstrap-rails','0.13.0'

3)バンドルインストール

$ bundle install

4)AngularJSをインクルード

$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-bootstrap-tpls

5)Bootstrap3をスタイルシートファイルでインポート

$ vi app/assets/stylesheets/custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

(2)AngularJSのモジュール作成

1)モジュール作成

①スクリプトのファイル作成

・'myModule'という名前のモジュールを定義。

・angular-ui-bootstrapを使用するので、依存するモジュールに'ui.bootstrap'を指定。

$ vi app/assets/javascripts/mymodule.js

myModule = angular.module('myModule', ['ui.bootstrap'])

②ビューにモジュールの設定

・Railsレイアウトファイルapplication.html.erbのhtmlタグに①で定義したモジュール名を指定。

$ vi app/views/layouts/application.html.erb

<html ng-app="myModule">

③AngularJSスクリプトのインクルードの設定

application.jsに①で作成したJavaScriptファイルをインクルードする設定追加

$ vi app/assets/javascripts/application.js
//= require mymodule

(3)Bootstrap3を使ってナビゲーションメニュー作成

1)Bootstrap3のFixed navbarを導入

・Bootstrap3のサンプルで提供されているFixed navbarを流用してナビゲーションメニューを作成。

①Bootstrapのソースをダウンロード

②docs\examples\navbar-fixed-topフォルダ内のindex.htmlのヘッダーメニュー部をコピーし、ヘッダーパーシャルに貼り付け。

$ vi app/views/layouts/_header.html.erb
 

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>



③navbar-fixed-topのCSS設定

・docs\examples\navbar-fixed-topフォルダ内のnavbar-fixed-top.css内の下記設定をコピー

$ vi app/assets/stylesheets/custom.css.scss

body {
  min-height: 2000px;
  padding-top: 70px;
}



2)レイアウトファイルを修正

・app/views/layouts/application.html.erbにヘッダーパーシャルを埋め込み。

・ターボリンクは使用しないので、スタイルシートとJavaScriptのインポート部にデフォルトで記述されていた'data-turbolinks-track' => trueを削除。

$ vi app/views/layouts/application.html.erb
 

<!DOCTYPE html>
<html ng-app="myModule">
<head>
  <title>SampleAng</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= render 'layouts/header' %>
<%= yield %>

</body>
</html>

 

(4)ブートストラップのナビゲーションメニューをAngularJSの機能を使って書換え

・ブートストラップ3のFixed navbarでは、折り畳み(Collapse)とドロップダウンメニューでBootstrap3のJavaScriptを使用している。

この部分をAngularJSを使用する方法に修正。

1)ヘッダーパーシャルを修整

$ vi app/views/layouts/_header.html.erb

①折り畳み(Collapse)

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
↓
<button type="button" class="navbar-toggle" data-toggle="collapse" ng-click="isCollapsed = !isCollapsed">

<div id="navbar" class="navbar-collapse collapse">
↓
<div id="navbar" class="navbar-collapse" collapse="isCollapsed">

②ドロップダウン

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu">
↓
<li class="dropdown" dropdown>
  <a class="dropdown-toggle" dropdown-toggle>Dropdown <span class="caret
"></span></a>
  <ul class="dropdown-menu">

 

2)AngularJSスクリプトを修整

・AngularJSのコントローラを'CollapseDemoCtrl'という名前で定義し、折り畳みに関する設定値を定義。

$ vi app/assets/javascripts/mymodule.js
 

myModule = angular.module('myModule', ['ui.bootstrap'])

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = true;
}
CollapseDemoCtrl.$inject = ['$scope'];
myModule.controller('CollapseDemoCtrl', CollapseDemoCtrl);

 

3)ヘッダーパーシャルにAngularJSコントローラの名前を設定

・上記2)で定義したAngularJSのコントローラをng-controllerディレクティブで指定。

$ vi app/views/layouts/_header.html.erb

<nav  ng-controller="CollapseDemoCtrl" class="navbar navbar-default navbar-fixed-top">

(5)Railsのルート設定の変更

①Railsのレイアウトファイルをrootにする

・layoutsディレクトリ内のapplication.html.erbがrootになるようにするためLayoutsコントローラを作成し、下記のように設定。

$ vi app/controllers/layouts_controller.rb

class LayoutsController < ApplicationController
  def index
    render "layouts/application"
  end
end


$ vi config/routes
  root 'layouts#index'

(6)動作確認

http://localhost:3000/にアクセスし、ヘッダーメニューが表示され、リンク、ドロップダウンメニュー、ブラウザ画面縮小時の折り畳みが正常に動作することを確認