【jQMeter】シンプルなプログレスバーを実装する方法

Programming Web

Web制作者

Web制作者
「簡単にプログレスバーを実装する方法を知りたい。」

こういった悩みにお答えします。

本記事の内容

  • jQMeterによるプログレスバーの実装方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Webサイトでプログレスバーを実装したい時ってありますよね?

プログレスバーイメージ

プログレスバーサンプル

こういうやつです。

この記事では、jQueryプラグイン「jQMeter」を使用したプログレスバーの実装方法を紹介します。

jQMeterによるプログレスバーの実装方法

ここから、jQMeterの実装手順についてご紹介します。

実装手順

  • jQueryを読み込む
  • jQMeterのJavaScriptファイルを読み込む
  • ソースコード(HTML,JavaScript)を記述

それぞれ詳しく説明します。

jQueryを読み込む

大前提として、jQueryを読み込むコードを<head>内に記述します。

<head>内に記述

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
CDNを使用した方法がお手軽です。

jQMeterのJavaScriptファイルを読み込む

下のリンクへアクセスし、右クリックでjqmeter.min.jsという名前をつけてローカルに保存します。
【ダウンロード】jqmeter.min.js

サーバの任意のディレクトリに、jqmeter.min.jsをアップロードして読み込みます。

これで動作前の準備はOKです。

注意

直接読み込むと、下記のようなエラーメッセージがデベロッパーツール上に表示されます。

Mixed Content: The page at ‘(Page_url)’ was loaded over HTTPS, but requested an insecure script ‘(JavaScript_filepath)’. This request has been blocked; the content must be served over HTTPS.

簡単に言うと、「httpsのページから、httpのページへリクエストを送るのは安全ではありません。そのため、リクエストはブロックされました。」という意味で、jQMeterが正常に動作しません。

ダウンロードして、任意ディレクトリにアップして読み込む方法をおすすめします。

ソースコード(HTML,JavaScript)を記述

下記、jQMeter公式ページで基本的な使い方などが掲載されています。
» jQMeter公式ページ

この記事でも、各種ソースコード(HTML、CSS,JavaScript)の記述方法を紹介します。

HTML

HTMLは非常にシンプルで、下記1行のコードだけでOKです。

<div id="jqmeter-container" class="jqmeter"></div>
CSSコードの記述は基本的には無くてもOKです。
正確には、バーの色や大きさはjQMeterのオプションで指定します。
(後で指定するケースも紹介します。)

JavaScript

下記JavaScriptコードを記述します。

$(document).ready(function(){
	$('#jqmeter-container').jQMeter({
		goal:'1,000',
		raised:'200',
		meterOrientation:'vertical',
		width:'50px',
		height:'200px'
	});
});

実装イメージ

プログレスバーサンプル

縦のプログレスバーを実装することができました。

jQMeterのオプション詳細

JQMeterには様々なオプションが用意されています。
それぞれ詳しく説明します。

プロパティ デフォルト 説明
goal 必須項目(デフォルトなし) バーの目標(上限)設定。”$1,000″もしくは1000″といった半角英数字で指定します。
raised 必須項目(デフォルトなし) バーの割合(どこまで伸ばすか)設定。”$1,000″もしくは1000″といった半角英数字で指定します。
width デフォルトで100%指定 バーの幅を設定します。CSSと同じように、%もしくはpxで指定します。
height デフォルトで50px指定 バーの高さを設定します。CSSと同じように、%もしくはpxで指定します。
bgColor #444がデフォルト 16進数、RGB、文字列(red、blueなど)で指定します。
barColor #bfd255がデフォルト 16進数、RGB、文字列(red、blueなど)で指定します。
meterOrientation horizontalがデフォルト horizo​​ntal(水平方向)もしくは、vertical(垂直方向)で指定します。
verticalの設定時、幅と高さの指定が必須です。
displayTotal true バーの割合(%)をテキスト表示するかどうかの設定。
true:表示、false:非表示
animationSpeed 2000 動作スピードをミリ秒で指定します。
counterSpeed 2000 カウントスピードをミリ秒で指定します。

プログレスバーサンプル集

オプションをある程度理解したところで、実際にオプションを指定して色々なプログレスバーを実装してみます。

横プログレスバー(%表示なし)

横プログレスバーに設定して、%表示なしにしています。

HTML

<div id="jqmeter-container"></div>

JavaScript

$(document).ready(function(){
	$('#jqmeter-container').jQMeter({
		goal:'1,000',
		raised:'1,000',
		meterOrientation:'horizontal',
		width:'400px',
		height:'50px',
		barColor: 'red',
		bgColor: '#dddddd',
		displayTotal: false
	});
});

実装イメージ

横プログレスバー(%表示なし)イメージ

横プログレスバー(%表示あり、背景斜めストライプ)

横プログレスバーに設定して、%表示あり、背景斜めストライプにしています。

HTML

<div id="jqmeter-container" class="jqmeter"></div>

jqmeterクラスを付与しています。

CSS

#jqmeter-container .outer-therm {background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);}

background-imageプロパティでrepeating-linear-gradientを指定して、斜めストライプを背景にしています。

JavaScript

$(document).ready(function(){
	$('#jqmeter-container').jQMeter({
		goal:'1000',
		raised:'777',
		meterOrientation:'horizontal',
		width:'400px',
		height:'30px',
		barColor: '#efa00f',
	});
});

実装イメージ

横プログレスバー(%表示あり、背景斜めストライプ)イメージ

まとめ

jQMeterによるプログレスバーの実装方法について再度まとめます。

ポイント

  • jQueryを読み込む
  • JavaScriptファイルを読み込む
  • ソースコード(HTML,JavaScript)を記述

シンプルなプログレスバーを実装したいときはお試しあれ。

プログレスバー実装方法まとめ

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】