Ruby on Rails Tutorial　フォロアーの一覧を表示

wp-admin

3年前

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回、ホームページとユーザープロファイルページとフォロアー数を表示しましたが、この部分をクリックするとフォロアーの一覧をビュー内のメイン部に表示するように変更します。

（１）ホームページ
　
１）ビュー左ペインのフォロアー数の表示部分のリンクを変更
　
$ vi app/assets/templates/static_pages/home.html.erb

<div class="stats">
  <a href="#" ng-click="following()">
    <strong id="following" class="stat">
      {\{chkSignin().followed_users.length}}
    </strong>
    following
  </a>
  <a href="#">
    <strong id="followers" class="stat">
      {\{chkSignin().followers.length}}
    </strong>
    followers
  </a>
</div>

　
２）ビューのメイン部にフォロアー一覧を表示
　
“flg_follers”は初期はfalseで上記１）のリンクをクリックするとtrueになってメインビューに表示します。

　　　：
<div class="col-sm-8">
  <div ng-show="flg_follers" class="row">
    <h1 class="text-center">{\{follow_title}}</h1>
    <ul ng-repeat="f_user in f_users" class="users">
      <li><img alt="{\{f_user.name}}" src="https://secure.gravatar.com/avatar/{\{hash(f_user.email)}}?s=52" />
        <a href="/users/{\{f_user.id}}">{\{f_user.name}}</a>
      </li>
    </ul>
  </div>
  <h3>Micropost Feed</h3>
　　　：

　
３）AngularJSスクリプトで関数を定義
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) {
　：
  $scope.chkSignin = function() {
    return flashService.getUser();
  };
　：
  $scope.flg_follers = false;
  $scope.following = function() {
    $scope.flg_follers = true;
    $scope.follow_title = "Following";
    $scope.f_users = $scope.chkSignin().followed_users;
  };
  $scope.followers = function() {
    $scope.flg_follers = true;
    $scope.follow_title = "Followers";
    $scope.f_users = $scope.chkSignin().followers;
  };
  $scope.hash = function(email) {
    return md5(email.toLowerCase());
  };

　
（２）ユーザープロファイルページ
　
ホームページの場合は、Feed一覧の上にフォロアー一覧を表示しましたが、ユーザープロファイルの場合は、マイクロポスト一覧をフォロアー一覧の表示を切り替えます。
　
初期状態はマイクロポスト一覧で、フォロアーのリンクをクリックするとマイクロポスト一覧からフォロアー一覧に切り替えます。
　
１）ビュー左ペインのフォロアー数の表示部分のリンクを変更
　
①フォロアー一覧のリンク部分にng-clickで関数を指定。
　
ホームページの場合と同様。
　
②フォロアー一覧を表示すると”view my profile”のリンクを表示し、マイクロポスト一覧に切り替えるためのリンクを表示させます。”flg_follers”の真偽によって切り替えます。
　
$ vi app/assets/templates/users/show.html.erb

<div class="col-xs-6 col-sm-4">
  <h3>
    <img alt="{\{user_info.user.name}}"
         src="{\{user_info.gravatar_url}}?s=60"
         class="gravatar" />
    {\{user_info.user.name}}
  </h3>
  <span ng-show="flg_follers">
    <a href="#" ng-click="viewProfile()">
      view my profile
    </a>
  </span><br />
  <div class="stats">
    <a href="#" ng-click="following()">
      <strong id="following" class="stat">
        {\{user_info.followed_users.length}}
      </strong>
      following
    </a>
    <a href="#" ng-click="followers()">
      <strong id="followers" class="stat">
        {\{user_info.followers.length}}
      </strong>
      followers
    </a>
  </div>
</div>

　
２）ビューのメイン部にフォロアー一覧を表示
　
・フォロアー一覧の部分はホームページの場合と同様。
・”flg_follers”の真偽でマイクロポスト一覧とフォロアー一覧の表示を切り替える。
　
$ vi app/assets/templates/users/show.html.erb

<div class="col-xs-6 col-sm-8">
  <div ng-show="flg_follers" class="row">
    <h3>{\{follow_title}}</h3>
    <ul ng-repeat="f_user in f_users" class="users">
      <li><img alt="{\{f_user.name}}"
               src="https://secure.gravatar.com/avatar/{\{hash(f_user.email)}}?s=52" />
        <a href="/users/{\{f_user.id}}">{\{f_user.name}}</a>
      </li>
    </ul>
  </div>
  <div ng-hide="flg_follers" class="row">
    <h3>Microposts({\{user_info.microposts.length}})</h3>
　　　：

　
３）AngularJSスクリプトで関数を定義
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q) {
　　：
  userResource.show({ id: $routeParams.id }, function(response) {
    $scope.user_info = response;
　　　　：
  });
  $scope.flg_follers = false;
  $scope.following = function() {
    $scope.flg_follers = true;
    $scope.follow_title = "Following";
    $scope.f_users = $scope.user_info.followed_users;
  };
  $scope.followers = function() {
    $scope.flg_follers = true;
    $scope.follow_title = "Followers";
    $scope.f_users = $scope.user_info.followers;
  };
  $scope.viewProfile = function() {
    $scope.flg_follers = false;
  };
  $scope.hash = function(email) {
    return md5(email.toLowerCase());
  };