スタッフブログ
satoです。
重い処理の進捗を視覚的に表示したい場合、例えばXOOPS Cubeのインストーラのように、進捗を随時表示するようなケースがあります。
Cubeのインストーラのように、文字をそのまま流すだけであれば、出力を随時flush()してあげればよいのですが、例えばプログレスバーのように視覚的に表示したい場合は何かと面倒だったりします。
Zend FrameworkにはZend_ProgressBarという、そのものを行うためのライブラリがあります。
今回はこれとjQuery UIを使ってプログレスバーを実現してみたいと思います。
PHP側（progress.php）は
HTML側は
このようになります。
これだけでプログレスバーが実装できます。
原理としては、iframeでPHP側を読み込むと、PHP側が随時進捗のJavaScriptコードを吐き出すので、それに応じてプログレスバーを動かすことによって、進捗状況を表示しています。
時間のかかる処理をWeb上から行うようなケースには是非使用してみてください。
重い処理の進捗を視覚的に表示したい場合、例えばXOOPS Cubeのインストーラのように、進捗を随時表示するようなケースがあります。
Cubeのインストーラのように、文字をそのまま流すだけであれば、出力を随時flush()してあげればよいのですが、例えばプログレスバーのように視覚的に表示したい場合は何かと面倒だったりします。
Zend FrameworkにはZend_ProgressBarという、そのものを行うためのライブラリがあります。
今回はこれとjQuery UIを使ってプログレスバーを実現してみたいと思います。
PHP側（progress.php）は
<?php
require_once('Zend/ProgressBar.php');
require_once('Zend/ProgressBar/Adapter/JsPush.php');
// 処理だと思われる何か
$items = array('データ新規作成', 'データ更新', 'データ削除', '後処理');
$adapter = new Zend_ProgressBar_Adapter_JsPush(array('updateMethodName' => 'Zend_ProgressBar_Update', 'finishMethodName' => 'Zend_ProgressBar_Finish'));
$progressBar = new Zend_ProgressBar($adapter, 0, count($items));
foreach($items as $key=>$item) {
// 処理を行っていると思われる部分
$progressBar->update($key + 1); // 進捗の度合いを指定する
sleep(2); // テスト用
}
$progressBar->finish();
HTML側は
<html>
<head>
<script type="text/JavaScript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/JavaScript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/JavaScript">
<!--
$(function() {
$('#progressbar').progressbar({
value: 0
});
});
function Zend_ProgressBar_Update(data)
{
$('#progressbar').progressbar('value', data.percent);
}
function Zend_ProgressBar_Finish()
{
alert('更新が完了しました！');
}
-->
</script>
</head>
<body>
<div id="progressbar"></div>
<iframe src="progress.php" style="left: -1000px; top: -1000px: width: 1px; height: 1px; position: absolute;"></iframe>
</body>
</html>
このようになります。
これだけでプログレスバーが実装できます。
原理としては、iframeでPHP側を読み込むと、PHP側が随時進捗のJavaScriptコードを吐き出すので、それに応じてプログレスバーを動かすことによって、進捗状況を表示しています。
時間のかかる処理をWeb上から行うようなケースには是非使用してみてください。
トラックバック
