プログレスバーの実装です。Bootstrapのprogress-barを用いて簡単に実装していきます。サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。前回の記事(【Rails】JavaScriptで書いた変数をコントローラーで利用する方法)で、JavaScriptでajaxを用いてRailsコントローラーにデータを渡し、数値の処理を行った後、再度JavaScript側に渡してHTMLの書き換えを行うことで、画面遷移のない免許問題の「一問一答機能」が完成に一歩近づきました。今回はこの一問一答機能での解答結果をログインユーザーごとに保存し、マイページでわかりやすく進捗確認ができるよう、プログレスバーを実装していきます。実装にあたっての準備(Bootstrap、jQuery、Rails)今回railsアプリでの実装になります。作成していた「マイページ」に「学習進捗」と「正答率」のプログレスバーを設けます。※使用するプログレスバーはBootstrapです。JavaScriptはjQueryでコーディングしてます。※rails環境にBootstrap、jQueryをインストールした前提で進めます。1、BootstrapのプログレスバーについてBootstrapのプログレスバーの仕組みを見ていきます。bars実際にBootstrapのサイトにアクセスして確認します。bars」を見ていくと、この様に見本のコーディングがあります。label」の方を使ったので、こちらのコードだけ抜粋。60%;">60%</div></div>まず、大枠の部分の解説。class="progress">#省略</div>上の画像のオレンジ色の部分が該当します。このクラスに対し、cssでmarginやwidthを調整できます。いい感じに余白を調節してください。60%;">60%</div>上の写真の通り、プログレスバーそのものを表します。50%;"」が青い部分。進捗を表せる部分です。<div></div>で囲まれた数値がプログレスバーに表示される数字です。ここの数値を、値ごとに進捗が変化できるよう変数に置き換えていきます。2、JavaScriptで値に応じてプログレスバーを表示させるBootstrapのコードの数値ベタ打ちの部分(60%のところ)を変数に置き換えます。60%;">60%</div></div>実際に書いたコードが以下になります。60%;」を消し、jQueryで書きます。※「answer_valuenow」がコントローラーから渡したユーザーごとの進捗率を入れた変数です。※進捗率のプログレスバーのコーディングだけ抜粋してます。正答率の分ももちろん別で書いてます。ちなみにコントローラーでは、このように書いてます。@collect_answer_valuenow#jsに渡すためgonを利用endend※JavaScriptに変数を渡すために「gon」というGemを使用してます。CODE】)の記事でやり方を書いてます。※「to_f」をつけないと小数点を使えません。計算結果が0になります。「.to_f」メソッドでfloat(浮動小数点数)にデータを変えてから計算する必要があります。ストライプのアニメーションが入ったものを使いました。クラス変えるだけなので簡単です。3、その他の方法(Javascriptを用いたprogressbar.jsライブラリの利用)ライブラリを使った方法もあるそうです。こちらはやってないんで説明できませんが。以下のURLのものです。progressbar.jsデザインが色々あります。プログレスバーを簡単に実装できるprogressbar.jsやり方を書いでくださっている記事もあります。今度はこっち使ってみたいと思います。できることが増えた気がします。イメージできるようになってきてました。jQueryは簡単な様でややこしいこと多いです。JavaScriptの勉強した方がいいなと思いました。今後のアプリ開発は、さらに細かく機能を搭載していき、実際に勉強捗りそうな免許アプリを目指したいと思います。以上ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。Railsのform_withやform_tagなどで実装した「radio_button」のデフォルトデザインを変える方法を紹介します。Pythonオンライン学習教材として評判のPyQ(https://pyq.jp/)によるPython学習記録です。レスポンシブデザインを初心者でも実装したい。メディアクエリを使った、画面サイズで画像を切り替える方法のまとめ。SESをLaravelで利用していく。ユーザー登録から、そのユーザーのメールアドレス宛に確認メールを送るまでの流れをまとめる。