一からRuby on Rails備忘録

アーカイブ

その他

AngularJSとRails4でRestアプリ作成（４）RESTアクションをfactoryメソッドを使ってサービス化

画像 コメントをどうぞ

前回、AngularJSのresourceサービスを使ってサーバーのデータベースからデータを取得して表示しました。
今回は、サーバーに対する$resourceサービスのRESTアクション（create、index、show、update、destroy）をサービスとして定義します。
続きを読む →

その他

AngularJSとRails4でRestアプリ作成（２）AngularJSのルート、テンプレートの設定

画像 コメントをどうぞ

１）AngularJSのrouteサービスを導入
　
①angular-routeをインクルード
　
$ vi app/assets/javascripts/application.js
　
//= require angular-route
　
②ngRouteを依存性の設定に追加
　
$ vi app/assets/javascripts/mymodule.js
　
var mymodule = angular.module(“myModule”, [‘ngRoute’]);
　
２）ルートプロバイダ、パーシャルテンプレートの設定
　
ファイル内でRailsのヘルパーを使用するため、ファイルの拡張子に.erbを追加しています。
$ vi app/assets/javascripts/mymodule.js.erb

var mymodule = angular.module("myModule", ['ngRoute']);

mymodule.config(function($routeProvider) {
  $routeProvider
    .when("/users/dummy", {
      templateUrl: "<%= asset_path('users/dummy.html') %>",
      controller: "UsersDummyCtrl" })
    .otherwise({
      templateUrl: "<%= asset_path('users/index.html') %>",
      controller: "UsersIndexCtrl" });
});

　
３）インデックスのコントローラファイル作成
　
上記でAngularJSのルート設定を行い、各ルート毎にパーシャルテンプレートとコントローラを定義する形に変更したので、インデックス用のコントローラを定義します。
　
$ vi app/assets/javascripts/mymodule.js.erb

mymodule.controller("UsersIndexCtrl", function($scope) {
  $scope.users = [
    {
      name: "相川　一郎",
      email: "aikawa@example.com"
    },
    {
      name: "石井　二郎",
      email: "ishii@example.com"
    },
  ]
});

　
４）パーシャルテンプレートファイルを作成
　
①indexのパーシャルテンプレートを作成
　
今までapp/views/users/index.html.erbに記述していた内容をパーシャルテンプレートファイルに記述します。
　
動作確認のためダミーページへのリンクを追加しています。
　
$ vi app/assets/templates/users/index.html

<div ng-controller="UsersIndexCtrl">
  <h3>ユーザー一覧</h3>

  <table class="table table-bordered">
    <thead>
      <td>名前</td>
      <td>メールアドレス</td>
    </thead>
    <tbody>
      <tr ng-repeat="user in users">
        <td>
          {_{user.name}}
        </td>
        <td>
          {_{user.email}}
        </td>
      </tr>
    </tbody>
  </table>
  <a href="#/users/dummy">ダミー</a>
</div>

　
②ダミーページのパーシャルビューを仮作成
　
$ vi app/assets/templates/users/dummy.html
　
<h3>ダミー</h3>
　
５）AngularJSのレイアウトテンプレートファイルを作成
　
Railsのconfig/route.rbでUsersコントローラのindexアクションをrootにしているので、とりあえずこのビューをレイアウトテンプレートファイルとします。
　
$ vi app/views/users/index.html.erb
　
<div ng-view></div>
　
６）動作確認
　
http://localhost:3000/
　
上記URLでインデックスページが表示され、ダミーのリンク押下でダミーページが表示される事を確認します。

その他

AngularJSとRails4でRestアプリ作成（１）AngularJSインストール、動作確認

画像 コメントをどうぞ

１）アプリ作成
　
$ rails new rest –skip-test-unit
　
２）Gemfile設定、インストール
　
①Gemfile
　
・多くの機能がAngularJSと重複するようなので、ここではTurbolinksを無効にしています。
　
$ vi Gemfile

#無効にする
#gem 'turbolinks'
#コメントを削除
gem 'therubyracer',  platforms: :ruby
#追加
gem 'bootstrap-sass'
gem 'angularjs-rails'

　
②インストール
　
$ bundle install
　
３）AngularJSをインクルード
　
$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular

　
４）Bootstrap3をスタイルシートファイルでインポート
　
$ vi app/assets/stylesheets/main.css.scss
　
@import “bootstrap”;
　
５）Railsコントローラ作成
　
Usersコントローラとindexアクションを作成します。
　
$ rails generate controller Users index
　
６）AngularJSのモジュール、コントローラ設定
　
①コントローラファイル作成
　
モジュールとコントローラを定義します。
　
$ vi app/assets/javascripts/mymodule.js

var mymodule = angular.module("myModule", []);

