phpとjsでサーバーのデータ使用容量をチェックしてグラフ化する | BLOG

PHP

今回は、ファイルのアップロードプログラムを構築するにあたり、サーバーの使用状況を確認する必要があり、ちょっと調べてみたのでメモ。
アップロードされるファイルの数が相当あることが想定され、物理的にサーバー容量の限界を超えるとまずいってことで、使用状況をグラフで可視化することにしました。

サーバーの使用状況を知る

まずは使用しているサーバーがどれくらいの容量があるかを調べます。phpでもできるのですが、今回はサーバーのコンパネに記載があるのでそれをリミットの数値とします。
調べてみると500GBでした。

なので、まずはphpを記述します。

<?php 
$server_limit=500000;
$f = '/home/sample/sample.net/html/';
$io = popen ( '/usr/bin/du -sk ' . $f, 'r' );
$size = fgets ( $io, 4096);
$used_in_kb = substr($size, 0, strpos($size, "\t"));
$used_in_mb = round($used_in_kb/1024, 3);

$used_remain_mb=$server_limit - $used_in_mb;
$used_in_p=($used_in_mb / $server_limit) *100;
$used_remain_p=($used_remain_mb / $server_limit) *100;


pclose ( $io );
?>

サーバーのリミットが500GBであることを変数に代入。対象のディレクトリをカレントパスで記述します。

$server_limit=500000;
$f = '/home/sample/sample.net/html/';

カレントパスについては、以下のphpで取得可能です。

echo __DIR__;

しかし、上記はPHP5.3以降でしか使用できないので、それ以前のバージョンの場合は、下記のようにして取得しましょう。

echo dirname(__FILE__);

現在の使用容量を取得する

現時点で、どれくらいの容量を使用しているのかを取得します。

$used_in_kb = substr($size, 0, strpos($size, "\t"));
$used_in_mb = round($used_in_kb/1024, 3);

$used_in_mbには単位をMBとした数値が代入されます。

この時点で

echo '使用容量 : '.$used_in_mb.'MB';

とすれば使用容量が表示されると思います。

グラフ用に数値をパーセントにする

今回は円グラフでサーバーの使用状況を表示します。
なので、取得した使用容量をパーセントに変換します。

$used_remain_mb=$server_limit - $used_in_mb;
$used_in_p=($used_in_mb / $server_limit) *100;
$used_remain_p=($used_remain_mb / $server_limit) *100;

$used_in_pに使用容量のパーセントを代入しています。
$used_remain_pに未使用容量のパーセントを代入しています。

この時点で

echo '使用容量パーセント : '.$used_in_p.'%<br>';
echo '未使用容量パーセント : '.$used_remain_p.'%';

とすればそれぞれの使用容量が表示されると思います。

Chart.jsでグラフを描画する

円グラフはChart.bundle.jsで描画します。

ソースコード

<?php 
$server_limit=500000;
$f = '/home/sample/sample.net/html/';
$io = popen ( '/usr/bin/du -sk ' . $f, 'r' );
$size = fgets ( $io, 4096);
$used_in_kb = substr($size, 0, strpos($size, "\t"));
$used_in_mb = round($used_in_kb/1024, 3);

$used_remain_mb=$server_limit - $used_in_mb;
$used_in_p=($used_in_mb / $server_limit) *100;
$used_remain_p=($used_remain_mb / $server_limit) *100;


pclose ( $io );
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<div class="canvas-container">
<canvas id="myPieChart"></canvas>
</div>

<script>
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["使用中", "未使用"],
datasets: [{
backgroundColor: [
"#BB5179",
"#FAFF67"
],
data: [<?php print $used_in_p;?>, <?php print $used_remain_p;?>]
}]
},
options: {
title: {
display: true,
text: 'サーバー使用状況'
}
}
});
</script>

Chart.js読み込み

CDNに公開されているChart.jsを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

canvas要素取得

グラフを描画するためにcanvasのID、myPieChartを取得します。

var ctx = document.getElementById("myPieChart");

円グラフを生成

取得した情報をもとに円グラフを生成します。

var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["使用中", "未使用"],
datasets: [{
backgroundColor: [
"#BB5179",
"#FAFF67"
],
data: [<?php print $used_in_p;?>, <?php print $used_remain_p;?>]
}]
},
options: {
title: {
display: true,
text: 'サーバー使用状況'
}
}
});

typeでグラフのタイプ、dataでラベルトデータセット、optionsでオプション設定しています。

今回は円グラフなのでtypeはpieにdataには使用中を未使用容量の数値を設定し、それぞれのカラーを設定しています。optionsにはグラフのタイトルを設定しています。

円グラフの描画

円グラフの描画ソースは以下になります。

<div class="canvas-container">
<canvas id="myPieChart"></canvas>
</div>

円グラフのサイズを調整する

円グラフのサイズを調整したい場合はCSSで対応可能です。

CSS例

.canvas-container {
width:50%;
margin:20px;
}

デモはこちら

以上です。

Chart.jsは円グラフ以外にも様々な種類のグラフの描画が可能なので、今後研究したいと思います。

Spread the love

BLOG

Article