【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #35
こんにちは。
35日目。プログレスバーの実装です。 Bootstrapのprogress-barを用いて簡単に実装していきます。
はじめに
この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。
目次
[toc]
前回までの内容
前回の記事（【Rails】JavaScriptで書いた変数をコントローラーで利用する方法）で、JavaScriptでajaxを用いてRailsコントローラーにデータを渡し、数値の処理を行った後、再度JavaScript側に渡してHTMLの書き換えを行うことで、画面遷移のない免許問題の「一問一答機能」が完成に一歩近づきました。
今回はこの一問一答機能での解答結果をログインユーザーごとに保存し、マイページでわかりやすく進捗確認ができるよう、プログレスバーを実装していきます。
JavaScriptを用いた値に応じて動くプログレスバーの実装方法
実装にあたっての準備（Bootstrap、jQuery、Rails）
今回railsアプリでの実装になります。
あらかじめ作成していた「マイページ」に「学習進捗」と「正答率」のプログレスバーを設けます。
※使用するプログレスバーはBootstrapです。JavaScriptはjQueryでコーディングしてます。
※rails環境にBootstrap、jQueryをインストールした前提で進めます。
１、Bootstrapのプログレスバーについて
Bootstrapのプログレスバーの仕組みを見ていきます。
実際にBootstrapのサイトにアクセスして確認します。
「progress bars」を見ていくと、
この様に見本のコーディングがあります。
「with label」の方を使ったので、こちらのコードだけ抜粋。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
まず、大枠の部分の解説。
<div class="progress"> #省略 </div>
上の画像のオレンジ色の部分が該当します。
このクラスに対し、cssでmarginやwidthを調整できます。いい感じに余白を調節してください。
次、メインの部分。
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div>
上の写真の通り、プログレスバーそのものを表します。
「style=”width: 50%;”」が青い部分。進捗を表せる部分です。
<div></div>で囲まれた数値がプログレスバーに表示される数字です。
ここの数値を、値ごとに進捗が変化できるよう変数に置き換えていきます。
２、JavaScriptで値に応じてプログレスバーを表示させる
Bootstrapのコードの数値ベタ打ちの部分（60%のところ）を変数に置き換えます。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
実際に書いたコードが以下になります。
views/users/show.html.erb
<div class="mypage1">
<h2>学習進捗</h2>
<div class="progress">
<div id ="answer_progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow=@aria_valuenow aria-valuemin="0" aria-valuemax="100">
<%= @answer_valuenow %>%
</div>
</div>
<span>あなたの進捗は<%= @answer_valuenow %>パーセントです。</span>
</div>
<script>
$(function(){
$('#answer_progress').width(gon.answer_valuenow + '%');
});
</script>
※「aria-valuenow=”60″」と「style=”width: 60%;」を消し、jQueryで書きます。
※「answer_valuenow」がコントローラーから渡したユーザーごとの進捗率を入れた変数です。
※進捗率のプログレスバーのコーディングだけ抜粋してます。正答率の分ももちろん別で書いてます。
ちなみにコントローラーでは、このように書いてます。
controllers/users_controller.rb
class UsersController < ApplicationController
def show
@user = User.find(params[:id])
all_questions_count = Question.count
#全問題数の格納
answers_count = Torf.where(user_id: current_user.id).count
#ユーザーごとの解答数の格納
@answer_valuenow = answers_count.to_f / all_questions_count.to_f * 100
#進捗率の格納
collect_answers_count = Torf.where(user_id: current_user.id).where(answer_log: true).count
#ユーザーごとの正解した問題数の格納
@collect_answer_valuenow = collect_answers_count.to_f / all_questions_count.to_f * 100
#正答率の格納
gon.answer_valuenow = @answer_valuenow
gon.collect_answer_valuenow = @collect_answer_valuenow
#jsに渡すためgonを利用
end
end
※JavaScriptに変数を渡すために「gon」というGemを使用してます。「gon」については（【Rails】RailsからJavaScriptにインスタンス変数を渡す方法を考える【DIVE INTO CODE】）の記事でやり方を書いてます。
※「to_f」をつけないと小数点を使えません。計算結果が0になります。必ず「.to_f」メソッドでfloat（浮動小数点数）にデータを変えてから計算する必要があります。
ストライプのアニメーションが入ったものを使いました。
クラス変えるだけなので簡単です。
３、その他の方法（Javascriptを用いたprogressbar.jsライブラリの利用）
ライブラリを使った方法もあるそうです。
こちらはやってないんで説明できませんが。
以下のURLのものです。
デザインが色々あります。
プログレスバーを簡単に実装できるprogressbar.js
やり方を書いでくださっている記事もあります。
今度はこっち使ってみたいと思います。
まとめ
JavaScriptとRails間でデータを受け渡しできるようになり、
色々できることが増えた気がします。
今まで全くどう作成して良いかわからなかった、フロントを動かすためにすべきことが、
少しずつイメージできるようになってきてました。
jQueryは簡単な様でややこしいこと多いです。
もう少しJavaScriptの勉強した方がいいなと思いました。
今後のアプリ開発は、さらに細かく機能を搭載していき、実際に勉強捗りそうな免許アプリを目指したいと思います。
以上ありがとうございました。