一からRuby on Rails備忘録

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

wp-admin

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

（１）インストール、初期設定
　
１）sample_angという名前のアプリを作成
　
$ cd ~/rails_projects
$ rails new sample_ang
　
２）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′
　
３）バンドルインストール
　
$ bundle install
　
４）AngularJSをインクルード
　
$ vi app/assets/javascripts/application.js
　
//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-bootstrap-tpls
　
５）Bootstrap3をスタイルシートファイルでインポート
　
$ vi app/assets/stylesheets/custom.css.scss
　
@import “bootstrap-sprockets”;
@import “bootstrap”;
　
（２）AngularJSのモジュール作成
　
１）モジュール作成
　
①スクリプトのファイル作成
・’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
　
（３）Bootstrap3を使ってナビゲーションメニュー作成
　
１）Bootstrap3のFixed navbarを導入
　
・Bootstrap3のサンプルで提供されているFixed navbarを流用してナビゲーションメニューを作成。
　
①Bootstrapのソースをダウンロード
　
②docs\examples\navbar-fixed-topフォルダ内のindex.htmlのヘッダーメニュー部をコピーし、ヘッダーパーシャルに貼り付け。
　
$ vi app/views/layouts/_header.html.erb

<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;
}

　
２）レイアウトファイルを修正
　
・app/views/layouts/application.html.erbにヘッダーパーシャルを埋め込み。
・ターボリンクは使用しないので、スタイルシートとJavaScriptのインポート部にデフォルトで記述されていた’data-turbolinks-track’ => trueを削除。
　
$ vi app/views/layouts/application.html.erb

<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>

　
（４）ブートストラップのナビゲーションメニューをAngularJSの機能を使って書換え
　
・ブートストラップ3のFixed navbarでは、折り畳み（Collapse）とドロップダウンメニューでBootstrap3のJavaScriptを使用している。
　
この部分をAngularJSを使用する方法に修正。
　
１）ヘッダーパーシャルを修整
　
$ 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">

　
２）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);

　
３）ヘッダーパーシャルにAngularJSコントローラの名前を設定
　
・上記２）で定義したAngularJSのコントローラをng-controllerディレクティブで指定。
　
$ vi app/views/layouts/_header.html.erb
　
<nav  ng-controller=”CollapseDemoCtrl” class=”navbar navbar-default navbar-fixed-top”>
　
（５）Railsのルート設定の変更
　
①Railsのレイアウトファイルをrootにする
・layoutsディレクトリ内のapplication.html.erbがrootになるようにするためLayoutsコントローラを作成し、下記のように設定。
　

$ vi app/controllers/layouts_controller.rb

class LayoutsController 

　

$ vi config/routes

  root 'layouts#index'

　

（６）動作確認

　

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