Ruby on RailsでWebサイト公開！に挑戦中

（ビュー）
<span class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle">
    ボタンドロップダウン
  </button>
  <ul class="dropdown-menu">
    <li><%= link_to "メニュー１", '#' %></li>
    <li><%= link_to "メニュー２", '#' %></li>
    <li><%= link_to "メニュー３", '#' %></li>
  </ul>
</span>
<span class="dropdown">
  <a class="dropdown-toggle">
    リンクドロップダウン
  </a>
  <ul class="dropdown-menu">
    <li><%= link_to "メニュー１", '#' %></li>
    <li><%= link_to "メニュー２", '#' %></li>
    <li><%= link_to "メニュー３", '#' %></li>
  </ul>
</span>

（ビュー）
<div ng-controller="CollapseDemoCtrl1">
  <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">詳細を見る</button>
  <hr>
  <div collapse="isCollapsed">
    <div class="well well-lg">
      ・・・・・
    </div>
  </div>
</div>

（AngularJSスクリプト）
myModule = angular.module('myModule', ['ui.bootstrap'])

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

（ビュー）
<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
</div>

（AngularJSスクリプト）
myModule = angular.module('myModule', ['ui.bootstrap'])

function CarouselDemoCtrl($scope) {
  $scope.myInterval = 5000;
  $scope.slides = [
    {
       image: 'http://placekitten.com/g/600/300',
       text: 'one'
    },
    {
       image: 'http://placekitten.com/g/601/300',
       text: 'two'
    },
    {
       image: 'http://placekitten.com/g/602/300',
       text: 'three'
    },
  ];
}
CarouselDemoCtrl.$inject = ['$scope'];
myModule.controller('CarouselDemoCtrl', CarouselDemoCtrl);

<accordion>
  <accordion-group heading="大項目１">
    大項目１の内容
  </accordion-group>
  <accordion-group heading="大項目２">
    <accordion>
      <accordion-group heading="中項目１">
        中項目１の内容
      </accordion-group>
      <accordion-group heading="中項目２">
        <accordion>
          <accordion-group heading="小項目１">
            小項目１の内容
          </accordion-group>
          <accordion-group heading="小項目２">
            小項目２の内容
          </accordion-group>
        </accordion>
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

SELECT t1.updateday,t1.avg,t2.avg 

FROM 
  (select updateday,(sum(yachin)+sum(kanrihi))/count(yachin) AS avg from chrts where id_eki = 1234 GROUP BY updateday) AS t1 

JOIN 
  (select updateday,(sum(yachin)+sum(kanrihi))/count(yachin) AS avg from chrts where id_eki = 4321 GROUP BY updateday) AS t2 

ON t1.updateday = t2.updateday

    if (visible_hikaku){
      series = {
        0: {targetAxisIndex:0,type: "line",pointSize: 5},
        1: {targetAxisIndex:0,type: "line",pointSize: 5},
        2: {targetAxisIndex:1,type: "bars",dataOpacity: 0.2},
        3: {targetAxisIndex:1,type: "bars",dataOpacity: 0.2}
      }
    }else{
      series = {
        0: {targetAxisIndex:0,type: "line",pointSize: 5},
        1: {targetAxisIndex:1,type: "bars",dataOpacity: 0.2}
      }
    }
    var options = {
　　　　：
    };
    var data1 = new google.visualization.DataTable();
    if (visible_hikaku){
      data1.addColumn('string', '年月');
      data1.addColumn('number', '平均賃料1');
      data1.addColumn('number', '平均賃料2');
      data1.addColumn('number', '件数1');
      data1.addColumn('number', '件数2');
    }else{
      data1.addColumn('string', '年月');
      data1.addColumn('number', '平均賃料');
      data1.addColumn('number', '件数');
    }
    for(i = 0 ; i < data.length;i++) {
      var ym = data[i][0].substr(0,4) + "/" + data[i][0].substr(5,2)
      if (visible_hikaku){
        data1.addRow([ ym,data[i][1],data[i][2],data[i][3],data[i][4] ]);
      }else{
        data1.addRow([ ym, data[i][1],data[i][2] ]);
      }
    }
    var formatter = new google.visualization.NumberFormat(
      {fractionDigits: 2}
    );
    formatter.format(data1, 1);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
    chart.draw(data1, options);
  });
}