mymodule.controller("UsersCtrl", function($scope) {
  $scope.users = [
    { 
      name: "相川　一郎",
      email: "aikawa@example.com"
    },
    { 
      name: "石井　二郎",
      email: "ishii@example.com"
    },
  ]
});

　
②インクルード設定追加
　
$ vi app/assets/javascripts/application.js
　
//= require mymodule
　
７）アプリケーションレイアウトファイル作成
　
ターボリンクを無効にしているのでインクルード部分の’data-turbolinks-track’ => true を削除します。
　
ng-appでモジュール名を指定します。
　
$ vi app/views/layouts/application.html.erb

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

<%= yield %>

</body>
</html>

　
８）ビューを作成
　
$ vi app/views/users/index.html.erb

<div ng-controller="UsersCtrl">
  <h3>ユーザー一覧</h3>

  <table class="table table-bordered">
    <thead>
      <td>名前</td>
      <td>メールアドレス</td>
    </thead>
    <tbody>
      <tr ng-repeat="user in users">
        <td>
          {_{user.name}}
        </td>
        <td>
          {_{user.email}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

　
９）Railsのルート設定
　
$ vi config/routes.rb
　
root to: ‘users#index’
　
１０）動作確認
　
http://localhost:3000/

その他

Bootstrap3のOffcanvasのJavaScriptをAngularJSで実行する方法

画像 コメントをどうぞ

Bootstrap3のOffcanvasのサンプルをベースにレイアウトを作成しています。JavaScriptの機能をBootstrap3同梱のものからAngularJSに変更する手順をまとめました。

目次
（１）Turbolinksと一緒にAngularJSを使用する場合の注意点
（２）AngularJSの依存性のアノテーションの記述に注意
（３）折りたたみの機能をBootstrapの記述からAngularJSに変更
（４）”Toggle nav”の部分をAngularJSを使って変更
続きを読む →

その他

Ruby on Railsにブートストラップ３とAngularJSを導入する方法

画像 コメントをどうぞ

Ruby on Rails環境にCSSフレームワークとしてブートストラップ３、JavaScriptフレームワークとしてAngularJSを導入する手順です。
　
ブートストラップ３でもJavaScriptを使用していてAngularJSの機能との干渉が気になるところですが、対応しているコンポーネントhttp://angular-ui.github.io/bootstrap/がありました。
ブートストラップ３のJavaScript機能は使用せず、こちらのツールを使用しています。
続きを読む →

その他

ブートストラップ３のjumbotronの設定内容と修整方法

画像 コメントをどうぞ

ブートストラップ３のjumbotronは、offcanvasのサンプルでも使用されていますがサイトタイトル部分として利用できます。
このjumbotronのデフォルトの設定内容を確認し、デフォルトから修整してみました。
　
ここでは、サンプルOffcanvasで作成したサンプルページのjumbotronを修整してみます。
続きを読む →

その他

RubyGems、Bundler、RVMの関係とgemのインストール場所、GEM_HOMEについて

画像 コメントをどうぞ

RubyGems、Bundler、RVMの関係、RVMを使用した場合のgemのインストール場所、GEM_HOMEとそれ以外の場合についてまとめて整理しました。
　
●RubyGemsとgemコマンド
　
・Ruby言語用のパッケージ管理システム。
・gemコマンドでRubyソフトウェアパッケージ（gem）を簡単にダウンロード、インストール。
・Rubyソフトウェアパッケージ（gem）のインストール先は、環境変数$GEM_HOME又は"gem environment"で確認できる。
※詳細は以下の記事参照。
RubyGemsとgemコマンドの概要
　
●Bundler
　
・Railsアプリで使用するRubyソフトウェアパッケージ（gem）のバージョン、依存性の管理が出来る。
・”Gemfile”という名前のファイルで設定を行う。
・”bundle install”などのコマンドを実行すると”Gemfile”に記述されている各パッケージがgemコマンドを使ってインストールされる。
Gemfileの記述例）

source "http://rubygems.org"

gem "rails", "4.1.5"
gem "sqlite3"
gem "sass-rails", "~=> 4.0.3"
　　：

・Rubyソフトウェアパッケージ（gem）のインストール先は、環境変数$GEM_HOME又は”gem environment”で確認できる。
※Bundlerの詳細は以下の記事参照。
Bundlerの概要、使用方法
　
●Ruby Version Manager(RVM)
　
・複数のRuby実行環境の導入、管理を容易に実施できるコマンドラインツール。
・複数のバージョンのRubyをシステム単位やユーザー単位にインストール、管理することができる。
・”rvm use ruby-2.x.x”などのコマンドを実行して、使用するRubyのバージョンを切り替えることができる。Rubyのバージョンを切り替えると、それに応じてgemのインストール先（環境変数$GEM_HOMEの値）やRubyのパスが切り替わる。
例）

$ rvm use ruby-2.0.0
Using /home/sample/.rvm/gems/ruby-2.0.0-p648
　
$ which ruby
~/.rvm/rubies/ruby-2.0.0-p648/bin/ruby

$ echo $GEM_HOME
/home/sample/.rvm/gems/ruby-2.0.0-p648

※詳細は以下の記事参照。
RVMを使ってRubyのインストール、複数のバージョンのRubyを管理