<div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox"  ng-model="cond.visible_hikaku">２つのグラフを表示して比較する
    </label>
  </div>
</div>
<div ng-if="cond.visible_hikaku">
  <div class="form-group">
    <label class="col-sm-2 control-label">比較項目</label>
    <select class="form-control" ng-model="cond.hikaku"
            ng-options="t for t in hikakus">
    </select>
  </div>
  <div class="form-group" ng-if="visible_eki">
    <label class="col-sm-2 control-label">駅名</label>
    <select class="form-control" ng-model="cond.eki_h"
            ng-options="t.name for t in ekis">
    </select>
  </div>
　　　：
　　　：
</div>
<div class="form-group">
  <button ng-click="gglchart(cond)" type="submit" class="btn btn-primary">グラフ表示</button>
</div>

if chrt_params[:visible_hikaku] then
#二つ目のグラフの初期値を設定。入力項目以外は一つ目のグラフと同一にする。
  where_eki_h = where_eki
  build1_h = build1
  build2_h = build2
  size1_h = size1
  size2_h = size2
#2つ目のグラフの条件として入力されたかどうかチェックし、設定する。
  case chrt_params[:hikaku]
  when "駅名" then
    if chrt_params[:id_eki_h] != "0" then
      where_eki_h = " id_eki = " + chrt_params[:id_eki_h] + " AND "
    end
  when "サイズ" then
    size1_h = chrt_params[:size1_h]
    size2_h = chrt_params[:size2_h]
  when "築年数" then
    build1_h = Time.now.year - chrt_params[:build2_h].to_i
    build2_h = Time.now.year - chrt_params[:build1_h].to_i
end
conn = ActiveRecord::Base.connection
if chrt_params[:visible_hikaku] then
#チェックボックスがONの場合は、二つのSELECT文を結合。
  sql = "SELECT t1.updateday,t1.avg,t2.avg,t1.cnt,t2.cnt FROM (select updateday,(sum(yachin)+sum(kanrihi))/count(yachin) AS avg,count(yachin) AS cnt from chrts where " +
   where_eki + 
   " size >= " + size1 + " AND " +
   " size <= " + size2 + " AND " +
   " build >= " + build1.to_s + " AND " +
   " build <= " + build2.to_s +
   " GROUP BY updateday) AS t1 JOIN (select updateday,(sum(yachin)+sum(kanrihi))/count(yachin) AS avg, count(yachin) AS cnt from chrts where " +
   where_eki_h + 
   " size >= " + size1_h + " AND " +
   " size <= " + size2_h + " AND " +
   " build >= " + build1_h.to_s + " AND " +
   " build <= " + build2_h.to_s +
   " GROUP BY updateday) AS t2 ON t1.updateday = t2.updateday"
else
  sql = "select updateday,(sum(yachin)+sum(kanrihi))/count(yachin),count(yachin) from chrts where " + where_eki + 
      " size >= " + size1 + " AND " +
      " size <= " + size2 + " AND " +
      " build >= " + build1.to_s + " AND " +
      " build <= " + build2.to_s + " GROUP BY updateday"
end
　：
　：

SELECT t1.updateday,t1.avg,t2.avg 

FROM 
  (select updateday,(sum(yachin)+sum(kanrihi))/count(yachin) AS avg from chrts where id_eki = 1234 GROUP BY updateday) AS t1 

JOIN 
  (select updateday,(sum(yachin)+sum(kanrihi))/count(yachin) AS avg from chrts where id_eki = 4321 GROUP BY updateday) AS t2 

ON t1.updateday = t2.updateday

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"  ng-model="cond.visible_hikaku">２つのグラフを表示して比較する
        </label>
      </div>
    </div>
  </div>
  <div ng-if="cond.visible_hikaku">
    <div class="form-group">
      <label class="col-sm-2 control-label">比較項目</label>
      <div class="col-sm-8">
        <select class="form-control" ng-model="cond.hikaku"
            ng-options="t for t in hikakus">
        </select>
      </div>
    </div>
　　　　：
  </div>

    $scope.cond = {
　　　　：
     visible_hikaku: false,
　　　　：

$scope.cond = {
                hikaku: $scope.hikakus[0],
                eki_h: $scope.ekis[0],
                size1_h: $scope.sizes[0],
                size2_h: $scope.sizes[26],
                build1_h: $scope.builds[0],
                build2_h: $scope.builds[26],
　　　　　　　　　：
              };

<div class="form-group">
  <label class="col-sm-2 control-label">比較項目</label>
  <div class="col-sm-8">
    <select class="form-control" ng-model="cond.hikaku"
          ng-options="t for t in hikakus">
    </select>
  </div>
</div>
<div class="form-group" ng-if="visible_eki">
  <label class="col-sm-2 control-label">駅名</label>
  <div class="col-sm-8">
    <select class="form-control" ng-model="cond.eki_h"
          ng-options="t.name for t in ekis">
    </select>
  </div>
</div>
<div class="form-group" ng-if="visible_size">
  <label class="col-sm-2 control-label">サイズ(m2)</label>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.size1_h"
          ng-options="t.name for t in sizes">
    </select>
  </div>
  <div class="col-sm-1 text-center">～</div>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.size2_h"
          ng-options="t.name for t in sizes">
    </select>
  </div>
</div>
<div class="form-group"  ng-if="visible_build">
  <label class="col-sm-2 control-label">築年数(年)</label>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.build1_h"
          ng-options="t.name for t in builds">
    </select>
  </div>
  <div class="col-sm-1 text-center">～</div>
  <div class="col-sm-2">
    <select class="form-control" ng-model="cond.build2_h"
          ng-options="t.name for t in builds">
    </select>
  </div>
</div>

$scope.$watch('cond.hikaku', function() {
  switch ($scope.cond.hikaku){
    case '駅名':
      $scope.visible_eki = true;
      $scope.visible_size = false;
      $scope.visible_build = false;
      break;
    case 'サイズ':
      $scope.visible_eki = false;
      $scope.visible_size = true;
      $scope.visible_build = false;
      break;
    case '築年数':
      $scope.visible_eki = false;
      $scope.visible_size = false;
      $scope.visible_build = true;
      break;
  }
},true);

sql = "select updateday,(sum(yachin)+sum(kanrihi))/count(yachin),count(yachin) from chrts where " + where_eki +
          " size >= " + chrt_params[:size1] + " AND " +
          " size < " + chrt_params[:size2] + " GROUP BY updateday HAVING updateday NOT IN ('2014-02-21','2014-04-29','2014-05-27')"

where_kaisuu = ""
if chrt_params[:kaisuu] == "1" then
  where_kaisuu = " kaisuu REGEXP '^1/' AND  "
elsif chrt_params[:kaisuu] == "2" then
  where_kaisuu = " NOT kaisuu REGEXP '^1/' AND  "
end

  <div class="form-group">
    <label class="col-sm-2 control-label">フラグ有り無し</label>
    <label class="radio-inline">
      <input type="radio" ng-model="cond.flg" value="2" />指定しない
    </label>
    <label class="radio-inline">
      <input type="radio" ng-model="cond.flg" value="1" />有り
    </label>
    <label class="radio-inline">
      <input type="radio" ng-model="cond.flg" value="0" />無し
    </label>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <button ng-click="gglchart(cond)" type="submit" class="btn btn-primary">グラフ表示</button>
    </div>